Share
Certains experts prévoient que les appareils mobiles deviendront le média dominant pour la navigation sur le Web d'ici cinq ans, dépassant ainsi la navigation sur des ordinateurs de bureau. Quelle que soit l'exactitude de cette projection, il est clair que le formatage des sites Web pour une visualisation adaptée aux appareils mobiles doit devenir un élément essentiel de la conception et du développement de sites Web. Bien sûr, il existe de nombreuses façons d’y parvenir. Cependant, CSS3 fournit un ensemble d'outils assez riche pour un formatage adapté aux mobiles, s'appuyant sur les capacités du navigateur du client plutôt que sur des modèles d'arrière-plan..
Il y a quelques problèmes à prendre en compte avant de plonger dans le style d'un layout.
Premièrement, que faut-il garder à l'esprit lors de la conception pour les navigateurs mobiles? Eh bien, voici quelques petites choses…
"L’essentiel est de savoir à l’avance à quoi ressemblera votre site sous différents navigateurs avant le voir. "
Deuxièmement, gardez à l’esprit le support du navigateur. Le proverbial "éléphant dans la chambre" est IE, bien sûr. Bonne nouvelle cependant! Il s'avère que les sites Web n'ont pas vraiment besoin d'être identiques dans tous les navigateurs. Tant qu’il n’interfère pas avec le contenu du site Web, un navigateur qui n’est pas capable de traiter CSS3 fournira tout de même une expérience plus que acceptable. L’essentiel est de savoir à l’avance à quoi ressemblera votre site sous différents navigateurs avant le voir.
"Gardez le balisage simple et propre."
Non seulement nous voulons produire du code HTML valide, nous voulons également le simplifier autant que possible. Même s'il a toujours été judicieux de garder le HTML simplifié et exempt de DIV inutiles, cela est encore plus important maintenant avec la montée en puissance de la navigation sur le Web mobile. De plus, beaucoup d'effets nécessitant 7 balises DIV imbriquées peuvent maintenant être reproduits avec un peu de CSS3.
Puisqu'il ne s'agit pas d'un tutoriel HTML5, je vais m'en tenir à XHTML strict. Dans cet esprit, une grande partie du balisage peut être rendue encore plus propre avec certains éléments HTML5. Alors, voici un peu de HTML pour une mise en page typique. Nous avons une page contenant un en-tête, un pied de page, une zone de contenu et une barre latérale..
Mon blog
Une entrée à propos de quelque chose
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis is sit amet felis pellentesque vel egestas sapien iaculis. Maecenas eget quam nisi. Classe aptent taciti sociosqu ad litora torquent par conubia nostra, par inceptos himenaeos.
Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tincidunt tortor non mi ultricies quis interdum quam scelerisque. Riseno libero, Aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. Dans iaculis tristique lobortis. Nulla feugiat elit à odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, à l'interdum lacus. Ut dignissim, duo eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis urna blandit, assis amet pellentesque lorem egestas sed. Adipiscons, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est..
Une entrée pour quelque chose d'autre
Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum à mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus chez pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus quam véhicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac un tortor.
Une troisième entrée
Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum à mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus chez pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus quam véhicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac un tortor.
Menu du blog
Souscrire
- RSS
Social
- Gazouillement
Les catégories
- Quelque chose
- Rien
- Toutes les choses
- Pas de choses
Les archives
- Juin 2010
- Mai 2010
- Avril 2010
- Mars 2010
© Personne en particulier 2010
Comme vous pouvez le constater, cette présentation de blog est assez simple et typique avec quelques articles et quelques options de menu dans la barre latérale..
Dans notre élément de tête, nous placerons tous les éléments typiques tels que les feuilles de style, le type de contenu, le titre, etc. Cependant, nous ajouterons un élément supplémentaire pour lisser les navigateurs mobiles..
Ceci est une petite balise de métadonnées, suggérée par Apple, pour aider les iPhones à afficher une page. Essentiellement, il adapte automatiquement la page à la fenêtre et empêche le zoom. Plusieurs autres navigateurs mobiles le supportent également, notamment le navigateur natif de Blackberry. Dans mes tests, garder cette balise ne nuit pas à la navigation sur le bureau. Alors gardons-le dans la tête et oublions ça.
Ce didacticiel se concentrera sur l’utilisation du code HTML ci-dessus et son style en deux dispositions. Une mise en page sera ciblée sur la navigation mobile et une autre sur la navigation de bureau. En pratique, il sera probablement utile de diviser une telle disposition en plusieurs "cibles" différentes. Cependant, pour des raisons de simplicité, ce tutoriel ne portera que sur ces deux.
Le but de ce tutoriel n'est pas de parler de typographie riche ou de graphisme brillant. La présentation est donc très simple. Ce qui est important, c’est le processus de réflexion qui anime la feuille de style.
L’objectif principal de tout cela est de penser à concevoir une mise en page mobile premier. La raison en est qu'il est probable que tout ce que vous proposez pour un appareil mobile fonctionnera également sur un ordinateur de bureau. Ensuite, au lieu de vous retrouver avec une disposition mobile combinée et une disposition brillante sur le bureau, vous allez commencer par une disposition mobile brillante et l'améliorer pour le bureau. Cela garantira également que votre site Web ne perdra pas son audience alors que le monde devient mobile.
Cette approche est inspirée par Luke Wroblewski, qui a pris la parole lors de l'événement An Event Apart à Boston cette année. Sa présentation était centrée sur la pensée "Mobile First".
Bien que ce tutoriel ne capture pas sa présentation dans son intégralité, une partie de celle-ci frappe plus fort que les autres (pour moi). La tendance actuelle est de concevoir d'abord la version de bureau d'un site Web, puis de la déshabiller et de créer un site Web mobile le cas échéant. Au lieu de cela, nous devrions commencer par concevoir pour le monde mobile, puis modifier cette conception comme souhaité pour le bureau. La raison en est essentiellement une amélioration progressive… si la conception est utile sur mobile, elle fonctionnera également sur le bureau. L'inverse, cependant, n'est généralement pas vrai.
Alors, réfléchissons un instant à la navigation mobile. Les longs écrans de défilement sont difficiles à gérer. Alors, prenons les éléments de la liste du menu du blog et facilitons leur traitement.
.sidebar ul border-left: solid 1px #ccc; remplissage: 0 0 0 5px; .sidebar ul li display: inline; remplissage: 0 5px 0 0px; border-right: 1px solide #ccc;
Cela devrait nous donner un menu agréable et épuré avec quelques séparateurs ressemblant à des tuyaux. Vous remarquerez que je n'ai pas choisi d'éloigner le menu du bas de l'écran. Les menus du bas peuvent être utiles pour la navigation mobile. Si vous envisagez de faire défiler une page Web, lorsque vous arrivez au bas de la page, vous devez revenir au début de la liste pour pouvoir aller ailleurs. Selon l'appareil, le défilement peut être un peu fastidieux. Il y a des avantages et des inconvénients à cette méthode, mais dans ce cas, je pense que cela fonctionne bien.
Cependant, je voudrais déplacer le RSS vers la bannière supérieure, alors faisons-le aussi.
h3.subscribe display: none; .sidebar ul.subscribe position: absolute; en haut: 25px; à droite: 10px; bordure: aucune; couleur: #fff; .sidebar ul.subscribe li border: none;
En dehors de cela, le reste consiste en gros à dimensionner les éléments de titre et à colorer les ancres. Pour les besoins de ce tutoriel, j'ai inclus une réinitialisation CSS en haut de la feuille, par souci de simplicité. La fiche CSS complète se trouve dans le code source de ce tutoriel..
Comme vous pouvez le constater, le style des appareils mobiles n’a vraiment rien de particulier quand on aborde le design sous l’angle du mobile. Au lieu de penser "à quoi dois-je ressembler à cela sur mon écran", vous pensez "comment puis-je utiliser un style pour que cela soit plus utile sur un appareil mobile".
Au cas où vous ne l'auriez pas deviné, tout cela finirait par être motivé par une requête de média CSS3. Si vous n'êtes pas familier, la requête multimédia permet à la feuille de style d'inverser et de désactiver les déclarations en fonction de diverses conditions. Une de ces conditions et le sujet de cette feuille sont les dimensions de l'écran.
Encore une fois, le CSS complet peut être trouvé dans les sources jointes à ce tutoriel, mais examinons-le un instant:
.pg width: 800px; marge: 0 auto;
Dans ce cas, nous ne souhaitons pas vraiment une largeur de page de 800 pixels, sauf si nous sommes sûrs que la fenêtre du navigateur de l'utilisateur mesure au moins 800 pixels de large. Sinon, nous allons nous retrouver avec une de ces barres de défilement horizontales ennuyeuses.
Donc, nous allons envelopper cette déclaration (avec plusieurs autres) dans une requête média.
@media all et (min-width: 800px) .pg width: 800px; marge: 0 auto;
Cela se lit assez facilement, non? "Tous" fait référence à "utiliser ce style pour tous les types de supports". Il y a d'autres choses qui peuvent aller ici, telles que "imprimer" pour les imprimantes mais il n'y a pas beaucoup de support cohérent. Quoi qu'il en soit, "tout" fonctionnera très bien pour cela.
Nous allons mettre beaucoup d’autres choses dans cette requête des médias aussi, mais la chose importante à retenir est essentiellement de: passer outre les styles précédents et ajoutez-en de nouveaux pour obtenir la nouvelle présentation. Cela permettra aux navigateurs qui ne prennent pas en charge la requête multimédia de retomber simplement sur le style d'origine. Même s'ils sont optimisé pour les appareils mobiles, l'affichage de cette disposition sur un navigateur de bureau moins capable n'a rien d'anormal.
Par exemple, nous allons déplacer cette barre latérale du bas et faire ressembler les listes à des listes.
@media all et (min-width: 800px) .sidebar ul border: none; rembourrage: 0; .sidebar ul li display: block; rembourrage: 0; bordure: aucune; h3.subscribe display: block; .sidebar ul.subscribe position: static; en haut: auto; à droite: auto; border: hériter; couleur: hériter; .sidebar ul.subscribe li border: inherit;
Cela mettra la barre latérale à gauche (combinée avec quelques autres flotteurs trouvés dans la feuille de style) et replacera l'abonnement là où il appartient pour les personnes naviguant sur le site avec une largeur minimale de 800 pixels..
Ainsi, si vous ouvrez la source dans un navigateur et la redimensionnez horizontalement, vous pourrez voir la disposition basculer entre le format de bureau et le format adapté aux mobiles.
Vous vous demandez peut-être pourquoi 800px? Y at-il quelque chose de magique sur une largeur de 800px? Non. En fait, je dirais que c'est trop large. Avec l'introduction de "snap" dans Windows 7, je dirais que 600px devrait être la nouvelle largeur cible d'un site Web de bureau. De cette façon, le navigateur peut être "attrapé" à droite ou à gauche sur un écran de 1280 pixels tout en conservant sa disposition. Cependant, ce n'est vraiment ni ici ni là-bas. Sachez simplement que 800px n’a rien de spécial.
Important: Le site Web sera appelé comme la version mobile dans IE8 et ci-dessous. Est-ce correct? Je le pense. En outre, je l'ai déjà fait et jusqu'à présent personne ne m'a arrêté. De plus, la prise en charge des requêtes multimédia est promise dans IE9.
Ce n'est pas le seul moyen d'y parvenir. Cependant, le but de ce tutoriel était de montrer une utilisation très pratique des requêtes de médias et de présenter quelques idées de mises en page mobiles basées uniquement sur CSS.
Cela dit, voici quelques autres façons de créer une mise en page mobile…
Il existe probablement plusieurs autres méthodes de gestion de la navigation Web sur le Web mobile, mais il s'agira souvent d'un système hybride. Toutefois, qu’il s’agisse d’une mise en page fluide avec certains points "kick" basés sur une requête multimédia ou d’une redirection de sous-domaine servant différents modèles, l’important est de commencer à planifier les dispositions pour mobile à l’avance, afin que vos sites Web ne deviennent pas de moins en moins utiles 5 prochaines années.
Accentsconagua