Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Matthieu Napoli

blog technique

Le Responsive Web Design - Exemple

English version of that article: The responsive web design by example.

L'expression Responsive Web Design veut dire en gros : le design de ce site web s'adapte à la taille de l'écran. Et par "s'adapte", il ne s'agit pas seulement d'utiliser des tailles horizontales en % de la taille de l'écran. Il s'agit parfois de changer complètement l'organisation visuelle de la page affichée.

Techniquement, c'est rendu possible par les media queries introduites dans CSS 3. Elles permettent de restreindre l'exécution de règles CSS en fonction de conditions, notamment la taille de l'écran.

Pour aborder concrètement le sujet par un exemple, je vais présenter la refonte graphique que j'ai opéré sur un projet en cours : Awespot. Instant publicité : il s'agit d'un site de partage et découverte de lieux à visiter dans le monde (utile pour préparer votre prochain voyage).

Cette refonte graphique s'est appuyée sur la mise en place du framework HTML/CSS/Javascript Bootstrap (créé par Twitter), qui propose justement des classes CSS de base pour mettre en place du Responsive Web Design rapidement. Au passage, j'en profite pour recommander (très) chaudement ce framework: mise en place très rapide (même sur de l'existant), gains immédiats et maintenabilité accrue du code HTML/CSS. Et surtout, c'est un plaisir de développer avec.

Exemple

Ci-dessous l'exemple en question. Il s'agit d'une comparaison de 2 versions d'Awespot : une avec et une sans le Responsive Web Design.

Excusez les différences annexes : la refonte graphique du site est passée par là entre les 2 versions.

Page d'accueil

La page d'accueil est une carte présentant les lieux à visiter dans le monde. Elle est très simple et épurée pour intriguer et favoriser le "play" plutôt que l'effort de compréhension. Son affichage est crucial pour ne pas perdre un nouveau visiteur : si elle ne s'affiche pas correctement sur les tablettes ou téléphones, c'est autant de visiteurs perdus.

Écran large

Sans Responsive Web Design :


Avec Responsive Web Design :

On remarque que la version initiale était prévue en largeur fixe plus petite : c'était un compromis pour être visible sur les écrans plus petits. Avec le Responsive Web Design on peut s'autoriser une largeur maximum plus grande (même si pour l'instant elle ne s'étant pas beaucoup plus).

Tablette (ou petit écran)

Sans Responsive Web Design :

Le cadre rouge délimite la partie visible dans le navigateur.

Avec Responsive Web Design :


Là la barre de menu de gauche (ajout d'un spot) a disparu, laissant entièrement la place à la carte (celle-ci n'est pas centrée car je l'ai décalée involontairement).

Pour le menu principal (en haut de page), il est rétréci. Le logo l'est également, pour laisser de la place au menu.

Téléphone / Smartphone

Sans Responsive Web Design :


Encore une fois le cadre rouge délimite la partie visible dans le navigateur.

Avec Responsive Web Design :


La différence est sans appel. Alors que le site est complètement inutilisable dans le premier cas, il s'épure et prend presque la forme d'une application mobile dans le deuxième.

Notez également le menu du haut qui a encore changé : le logo a énormément rétréci pour laisser la place au menu, plus petit et décalé à gauche. Quelques marges ont également rétrécies.

Page de spot

La page d'un spot présente un lieu à visiter. Elle regroupe beaucoup d'informations, donc sa réorganisation n'est pas simple en soit.

Écran large

Sans Responsive Web Design :


Avec Responsive Web Design :


(ignorons les données du jeu de test)

Ce format représente l'affichage prévu de la page. Les différences entre les 2 versions sont dues à la refonte graphique (rendue possible si facilement grâce à Bootstrap, je me répète).

Tablette (ou petit écran)

Sans Responsive Web Design :


Avec Responsive Web Design :


Très grosse différence pour ce cas : les différents blocs (note et boutons, texte, carte, photos...) se sont complètement réorganisés automatiquement. Ils sont maintenant empilés pour rendre la lecture très facile et agréable.

Notez que le site n'est pas défiguré pour autant, c'est très appréciable. J'ai du procéder à quelques ajustements spécifiques, notamment l'affichage en ligne des boutons bleus. De plus, tous les cadres d'images vides (cadres gris) ont disparus (ils participent au joli rendu sur la page entière, mais à ce format ils prennent de la place pour rien).

Téléphone / Smartphone

Sans Responsive Web Design :


On imagine que le site est quasiment inutilisable sur téléphone dans cet état.

Avec Responsive Web Design :


Le site est là encore plus vertical, mais toujours pas défiguré. Le menu principal s'est encore plus compacté (comme vu plus haut).

Démo

Pour voir la démo de tout ça en temps réel, allez directement sur awespot.org et redimensionnez l'écran.

Conclusion

La mise en place de Responsive Web Design est une bonne alternative à un site web dédié aux mobiles. C'est surtout plus rapide, plus facile, moins cher et beaucoup plus maintenable. Mais le principal avantage réside dans la souplesse du résultat : aujourd'hui, la frontière entre PC et mobile n'existe plus. Les smartphones sont de plus en plus grand, certains avec des écrans à haute résolution, sans compter les tablettes.

Un peu de technique

Tout a été réalisé entièrement en CSS (pas de Javascript). Bootstrap a été très utile dans le processus de mise en place, je vous invite à lire plus d'informations ici : Boostrap Responsive Design.

Voici un exemple de media-query en CSS :

@media (max-width: 480px) {
   #logoSmall img {
     max-height: 70px;
   }
}

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: samedi 5 mai 2012 23:41 par MadMatt

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- [ SharePoint Summit 2014 ] L’utilisation de SharePoint 2013 pour la mise en place d’un site Internet Grand Public par Le blog de Patrick [MVP SharePoint] le il y a 9 heures et 14 minutes

- [ SharePoint Summit Montréal 2014 ] Mes présentations sont en ligne par Le blog de Patrick [MVP SharePoint] le il y a 11 heures et 50 minutes

- [ SharePoint Summit Montréal 2014 ] L'intelligence d'affaire dans O365 : enfin facile et économique grâce aux dernières évolution de la Power BI par Le blog de Patrick [MVP SharePoint] le il y a 12 heures et 58 minutes

- [ SharePoint Summit Montréal 2014 ] Kit de démarrage rapide pour de la collaboration en mode Intranet avec SharePoint par Le blog de Patrick [MVP SharePoint] le 04-14-2014, 18:40

- [ SharePoint Summit Montréal 2014 ] Une conférence francophone majeure autour de SharePoint par Le blog de Patrick [MVP SharePoint] le 04-14-2014, 15:52

- [status.modern.ie] Tout savoir sur les futures versions d'Internet Explorer par Philippe Didiergeorges Aka Philess le 04-08-2014, 11:07

- Problèmes de compatibilité avec Visual Studio 2013 ? par Blog de Jérémy Jeanson le 04-07-2014, 22:04

- [ #Yammer ] Comment basculer l’interface en français ? par Le blog de Patrick [MVP SharePoint] le 04-06-2014, 15:29

- [WF] Programmer n’est pas jouer par Blog de Jérémy Jeanson le 04-03-2014, 06:24

- MBA : Quelle formation après un MBA ? par Blog Technique de Romelard Fabrice le 03-26-2014, 12:37