Aller directement au contenu

Qu’est-ce que le Responsive Webdesign ou adaptative Design ?

15/05/2018
0

Responsive design design adaptatif

Le Responsive Web Design (RWD) ajuste automatiquement l’affichage d’une page web à la taille d’écran du terminal utilisé. Cette technique de conception de site web, ou d’interface digitale, répond à un besoin des utilisateurs, toujours plus nombreux à se connecter sur le web depuis un appareil mobile.

Le Responsive Design permet de faciliter la navigation et d’améliorer l’expérience utilisateur lorsqu’il s’agit de consulter le site sur un appareil mobile. Le Responsive Web Design est souvent confondu avec un concept plus large, l’Adaptive Design. Design responsive ou Design adaptatif, les deux méthodes de conception visent à améliorer l’ergonomie mobile du site web. C’est un enjeu majeur pour les entreprises, tant en termes de référencement que pour s’adapter aux nouveaux usages.

Qu’est-ce que le Responsive Design ?

Le Responsive design a été traduit en français par Design réactif/adapté/réceptif. Ce design permet de modifier la mise en page d’un site afin que le contenu s’adapte à l’écran quel que soit le terminal utilisé (smartphone, tablette, ordinateur de bureau, TV…). Il s’agit d’adapter le site à toutes les résolutions. Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.

Principe Responsive WebDesign

Aperçu de l’adaptation du contenu selon l’appareil utilisé : ordinateur (desktop), tablette ou mobile
(schéma d’Alex Gaslang via Eyrolles)

Le CSS3 a rendu possible le Responsive Web Design

Le Responsive Web Design a bénéficié de l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Un site pensé en Responsive Web Design est conçu ainsi :

  • Une seule base de code HTML identique pour tous les terminaux.
  • Un système de grilles fluides où se placent les contenus de la page.
  • L’utilisation des CSS3 Media Queries pour appliquer la feuille de style adéquate.
  • Des images flexibles/adaptatives dont la taille/résolution s’ajuste automatiquement.

Lorsque l’objectif est atteint, l’interface du site web est lisible et utilisable sur tous les appareils. Le contenu se rétrécit et s’agrandit à volonté sans changer. Néanmoins, il est possible de cacher un contenu. Par exemple, une image ou un texte peuvent n’être visible que sur le site web en mode ordinateur (desktop) et tablette, et absents pour un affichage sur mobile.

Responsive design mobile first

On voit clairement l’avantage d’un contenu qui s’adapte à l’appareil utilisé, ceci évitant de zoomer pour lire le texte ou naviguer
(via Usine Digitale)

Le Responsive Design s’appuie sur des règles, lesquelles dictent le rendu visuel. Les points de rupture/points d’arrêt (breakpoints) sont ainsi les valeurs utilisées pour définir les intervalles selon les gabarits de pages, intervalles associés aux catégories de terminaux.

Mais il y a aussi quelques inconvénients…

Le responsive Web Design charge l’ensemble du fichier CSS, y compris les informations destinées à un affichage sur ordinateur, ce qui peut retarder l’affichage sur les appareils mobiles.  On le verra plus bas, certains sites ayant des besoins critiques en rapidité d’affichage ou une utilisation de certaines fonctionnalités natives des appareils mobiles, gagneront à s’orienter vers d’autres solutions.

Responsive design CommitStripUnresponsiv design – CommitStrip.com

Simulateur ou émulateur responsive design

Comment vérifier si votre site s’affiche bien en responsive Design ?

Que connaissez-vous des différents types d’adaptation du contenu de votre site ?

  • Statique
  • Liquide
  • Adaptatif
  • Responsive

Faites le test sur www.liquidapsive.com

Il y a de nombreux outils permettant de simuler l’affichage mobile d’un site conçu en responsive Design. Voir notre article qui en présente quelques-uns : Quels outils pour prévisualiser votre site responsive ?

Testez votre site pour vérifier s’il est bien « mobile friendly » selon Google.

Test Google mobile friendly

Google propose son propre test d’optimisation mobile afin de vérifier si votre site est bien adapté à une utilisation sur mobile

Pourquoi un site doit-il être « mobile friendly » ?

Reprenons au début. Un site mobile friendly est un site conçu pour que la navigation et l’affichage soient optimaux sur un mobile. L’utilisateur n’a pas besoin de zoomer/dé-zoomer avec deux doigts (« pinch to zoom ») ni de faire défiler la page dans tous les sens pour comprendre où se trouve le menu, voir correctement l’image, lire le texte etc. Bref, un site mobile friendly apporte un confort visuel sur une interface mobile. Voici quelques exemples d’éléments importants pour un site mobile friendly :

  • Les textes sont dans une police de caractères suffisamment grande pour être lisibles
  • L’espace entre les boutons et les liens permet un accès tactile aisé.
  • Les images et médias sont transmis et adaptés au format.
  • Le mobinaute pourra remplir facilement les formulaires.

Début 2015, pour la première fois dans le monde, le nombre de mobinautes a surpassé le nombre d’internautes. La conception pour les sites mobiles est devenue indispensable.

Evolution utilisateurs mobiles dans le monde

Source : agence SEO.fr

Évolution des utilisateurs d’internet dans le monde : Mobile VA ordinateur de 2007 à 2015 (Morgan Stanley Resarch)

« L’invention » du Responsive Web Design

En mai 2010, Ethan Marcotte, designer, publie un article sur le webzine « A List Apart ». Il y aborde pour la première fois le concept de Responsive Design, qu’il développe dans un livre (« Responsive Web Design ») un an plus tard.  Comparé à un design statique, un site web responsive présente différents avantages, notamment :

  • Centraliser les contenus en gérant les CSS selon le terminal
  • Création et maintenance du site plus rapide et plus facile
  • Design et contenus identiques, donc familiers pour l’utilisateur

Responsive Webdesign templates

L’adaptation aux différents résolutions des appareils… pas si simple !

La prise en compte des différents appareils (devices), en CSS, c’est…

Responsive webdesign devices CommitStripP*** de devices !
La révolution mobile vue par les développeurs CSS  –
CommitStrip.com

Responsive Design tailles écrans résolutions en France

Voir sur Designersinteractifs.org: parts de marché des définitions d’écran en France

Responsive Design VS Adaptive Design : quelle différence ?

Le Responsive Design se définit comme un contenu qui « s’adapte » à l’écran, d’où la confusion fréquente avec l’Adaptive Design. Le Responsive Web Design doit plutôt être vu comme un sous-ensemble de l’Adaptive Design (souvent traduit par « conception évolutive »).

RWD vs Adapt example

Comportement du responsive design face vs design adaptatif

Différence affichage Responsive design VS Adaptative Design

Différence entre l’affichage d’un site dite réalisé en responsive design et d’un site en design adaptatif

Design fluide

Le Responsive Web Design offre une expérience utilisateur UX fluide. Dans un design fluide (ou Liquid Design), il s’agit de faire « couler » le site web, sans heurts, dans l’espace qui lui est attribué, comme un liquide dans un récipient.

A tester sur ce site http://www.liquidapsive.com/

Responsive Webdesign Stéphanie Walter

By Stéphanie Walter via Wikimedia Commons

Concrètement, la conception (largeur des colonnes…) se fait à partir de variables (par exemple, les pourcentages) pour s’agencer à la taille de la fenêtre. Le responsive design améliore ce procédé grâce au CSS3. Lors de la conception d’un site responsive, sont prises en compte : la taille en pourcentage, mais également les proportions, le sens dans lequel l’appareil est utilisé (portrait ou paysage), la résolution de l’écran (en pixels), les couleurs, etc. Ces données sont transmises en totalité quel que soit le réceptacle mais en s’adaptant à ses dimensions. C’est une manière d’universaliser un site Internet en se basant sur l’affichage.

Un exemple : l’email responsive

L’adaptative Design

L’Adaptive Design correspond davantage à une amélioration du design statique. Les résolutions d’écran sont prédéfinies et seul le contenu nécessaire est transmis au terminal ciblé.

A tester sur ce site http://www.liquidapsive.com/

Ainsi, entre le site web et la version mobile, certains éléments pourront avoir disparu (ils n’auront pas été « cachés » comme ils peuvent l’être dans un design dit « responsive »). Il s’agit donc de créer plusieurs versions d’un même site. Chacune correspond à une taille d’écran précise. Voici quelques-unes des caractéristiques de l’Adaptive Web Design :

  • Obtenir une meilleure performance (temps de chargement plus rapide)
  • Personnaliser les contenus selon l’utilisateur cible.
  • Essayer d’optimiser l’UX par rapport au terminal et au navigateur.
  • Plus long à mettre en place et plus coûteux qu’un Responsive Web Design.
  • Risque de « perdre l’utilisateur » en lui proposant un visuel auquel il n’est pas habitué.

Quelle que soit la technique choisie, ces designs sont censés aboutir à un site mobile friendly.

Trois possibilités pour créer la version mobile de son site web

Le responsive Design est l’une des différentes solutions pour créer une version mobile d’un site web. Cette vidéo de vulgarisation pose clairement les enjeux et solutions. Trois sont présentées ici :

  1. Site en responsive Design
  2. Site mobile dédié
  3. Application mobile

Mais ne pas oublier les Progressives Web Apps en embuscade ^^ ! (voir plus bas)

Attention toutefois à ne pas opposer les solutions, car elles peuvent aussi se combiner entre elles et devenir complémentaires !

Site Responsive VS Site mobile dédié : que choisir ?

Avant l’avènement des smartphones et tablettes, le design d’un site web était conçu pour un ordinateur de bureau (desktop), indépendamment de la taille du moniteur. Il s’agissait d’un design statique (Static Design). Avec la multiplication de nouveaux terminaux, cette approche n’était plus tenable.  Une solution possible et logique consistait à créer un site web mobile (http://m.monsite.com) en plus du site web desktop (http://www.monsite.com), c’est-à-dire un site mobile dédié.

Qu’est-ce qu’un site mobile dédié ?

Un site mobile est un site Web dont l’affichage et la navigation ont été conçus pour un affichage mobile. La taille est adaptée à différents appareils mobiles et prend en compte l’apport du tactile. Un site mobile peut donc être consulté à partir de n’importe quel téléphone mobile, quel que soit le système d’exploitation ou les résolutions d’écran, mais aussi les technologies supportées (Javascript par etc.). Un site mobile dédié permet de proposer des contenus spécifiques, différents de ceux que l’on trouve dans le site pour ordinateur, et donc, dédié à une audience spécifique pour un contexte différent si on le souhaite.

Un site Web mobile dédié, bonne idée ?

Il y a eu et il y a encore des partisans de cette approche, mais cela a très vite posé de nombreux problèmes, à part quelques cas particuliers qui tirent bénéfice de cette solution. Cette stratégie présente en effet quelques inconvénients :

  • Deux interfaces à concevoir, une maintenance compliquée et coûteuse.
  • Des contenus dupliqués donc un référencement naturel moins efficace.
  • Les terminaux ont des résolutions d’affichage différentes.

Partant de cette logique, il faudrait créer un site pour l’appli mobile Iphone sous IOS, un pour l’appli mobile Windows Phone, un pour l’Ipad, voire pour les montres connectées… La tâche du créateur d’interface web est de plus en plus compliquée, le coût de conception du site aussi.

Problème plus grave encore, comme l’a exposé Stéphanie Walter lors du ParisWeb 2017 : de nombreux utilisateurs se détournent de ce type de site parce qu’ils ne proposent qu’une partie des contenus d’un site desktop.

Echec sites web mobiles

Responsive Design VS Mobile Apps : quelle solution retenir ?

Avantages des applications mobiles sur le responsive Design

Tous les sites n’ont pas les mêmes usages ni les mêmes contraintes. Un site vitrine n’aura pas les mêmes exigences qu’un site e-commerce. Certains sites, ayant des besoins spécifiques en fonctionnalités et en performance, vont pousser à bout le potentiel du responsive Design qui ne suffira pas.

Dans certains cas, pourquoi ne pas regarder du côté des Mobile Apps, ces applications natives ayant quelques avantages sur le responsive Web Design. Une application native est en effet développée spécifiquement pour le périphérique mobile sur lequel elle va s’exécuter. Elle est donc conçue, développée et compilée pour un OS mobile (iOS ou Android). Cela apporte de nombreux avantages suivants :

  • L’accès aux fonctionnalités du téléphone (GPS, accéléromètre, GPU, …)
  • D’exploiter les performances du périphérique (3D en particulier)
  • D’exploiter le système de notifications
  • De diffuser son application via l’Apple Store et Google Play

Cette vidéo montre clairement le choix des applications mobiles, présentées comme plus avantageuses que le Responsive Design.

Mobile Apps vs Responsive Design

Avantages des mobiles Apps sur un site Responsive

Limites des applications mobiles natives

Le développement spécifique mobile apporte donc une grande liberté quant aux fonctionnalités proposées.  En revanche, le coût de conception et de maintenance explose. Réaliser une application mobile revient à concevoir un nouveau site. Pire, il faudra la porter sur iOS, Android et Windows, ce qui revient à développer et maintenir l’équivalent de 3 sites supplémentaires !

Applications cross-plateformes, une piste à explorer ?

On notera qu’il est possible d’exploiter des applications cross-plateformes faisant appel à un code unique (Cordova pour le Web ou bien Xamarin, Visual C++), mais cela reste lourd à développer et à maintenir.

Lire cet article : Application mobile : Natif ou Cross Plateforme, app ou Web app, that’s the question !

Progressive Web Apps, l’ultime alternative ?

Devant les difficultés générées par les applications natives, il n’est pas étonnant de voir l’intérêt se porter sur les Progressive Web Apps (PWA). Ceci concerne certains sites gourmands en performance ou en fonctionnalités (la 3D, le GPS, la caméra par exemple), ou qui ont besoin d’être consultés hors connexion.

Nombreux sont les acteurs de l’écosystème mobile ayant prophétisé la mort des applications mobiles au profit des Progressives Web Apps. Google en premier lieu, grand promoteur de cette alternative.

Comparaison Progressive Web App vs Native App.

Principaux Framework CSS responsive

Voici quelques-uns des Framework CSS les plus utilisés pour concevoir des sites Web responsive.

  • Bootstrap est une collection d’outils utile à la création du design (graphisme, animation et interactions avec la page dans le navigateur … etc. …) de sites et d’applications web. Idél pour faire du responsive.
  • Semantic UI est un autre framework de grande qualité qui se distingue par sa simplicité.
  • Web Starter Kit est un kit de démarrage rapide publié en 2014 par Google pour adapter les contenus à tous les périphériques. Dispose d’un kit CSS pour le responsive du site Web.
  • Gumby met à disposition un kit complet de composants CSS ainsi qu’un grid layout reponsive.
  • Clank est un framework qui se focalise sur la création d’applications pour mobiles et tablettes.
  • Foundation est un puissant framework CSS proposant un grid layout responsive et de nombreux composants d’UI.
  • Ultra léger, Responsive Grid System se présente comme un kit de démarrage rapide groupant des CSS en fonction de vos besoins, ni plus ni moins.
  • Léger et fonctionnel, KickStart permet de créer un site internet responsive très rapidement.
  • Skeleton propose une ossature robuste pour votre site Web responsive.
  • Kube est un framework front-end riche et complet pour les développeurs professionnels et les designers.
  • KNACSS est un framework CSS simple, rapide, puissant avec un logo en forme de saucisse. Et ça, j’adore…
  • HTML5 boilerplate combine un ensemble de composants et pratiques à utiliser pour la création de votre site Web responsive avec un design « passe partout ».
  • Pure est un « petit » framework CSS modulaire ultra léger (4.4Ko)
  • Cascade framework propose, comme son nom l’indique, d’utiliser au maximum les propriétés en cascade afin de construire ses design templates.
  • UIkit est un framework très modulable dédié aux interfaces utilisateur avancées.

Une alternative très en vogue dans la conception de site compatible mobile consiste à s’appuyer sur template 100 % responsive.

Template Responsive

Exemple de template 100 % responsive avec Orson, très pratique pour la création d’un site internet responsive design

Stratégie mobile : Design “Mobile First” ou “desktop first” ?

Proposer un contenu sur mesure pour les mobiles est toujours un véritable challenge car les contraintes sont nombreuses :

  • La largeur de l’écran en pixels physiques.
  • La largeur définie par le système d’exploitation.
  • La surface virtuelle de la fenêtre du navigateur (viewport).
  • La résolution et la bande passante.

Sur certains appareils, les éléments interactifs et animés vont être difficiles à charger, d’où le risque d’une mauvaise expérience utilisateur. Il s’agit alors de se demander s’il vaut mieux concevoir initialement pour un ordinateur de bureau (« desktop first ») ou pour un appareil mobile (« mobile first »).

On entend en général par mobile first aussi bien une stratégie donnant la primauté aux investissements à destination des utilisateurs et usages mobiles, qu’une méthode de développement qui aborde la conception par la version mobile, avant d’envisager les versions desktop ou autres. C’est cette dernière définition que nous retenons ici.

Responsive dégradation ou Responsive retrofitting

Au tout début du Responsive Design, il était évident de partir d’une conception pour Desktop, puis de la « dégrader » pour mobile. La « Responsive degradation », dite aussi « Responsive retrofitting » (« rétro-ajustement ») consiste à partir du site web conçu pour un ordinateur de bureau (desktop), puis de l’adapter pour le mobile. À mesure que la résolution et la taille de l’écran diminue, le contenu du site est modifié. C’est une stratégie assez logique.

Néanmoins, les deux versions (bureaux et mobile) sont chargées sur le smartphone même si certains contenus sont devenus inutiles. Les images, en particulier, peuvent être lourdes à charger. Or les utilisateurs, sur mobile, disposent de débits variables selon leur emplacement et sont aussi exigeants (voire plus) en termes de temps d’affichage. Par ailleurs, le mobinaute dans les transports en commun n’a pas les mêmes attentes que l’internaute assis devant son ordinateur de bureau. Bien qu’on ne puisse préjuger des usages, particulièrement sur les appareils mobiles. Seuls les tests utilisateurs et les études ethnographiques permettent de déterminer quels seront les usages réels (ou probables).

Design mobile first

La philosophie « Mobile First » a été proposée en 2009 par Luke Wroblewski, expert en conception d’interface. Le Design Mobile First a très vite rencontré un grand succès, même s’il n’est pas toujours la solution à tous les projets, en raison de l’importance des accès mobiles aux contenus. Dans la démarche mobile first, comme son nom l’indique, la méthode de conception aborde dans un premier temps l’affichage pour les terminaux mobiles, puis progresse par étapes en disposant les éléments pour des écrans plus grands. À partir de cette version mobile de la maquette, des déclinaisons sont donc effectuées pour adapter l’interface à des résolutions toujours plus grandes. La stratégie mobile first met l’accent sur les contenus.

Retrofitting un mode de responsive webdesign

Cette présentation de Stéphanie Walter ne laisse aucun doute sur la primauté du Mobile First Responsive Design selon elle. Attention au contenu qui peut « déborder » (comme l’eau), s’il n’a pas été pensé en amont pour les appareils mobiles !

« Graceful Degradation » et « Progressive enhancement »

Dans le même esprit, on oppose fréquemment la « dégradation gracieuse » / « dégradation élégante » (« Graceful degradation ») et « l’enrichissement progressif » / « amélioration progressive » (« Progressive enhancement »). Chaque approche a ses amateurs et ses détracteurs.

Progressive enhancement un mode de responsive webdesign

Christian Heilmann n’est pas vraiment un partisan de l’approche dite « Graceful degradation » !

En dégradation élégante (ou Graceful degradation), le design et les fonctionnalités sont prévues pour les navigateurs les plus récents et on « dégrade » le contenu afin qu’il s’adapte aux navigateurs plus anciens.

Graceful Degradation un mode de responsive webdesign

Crédit image : Beacon

Au contraire, la technique de l’amélioration progressive (ou progressive Enhancement) consiste à prévoir un design compatible avec tous les navigateurs, avant « d’améliorer » l’affichage selon l’équipement de l’internaute. La méthode de l’enrichissement progressif s’est précisément développée avec l’essor des appareils mobiles.

Progressive enhancement un mode de responsive webdesign

Pour aller plus loin :

En résumé : Responsive degradation, Graceful Degradation, progressive enhancement et Mobile First sont des approches, voire des philosophies différentes pour concevoir des sites web adaptatifs. Elles ont chacunes leur partisans et leurs détracteurs.

On résume tout : trois alternatives au responsive Design

On le voit, le responsive Webdesign est l’une des solutions parmi d’autres pour proposer ses informations et fonctionnalités sur mobile. Quatre types de « versions mobiles » peuvent être envisagées :

  1. Site en responsive Design
  • Avantages: on conserve les mêmes contenus qui s’adaptent à tous les appareils mobiles, on dispose d’urls pour pointer vers une page (SEO)
  • Inconvénients: pour certains sites ayant besoin de performance ou de fonctionnalités spécifiques, le responsive Web Design est limité
  1. Site mobile dédié
  • Avantages: c’est un site dédié, donc fonctionnalités et contenu spécifiques au mobile : optimisation 100 % sur mesure
  • Inconvénients: le coût de développement et de maintenance (c’est un second site à maintenir !) et problèmes avec des appareils hors norme (tablettes par exemple)
  1. Application mobile
  • Avantages: cette solution tire parti de l’OS (iOS, Android, Microsoft), donc très intéressant pour les sites e-commerce par exemple (notifications, rapidité, visibilité sur l’App Store et Google Play)
  • Inconvénients: le coût de développement et de maintenance (1 site web desktop + 1 appli mobile iOS + 1 appli mobile Android + 1 appli Windows !) et il faut passer par le store/market (commissions prises sur les ventes). Attention aussi au téléchargement qui demande un effort.
  1. Progressive Web Apps
  • Avantages: possibilité d’utiliser les fonctions natives de l’appareil mobile (caméra, microphone, GPS, notifications push etc.). Permet de basculer en mode hors connexion, bénéficier de la dernière version du programme grâce à la connexion au serveur PWA et bien entendu l’économie de temps de développement et de maintenance !
  • Inconvénients: très peu, sinon la nouveauté de cette solution qui doit encore faire ses preuves, mais très prometteuse !

Comme évoqué plus haut, certaines solutions sont complémentaires, elles n’ont donc pas vocation à être opposées.

Dans un précédent article, nous abordions la question à se poser pour une meilleure UX mobile : Quelle conception est adaptée à votre service ?

Bibliographie

 « Responsive Web Design » de Ethan Marcotte (A book Apart)

Responsive Web Design Ethan MarcotteDepuis sa publication révolutionnaire en 2011, « Responsive Web Design » de Ethan Marcotte demeure une ressource fondamentale. Il s’agit d’apprendre à penser au-delà des versions Desktop pour créer des conceptions qui répondent aux besoins des utilisateurs. Dans la seconde édition, Ethan Marcotte développe les principes de conception de grilles fluides, d’images flexibles et des Media Queries. Basé sur de nouveaux exemples et des données chiffrées, vous apprendrez comment offrir une expérience de qualité, peu importe la taille de l’écran.

Cet ouvrage propose de nouveaux conseils et astuces pour la prise en charge des navigateurs, les solutions de diffusion d’images, le rôle de « l’amélioration progressive » dans la conception Web, de meilleures méthodes de gestion de la bande passante, etc.

 

 

Table des matières :

  1. Our Responsive Web
  2. The Flexible Grid
  3. Flexible Images
  4. Media Queries
  5. Becoming Responsive

“ Adaptive Web Design ” (Seconde édition) de Aaron Gustafson  (2011)

Adaptive Web Design de Aaron GustafsonCette nouvelle édition encadre encore plus le processus de conception web dans l’optique de « l’amélioration progressive ». L’ouvrage présente comment la stratégie de contenu, UX, HTML, CSS, le responsive Web Design, JavaScript, la programmation côté serveur et l’optimisation des performances sont au service des utilisateurs, quel que soit le périphérique utilisé pour accéder au Web.

Il s’agit de visualiser l’expérience comme un continuum et d’élaborer des interfaces capables d’atteindre plus d’utilisateurs tout étant moins coûteuses à développer.

 

 

 


“Responsive Web Design, mises en page et grilles – Les techniques modernes de conception web” (Seconde édition) de Christophe AUBRY (Editions ENI)

Responsive web design mises en page et grilles de Christophe AUBRYCet ouvrage dédié aux techniques de mise en page des sites web fait le tour de la question du Responsive Web Design, ses méthodologies et applications, tout en prenant en compte les innovations techniques en matière de mise en page responsive basées sur l’utilisation de tableaux, grilles et modules du W3C.

 

 

 

Didactique et pratique, ce livre est un véritable guide utile pour les développeurs, UX designers ou UI designers qui souhaitent :

  • Maîtriser les méthodes et techniques du Responsive Web Design (CSS3 / Media Queries)
  • Exploiter les différents aspects de la page responsive (grilles, images, typographie), des différents modules possibles (W3C) avec une mise en page:
    • Flexible (module Flexible Box Layout ou Flexbox)
    • Multicolonnes (module Multi-column Layout)
    • En grille (Grid Layout)

“Design web responsive et responsable” de Scott Jehl (Editions Eyrolles)

Design web responsive et responsable de Scott JehlScott JEHL est un Webdesigner et développeur travaillant au sein de la brillante équipe du Filament Group. Il participe activement à la communauté open source sur GitHub en publiant ses travaux de recherche et d’innovation sur le développement multiplateforme.

Son dernier ouvrage intitulé “Design web responsive et responsable” traite du Webdesign. Il aborde plus particulièrement la manière dont le Responsive Design l’a considérablement amélioré. Il invite chaque webdesigner à garder un esprit critique sur ses créations afin de leur apporter de nouveaux contextes et de nouvelles fonctionnalités. Les techniques ainsi proposées visent à aller plus loin dans la conception de sites « responsables ». Le but étant de concevoir des « plateformes de plus en plus responsables » sachant s’adapter aussi bien aux réseaux rapides qu’aux réseaux plus lents, pouvant ainsi toucher un public véritablement global.

Dédié au monde des designers (développeur web, UX designer, UI designer…), ce livre contient l’essentiel des techniques et des conseils sur les bonnes pratiques à suivre pour construire des sites et des applications utilisables toujours aussi innovantes.


“HTML5 et CSS3 – Faites évoluer le design de vos sites web” (3e édition – Eyrolles) de Christophe AUBRY

21 HTML5 et CSS3 - Faites évoluer le design de vos sites web de Christophe AUBRYDécouvrez comment maîtriser le langage-clé à utiliser pour concevoir des sites Web au Design Responsive. Dédié aux développeurs, designers web, UX designers ou UI designers, cet ouvrage permet de faire évoluer la manière de concevoir des sites internet fonctionnels. Sont abordés les langages fondamentaux de la programmation web dans leur dernière version : HTML5 et CSS3, nouveaux standards permettant des mises en page évolutives, de nouvelles syntaxes, des formulaires interactifs ou bien encore des nouveaux éléments de structure sémantique (en-tête, section, navigation…) et autres formulaires interactifs.

Ce livre traite également du fort potentiel du CSS3 qui permet de profiter pleinement des effets de transformation, de transition et d’animation, sans oublier la possibilité de réaliser désormais des insertions natives de contenu multimédia (audio et vidéo).


“Bootstrap 3 pour l’intégrateur web – CSS et Responsive Web Design”  (édition  Eyrolles) de Christophe AUBRY

Bootstrap 3 CSS et Responsive Web Design de Christophe AUBRYIl s’agit d’un ouvrage de référence en matière de Bootstrap 3. Destiné aux intégrateurs web comme aux UX designers ou UI designers, ce livre traite du Responsive Web Design à travers les règles CSS afin de construire des sites web attractifs. Une connaissance du HTML est requise pour apprendre à maîtriser Bootstrap et être en mesure d’exploiter ses différentes composantes servant à la création d’éléments interactifs en JavaScript (carrousels, bulles d’aide…)

Méthodes et cas pratiques sont ainsi proposés pour que vous puissiez utiliser l’outil de construction en ligne et concevoir l’intégralité de la structure de votre site Web Responsive par ce procédé.

 

 


Conclusion

Le responsive design s’est imposé très rapidement. Aujourd’hui, le digital est partout, les appareils et les écrans extrêmement divers (petits, moyens, grands, très grands…) et les objets connectés se multiplient. Cela fait bien longtemps qu’il n’est plus envisageable d’ignorer la version mobile d’un site. Pour autant, il reste techniquement difficile de concevoir une interface adaptée à tous les terminaux tout en enrichissant l’expérience utilisateur. Les manières de véhiculer le contenu d’un site web sur une tablette ou un smartphone sont nombreuses. Le responsive design est une solution actuellement privilégiée bien qu’elle ne soit pas la seule. Avant de se lancer dans un projet de site responsive et/ou mobile friendly, mobile first ou non, il faudra s’interroger sur le contenu, le budget à y consacrer… et, surtout, garder une conception orientée utilisateurs.

Lire aussi nos articles :

Voir :

Commentaire