What The Heck Is Responsive Web Design? Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date bostonglobe.com Grey Goose Responsive site for Grey Goose with parallax scrolling animation www.greygoose.com Barack Obama The Obama campaign continues to be at the leading edge of web technology. barackobama.com Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages. Frameworks (save time) or Roll Your Own (more control) Best Practices Content Check Start Small (Mobile First) Exit Photoshop, Enter Browser Make It Modular Always Be Optimizing *Best practices still emerging!
CSS Social Buttons I'm proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design styles. View Demo CSS Buttons Download Demo ZIP Implementation To apply this CSS Social Icons to your site, download the demo zip and include the social-icons.css file to your site: Option A: You need to add a .sb class (sb stands for social button) and the icon class (eg. twitter, facebook, rss, etc.) to the <a> link tag. <a href="#" class="sb orange twitter">Twitter</a><a href="#" class="sb blue facebook">Facebook</a> Option B: The .sb class can also be in the wrapping tag such as <p>, <div> or <ul> tag. Available CSS Classes Below is a list of the classes available. Sizes Colors Styles Icons
Un guide simple pour la typographie responsive : blog Scopart Le 14/12/2012 dans Développement Aujourd’hui je vous propose une traduction de l’article A simple guide to responsive typography de Cameron Chapman traitant d’un aspect peu abordé dans les techniques de responsive design. La plus grande partie des articles qui traitent du « responsive design » mettent l’accent sur 2 aspects : une grille fluide et flexible, des images fluides et flexibles. La plupart d’entre eux ne parlent pas de la typographie. Et pourtant pour la majorité des sites Internet, le contenu est l’élément le plus important. Certes, pour les sites où le contenu principal est composé d’images ou de vidéos, cet aspect devient un peu moins important, mais il ne devrait quand même pas être négligé. La bonne nouvelle est que le responsive design au niveau typographique n’est pas particulièrement difficile à mettre en place. Principe de la typographie responsive Il existe deux façons principales de mettre en place une typographie responsive. Le maintien d’une longueur de ligne optimale
8 Ways to Add a Responsive Navigation Menu on Your Site By Jacob Gube There are plenty of techniques for implementing responsive navigation menus on your site. One of your options: Build your menu from scratch. But some of us may just be interested in getting the task done as quickly and as painlessly as possible. In this post, I’ll discuss a few excellent open source projects for building responsive navigation menus. There are many options out there, so for convenience, I narrowed it down to just 8. At the end of the post, you’ll find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project I’ll talk about. 1. This responsive navigation menu system is lightweight — less than 1KB when optimized. 2. Bootstrap has two components for building responsive menus. 3. menu-aim This jQuery plugin will allow you to make responsive mega-dropdown menus modeled after Amazon.com’s fast and responsive menus. 4. 5. FlexNav was created with a Mobile First approach. 6. 7. 8. Summary Table
CSS buttons You know that there are a lot of impressive and awesome things out there that were made using CSS, we all know that, but sometimes they’re hard to find, so today we’re bringing you some of the best buttons we’ve found, they all were made using CSS, here you’ll be able to see a demo for those beauties, as well as the HTML and CSS code. Free Buttons There are many awesome designers and web developers out there, but few of them are eager to share their work for free, so first of all, let us thank the people who made the work that we’re bringing you today, and let us start by reviewing what they did. Space CaCSS By Simurai Simple fading By Bartos Lazarski Fading google button box By Bartos Lazarski Blue buttons By Jared Tomeck Animated download glass button By Kushagra Agarwal Dark buttons By John Shammas Glassy buttons By John Shammas Another CSS3D button By François Robichet Push-able buttons By Johnie Hjelm (improved by Csscreations ) Add to cart buttons By Bartos Lazarski BonBon buttons By Simurai
La méthode matchMedia ou les Media Queries pour JavaScript Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. C'est une méthode qui dépend de l'objet window (la fenêtre du navigateur) et qui prend en argument une chaîne de texte contenant l'expression à tester, pour retourner true ou false via sa propriété matches. <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Si l'on examine de plus près l'objet retourné dans une console JavaScript... Voir la démonstration n°2 Voir la démonstration n°3
HTML Responsive Web Building a 5 Star Rating System with jQuery, AJAX and PHP In this tutorial, you'll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we'll also leverage the power of PHP so that you don't even need a database! Step 1. We're going to create a simple page that lists two movies, and allows you to rate them. Let's take a look at the HTML/CSS Notice how there are no graphics in this HTML? This first part of the CSS accomplishes a few things: Gives the default 'empty' start to each star locationSets up classes for filled in stars, and highlighted starsDefines and styles the stars' container. You can either use the graphics provided in the download, or make your own. Next we add a little more CSS to position the total votes box, and center the widgets so the page matches the graphic at the start of this section. Step 2. At this point, we have a very plain looking bunch of empty stars, but they don't do a whole lot at this point. What about set_votes() ? Step 3.
Optimisez vos sites pour iPhone et iPad Il existe 12 modèles d’iPhone différents, 6 modèles d’iPad et au moins autant d’iPod Touch avec des résolutions logicielles et matérielles différentes, apprenez à gérer tous ces périphériques pour optimiser vos sites et apps. Le Responsive Design est de plus en plus largement utilisé pour la conception de sites internet, ce qui permet à un nombre de plus en plus grand de sites de fournir un contenu adapté à tous les écrans et de laisser de côté les développements spécifiques. Néanmoins il arrive que pour une raison ou une autre on ait besoin de proposer une version optimisée pour un écosystème en particulier, ou de mettre en place un service (site, webapp ou application native) pour un type de matériel précis. Il arrive que ce matériel précis soit un iPhone. A l’heure où j’écris ces lignes iOs 8 est le système d’exploitation en vigueur et l’iPhone 6 et son frère l’iPhone 6+ sont ceux pour qui tous les efforts sont faits, en attendant la sortie du prochain modèle. iPhone iPhone Retina iPad
C'est quoi le Responsive Web Design Consacré "mot-clé de l'année 2013" par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd'hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels ! Voici donc une petite introduction pour mieux comprendre ce phénomène... Ébauche de définition Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages. Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010. Site dédié, application ou responsive ? Un site dédié
Responsive design : le viewport Comme nous l’avions évoqué précédemment lors de l’introduction des Media Queries, ces dernières ne font pas tout dans le responsive design et ainsi, on peut constater que sur pas mal de smartphones (par exemple), les Media Queries ne semblent avoir aucun effet… Ce qui peut paraître étrange et surtout extrêmement gênant : si on fait tout ça, c’est surtout pour les mobinautes, après tout ! Le viewport Tout peut être expliqué grâce au viewport en fait. Sur un smartphone en revanche, ça se corse. Voici donc le mystère de device-width élucidé… Alors on pourrait se dire que les dimensions comme width et height font référence aux dimensions du smartphones réelles, celles indiquées par les constructeurs… Eh bien non, ça serait trop facile ! Modifier le viewport Afin d’avoir un affichage homogène chez tout le monde, il faut donc modifier le viewport, ce qui est rendu possible grâce à une balise meta un peu spéciale (proposée à la base par Apple mais adoptée par un grand nombre de navigateurs).
Responsive Design : avantages et inconvénients Qu'est que le Responsive Design Les internautes se connectant de plus en plus souvent depuis leur téléphone ou leur tablette, les sites internet doivent savoir s'adapter aux nouvelles modalités de connexion. Tactilité ou lenteur du débit internet, chaque terminal a des caractéristiques et une résolution d'écran qui lui sont propres et qui font que le rendu soit différent au site de base. Cela implique de repenser l'approche de création d'un site Internet pour mieux anticiper les différentes contraintes liées à chaque support. Avantages du Responsive Design Les avantages du Responsive Design sont nombreux. Les colonnes et les images s'ajustent, se redimensionnent et se déplacent automatiquement selon que la résolution d'écran l'exige. Le Responsive Design est une solution stratégique à long terme car il permet de répondre à une rechercher de manière plus rapide en n'affichant que les éléments les plus pertinents aux mobinautes. Inconvénients du Responsive Design Pour approfondir Ligatus
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! L'attribut media peut prendre (depuis CSS2) les valeurs suivantes : screen Écrans handheld Périphériques mobiles ou de petite taille print Impression aural (CSS 2.0) / speech (CSS 2.1) Synthèses vocales braille Plages braille