Cours développement web

Développement web responsive guide complet


Télécharger Développement web responsive guide complet

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Développement web responsive guide complet

...

Qu'est-ce que le "Responsive Design" ?

Le Responsive Design, aussi nommé Responsive Web Design, désigne l’ensemble des méthodes et des techniques permettant l’utilisation optimale d’un même site web sur tout type de terminaux. Un site conçu en Responsive Design pourra être aussi bien consulté sur smartphone que sur ordinateur, en passant par la TV ou la tablette tactile (Figure 1). L'idée est de proposer une réorganisation dynamique du site en fonction de la largeur de l'écran sur lequel il est consulté. Historiquement, on attribue à Ethan Marcotte, webdesigner et développeur américain, le 1er article sur le sujet du Responsive Web Design (le 25 mai 2010, sur le blog « A List Apart »).



Pourquoi le Responsive Design ?

Les sites web sont consultés sur des supports multiples, avec des tailles et résolutions différentes (Figure 2).

Afin de s'adapter à tous ces terminaux, il est nécessaire de :

 Proposer autant de versions du site que de périphériques

 Prendre en compte le format paysage ou portrait pour les appareils mobiles

 Maintenir plusieurs versions du site

 Référencer les différentes versions

Le Responsive Design répond à l'ensemble de ces problématiques.

En se basant sur la largeur de l'écran du terminal, la zone d’affichage est changée dynamiquement grâce aux feuilles de style (CSS3).

Pour savoir si un site a été développé en Responsive Design, il suffit de modifier la taille du navigateur et d’observer si le contenu se réorganise automatiquement (par exemple : miratech.fr ).

Avec le Responsive Design, l'expérience utilisateur est grandement améliorée :

 La conception en Responsive Design permet d'éviter le développement spécifique d’une version mobile.

 L'utilisateur retrouve les mêmes informations partout et a le sentiment d'avoir un site vraiment adapté.

 Les contraintes liées au coût de maintenance sont allégées puisqu'une seule mise à jour fonctionne pour tous les terminaux.

 Un meilleur référencement est possible car l'adresse du site est unique pour tous les terminaux.

Il est nécessaire de passer du temps sur la mise en place d'un site en Responsive Design.

La phase de conception en amont est très importante pour avoir un support abouti sur tous les formats. Des connaissances techniques et ergonomiques poussées sont indispensables : il ne suffit pas de "déplacer des blocs".

La suite de ce document va présenter plusieurs guidelines à propos des sujets suivants :

 Les blocs de contenus : c’est l'essence même du Responsive Design, il faut penser par "bloc de contenu"

 Les menus pour terminaux mobiles : présentation de 7 façons différentes d'organiser son menu pour les appareils mobiles

 Les visuels : explications à propos de l'adaptation des visuels pour une vue mobile

 Les éléments cliquables : adaptation des éléments d'interaction pour vue mobile et règles générales d'ergonomie sur mobile

 Les fonctionnalités des terminaux mobiles : précisions sur les fonctionnalités spécifiques aux appareils mobiles et pièges à éviter

 Le développement en Responsive Design

Enfin ce livre blanc présentera un cas concret sur un site e-commerce récapitulant les guidelines précédentes.

… … …

Les blocs de contenu

Penser en bloc

L'idée principale du Responsive Design est basée sur des blocs.

Les blocs représentent un contenu ayant une hauteur et une largeur spécifique.

Voici quelques exemples de blocs pouvant apparaitre dans votre site :

 Bloc "header", constitué du logo, du nom du site et d'éventuelles interactions annexes

 Bloc "index", constitué des dernières informations ou des produits que le site veut mettre en valeur



 Bloc "menu", permettant d’accéder aux pages principales du site. Voir la partie suivante, « Les menus pour terminaux mobiles » pour plus d'informations

 Bloc "annexe", constitué d'informations annexes et souvent situé sur le côté gauche ou droit du site en vue sur ordinateur

 Bloc "produit", pour un site e-commerce, constitué au moins d'une image, d'une description, d'un prix et d'informations complémentaires

 Bloc "commentaires" des consommateurs ou des visiteurs

 Bloc "footer", constitué des liens secondaires du site et bien souvent du plan du site

Conserver un ordre logique

Les blocs du site css-tricks (Figure 3) sont organisés différemment sur les 3 vues : ordinateur, tablette et smartphone. Le bloc "header" est repéré en violet, "index" en vert, "annexe1" en rouge, "annexe2" en bleu et "footer" en orange. Le bloc "menu" n'est pas représenté ici, il sera détaillé plus tard.

L'exemple suivant montre un site e-commerce avec un seul bloc annexe (Figure 4) :

La structure des blocs doit être cohérente pour tous les terminaux. Suitsupply réordonne les blocs en fonction de la taille de l’écran. Plus généralement, il faut conserver un ordre logique sur tous les formats pour ne pas perdre les utilisateurs.

Adapter les blocs

L'affichage des blocs pour un site "Responsive" doit être adapté aux différents terminaux. La version ordinateur est plus large. Elle a souvent plus de colonnes que les autres versions. Les blocs doivent donc être déplacés pour des écrans plus petits. La largeur de la page est réduite sur appareil mobile et sera compensée par une augmentation de la hauteur. De plus il faut sélectionner les blocs réellement pertinents sur smartphone. L'exemple suivant (Figure 5) illustre ces deux points en montrant la grande taille de l'article sur smartphone et la réduction des commentaires, cachés par défaut.

Ceci est valable pour tous les sites : il faut adapter le contenu. Bien que la visualisation du site Alsacreations soit très agréable sur ordinateur, il est difficilement consultable sur smartphone (Figure 7). Les pages sont trop longues. En Responsive Design, le formatage du contenu doit aussi être différent. La diminution de la largeur des blocs augmente le nombre de retours à la ligne. Le site css-tricks (Figure 6) a choisi de solutionner ceci en diminuant légèrement la taille de la police sur smartphone. Le confort de navigation est donc conservé pour l'utilisateur.

Cependant, il faut aussi faire attention à ne pas configurer la taille que sur smartphone puisque le texte pourrait être trop grand sur ordinateur. A l'inverse, un texte trop petit sur ordinateur pourra être difficilement vu sur smartphone. Il faut gérer les deux cas séparément. Le Responsive Design ne se limite donc pas au simple déplacement de blocs pour être pertinent.

Les menus pour terminaux mobiles

Etant donné la petite taille des écrans mobiles, il est nécessaire de repenser les menus initialement développés pour ordinateur. Dans cette partie, plusieurs types de menus adaptés au mobile sont illustrés et présentés, en détaillant leurs points forts et points faibles. Ces exemples sont tirés des excellents sites Design Spartan () et Brad Frost

… …

La présentation du menu en haut de page est une des solutions les plus simples (Figure 8). Ce type de menu permet une mise en place très facilitée puisqu'il y a peu de changements de code. Ainsi, en restant dans le "header" ou en tête du site, le menu est très facilement identifiable tout en restant personnalisable en termes de design. Un autre avantage est que le JavaScript n'intervient pas ce qui facilite la compatibilité. Ce type de mise en page réduit considérablement la place du site en version smartphone. Ainsi, le menu est généralement ajusté et formaté d'une certaine façon, ce qui rend délicat l'ajout de nouvelle section ou la lecture du menu avec une autre typographie (comme cela peut arriver sur les téléphones Android)



La transformation du menu en liste déroulante, grâce à la commande <select>, est une très bonne façon d'adapter les menus (Figure 9).

Un menu important peut être intégré sans prendre trop de place.

De plus, la maintenance est facilitée car des items peuvent être facilement ajoutés. Ce type de menu doit nécessairement être situé dans le "header" ce qui lui permet d'être facilement identifiable à l'aide de l'icône ou du libellé associé. Enfin, l'utilisation du <select> permet une bonne compatibilité puisque tous les navigateurs mobiles intègrent nativement une interaction optimisée avec les listes déroulantes.

Cependant le menu utilisera forcement l'affichage du navigateur par défaut. On fait donc abstraction des couleurs et de la typographie.

Enfin le JavaScript est nécessaire pour modifier un menu de type liste, ce qui peut parfois poser des problèmes de compatibilité.

Nous conseillons de choisir ce type de formatage de menu très efficace pour la plupart des sites. Il intègre une bonne compatibilité avec un développement minimal, tout en permettant une maintenance efficace et une gestion de la place intéressante.

La mise en place d'un menu "toggle", ou menu à bascule (Figure 10), ressemble beaucoup à celui présenté précédemment. En effet, il libère de la place dans l'en-tête du site et reste facilement identifiable. L'ouverture de ce menu est effectuée de manière élégante puisqu'une animation permet une personnalisation bien plus grande. Par contre, l’animation d'ouverture de menu peut ralentir la page. De plus, la typographie ou l'utilisation de JavaScript peuvent poser des problèmes de compatibilité. Enfin, comme précédemment, il est nécessaire d'associer un bouton affordant pour révéler la présence d'un menu, surtout si la présentation diffère de la version ordinateur ou tablette.

… …

Les visuels

Supprimer les visuels trop importants

La présentation des images doit être adaptée au support utilisé.

Sur ordinateur les images donnent du dynamisme à la page et la rendent beaucoup plus attractive pour les utilisateurs.

En revanche sur les smartphones l’espace disponible est plus réduit.

De plus, la navigation en situation de mobilité engendre des besoins différents :

 L’accès direct au contenu recherché devient primordial

 Les utilisateurs auront moins tendance à s’attarder sur des photos sur un petit écran de smartphone que sur un écran d’ordinateur

 Les connexions plus faibles en situation de mobilité nécessitent l’utilisation d’images ou vidéos de poids réduits afin d’être chargées plus rapidement

Il est donc nécessaire de supprimer les images de trop grande taille sur la version smartphone.

Les deux sites présentés ci-dessous sont de bons exemples où les visuels de la version ordinateur ont été retirés de la version mobile (Figure 15, Figure 16).



103