Responsive web design : Comment optimiser son site pour mobiles et tablettes (2ème partie)

Par raphaelle, publié dans Cas client, Web design le 06 juillet 2011

Tags : Ergonomie, intégration, media-queries

Dans un article précédent nous avons parlé des outils que nous avons choisi pour la réalisation du site secri.fr, afin d’en faire un site « responsive » (ou en français, « réactif »).

Cependant, avant de passer à l’intégration du site il nous a fallu repenser le design. En effet, le visuel du site en 960px de large avait déjà été validé par le client, avant que nous décidions d’en faire un site réactif.

Note : en principe une telle décision devrait se faire en amont et avec l’accord du client car cela représente plus de travail qu’un site statique (et donc un coût un peu plus important) mais nous avions envie d’expérimenter sur ce projet qui s’y prêtait bien.

Le design initial

Le design de départ, qui avait déjà été validé par le client, prenait la largeur classique de 960px.

Page d’accueil en 960px de large

 

Page listing des annonces en 960px de large

 

J’ai estimé qu’il faudrait prévoir 4 « versions » du site réactif.

• La plus petite irait jusqu’à 320px de large (ce qui correspond au mode portrait de l’iPhone)
• La suivante serait utilisée pour les largeurs entre 320px et 480px (480px étant la largeur de l’iPhone en mode paysage)
• La suivante pour les largeurs entre 480px et 768px (768px est la largeur de l’iPad en mode portrait)
• La dernière correspondrait au design conçu pour le site statique en 960px, et irait de 768px à 1000px de large.

Étant donné que le site secri.fr contient relativement peu de contenu, je n’ai pas vu l’intérêt de prévoir une largeur supérieure car l’interface aurait perdu en ergonomie et en esthétique.

Pour d’autres types de projet on peut tout à fait envisager des largeurs de fenêtre supérieures, comme le fait le site de 320 and up.

Adaptations du design

Page d’accueil en 768px de large

Je suis brièvement repassée par la case Photoshop pour visualiser la page d’accueil en largeur 768px. Il fallait surtout revoir la navigation car les éléments risquaient de ne pas tous rentrer à droite du logo. J’ai donc choisi de sortir le logo de la barre de navigation et de le centrer, ainsi que de centrer la liste des liens.

La liste des biens passe en mode horizontal, ce qui fonctionnera aussi très bien pour la version d’en dessous qui est de 480px de large, avec quelques adaptations.

Page d’accueil en 768px de large

 

Liste des annonces en 768px de large

Pour les pages « A louer » et « A vendre », il n’y a plus assez de place pour 4 annonces par ligne, on passe donc à 3 annonces seulement. Le reste ne change pas.

Page d’annonces en 768px de large

 

Pour les deux versions les plus petites (320px et 480px), je n’ai pas eu besoin de travailler dans Photoshop car le travail effectué sur la version de largeur 768px m’a permis de les visualiser dans ma tête pour ensuite les implémenter directement pendant la phase d’intégration.

Ce que je ferai différemment à l’avenir

• Je travaillerai probablement sur 2 ou 3 tailles du site en parallèle, sans forcément décliner tous les gabarits pour chacune d’entre elles. Il est très possible que je continue à me baser sur un design en 960px de large, tout en réfléchissant à chaque étape à mes choix graphiques et à la manière dont ils vont affecter la syntaxe HTML.
• Je réfléchirai un peu plus aux conséquences de mes choix ergonomiques sur la phase d’intégration, notamment pour éviter l’ajout de scripts supplémentaires.

Dans un prochain article je parlerai de la phase d’intégration. Celle-ci s’est déroulée relativement bien grâce à l’outil 320 and up mais il y a eu quelques petits soucis liés à javascript et à certains navigateurs, pour ne pas citer de noms…