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. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. 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. <! screen Écrans handheld print Impression
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. Il s’agit de la surface visible, la surface utilisée pour afficher votre site web. Sur un ordinateur classique, il s’agit tout simplement de votre fenêtre de navigateur. Dans ce cas, le viewport est donc facilement compréhensible : redimensionnez votre fenêtre et les Media Queries que vous utilisez feront effet. Sur un smartphone en revanche, ça se corse. Modifier le viewport La valeur à indiquer dépend de ce que vous voulez faire. Ce n’est qu’un exemple, bien évidemment vous pouvez indiquer la valeur que vous souhaitez. Et en CSS ?
Améliorer l’accessibilité d’un formulaire Clever Age vous proposait il y a quelque temps un livre blanc sur les formulaires web. Dans la même lignée, amis développeurs front, sachez que l’accessibilité web n’est pas forcément affaire de spécialistes. La plupart des questions peuvent se régler assez facilement. Améliorons à peu de frais l’accessibilité de nos formulaires ! Introduction Quand on parle d’accessibilité des formulaires, une des règles d’or consiste à utiliser de vrais champs de formulaire. Par exemple les listes déroulantes chartées aux petits oignons peuvent poser des problèmes importants d’accessibilité. Dans le cas qui nous concerne, il ne s’agit que de zones de saisie de texte, la moitié du travail est donc déjà faite pour nous : nous n’aurons à convaincre personne de la difficulté de rendre accessibles des éléments natifs HTML, très bien supportés depuis longtemps par les aides techniques. Contrôler les couleurs, les contrastes, etc. Oui évidemment dit comme ça c’est un peu aride. Utiliser les labels Conclusion
A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. The Diagram Here's the result! A couple of things to note: Our Suggested Layouts 3 Layouts
Facebook connect Quoi de plus fastidieux et contraignant que de devoir saisir des informations dans un formulaire. Qui plus est, toujours les mêmes : prénom, nom, email, … Question aux e-commerçants : quel votre taux de perte sur la page de création de compte ? Il est certainement de toute façon trop important. Un prospect qui initie un panier d’achat, qui s’engage dans le tunnel de vente pour le quitter sur la page de saisie des informations représente une perte sèche. Il existe un moyen de faire progresser son taux de transformation : le Facebook Connect. Il faut appréhender le Facebook Connect comme le moyen pour l’internaute de se créer un compte en un clic. Une recommandation pour utiliser efficacement le Facebook Connect, il faut juste utiliser les informations disponible dans Facebook. Création directe du compte via le Facebook ConnectDemande d’informations complémentaire après et indépendamment de la phase de création de compte.
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. 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. La deuxième est d’optimiser la longueur des lignes pour maintenir la lisibilité. Conclusion
Facebook Connect : 3 raisons d'intégrer Facebook Connect Facebook Connect est une technologie exceptionnelle pour les sites web. Elle simplifie l’utilisation d’un site en permettant aux utilisateurs de Facebook de s’inscrire et de se connecter en un seul clic. Voici 3 bonnes raisons de développer une application Facebook Connect pour votre site et quelques exemples. 3 bonnes raisons d’intégrer Facebook Connect à votre site 1. La puissance de Facebook Connect réside d’abord dans la possibilité de s’inscrire à un site en quelques clics sans avoir à compléter de formulaire. Facebook Connect permet ainsi d’avoir plus d’inscrits, qualifiés, et de bonne qualité puisque la plupart des utilisateurs remplissent leur profil Facebook avec attention. 2. Les fonctionnalités de distribution sociale de FB Connect permettent à l’application de publier des informations depuis un site vers Facebook lorsque l’internaute effectue une action sur le site. Aussi, bien utilisée, l’application peut permettre de vendre plus. 3. 1. 2. 3. On aime aussi :
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. L’article d’aujourd’hui a pour but de poser les bases graphiques nécessaires au développement d’un site ou d’une webapp sur ces smartphones, en prenant en compte l’affichage Rétina. Un site pour iPhone / iPad : quelles résolutions ?
Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
How to Create a Responsive Navigation One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages. There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second. However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly. So, let’s just get started. First of all, let’s add the meta viewport inside the head tag. …and then add the following snippet as the navigation markup inside the body tag. As you can see above, we have six primary menu links and added one more link after them. Further reading: Don’t forget the viewport meta tag. Styles In this section, we start styling the navigation. Media Queries Conclusion
Le responsive design, le nouvel allié du cross media Depuis quelques mois, le monde du web ne jure plus que par le responsive design. A l’instar de la communication cross media, le responsive design est né de l’évolution des supports/médias : un site web ne doit plus être pensé pour être uniquement consulté sur un écran d’ordinateur mais aussi sur un Smartphone ou depuis une tablette… Sans rentrer dans les détails techniques ; on parle de responsive design lorsqu’un design est conçu pour s’adapter aux différentes résolutions et supports disponibles sur le marché. Voici quelques exemples de Responsive Design particulièrement réussis : GOOGLE / GMAIL Google a ajouté une nouvelle fonctionnalité à Gmail : aujourd’hui la fenêtre de Gmail s’adapte automatiquement à la taille de l’écran. A travers cette vidéo, un employé Google explique et met l’accent sur le responsive design : Une façon de démontrer, une fois de plus, que Google sait anticiper et s’adapter aux nouveaux usages.