Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation.
Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces.
Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}.
L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels.
Préambule : fixer le Viewport
Pour être efficient au maximum, il convient de définir au sein du code HTML un élément méta Viewport de type <meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette étape a pour principal avantage d’éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s’y adapter par la suite. Cette instruction court-circuite le viewport par défaut, souvent bien trop large, et fournit une base commune plus proche de la réalité.
Pour tout savoir sur le Viewport, n'hésitez pas à parcourir l'article "Comprendre le Viewport dans le Web mobile".
Feuille de styles mobile
A placer directement au sein de la feuille de style CSS dédiée aux écrans...
@media (max-width: 640px) {
* {
box-sizing: border-box;
}
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
body {
width: auto;
margin: 0;
padding: 0;
}
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
max-width: 100%;
}
/* conserver le ratio des images */
img {
height: auto;
}
/* gestion des mots longs */
textarea,
table,
td,
th,
code,
pre,
samp {
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* passage à la ligne forcé */
}
code,
pre,
samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
.element1,
.element2 {
float: none;
width: auto;
}
/* masquer/afficher les éléments */
.u-mobile { display: block; display: revert !important; /* affichage des éléments */ } .u-no-mobile { display: none !important; /* masquage des éléments */ }
/* Un message personnalisé */
body:before {
content: "Version mobile du site";
display: block;
text-align: center;
font-style: italic;
color: #777;
}
}La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad).
@media (max-device-width:768px) and (orientation: landscape) {
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
}
Sachez que cette feuille de styles, à adapter selon vos besoins, est opérationnelle sur un très large panel de smartphones : iPhone, Android, Blackberry, Nokia, etc. Elle constitue la base des versions mobiles des sites web alsacreations.fr et goetter.fr
Si vous voulez aller encore plus loin, sachez qu'un projet de feuille de styles "framework CSS" minimaliste créé par Alsacréations est à votre libre disposition. Il se nomme KNACSS.
Cet article constitue un extrait du livre "CSS avancées, vers HTML5 et CSS3" publié aux éditions Eyrolles.
Commentaires
Merci pour l'info et pour l'astuce concernant les tableaux. Je n'aurais jamais pensé à les considérer comme des mots longs !
Très intéressant tout ça, ce sont plus ou moins des techniques que j'utilise déjà, mais très bien synthétisées et regroupées ici ! Du bon boulot !
Salut,
Article intéressant, c'est pas mal de penser à la césure et à limiter la largeur des éléments qui peuvent casser la page.
Pour la partie « Passer à une seule colonne », je suppose qu'il s'agit de modifier le layout du site. Peut-être préciser pour plus de clarté qu'il ne s'agit pas d'une instruction générique applicables telle quelle à tous les sites.
J'aime aussi le truc pour empêcher l'iPhone d'agrandir la police en mode landscape. Je l'ai cherché. Merci donc.
Merci pour l'article.
Je ne comprends pas l'intérêt du viewport si jamais on utilise les media queries. Qu'est-ce que ça change de l'ajouter ?
@Skoua : les média queries ne font qu'adapter le design... par rapport au viewport de chaque smartphone.
Le fait de fixer le viewport impose au smartphone de disposer d'une résolution "normale"(= la largeur de son écran) dès le départ, puis de s'y adapter. Sinon, cette résolution sera entre 800px et 1024px, donc inutilisable sur mobile.
Article sympa et utile , au fait il passe très bien sur android, j'ai juste eu un souci pour la citation du code : police un peu grosse , et en voulant scroller ( pas encore très douée pour le surf sur android) ça m'a fait un zoom arrière ....
Merci je comprenais pas pourquoi certains sites étaient superbes sur mobile alors que d'autres non ...
@Raphael : Ok je vois. Merci pour la précision.
comme d'hab utile ! merci !
Très intéressant (comme toujours !).
Certains téléphones accédant à internet ne sont pas des smartphones (leur nombre ne fait et ne fera que diminuer mais il y en a encore) et ne supportent pas les media queries . Pour améliorer la compatibilité avec ce type de téléphones, ne faudrait-il pas se servir de cette feuille de style comme base pour le site et utiliser les media queries (ou js dont l'usage sera moins risqué que sur (certains) mobiles...) pour adapter la mise en page aux grands écrans ?
Passer d' une mise en page fluide à une colonne à une mise en page à plusieurs colonnes, voir le problème à l'envers...
(reste ie... mais de toute façon il faut le cibler à part dans un cas comme dans l'autre)
"en avant-première du livre sur les **CSS avancées**" un indice pour le jeu sur tumblr pour gagner un exemplaire... trop tard j'ai grillé mes trois propositions ; (
@pascal31 : ton idée est bonne, mais le seul problème, Internet Explorer ! Il ne supporte pas les média-queries, donc IE aurait la version pour Smartphone... pas possible pour un client. Par contre, effectivement, on peut faire une version style 800*600 et utiliser les médiaqueries pour l'adapter pour les résolutions supérieures, je l'ai testé sur un skin de mon site, cette méthode est très simple à mettre en place, et assez amusante à intégrer.
Article vraiment bien fait et pratique !
J'ai constaté que les tableaux pouvaient malgré tout casser la mise en page selon le nombre de colonnes et le contenu. Il faudra donc penser à réduire la taille des polices pour les tableaux ou trouver une autre solution au cas par cas.
Sinon, pour la première déclaration (passer tous les éléments de largeur fixe en largeur automatique), peut-on simplement mettre * ?
@pascal31 : "Certains téléphones accédant à internet ne sont pas des smartphones (leur nombre ne fait et ne fera que diminuer mais il y en a encore) et ne supportent pas les media queries"
-> Dans la pratique, media queries est reconnu par un très large panel de terminaux mobiles : iPhone, iPad, Nokia, Android, Blackberry (depuis OS6), Palm Pre, HTC récents, ... et même WindowsPhone dans quelques mois.
Adapter son site pour les quelques restants nécessite un temps de développement extrêmement long et conséquent pour un très faible pourcentage. D'autant plus que le taux de renouvellement statistique des téléphones est de 14 à 18 mois. A toi de voir si cela en vaut l'investissement.
@Noisequik : "Sinon, pour la première déclaration (passer tous les éléments de largeur fixe en largeur automatique), peut-on simplement mettre * ?"
-> Le sélecteur Joker est une plaie pour les performances du navigateur. Il est préférable de l'éviter tant que possible.
@pascal31 : hé hé, en effet :)
@Raphael c'était plutôt pour de nouveaux projets que pour réadapter des sites existants, dans l'idée de laisser le moins possible de mobinautes sur le carreau...
Pour un site qui vise un public international ça peut encore être intéressant, dans certaines régions du globe je pense que le renouvellement est beaucoup plus lent. SymbianOS à plus de 70% en Afrique...(source:http://gs.statcounter.com/#mobile_os-ww-monthly-201001-201101-bar)
quelles versions ??? support des media queries ???
Un poil (de kiwi) hors-sujet... faut-il s'inquiéter (du point de vue navigateur mobile) de "l'alliance" de nokia et microsoft... que vont embarquer les futurs nokia ?
@Nico3333fr comme je le disais à la fin de mon commentaire il faut cibler internet explorer dans les deux cas : iemobile ne supporte pas (encore) les media queries Faire des commentaires conditionnels dans un cas ou l'autre...
@pascal31 : "faut-il s'inquiéter (du point de vue navigateur mobile) de "l'alliance" de nokia et microsoft... que vont embarquer les futurs nokia ?"
-> Pas d'inquiétude : les nouveaux Nokia seront basés sur WinPhone7, donc un navigateur de la trempe d'IE7... mais qui sera remplacé par IE9 au courant 2011 (donc media queries supportés).
@Raphael : vite, vite...
Merci !
Une bonne concentration de détails pour bien commencer à adapter un site au mobile.
Bonjour,
Une des préocupations du dev mobile est d'alleger un maximum le poids des pages pour pallier les débit plus faibles des connexions mobiles (3G ...)
J'ai donc une question : est ce que l'utilisation du "display: none" empêche l'élément non affiché d'être chargé par le browser ?
@pixenjoy : Non, l'élément sera bel et bien chargé! Display: none, le masque totalement et fait en sorte qu'il n'occupe pas de place dans le flux, mais l'élément reste dans le DOM, et est toujours accessible, car présent physiquement dans la page ;-)
un article critique vis à vis de l'usage des media queries pour mobile : http://www.cloudfour.com/css-media-query-for-...
Beaucoup à charge, mais certains arguments ne sont pas dénués d'intérêt concernant le poids et donc le temps de chargement de la page.
Bonjour,
Une des préocupations du dev mobile est d'alleger un maximum le poids des pages pour pallier les débit plus faibles des connexions mobiles (3G ...)
J'ai donc une question : est ce que l'utilisation du "display: none" empêche l'élément non affiché d'être chargé par le browser ?
Pas sur Webkit ai-je lu récemment :( Et pire, si tu as plusieurs règles qui définissent une image de fond chacune mais qu'au final seule la dernière est vraiment utilisée dans la page, bah Webkit va toutes les charger !
@pixenjoy et @Tomek : pour ce qui est des chargements et performances, seul Opera est intelligent pour ce genre de techniques. Pour les autres, il faut beaucoup ruser.
Mais attention : le but de cette feuille de style est de proposer une solution très rapide et facile à mettre en place et à maintenir, contrairement à une version de site web dédiée aux terminaux mobiles.
Il y a donc forcément des inconvénients par rapport à une version dédiée et optimisée.
Une solution à choisir selon les projets (et les budgets) donc.
Par contre ce bout de CSS ne passe pas au W3C mobileOK Checker... Il affiche le CSS comme erreur critique, principalement à cause de cette feuille de style...
@picks : Il faudrait voir comment tu l'as mis en place. Il me semble que pour alsacreations.com et alsacreations.fr, il n'y a pas d'erreur critique.
@Raphael
Voici ce qui sort du W3C CSS Checker chez moi :
26
Erreur lors de l'analyse grammaticale. (max-width: 640px) { /* passer tous les éléments de largeur fixe en largeur automatique */ body, #global, #content, #header, #top, #center, #bottom, #footer { width: auto !important; margin: auto !important; } /* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */ img, table, td, blockquote, code, pre, textarea, input, object, embed, video { max-width: 100% !important; } /* gestion des mots longs */ textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* césure forcée */ white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ } }
29
Propriété erronée : max-width La propriété max-width n'existe pas pour le media screen : 640px 640px
29
La propriété orientation n'existe pas pour le media screen : landscape landscape
31 body La propriété -webkit-text-size-adjust n'existe pas : 90% 90%
Ce qui est étonnant c’est la répétition des valeurs des propriétés (90% 90%, lanscape landscape...)...
@picks : s'il s'agit du Validateur CSS du W3C, oui il a des lacunes en ce qui concerne les propriétés CSS3 ainsi que les préfixes du type -webkit-.
Ok c'est ce que je me disais aussi :) !
Une autre question bête mais comment ça se passe pour avoir une qualité d'affichage aussi bonne sur un Androïd ou iPhone 3G que sur un iPhone 4 et son Retina ?
@picks : l'iPhone 4 dispose de 640px réels de large (contre 320px pour l'iPhone par exemple), même s'il n'en "déclare" que 320.
Il est donc impossible d'avoir la même qualité d'affichage sur les dispositifs présentant une moindre résolution.
@Raphael : je me suis mal exprimé je pense >si j'utilise des visuels de 320px de large par exemple (donc largeur max), tout va bien sur Androïd, iPhone 3G, etc. mais sur iPhone 4, forcément, ça pixelise. Est-il possible de remédier à ça ? Par exemple avec 2 jeux de de visuels, l'un en 320px de large et l'autre en 640px ?
@picks : non, ça ne pixelisera pas si tu fixes la meta viewport à une valeur "device-width" (le device-width de l'iphone3 et 4 étant commun : 320px)
Les "demi-pixels" de l'iphone 4 se chargeront d'afficher l'image correctement :)
@Raphael : merci pour l'astuce ! Du coup j'ai mis tous mes visuels adaptés en 320px (taille réelle donc), avec les déclarations de taille qui vont bien. Mais c’est quand même pas terrible l'affichage en Retina je trouve... Pourtant j'ai bien <meta name="viewport" content="width=device-width" /> sur toutes mes pages.
@Raphael : j'ai reçu ton livre hier, je vais lire à fond toute la section mobile ^^
@Raphael: je suis super débutante en CSS. Je crée mon site via Prestashop. Je ne sais pas comment "de définir au sein du code HTML un élément méta Viewport de type <meta name="viewport" content="width=device-width" />" car la plupart de mes fichiers sont en css et pour la feuille de style mobile, je suppose que je dois créer un fichier, mais doit-il porter un nom spécial? Car ma par exemple dans les CSS de mon thème, j'ai global.css, ie.css
Merci énormément par avance pour ta réponse. Mon lien: www.lacavernecevenole.fr/test
@nini1505 : il ne faut pas écrire la balise <meta> dans un fichier CSS justement, mais dans la page HTML.
@Raphael: je suis super débutante en CSS. Je crée mon site via Prestashop. Je ne sais pas comment "de définir au sein du code HTML un élément méta Viewport de type <meta name="viewport" content="width=device-width" />" car la plupart de mes fichiers sont en css et pour la feuille de style mobile, je suppose que je dois créer un fichier, mais doit-il porter un nom spécial? Car ma par exemple dans les CSS de mon thème, j'ai global.css, ie.css
Merci énormément par avance pour ta réponse. Mon lien: www.lacavernecevenole.fr/test
@nini1505 : il ne faut pas écrire la balise <meta> dans un fichier CSS justement, mais dans la page HTML.
@Raphael : Bonjour Raphael, oui j'avais compris que c'était dans une page HTML. Comme je n'en ai pas vraiment, j'ai que du php et css, est-ce que je dois en créer une spécialement? Et pour le CSS, pourrais tu me donner une réponse stp?
Merci par avance!
@nini1505 : ton fichier PHP va forcément devenir une page HTML au final. C'est lui qui contient toutes les balises HTML.