Zoom sur le Responsive Web Design

//Zoom sur le Responsive Web Design

Zoom sur le Responsive Web Design

Le responsive Web Design, est indispensable, de nos jours, concernant les projets web des clients et leurs cahiers des charges. Néanmoins, ce concept reste assez incompréhensible et complexe également pour les professionnels !

Début de définition responsive design

Démarche de création web, le Responsive Web Design permet la création de sites proposant des lectures et navigations comme expériences maximales pour l’internaute. Peu importe la catégorie d’appareil, moniteurs de PC, liseuses, tablettes, téléphones mobiles, cette expérience utilisateur réussie indique un redimensionnement, des défilements de pages et recadrages.

Ce terme a été créé par Ethan Marcotte au sein d’un article, datant de mai 2010. Ethan Marcotte apportera ensuite une description de la pratique et théorie du responsive au sein de son ouvrage, intitulé « Responsive Web Design » (parution en 2011). La pratique concerne des adaptations pour le client, avec des CSS3 Media Queries, images fluides, … Des grilles avec pourcentages sont aussi proposées.

Un site, responsive ou application ?

3 procédés sont utilisés pour garantir la circulation du contenu web concernant des appareils connectés, une application, un site dédié et un modèle responsive pour le site web. Chaque proposition révèle des points positifs ou des inconvénients, en fonction de vos attentes et contraintes (délai et tarif), il faudra sélectionner une des deux propositions.

Besoin d’un site web responsive et optimisé pour le SEO  ?

Nous contacter

Pourquoi un site dédié ?

Ce type de projet indique la création de deux ou autres entités diverses en fonction du procédé à atteindre : 1 site pour les smartphones, 1 site capital, 1 sites dédié aux tablettes, …

Un test concernant le serveur au départ, révèle le mode d’appareil et redirige vers une adresse web relative (exemple : m.monsite.com).

Les atouts des sites web dédiés sont :

  • Une opportunité d’affiner la forme du site, de manière détaillée, tout comme le contenu suivant le périphérique employé
  • L’opportunité de viser et de concorder à diverses fonctionnalités, comme le touch par exemple
  • Une alternative éventuelle avant la refonte totale et responsive du site

En revanche, un site dédié comporte également des points noirs :

  • Le « duplicate content » ou des contenus copiés
  • L’entretien de diverses versions du site et adresses (pas aisément indexables)
  • La détection en ce qui concerne le serveur (ou UA sniffing) pas forcément à jour

Qu’est-ce qu’une application native ?

Produit créé particulièrement et utilisant plusieurs langages comme WindowsPhone, Android, iOS, cette application peut être téléchargée. Son référencement s’effectue auprès d’un « Store » comme Windows store, Google Play et Appstore.

Ce référencement lui apporte des points positifs comme :

  • Une prise en charge aisée comprenant des fonctionnalités pratiques, accéléromètre, GPS, notifications, touch, …
  • Une mise en place sur le périphérique
  • Une acclimatation complète concernant le périphérique (performances, densité de pixels, et ergonomie)
  • L’indication de son enseigne sur l’Appstore entre autres, et accès à un « raccourci » via le smartphone utilisateur

Des points négatifs sont aussi à souligner :

  • Développement particulier dans diverses langues (concernant seulement WindowsPhone, Android, iOS, …)
  • Tarif du développement, licences et réparation tout tous les systèmes d’exploitation
  • Contenus non indexables suivant les moteurs de recherches les plus connus
  • Application requérant une mise à jour

La version responsive

Plusieurs formats et dimensions d’écrans divers peuvent être actuellement connectés en permanence, ce procédé Responsive Web design représente une proposition facile grâce à son but principal :

Une concordance avec tous les appareils, de manière transparente

  • Délais et tarifs bas en comparaison des techniques précisées auparavant, de manière globale
  • Maintenance favorisée concernant le projet (unique fichier HTML, unique feuille de style, …)
  • Responsive est une solution suite à la création initiale d’un site

De plus, depuis récemment, Google met en lumière des sites pour mobile, au cœur des résultats de recherche. Par exemple, https://example.com est un site web optimisé concernant les mobiles.

A soulever tout de même quelques inconvénients :

  • Des connaissances techniques adaptées, veille technologique en permanence : deux points clés
  • Anticiper des tests divers pendant la durée du projet, simulateurs, device labs, …
  • Les limites ergonomiques sont complexes à éviter tout comme les exploits de navigateurs web
  • Effectuer du responsive demande plus de temps en comparaison avec l’absence d’action, c’est-à-dire 25% de temps en plus

En fait, le Responsive Web permet d’atteindre ses objectifs, il ne doit pas être envisagé comme l’unique possibilité ou comme une solution miraculeuse à l’ensemble des dilemmes.

En outre, un cumul de méthodes diverses est usé comme un site responsive et dédié, ou alors un site comprenant des détections en provenance du serveur (RESS) pour tous les dysfonctionnements.

Une ressource de qualité à connaître est le site http://sizzy.co/ afin de tester votre site sur tous les appareils.

Besoin d’un site web 100 % responsive  ?

Nous contacter

Un site fluide, adaptatif ou responsive

D’après les données de Wikipédia, le Responsive Web Design a la même signification que « site web adaptatif ». Il est important de distinguer les sites liquides, adaptatifs, responsive et statiques.

Le design « static », statique révèle des dimensions fixes (960px) peu importe la surface de l’écran. La plupart des sites web, dans les années 2010, ont été créés selon la base, avant la conception du Responsive Web Design.

Un design fluide ou « liquid » correspond à un site web montrant des largeurs de colonnes décrites en unités variables comme em, vw, pourcentages, etc. Le site fluide propose une adaptation automatique selon le format de fenêtres.

Le design adaptatif ou « adaptative » est la version perfectionnée du design statique, fixité des unités de longueur. Ces unités peuvent être variées en fonction du format de l’écran, cette taille est décelée grâce à CSS3 Media Queries.

Ce design comporte des points de rupture essentiels : 320px, 1024px, 768px, 480 px, … Il concorde avec le format en conséquence. En fait, il existe le même nombre de gabarits fixes que de points de rupture.

Le design « responsive » constitue un perfectionnement du design liquide attaché à des procédés CSS3 Media Queries, afin de changer les styles, comme le réaménagement de pages. Cette modification de styles se fait en fonction de quelques critères, dans le but d’une concordance totale au gabarit de l’écran, peu importe le point de rupture.

En somme, le site liquidapsive.com offre la possibilité d’expérimenter visuellement ces divers modes de design.

Quelle est l’implication du RWD, techniquement parlant ?

Le Responsive Web design en 2010 a reçu sa première appellation, depuis, il a connu une certaine évolution.

Ce type de design requiert les technologies décrites ci-dessous :

  • Grille fluide, la largeur des éléments ne contient plus les unités de pixels
  • Contenus, médias et images flexibles pour ne pas « déborder de leur parent »
  • Affichage adapté au Viewport du terminal
  • CSS3 Media Queries permet l’application de règles diverses avec des styles CSS en fonction de la taille, le ratio et l’orientation du device.
  • Des adaptations conditionnelles avec des menus de navigation pour le client, avec des bases sur jQuery ou Javascript.
  • « Mobile First », philosophie : accessibilité, compatibilité et performance facilitées des pages avec un « enrichissement progressif ».
  • Détection de parties, générées au niveau du serveur RESS, aussi pour augmenter l’affichage de ressources ou composants.

En somme, le Responsive Web design ne propose pas un accès si aisé.

Ce qu’il faut retenir du responsibe

Responsive, adaptive et mobile dédié : la même url est conservée. Concernant l’HTML, le site responsive est conservé contrairement au site adaptive (pas toujours), une dynamique de quelques composants HTML (slider et cartes) est injectée pour les mobiles dédiés (au sein d’un template responsive). Pour le mobile dédié, des templates HTML sont conçus selon la taille des écrans de tablettes ou mobiles.

Enfin, en ce qui concerne la conservation des contenus, le site responsive la permet. Pour le style adaptive, certains contenus comme des blocs supplémentaires ou images sont injectés de manière dynamique au sein d’un template responsive. Quant aux mobiles dédiés, il n’est pas possible de présenter des contenus sur mobiles.

2018-04-16T09:45:41+00:00 mars 12th, 2018|Actualités|0 Comments

Leave A Comment