Le Web mobile a depuis longtemps envahi notre quotidien de concepteur de sites web : aujourd'hui, smartphones et tablettes font partie intégrante du parc de périphériques sur lesquels nous jouissons de notre dose quotidienne d'Internet, sur lesquels nous consultons nos sites web préférés, et pestons - à juste titre - lorsque celui-ci ne s'affiche pas correctement.
Afin de mieux dégrossir ce vaste sujet, voici une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique.
Glossaire
- Application native
- Correspond aux logiciels à télécharger que l'on peut trouver sur les boutiques "stores" (AppStore pour Apple, GooglePlay pour Android,…) développés dans un langage spécifique à chaque plateforme : Objective-C pour Apple, Java pour Android, …
- Application web (Web App)
- Une application web est le nom que l'on donne à un site web "classique" que l'on a adapté pour les mobiles. La structure existante reste en place (HTML, scripts, bases de données, médias) et est complétée par une couche graphique dynamique (en CSS) adaptée aux écrans de taille réduite dans un principe général de design adaptatif (Responsive web design et avec des outils CSS3 tels que les Media Queries. Des retouches ou sur-couches JavaScript sont parfois également à l'ordre du jour.
- Site web dédié
- Il s'agit d'une nouvelle version du site web complètement adaptée aux terminaux nomades en terme de technologies (HTML, vidéo, audio, images) et de performances (optimisations, préchargements, mises en cache).
- Habituellement, une détection du périphérique utilisateur (via User Agent, JavaScript, autre) permet de le rediriger vers l'URL de la version mobile dédiée du site (m.monsite.com, monsite.mobi).
- Navigateurs mobiles
- Le marché des navigateurs pour mobiles se distingue de celui des ordinateurs de bureau par sa diversité et sa vivacité concurrentielle et technologique. Parmi les plus employés dans le monde : Opera Mobile, Opera Mini, Safari Mobile (sur iPhone, iPad), navigateurs Android, Internet Explorer mobile, Blackberry, Firefox mobile, Chrome mobile, UCweb, etc.
- Densité de pixels
- Correspond à la résolution d'un écran numérique exprimée en DPI (Dots Per Inch : points par pouce) ou PPI (pixels par pouce). Une densité élevée correspond à un écran dit "HD" ou "Haute Définition". Quelques exemples de densités : 326 PPI pour iPhone 4 et 4S, 264 PPI pour iPad 3, 220 PPI pour MacBook Pro 3.
- Pixel ratio
- Correspond au ratio entre les pixels réels (
screen width) et la valeur dedevice-widthdu navigateur. Par exemple, un iPhone 4 a un ratio de 2 (640/320) tandis qu'un iPhone 3 a un ratio de 1 (320/320). Il est possible de détecter le pixel-ratio via Media Queries ou en JavaScript viawindow.devicePixelRatio. - Retina
- "Retina display" est une marque déposée par Apple pour désigner des écrans dont la densité de pixels est telle que l'oeil humain n'est plus censé pouvoir distinguer de défauts dans les détails. Il ne s'agit ni plus ni moins d'écrans de haute définition (densité de pixels élevés). Cette technologie équipe des terminaux iPod, iPhone, iPad et MacBook Pro. Du côté de la concurrence, par exemple Samsung, on retrouve le terme (Super-)AMOLED.
- Orientation
- L'orientation correspond, pour un écran numérique, à son sens d'affichage : si le périphérique est tenu dans le sens de la largeur, on parle d'orientation paysage (landscape en anglais); s'il est tenu dans le sens de la hauteur, on parle d'orientation portrait.
- Les récents navigateurs de bureau reconnaissent également l'orientation : si la fenêtre est plus large que haute, l'orientation sera définie en paysage par exemple. Il est possible de détecter l'orientation via CSS Media Queries.
- screen width (ou screen height)
- Correspond à la largeur (ou hauteur) d'un écran numérique. Que cela soit sur un écran de bureau, une tablette ou un téléphone mobile, cela se traduit par la (mal nommée) résolution : par exemple 1024x768, 320x640, etc.
- device-width (ou device-height)
- Correspond aussi à la largeur (ou hauteur) d'un écran numérique. Ou plutôt celle qui est déclarée par le périphérique.
- Un certain nombre de terminaux mentent sur la valeur de
device-widthetdevice-height. En effet, ceux-ci ne correspondent pas à la largeur réelle de l'écran (screen-width) mais à une valeur exprimée en "Device Independant Pixels (dip)" ou "Pixels Indépendants du Terminal". Ainsi, un iPhone 4 dont la largeur physique réelle est de 640px retournera une largeurdevice-widthde 320px, ceci pour des raisons de compatibilité ascendante avec son aîné iPhone 3. - viewport
- Désigne la zone de la fenêtre du navigateur.
- Les navigateurs mobiles trichent en reconnaissant par défaut une surface de viewport plus élevée que la surface physique réelle en pixels.
- Par exemple la largeur de viewport par défaut sur Safari mobile est de 980px, elle est de 850px sur Opera, 800px sur un navigateur Android, 1024px sur IE mobile.
- Pour s'affranchir des tailles de sites minuscules (puisque le mobile affiche une largeur de 980px dans une surface de 320px), il est possible de modifier cette valeur par défaut et d'imposer ses valeurs à l'aide de l'élément HTML - propriétaire -
, ou selon les spécifications CSS, à l'aide d'une règle-at@viewport. - Media queries
- Module des spécifications CSS3 permettant la sélection fine de périphériques selon divers critères (largeur, hauteur, résolution, orientation,…), puis d'appliquer spécifiquement un ensemble de styles CSS dédiés à cette sélection.
- Cet outil est devenu une étape incontournable de l'adaptation de designs aux écrans de différentes tailles. Pour tous les détails, voir l'article Media Queries.
- Responsive web design
- Ensemble de techniques et principes permettant d'adapter un design web à différentes tailles d'écran : de l'écran de bureau géant au smartphone, en passant par les tablettes, les netbooks et autres formats de TV. Ceci afin d'offrir aux visiteurs la meilleure expérience possible quel que soit le support de consultation et quitte à réorganiser l'affichage et la disposition des éléments (par exemple passer d'un site à 4 colonnes sur grand écran à un site mono-colonne sur mobile). Ce terme a été introduit par Ethan Marcotte dans son livre éponyme et se fonde sur un trio de techniques : CSS Media Queries, gabarits fluides et contenus fluides.
- Point de rupture
- Les points de rupture sont les différents palliers, qui une fois franchis, "cassent" votre design, les largeurs qui nécessiteront des adaptations voire des réorganisations en CSS. Testez votre site web sous différentes résolutions (par exemple avec les excellents outils Screenqueri.es ou Responsive.is), vous identifiez rapidement quelques palliers problématiques : de sont vos points de rupture.
- Mobile first
- Philosophie de conception à contre-courant de nos principes habituels consistant à commencer prioritairement par la version épurée (mobile) puis à enrichir progressivement pour les écrans de plus en plus larges.
- User agent
- L'agent utilisateur est une chaîne de texte envoyée par le navigateur au serveur pour s'identifier. Elle contient des informations comme par exemple : le nom de l'application, la version, le système d'exploitation, la langue, etc.
- Il est possible, via un langage serveur, de récupérer et exploiter ces informations, par exemple en redirigeant le visiteur sur une version mobile dédiée en reconnaissant un agent utilisateur mobile. La technique n'est malheureusement pas toujours fiable car il existe des milliers de chaînes d'identification différentes et peu de sites les maintiennent à jour, ou les gèrent avec exhaustivité.
Par quoi commencer ?
Avant de débuter un projet de site web mobile, vous aurez bien entendu un bon million de questions à vous poser, autant techniques qu'ergonomiques, sans oublier les aspects de performances navigateurs, de compatibilités, d'accessibilité à tous, etc.
En outre, selon l'existant du projet (la version "bureau" existe-t-elle déjà, ou tout est-il à construire à partir de zéro ?), vos considérations ne seront pas les mêmes. De même que la procédure suivie. Il ne s'agira pas ici d'entrer dans tous les détails, mais d'aborder les principales étapes à parcourir.
Nous avons distingué deux méthodologies courantes, adaptées à deux cas de figure : l'adaptation d'un design existant (idéale pour "aller vite" mais pas forcément très optimisée), et la démarche "mobile first" (parfaite pour débuter de zéro, mais nécessitant une réflexion initiale plus poussée).
Méthodologie 1 : adapter un design existant
Votre site web "classique" est déjà en ligne mais inadapté aux smartphones et tablettes ?
En suivant une procédure simple en 10 points, il est relativement aisé et rapide d'adapter un design existant à différentes tailles d'écran. En contrepartie, sachez que gérer les écueils d'ergonomie et de performance web ne sera pas toujours une partie de plaisir.
- Fixez le viewport du terminal (
) - Identifiez les points de rupture
- Faites un choix de navigation mobile (en haut, en bas, select, déroulant, masqué, etc.)
- Appliquez des styles mobiles via media queries, soit intégrés dans les styles globaux soit dans une feuille CSS séparée
- Débutez vos styles mobiles par une feuille de styles mobile de base ("reset")
- Traitez un par un tous les éléments possédant des largeurs problématiques (
width,min-width,height,min-height,margin,padding) en annulant ces largeurs (width: auto,min-width: 0, par exemple) - Réintégrez les éléments dans le flux pour obtenir des blocs verticaux (écrasez les valeurs de
floatetposition: absoluteparfloat: noneetposition: static) - Adaptez les contenus et les médias pour éviter des débordements
- Optez pour des gabarits de largeur fluide
- Et pour finir en beauté, prenez en compte les écrans HD (rétina) et lesperformances web mobile.
Méthodologie 2 : la démarche "mobile-first"
Cette fois, changeons radicalement de stratégie : en pensant "à l'envers", nous évitons tous problèmes de ressources inadaptées, de temps de chargements inutiles, d'éléments superflus et non ergonomiques.
Etape longue et nécessaire : pensez dès le début du projet à l'ergonomie de votre site web dans différents types de terminaux (généralement smartphones, tablettes, écrans de portables, écrans de bureau). En conséquence, prévoyez un temps de conception graphique multiplié par 3 ou 4, mais c'est pour la bonne cause.
Les étapes sont parfois sensiblement identiques à la méthodologie précédente (à savoir : fixer le viewport, emploi des media queries, prise en compte des terminaux HD et de la performance web), avec quelques particularités à prendre en compte :
- Le wireframing doit être initialement orienté pour les petits écrans (des outils tels que Codiqa sont dédiés aux mobiles)
- Le design et l'ergonomie principalement adaptés aux petits écrans
- Les styles CSS de base sont dédiés aux smartphones (puis améliorés viarespond.js ou des classes conditionnelles pour assurer la compatibilité aux anciens navigateurs de bureau)
- Les ressources et medias sont très optimisés (puis remplacés si écrans plus larges)
- idem pour JS et scripts de "confort"
Pour en savoir plus sur cette méthode, je vous invite à consulter le très bon article publié sur WebdesignFriday : "CSS et Mobile First : procéder par amélioration progressive".
Ressources
Commentaires
Nico3333fr a dit le
Très bon tutoriel, à noter dans la méthodo 1, plus votre CSS est légère et votre structure bien pensée, plus votre reset mobile sera réduit/plus vous bénéficierez de la cascade CSS. Cela permet de produire des versions adaptées aux smartphones qui sont bien légères.
Et yes, 10/10 au quizz ! ;)
Et yes, 10/10 au quizz ! ;)
Nico3333fr a dit le
Je m'autocomplète : quand je parlais de reset CSS, je parlais des points 5, 6 et 7, normalement, le tout tient en très peu de lignes. ;)
lj44 a dit le
Quelle coincidence, j'étais justement en train de lire Mobile first de Luke Wroblewski et j'en conclue que le webdesign devient un véritable casse tête. Déjà rien que la question du site web dédié (m.monsite.com) ou web app est pas évidente à aborder. En tout cas cet article tombe à pic ! Merci :)
bdut a dit le
Merci beaucoup pour ce super tuto !
Et je confirme : Mobile first est une vraie mine d'or :)
Du côté des framework css à noter le très bon Less qui permet de gérer les différentes résolutions d'un même site web grâce aux “media queries”.
Bonne lecture :-)
Et je confirme : Mobile first est une vraie mine d'or :)
Du côté des framework css à noter le très bon Less qui permet de gérer les différentes résolutions d'un même site web grâce aux “media queries”.
Bonne lecture :-)
ZeB_panam a dit le
J'ai du mal à comprendre le but de passer le float en none, et le position en static… Un article parle de ça quelque part sur le web ?
Raphael a dit le
@ZeB_panam : tout simplement pour faire revenir des éléments dans le flux, pour retrouver leur positionnement par défaut.
Prenons un exemple : sur la version "bureau", tu as un design avec 2 blocs l'un à côté de l'autre (un peu comme sur alsacreations.com : contenu à gauche, bloc d'infos à droite).
Pour les positionner l'un à côté de l'autre, ils sont en float left.
Sur un petit écran, il faut les passer l'un sous l'autre. En bref, on cherche à retrouver tout simplement le comportement par défaut des blocs, et donc à "écraser" le float. Cela s'obtient à l'aide d'un float: none.
Prenons un exemple : sur la version "bureau", tu as un design avec 2 blocs l'un à côté de l'autre (un peu comme sur alsacreations.com : contenu à gauche, bloc d'infos à droite).
Pour les positionner l'un à côté de l'autre, ils sont en float left.
Sur un petit écran, il faut les passer l'un sous l'autre. En bref, on cherche à retrouver tout simplement le comportement par défaut des blocs, et donc à "écraser" le float. Cela s'obtient à l'aide d'un float: none.
Nico3333fr a dit le
@ZeB_panam : l'idée est de profiter d'une structure avec un ordre logique en virant les float et les positionnements absolus. Si tu veux un exemple pratique, je t'invite à lire cet exemple :http://www.nicolas-hoffmann.net/source/1473-e...
Raphael a dit le
@Nico3333fr : tiens, je viens de remarquer que sur ton article, tu laisses croire que la valeur par défaut de margin est auto alors qu'elle est de 0
lj44 a dit le
@Zeb_panam
Et si sur le même exemple (alsacreations.com), on avait utiliser display:inline-block sur la version bureau, pour la version mobile on utiliserait un display:block pour redonner la valeur par défaut aux balises block, afin qu'ils passent les uns en dessous des autres!
C'est bon ce que je raconte ou pas Raphael ?
Et si sur le même exemple (alsacreations.com), on avait utiliser display:inline-block sur la version bureau, pour la version mobile on utiliserait un display:block pour redonner la valeur par défaut aux balises block, afin qu'ils passent les uns en dessous des autres!
C'est bon ce que je raconte ou pas Raphael ?
ZeB_panam a dit le
Hmmm merci de tous vos arguments… mais qui restent tout de même un peu ciblés. En version paysage sur un smartphone, je peux très bien avoir des blocs les uns à côté des autres.
Au final, je trouve ça un peu extrême de passer ça dans une méthodologie à appliquer à chaque fois pour du web mobile, alors que cela impose un style de composition, et que ça n'a aucune valeur obligatoire de compatibilité avec des supports mobiles. Alors je ne dis pas que c'est une mauvaise idée de préférer un design avec un seule entrée de lecture par ligne hein :) (c'est même dans la plupart des cas ce qu'il faudra faire pour minimiser l'adaptation desktop > mobile).
Mais il aurait été bon de préciser le but de la méthodologie ;)
On aurait pu par contre parler du position:fixed qui est à éviter sur du mobile, car très peu supporté (ou dans des conditions particulières >> http://bradfrostweb.com/blog/mobile/fixed-pos... )
Au final, je trouve ça un peu extrême de passer ça dans une méthodologie à appliquer à chaque fois pour du web mobile, alors que cela impose un style de composition, et que ça n'a aucune valeur obligatoire de compatibilité avec des supports mobiles. Alors je ne dis pas que c'est une mauvaise idée de préférer un design avec un seule entrée de lecture par ligne hein :) (c'est même dans la plupart des cas ce qu'il faudra faire pour minimiser l'adaptation desktop > mobile).
Mais il aurait été bon de préciser le but de la méthodologie ;)
On aurait pu par contre parler du position:fixed qui est à éviter sur du mobile, car très peu supporté (ou dans des conditions particulières >> http://bradfrostweb.com/blog/mobile/fixed-pos... )
ZeB_panam a dit le
Bon je me répond à moi-même… Il faut quand même souligner que Raphaël précise que la méthode 1 est “ idéale pour "aller vite" mais pas forcément très optimisée ” et que “ En contrepartie, sachez que gérer les écueils d'ergonomie et de performance web ne sera pas toujours une partie de plaisir. ”.
Donc les avertissements dans cet article ont le mérite d'être présents :D
Donc les avertissements dans cet article ont le mérite d'être présents :D
kustolovic a dit le
Sympathique et bon résumé, toutefois j'ai toujours de la peine avec les erreurs d'interprétation du terme "application web". Une application web n'a rien à voir avec le mobile ou le device utilisé. C'est juste une application qui est distante et qui peut être utilisée sans installation grâce au web. => gmail, jeux en lignes, logiciels de gestion, etc. Bien sûr plein d'applications web peuvent être adaptées aux mobiles. (http://fr.wikipedia.org/wiki/Application_web)
Aucun commentaire:
Enregistrer un commentaire