Archive pour la catégorie ‘Cas client’

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

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

Après les phases initiales de recherche et de design que nous avons abordé dans deux articles précédents, vient le temps de l’intégration HTML et CSS.

En principe ce n’est pas très compliqué : il suffit de suivre la méthode de 320 and up qui consiste à intégrer d’abord pour la taille de fenêtre la plus petite.

Je dis « en principe », car nous avons rencontré un certain nombre de difficultés, notamment avec Internet Explorer 7 et 8, malgré les outils javascript fournis dans le template.

Note : Comme pour la majorité des sites que nous réalisons, nous avons décidé de ne pas supporter IE6 pour ce projet.

L’intégration pour 320px et 480px de large

Note : Pour tester j’ai utilisé un iPhone 3GS ainsi que Firefox 3.6, Chrome, Safari, IE7 et IE8 sur desktop. J’aurais voulu pouvoir tester sur d’autres smartphones mais je n’avais pas cette possibilité.

Andy Clarke propose deux versions du template : la première avec une feuille de style unique et la seconde avec de multiples feuilles de styles. J’ai préféré travailler avec plusieurs feuilles de styles car cela me paraissait plus « propre », mais c’est un choix très personnel.

On commence donc par style.css qui est la feuille de style de base. Elle correspond à une largeur de fenêtre de 320px au maximum.

La méthode de 320 and up consiste à intégrer d’abord pour les plus petits formats, et de rajouter des feuilles de styles les unes au dessus des autres en allant vers le format le plus large.
Cela signifie que les règles CSS contenues dans style.css seront prises en compte par toutes les tailles écrans. Certaines devront être écrasées par la suite afin de positionner les éléments d’une nouvelle manière pour une taille de fenêtre supérieure.

Pour les écrans allant jusqu’à 480px de large, on doit penser aux appareils mobiles de type smartphone. Les zones cliquables doivent être suffisamment larges pour effectuer un « clic » avec le doigt. On peut faire le choix de masquer certains éléments s’ils sont superflus et si leur absence peut rendre l’interface plus claire et intuitive.

Dans une logique d’optimisation et de performance, on évitera l’utilisation d’images de fond volumineuses, et on limitera les effets graphiques d’une manière générale.

L’utilisateur d’un appareil mobile a très peu de patience – encore moins que sur un ordinateur classique – c’est pourquoi il est si important de peaufiner l’ergonomie de l’interface pour les petits formats.

Une fois satisfaite du résultat sur mon iPhone en mode portrait, je suis passée à l’intégration du mode paysage, c’est à dire en 480px de large. Rien ne nous oblige à tout changer pour chaque taille d’écran. Je pense que le passage de 320px à 480px demande un petit travail d’adaptation qui n’est pas radical dans un le cas d’un site comme celui-ci.

En l’occurrence j’ai principalement changé la présentation des biens sur la page d’accueil et sur les pages « A louer » et « A vendre » pour que la fiche du bien passe en mode horizontal. L’image est plus petite qu’en mode portrait mais au moins on voit toutes les informations en un clin d’oeil.

Si j’avais laissé exactement les même styles qu’en 320px de large, la photo du lieu aurait paru énorme et il aurait fallu scroller pour voir les information relatives à un lieu.

Annonce immobilière sur la page d’accueil en 320px de large (iPhone)

Annonce immobilière sur la page d’accueil en 480px de large (iPhone)

L’intégration pour 728px et 992px de large

Le passage entre les versions 728px et 992px de large était un petit peu plus complexe, notamment à cause du header et de la navigation que je devais adapter. Je m’en suis souvent sortie en ajoutant plus de markup (généralement des DIVs), chose qui n’est pas idéale.

En effet, si le site avait été de largeur statique, j’aurais utilisé beaucoup moins de balises mais puisque la disposition de certains éléments doit pouvoir changer, il faut de quoi les positionner de différentes manières : tantôt avec un positionnement absolu ou relatif, tantôt avec un float.

Il faut jongler avec les différents éléments du HTML et de CSS pour arriver à ses fins et ne pas oublier de tester le site sur différentes tailles d’écran et sur tous les navigateurs à supporter lorsque l’on apporte des changements à une feuille de style.

Pour les pages « A louer » et « A vendre » j’ai souhaité utiliser des selectors CSS3 grâce à Selectivizr et à un plugin pour jQuery qui étend le support des pseudo-class et selectors CSS3. J’aurais voulu pouvoir utiliser des selectors tels que nth-of-type(2n+4) sur tous les navigateurs, mais après quelques échecs nous avons abandonné cette belle idée car cela ne fonctionnait pas sur Internet Explorer.

Nous comptons revenir sur ce problème prochainement afin de comprendre d’où est venu cet échec.

Page d’annonces en 768px de large

Page listing des annonces en 960px de large

Adaptation de 320 and up

Sur la page d’accueil j’avais prévu deux colonnes à hauteur égale pour « Syndic » et « Gestion locative ». Dans ce cas de figure j’étais obligée de recourir à un petit peu de javascript pour calculer la hauteur de la colonne la plus haute et forcer la hauteur de l’autre colonne. C’est très facile à implémenter, cependant le problème est que si la fenêtre est redimensionnée, la hauteur des colonnes ne change pas.

Pour résoudre ce problème j’ai « triché » en ajoutant suffisamment de padding-bottom pour que le texte ne déborde pas lorsque la largeur d’écran est réduite.

Cependant, le vrai problème était pour les versions 320px et 480px car étant très étroites, j’ai voulu positionner les colonnes l’une au dessus de l’autre. Comme je ne souhaitais plus qu’elles aient la même hauteur, j’ai ajouté une media-query et une feuille de style pour viser toutes les largeurs de fenêtre en dessous de 768px.

Le seul style que cette feuille de css contient est :

section.homeMainContent article {
height: auto !important;
}

Ainsi, la j’écrase la hauteur générée par le javascript afin que les deux colonnes prennent une hauteur « naturelle », en fonction de leur contenu.

Internet Explorer…

En théorie 320 and up contient je javascript nécessaire au bon fonctionnement des media-queries sur Internet Explorer.

Lors de la phase d’intégration j’étais assez contente du résultat sur IE7 et IE8 sur XP et Windows 7, même si ce n’était pas parfait à 100% ; certains éléments de l’interface ne se positionnaient pas tout à fait comme ils auraient dû lors du redimensionnement de la fenêtre. Néanmoins, ces légers « bugs » me paraissaient suffisamment discrets pour que le site soit mis en ligne tel quel.

Après la mise en ligne du site, le client nous a signalé un problème que nous n’avons pas réussi à reproduire à ce jour : sur 2 de leurs ordinateurs, seule style.css était prise en compte, ce qui donnait un résultat catastrophique sur un écran classique.

Nous avons l’intention d’investiguer mais pour l’instant nous préférons fournir une version statique en 960px de large aux utilisateurs d’Internet Explorer 7 et 8. A suivre…

Dans le prochain article je ferai le bilan de cette expérience : je vous donnerai quelques astuces pour réussir votre site réactif, et je vous ferai part des leçons apprises grâce à cette aventure, dans l’espoir de vous éviter de vous confronter aux mêmes problèmes.

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…

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

Par raphaelle, publié dans Cas client, Web design le 28 juin 2011

Tags : Ergonomie, intégration, media-queries

Nous avons récemment mis en ligne le site secri.fr, pour une agence immobilière située en région parisienne. Nous l’avons intégré de sorte qu’il soit « réactif ». En anglais on parle de « responsive web design« .

En pratique, cela signifie qu’on utilise les media-queries (CSS3) pour appliquer des styles différents selon la taille de l’écran, de la fenêtre, ou encore de l’orientation d’un appareil mobile (smartphones et tablettes).

Cela permet donc de présenter à l’utilisateur un design et une ergonomie optimisés pour chaque type d’appareil qu’il utilise ainsi que pour la taille de la fenêtre de son navigateur.

Pour voir de quoi il s’agit, amusez-vous à redimensionner la fenêtre de votre navigateur lorsque vous êtes sur secri.fr.

Notons que selon les projets, il peut être préférable de créer un site ou une application mobile séparés. Cependant, dans la plupart des cas, l’utilisation des media-queries est la meilleure option car elle est relativement facile à implémenter et reste peu coûteuse.

Les problèmes liés à la création d’un site réactif

Lorsqu’on approche le sujet pour la première fois, cela peut paraître très complexe car très vite, on comprend qu’il va falloir changer ses méthodes de travail.

Quelques questions peuvent venir à l’esprit :

• Dois-je créer une maquette graphique pour chacune des différentes apparences du site ? Cela représente beaucoup de travail et d’échanges avec le client !
• CSS3 ne fonctionne que sur les navigateurs récents ; que faire des navigateurs plus anciens ?
• Comment aborder la phase d’intégration ?
• Est-ce compliqué d’obtenir différentes « versions » d’un site en gardant la même syntaxe HTML ?

Lors de la réalisation du site de Secri Gestion, notre premier site réactif, je me suis confrontée à ces problématiques. Je vais vous faire part du cheminement que nous avons suivi en espérant que cela vous aidera à réaliser vos sites.

L’idée de départ

Peu avant de commencer l’intégration de secri.fr, j’ai trouvé le template 320 and up, créé par le talentueux Andy Clarke. C’est une extension de HTML5 Boilerplate (par le tout aussi talentueux Paul Irish) que nous utilisions déjà pour tous nos sites.

Ces templates, composés de HTML, de CSS et de Javascript, sont une très bonne base pour créer un site réactif en bénéficiant des meilleures pratiques. Grâce au Javascript fourni, même Internet Explorer 6 se comportera comme un navigateur moderne. Enfin presque.

Plus qu’un template, 320 and up est une méthode de travail. C’était ça la vraie nouveauté pour moi car j’ai dû repenser ma manière de travailler. En effet, pour un site statique on passe généralement du design à l’intégration d’une façon assez linéaire.

Dans le cas d’un site réactif ayant 4 apparences différentes (la première pour les fenêtres allant jusqu’à 320px de largeur, puis jusqu’à 480px, 768px, et supérieure à 992px), il va falloir travailler autrement. La méthode d’Andy Clarke consiste à intégrer d’abord la version la plus petite, puis à passer au cran au dessus et ainsi de suite, jusqu’à l’intégration de la version la plus large en dernier. Ayant tenté le procédé inverse par le passé, je ne suis pas prête de revenir en arrière car c’était laborieux !

A noter que nous souhaitions réaliser un site à la fois réactif et flexible, c’est à dire qu’au lieu de « sauter » d’une apparence à l’autre lors du redimensionnement de la fenêtre, les éléments devaient s’adapter à la largeur de la fenêtre avec souplesse. Il fallait donc utiliser des pourcentages pour les largeurs des différents éléments.

Nous verrons dans un prochain article comment je m’en suis sortie au niveau du design, puisque la maquette graphique faisant 960px de large avait déjà été validée par le client.

Deuxième partie de cet article : la phase de design

Cas client : association Germaine Tillion

Par Thibaut, publié dans Cas client le 19 octobre 2008

Tags : cms, germaine tillion

Lorsque le projet de refonte du site de l’association Germaine Tillion est arrivé, la cahier des charges était clair : offrir au site un relooking, tout en conservant les fonctionnalités existantes. Une excellente opportunité pour explorer les capacités de WordPress, outil très utilisé dans la blogosphère, et de voir comment il s’utilise en tant que CMS (Content Management System, « Outil de Gestion de Contenu » in french).
(Lire la suite…)