Sites adaptés aux mobiles – Recommandations

De Damien Bouvier dans Design

3 oct 2012

Beaucoup de personnes utilisent un smartphone pour aller sur internet, et de plus en plus de personne veulent donc un site compatible avec ces dits smartphones.

Je ne vais pas faire un énième guide sur les bonnes pratiques pour réaliser un tel site, le web en est déjà bien rempli, mais je vais regrouper ici les sites ayant les informations les plus complètes pour vous permettre de produire un site adaptable aux smartphones.

1ère étape : chercher l’inspiration

Avant de commencer à créer votre site, vous allez surement commencer à chercher des exemples de sites s’adaptant aux smartphones. Je ne vous en conseillerai qu’un seul, mais un bien :
- http://mediaqueri.es/

Ce site référence de nombreux sites ayant un design responsive basé sur les media queries.

Les média quoi ? …

Les média queries ! C’est ce qui va permettre à votre site de s’adapter aux périphériques utilisé en détectant la résolution de son écran, sa position (mode portrait ou paysage) et bien d’autre.
Pour avoir une liste de ceux ci :
- http://www.w3.org/TR/css3-mediaqueries/

Ou pour ceux qui n’aiment pas trop l’anglais je vais être sympa :

- http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Templating

Bien, maintenant que vous avez trouvé votre inspiration et que vous savez ce que sont les média queries on peut passer aux choses sérieuses, la création de votre template.

Pour ceux qui ont la chance d’avoir Dreamweaver CS6, vous aurez la chance d’avoir un outil intégré permettant de créer vos templates responsives (je m’en sers, et il fonctionne très bien). Pour ce faire choisissez :  “Fichier > Nouvelle mise en forme de grille fluide”  Et là vous pouvez paramétrer sur quelle largeur vous partez, et choisir le nombre de colonnes. Oui car en responsive, on ce base sur une grille à plusieurs colonnes pour définir les comportements selon les résolutions afin de garder une certaine homogénéité, garder toujours la même marge entre les blocs, et garder les bonnes proportions (Exemple de grille)

Pour construire un site responsive il ne faut pas penser en pixel mais en pourcentage. Chaque colonne représente un % de l’affichage. Par exemple, admettons que j’ai une div principale de 900px, qui représente donc 100% de mon écran, si à l’intérieur j’ai une div de 400px sont width sera donc de :

(400 / 900) x 100 = 44%

Ainsi, peu importe la taille de mon écran, la div s’adaptera à la taille de l’écran.

Un conseil important : Commencer toujours par les styles de la version  smartphone basse résolution, il est plus facile de partir de la template la plus basique et d’aller vers la plus complexe que l’inverse.

Pour créer votre template, je vous conseille :
- http://html5boilerplate.com/
Qui contient les CSS et JS nécessaires à la création de votre template.

Quelques tutos ou aide pour la création d’un design responsive :

Les script jQuery utile

Commentaire

neuf + = 12

iMDEO recrute !

REJOIGNEZ-NOUS

A la recherche de nouveaux talents (développeurs web et mobile, chefs de projet,...)

Voir les annonces