Adapter un site pour les Smartphones

  • Profil : Expert
  • Technologie : (X)HTML, CSS
  • Thème : Mise en page
  • Auteur : Nicolas Hoffmann
  • Mise à jour : 29/01/2012

En bref

Avec la démocratisation des Smartphones, il devient nécessaire de penser en concevant un site à sa version sur petit écran... voyons donc quelles peuvent être les approches pour adapter un site sur ce nouveau support et en quoi les standards peuvent grandement faciliter cette adaptation.

Une version spéciale Smartphone et plus largement handheld (petit écran) est une étape qui peut être compliquée à envisager. Heureusement, les standards du Web offrent quelques armes fort bienvenues et efficaces pour la franchir. Après tout, présenter un site en 480*320 pixels n’est jamais... qu’un style alternatif.

Si votre structure XHTML est suffisamment robuste - je vous invite à (re)lire avoir plusieurs présentations alternatives -, préparer et développer une version Smartphone pour votre site sera d’autant plus aisé. Néanmoins, quelques écueils techniques peuvent se présenter... et le facteur temps peut vous obliger à faire quelques choix.

Voyons quelques points afin de comprendre les tenants et les aboutissants de la création d’une version Smartphone !

Attention : cet article traite uniquement de l’adaptation d’un design à une version pour Smartphone, et non de développement de sites totalement dédiés aux mobiles. Les techniques qu’il aborde sont à replacer et à garder uniquement dans le cadre d’une adaptation aux Smartphones.

Quelques informations et bons réflexes

Principales recommandations :

Qui peut le plus peut le moins : préparer un site pour les Smartphones sera d’autant plus facile si vous avez déjà bien travaillé sur votre site et les démarches qualité propres aux sites internet (réduction du poids des pages, CSS et images optimisées, diminution des requêtes HTTP, séparation structure/présentation, ordre logique de votre structure, etc.).

Il faut avoir à l’esprit que surfer sur un Smartphone n’est pas seulement une question de résolution plus petite : la connexion est moins performante et souvent plus onéreuse que sur un PC connecté à un réseau. Un site par exemple trop lourd ou trop long à charger peut se disqualifier d’entrée de jeu.

Si certaines bonnes pratiques ne sont pas indispensables pour une version Smartphone, d’autres sont tout bonnement incontournables :

Plus généralement, pensez "petit écran" et "navigation tactile" :

C’est là que la structure de votre document va être mise à l’épreuve : par exemple, l’ordre naturel de navigation devra être correct en empilant les blocs auparavant positionnés comme flottants.

Le W3C a édité les bonnes pratiques du Web mobile en Flipcards, c’est un excellent résumé du guide complet des Pratiques exemplaires du Web mobile 1.0.

Toujours sur le même sujet, le Validateur W3C Mobile a été récemment amélioré et donne de bons conseils. Cela peut être une étape très intéressante dans la conception ou tout simplement pour l’apprentissage.

Attention : encore une fois, le validateur mobile est là pour tester les sites spécialement dédiés aux mobiles (et pas uniquement adaptés et/ou dédiés aux Smartphones). Ses critères sont donc très durs à atteindre pour une simple adaptation Smartphone et sont à relativiser.

Quelques informations et points de repère :

Plusieurs approches dans l’adaptation d’un site pour les Smartphones sont envisageables, cela peut aller d’une très légère adaptation (à moindre frais) à une adaptation complète... en passant par une version hybride. Tout dépend des navigateurs ciblés et du temps consacrable à cette adaptation.

1) Pour les sites pouvant d’entrée de jeu s’adapter à des résolutions plus basses à moindre effort, nécessitant une adaptation mineure des contenus

a) Document trivial supportant un design élastique

Dans ce cas, la version pour les médias screen et handheld sont les mêmes, sans aucune ou très peu d’adaptations.

Avantages :

Inconvénients :

Conclusion : ce cas parfait est rarissime ou extrêmement dur à concevoir... hormis sur un design trivial.

b) Un site avec une résolution plutôt basse, peu d’éléments de contenu et de mise en page :

Adapter rapidement ce genre de site ne demande que très peu d’efforts, il restera consultable sur un Smartphone avec la même CSS que celles destinée au média screen... toutefois sans être parfait.

Avantages :

Inconvénients :

Conclusion : à l’instar du cas précédent, ce cas, qui peut être très facile et rapide à adapter... est relativement rare.

Pour les sites ayant une résolution de base plus élevée et/ou nécessitant une adaptation plus poussée des contenus

Deux approches sont envisageables :

Ces approches ont chacune leurs points forts et leurs inconvénients, voyons la première.

1) Mettre côté serveur un script de détection de l’agent utilisateur qui redirige vers une version adaptée :

Il peut être tout à fait envisageable de servir une version totalement différente et/ou adaptée en cas de forte demande. Exemple : les sites communautaires proposent des versions très bien adaptées à la navigation Smartphone (contenu léger, etc.)... et à leur fréquentation plutôt forte.

Idéalement, l’idée est de charger uniquement une autre CSS, comme pour un style alternatif : cela évite de redévelopper complètement la structure du site.

Un exemple de détection de l’agent utilisateur via PHP :

if (stristr($_SERVER['HTTP_USER_AGENT'], "iPhone")  
|| strpos($_SERVER['HTTP_USER_AGENT'], "iPod") 
|| strpos($_SERVER['HTTP_USER_AGENT'], "Android") ) 
{ 
 // ici la CSS pour les Smartphones précités 
// ou la redirection vers la page adaptée
}
else {
 // CSS classique 
}

Avantages :

Inconvénients :

Conclusion : cette solution est la solution la plus "passe-partout", de nombreux sites l’utilisent et proposent même une version Smartphone totalement dédiée (structure et CSS). Elle permet de s’en sortir si le site n’a pas été initialement développé pour supporter une version Smartphone uniquement adaptée via CSS (version trop lourde, ou trop gourmande). Cette solution est également efficace dans les besoins très particuliers (fonctionnalités comme la géolocalisation) : là une version totalement adaptée voir une application native est préférable.

Seul souci, le redéveloppement de la structure et de la présentation (voir d’une application native) a un coût non négligeable.

2) Utiliser les media-queries de CSS 3 :

Les media-queries sont une nouveauté introduite par CSS 3, elles sont déjà implémentées par bon nombre de moteurs de rendu : Webkit (Safari, Chrome), Presto (Opera) et Gecko (Firefox) étant les principaux. Le principe de fonctionnement bien que très puissant en est simple : les media-queries permettent d’appliquer des styles selon les paramètres du media (résolution, etc.). Plutôt qu’un long discours, un exemple de déclaration parlera de lui-même :

 < link rel="stylesheet" 
     type="text/css" 
     href="style_mini.css" 
     media="screen and (max-width: 480px)" />

ou via

@media screen and (max-device-width:480px) {
/** ici les styles qui vont bien **/
}

Notre CSS "style_mini.css" sera donc appliqué si le média est de type screen et si sa largeur maximale est de 480 pixels.

Voici deux exemples visuellement très efficaces :

Un autre exemple moins impressionnant, mais plus simple : une démo simple de media-query

(Pensez à redimensionner les fenêtres pour voir les changements)

Concernant le dernier exemple, nous pouvons voir que si la résolution passe en-dessous de 480px :

Avantages :

Inconvénients :

Si les concepts de CSS favorites ou persistantes ne vous disent rien, vous pouvez aller lire Avoir plusieurs présentations alternatives.

Exemple :

 < link rel="stylesheet" 
    type="text/css" 
    href="style.css" 
    title="default" 
    media="screen" />
 < link rel="stylesheet" 
    type="text/css" 
    href="style_mini.css" 
    title="Mini" 
    media="screen and (max-width: 480px)" />

Si la CSS principale et celle en media-query ont un attribut title différent, des bugs curieux peuvent se manifester. Autant éviter de spécifier un attribut title dans vos déclarations et ainsi préférer les CSS dites persistantes (sans attribut title), en précisant bien évidemment le média :

 < link 
     rel="stylesheet" 
     type="text/css" 
     href="style.css" 
     media="screen" />
 < link rel="stylesheet" 
     type="text/css" 
     href="style_mini.css" 
     media="screen and (max-width: 480px)"  />

Une bonne idée à retenir : il est possible d’intégrer le contenu via :

@media screen and (max-device-width:480px) {
// ici les propriétés 
}

Et ce directement dans la CSS prévue pour le 1024*768, cela évite d’avoir une profusion de fichiers CSS. Par contre, cela implique une double série de tests à chaque modification dans cette feuille de style.

Conclusion : cette solution permet de garder la structure existante du site sans la redévelopper et même une partie de sa présentation. Typiquement, un site développé via les principes des standards peut être adapté rapidement et efficacement ainsi. Seule contrepartie, votre structure devra être très bien étudiée pour utiliser les media-queries. :)

Conclusion

Comme nous avons pu le voir, plusieurs méthodes et plusieurs vitesses sont possibles dans l’adaptation d’un site pour les Smartphones, à vous de voir lesquelles choisir selon votre projet et ses contraintes.

Sans aucun doute, les standards du Web ont de solides arguments et permettent d’envisager cette nouvelle étape avec une certaine sérénité.

Références et liens :

Une question, une remarque ? Écrivez à l'auteur.

10 Messages de forum

Répondre à cet article

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par yterium (depuis 2010) et par l'APINC (2002-2010) . Propulsé par SPIP.