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
Hayden Mills | 60+ Responsive Navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript) | Student at Indiana University | Web Developer
February 21, 2014 Lately, I have been really intrigued by responsive navigation bars. I did some extensive research and came up with a list of 60 plus responsive navigation bar tutorials, examples, and demos from all across the Internet. 1. Tutorial: Demo: 2. Tutorial: Demo: 3. Tutorial: Demo: 4. Tutorial: Demo: N/A 5. Tutorial: Demo: 6. 7. Tutorial: 9. 10. 11.
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
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
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. 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: As the labeling indicates, the top of the diagram is portrait orientations and the bottom is landscape orientations for devices. Our Suggested Layouts The debate got started yesterday because we encountered a situation where only 3 layouts were called for, versus the four that Metaltoad.com is designed with. 3 Layouts Design Targets: Layout 1: iPhone (320/640px) in Portrait is a good candidate for the PSDs. 4 Layouts
Comprendre le Viewport dans le Web mobile
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial
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
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).
