• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 17/07/2017

Les enjeux du responsive design

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les enjeux du responsive design sont nombreux et ils ne ne sont pas uniquement techniques. Dans le chapitre précédent, vous avez bien compris le besoin d'avoir un site visible sur tous les écrans avec une interface qui s'adapte parfaitement à son support, pour que l'expérience utilisateur soit toujours parfaite. Mais il y a aussi un aspect plus stratégique et économique derrière l'adoption du responsive design, lié à l'évolution du comportement des utilisateurs sur internet.

Il suffit d'observer dans les transports en commun le nombre de personnes collées à leur smartphone pour comprendre les chiffres qui suivent :

  • En 2014, on comptait déjà un peu plus de 30 millions de mobinautes (personnes utilisant internet depuis un téléphone mobile) en France, soit 55% de la population !

  • 80% des mobinautes accèdent quasi-quotidiennement à internet.

(Sources: Comscore & Médiamétrie)

Et ces chiffres sont en constante progression... D'ailleurs utilisez-vous plus votre mobile ou votre ordinateur pour naviger sur internet ? Et votre entourage ? Vous verrez que les réponses sont sans équivoque.

Naviguer sur internet depuis son mobile une habitude qui supplante le surf sur un ordinateur
Naviguer sur internet depuis son mobile, une habitude qui supplante le surf sur un ordinateur

Que vous soyez une grande enseigne, un photographe, un webdesigner en freelance, ou un étudiant fraîchement diplômé à la recherche d’un emploi, avoir un site responsive est indispensable si vous souhaitez rester visible et compétitif. Ceci, afin de ne pas vous couper de ce coeur de cible que sont les mobinautes...

L'adoption du responsive design

Le webdesigner a une place de choix pour assister aux grandes évolutions de l’internet : en fonction des projets sur lequel il est commissionné, il peut voir et anticiper les tendances qui "trustent" le marché du web. Et avec l’explosion des ventes de mobiles, je peux vous dire que mon carnet de commandes regorge de demandes concernant la création de sites responsive ! :D

Mais je vais en profiter pour rebondir un peu sur les évolutions du webdesign que j'ai pu suivre durant ma carrière. Nous allons remonter le temps ensemble, et traverser différentes époques avant que 2011 n'arrive avec le responsive design !

Un petit saut dans le temps
Un petit saut dans le temps

Il était une fois... En fait je vais quand même vous épargner la naissance de l'informatique, d'internet et du CD-ROM. :D

Quand j'ai commencé ma carrière de webdesigner, dans les années 2000, mes premiers sites étaient statiques avec des gabarits fixes en HTML. Tout était optimisé au KiloOctet près, car à l'époque le débit était très faible (du 56k), il y avait donc peu d'images et beaucoup de texte. Ensuite avec le haut débit, il y a eu la période des sites très visuels. La vidéo était encore très difficile à mettre en place, mais je pouvais déjà m'exprimer davantage graphiquement. A moi les créations sans limite sur Photoshop !

Entre 2003 et 2007, il y a eu les grandes heures de gloire du logiciel Adobe Flash avec la création de sites animés incroyables. 

Le site du Père Noël de la poste pour l'agence Spiderdreams entierement en Flash
Le site du Père Noël de la poste pour l'agence Spiderdreams, entièrement réalisé en Flash

Mais bien évidemment à l'époque, les smartphones et tablettes n'existaient pas ! Il aura fallu attendre 2009 avec l'iPhone 3GS de Apple pour commencer à surfer confortablement sur le net. Et la suite de l'histoire, vous la connaissez puisque depuis ce jour, le marché mobile n'a cessé d'augmenter.

J'ai croisé tardivement le responsive design en 2012, alors qu'outre manche cela faisait déjà plus de 3 ans que ces notions étaient abordées dans le domaine du web design. Il est arrivé timidement en France, et malgré les réticences de certains de mes confrères qui ne voyaient pas du tout l'intérêt de cette approche, j'avais pour ma part compris que le responsive design allait changer de manière radicale la façon de concevoir les sites web. Au delà de mon rôle de "créatif", avec mes yeux de concepteur, j'ai pu observer les premiers comportements des utilisateurs mobiles, le potentiel des premiers sites responsive, les évolutions des langages de programmation comme le HTML5 et le CSS3, Javascript et Jquery, l'arrivée de la vidéo en puissance, de dessins et d'animations générées en code... Bref j'ai pu me projeter dans le futur.

Je reconnais qu'entre 2012 et 2015, il n'y a pas eu de bond phénoménal. Mais encore une fois, à l'échelle du web, 3 ans c'est énorme ! Le constat est d'autant plus flagrant aujourd'hui dans mon activité professionelle : la proportion de sites responsive dans les commandes clients est passée de 10% à 100%  en 3 ans. 

Le responsive design fait désormais partie de ces savoir-faire qu'un webdesigner doit connaître s'il veut continuer à être compétitif et être considéré comme un expert dans son domaine.

Adopter le responsive design pour la création de son site, c’est répondre aux normes et exigences du web actuel. Il faut ainsi être conscient que même si nous continuons à surfer sur un écran d’ordinateur (car il est encore difficile de se passer de son ordinateur en tant qu’outil), l’écran du mobile domine déjà le web !

Il domine tous les écrans !
Il domine tous les écrans !

Et si vous doutez encore de cette affirmation, revenons simplement quelques semaines en arrière : le 21 avril 2015, Google lance son nouveau label "Mobile friendly".

Si vous souhaitez en savoir plus sur le label, je vous conseille cet article sur le site de Cézame conseil.

Il est inutile de préciser qu’avec un site responsive, vous serez naturellement "mobile friendly" en plus d’être "desktop friendly". ;)  Un deux-en-un fort appréciable ! 

Google, moteur de recherche n°1 dans le monde, anticipe depuis un moment une montée en puissance du mobile et de son utilisation sur le web. Et ce n'est pas le seul ! Bien évidemment, les enjeux commerciaux sont énormes. Que ce soit au niveaux de l’exploitation des données ou les futurs services à la carte proposés sur nos smartphones, le marché mobile retient toutes les attentions de tous les acteurs du web, jusqu’à la prochaine révolution technologique. 

 Vous l’aurez compris, le responsive design est une solution quasi-obligatoire aujourd’hui

Quand faut-il utiliser le responsive design ?

Le responsive design est une notion incontournable en webdesign. Et comme j'insiste à tout bout de champs, vous l'avez maintenant bien intégré. :p 

Mais...

... Comme je le disais un peu plus haut, en 2012, j’ai dû à plusieurs reprises défendre mon point de vue sur ce sujet face à des confrères sceptiques, qui arguaient la mort de la créativité (et parallèlement arguaient le même constat vis-à-vis du HTML5 face à flash !). Je n’étais pas d’accord avec eux, et même si je savais que le responsive était plus qu’un effet de mode, je pouvais néanmoins comprendre que le responsive n’était pas la réponse à tout.

Et oui, je suis personnellement un grand défenseur du responsive design : je suis fasciné par la notion même de responsive, qui peut s’appliquer dans des domaines autres que le web comme l’architecture ou la mode, mais aussi dans la communication graphique.

Mais même si je suis un grand défenseur du responsive design, je ne suis pas non plus un gourou obstiné. :-°

Même si de nos jours il préférable d'avoir un site responsive, il n'est pas forcément la réponse à tous les projets
Même si de nos jours, il est préférable d'avoir un site responsive, il n'est pas forcément la réponse à tous les projets...

Nous allons voir dans quels types de projets le responsive est utilisé, et dans quels cas il est possible de s'en passer.

Pour quels types de projets dois-je utiliser le responsive design ?

Soyons clair, concevoir un site responsive est devenu une norme pour :

  • les sites institutionnels 

  • les sites d'entreprise, ou sites dits "corporate"

  • les sites d'informations

  • les portfolios

  • les sites de e-commerce

  • certains sites produits 

Le site polygon.com est un site de news sur les jeux vidéo complètement responsive
Le site polygon.com est un site de news sur les jeux vidéo complètement responsive

Quand puis-je m'en passer ?

Si si, il reste des projets pour lesquels il est possible de se passer du responsive.

  • C'est notamment le cas des sites publicitaires évènementiels qui privilégient une expérience innovante pour l’utilisateur. Cela nécessite parfois le confort d’un grand écran et l'utilisation de technologies lourdes, comme la vidéo ou la 3D, pour renforcer cette sensation d’immersion dans l’écran. L’expérience responsive adaptée au mobile n’est alors pas nécessaire.

Le site sortieenmer.com par exemple, réalisé pour le célèbre équipementier marin Guy Cotten, est une expérience qui se veut volontairement lisible uniquement sur un écran d'ordinateur. Cela afin de nous faire profiter d'une expérience (angoissante) unique ! (À consulter en plein écran bien sûr)

Le site sortieenmer.com pour Guy Cotten célèbre équipementier marin, est une expérience qui se veut volontairement lisible uniquement sur un écran d'ordinateur afin de profiter
Le site sortieenmer.com nous immerge dans une aventure conçue pour ordinateur.
  • Il y a aussi le cas de sites avec des fonctionnalités avancées, tels que les géants facebook ou twitter, pour lesquels il est préférable d’avoir une application mobile native qui tirera pleinement profit de la puissance de votre terminal. Cela permettra, par exemple, de gérer la prise de photos et de vidéos de manière optimale ou encore de gérer parfaitement le système de notifications, alors parfaitement intégré au système de votre smartphone. 

l'application native de Facebook permet de profiter de toutes ses fonctionnalités sans soucis de performance.
l'application native de Facebook permet de profiter de toutes ses fonctionnalités sans soucis de performance.
  • Et pour finir il y a bien sûr le cas des jeux vidéo, où l’expérience est 100% plus efficace par le biais d’une application mobile !

Le célèbre jeu mobile Angry birds Star Wars
Le célèbre jeu mobile Angry birds Star Wars

Exemple de certificat de réussite
Exemple de certificat de réussite