Cette méthode est parfois remise en cause dans la communauté des web designers, puisque dans la réalité, un smartphone chargera la version bureau du site web et la version mobile, et donc téléchargera des données de style non nécessaires et des images qui peuvent être lourdes depuis un réseau cellulaire. Le responsive design ou responsive webdesign (au même titre qu’un site mobile) est une manière de concevoir un site web pour que son contenu s’adapte automatiquement à la résolution écran du terminal qui est utilisé pour le visionner.

Il permet de n’avoir à développer qu’un seul site web, mais également d’optimiser l’expérience utilisateur : l’internaute diposera d’un contenu parfaitement lisible sur sa tablette ou son smartphone par exemple. 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.

A lire en complément : Faut-il craquer pour une trottinette électrique ?

En 2010 c’était environ 270 millions de smartphones vendus, en 2013 c’est 561 millions de smartphones et 170 millions de tablettes vendues et en 2015 c’est maintenant 775 millions de smartphones et 318 millions de tablettes vendues par an.

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.

A découvrir également : Personal Branding : on vous dit tout !

ThemeDesign – Thèmes WordPress Responsive & Retina

Plutôt que de faire votre première maquette complète (version "desktop"), les webdesigners sont incités à commencer par proposer la version mobile, qui est généralement la plus simple. Certains CMS comme Rubedo intègrent nativement des systèmes de mise en page à l’aide de Grilles Fluides et permettent (grâce aux Media Queries) de définir les éléments des pages qui s’afficheront en fonction des supports à l’aide de simples cases à cocher. Le Responsive Web Design doit faciliter la lecture et la navigation de l’internaute sur tous les types de terminaux (Smartphones, moniteurs d’ordinateur, tablettes, Notebook, TV connectée, …).

Le responsive design, aussi appelé RWD (abréviation de Responsive Web Design) est une nouvelle façon de concevoir les sites web afin qu’ils puissent être consultés de manière optimale quel que soit le support utilisé. Une part croissante des internautes utilisent des Smartphones et des tablettes et  pour surfer, c’est un mouvement de fond qu’il ne faut pas négliger, entre mars 2013 et mars 2014 la part des visiteurs utilisant un smartphone ou une tablette pour lire nos articles est passée de 16,81 % à 22,92 %, soit une progression 36 % en 1 an . Les sites Internet créés ne sont parfois pas lisibles sur de petits écrans, certaines applications ne sont pas compatibles, la taille parfois imposante des pages à charger est un frein pour les dispositifs connectés hors WiFi. Les éditeurs et concepteurs de sites web ont vite compris la nécessité d’adapter leurs sites Internet pour offrir la même qualité de navigation à tous leurs visiteurs, et surtout pour ne pas en perdre. 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.

    Cet 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.

    Consacré “mot-clé de l’année 2013” par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd’hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels . La notion de web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu’il ne s’agit plus de concevoir autant de parcours qu’il y a de familles de terminaux mais de concevoir une seule interface auto-adaptable. 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. 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.

    @kaimiteNet rien ne t’empêche de faire du RWD plus proprement et justement commencer par le petit, et charger en plus uniquement les ressources supplémentaires pour le grand écran, mais là on touche du doigt la limite responsive/adaptive (au final peu importe le nom en fait).

    Département010203040506070809101112131415161718192A2B21222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475001750027500375004750057500675007750087500975010750117501275013750147501575016750177501875019750207677787980818283848586878889909192939495DOMTOMInternational . L’internaute doit pouvoir consulter le même site web sur tous les terminaux sans avoir recours au défilement horizontal et au zoom avant/arrière, ces manipulations supplémentaires nuisent notablement l’expérience utilisateur (UX). L’utilisation du web se faisant de plus en plus depuis des téléphones "smartphones" ou des tablettes, l’ergonomie des sites Internet a du être repensée pour pouvoir s’adapter à tous ces nouveaux dispositifs aux spécificités très différentes.

    @emg75: Pourtant c’est le point de départ de la réflexion du responsive: face à la quantité de formats d’écran variés toujours grandissante, ne plus s’adapter en fonctions de quelques dimensions choisies, mais s’adapter pour toutes les situations.

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

    Dans le monde de la création de site Internet le Responsive Web Design s’impose, c’est la conséquence directe de la multiplication des terminaux et des navigateurs (Iphone 3, 4, 5, 6, … Ipad, Ipad mini, Androïd,…), et avec autant de tailles d’écrans différentes. @kustolovic : Je n’ai rien contre les sites dont le design est fluide et je comprend bien l’enjeu d’une telle mise en oeuvre, notamment pour les petites surfaces (smartphones, phablettes, mini tablettes).

    Le Responsive Web design est une approche de conception Web qui vise à l’élaboration de sites offrant une expérience de lecture et de navigation optimales pour l’utilisateur quelle que soit sa gamme d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs d’ordinateur de bureau). 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). 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.

    @QuentinC : La même que Raph, je connais très peu d’utilisateurs qui ajoutent des raccourcis de site sur le bureau (je sais même pas le faire sur mon Android) par contre j’ai eu des clients qui voulaient une app "juste" pour être sur le bureau des gens au milieu des autres petites apps, à ce stade c’est une question de branding et d’image du client.

    Qu’est-ce Que Le Responsive Design ?

    Mais @motjoy si tu as un super cas d’utilisation sur un retour concret d’utilisation avec un framework précis et que tu as très envie de le partager avec nous, tu es le bienvenu et je suis sûre qu’on se fera un plaisir de te publier :). 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. 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. On doit imaginer comment les éléments de la page s’organisent dans toutes les résolutions, de la plus petite (généralement 480px, ce qui correspond à un smartphone) à la plus grande (1920px par exemple). Tag : responsive design, responsive web design, RWD, web design responsive, responsive design definition, definition responsive design, sites responsive design, avantages responsive design, media queries .

    Il permet aussi de rationaliser les coûts de développement d’un site Internet en permettant aux développeurs de ne concentrer  que sur un seul code pour l’ensemble des terminaux de consultation, l’alternative étant de développer un site pour moniteurs d’ordinateur et un autre pour les Smartphones. L’augmentation constante des ventes de « smart connected devices  » (PC, smartphone et tablette) a augmenté l’intérêt de réalisation de modèles en RWD pour la plupart des outils de gestion de contenu.

    D’ailleurs, il est fréquent qu’un cumul de différentes méthodes soit employé : par exemple un site à la fois dédié et responsive, ou un site responsive garni de certaines détections côté serveur (on parle alors de RESS), etc. Dire que c’est LA référence, c’est un peu comme dire que Dreameaver est la référence pour produire une page web : c’est un outil qui peut être pratique et pertinent selon ses besoins et son usage. À l’heure où des centaines de tailles et formats d’écrans différents se connectent à chaque instant, la méthode du Responsive Web design apparaît comme la “solution de facilité” en vertu de son objectif principal:. ) et cet article est là pour ça 🙂
    Même si nous publions souvent des articles avec un degré technique plus élevé, il ne faut pas oublier qu’il y a dans la communauté des débutants, voir des clients et non initiés pour lesquels ce genre de ressource peut devenir utile. 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. 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.

    La différence entre un site en responsive design et un site mobile est que le site responsive lui est conçu pour s’adapter à tout type d’écran ce qui est pratique, mais peut poser problèmes sur certains points comme par exemple le temps de chargement : les images sont les mêmes sur ordinateur et sur mobile, même si elles sont affichées en plus petit.

    Certes c’est peut-être fait dans le désordre (il vaudrait mieux lire l’intro de Raph puis mon article), mais nous nous sommes rendu compte qu’il n’y avait pas vraiment de ressources "débutant" pour expliquer sans code les différentes options de stratégie mobile (app, site dédié ou rwd, etc. 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 »). Sachez que chaque solution a des avantages et des inconvénients : selon vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d’opter pour l’une ou l’autre.

    L’article de Raphaël se veut une explication "simple" pour une public non averti du buzz word "responsive webdesign" que l’ont peut envoyer à un client par exemple (ou à ma maman).

    Qu'est-ce que le Responsive Web Design ?

    La notion de web adaptatif repense la manière de concevoir l’ergonomie d’un site internet, puisqu’il ne s’agit plus de concevoir autant de sites que de terminaux, mais de concevoir une interface unique auto-adaptable. 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. Pour savoir si un site est responsive allez sur n’importe quel page et réduisez la largeur de la fenêtre de votre navigateur web, si le design du site ne bouge pas et qu’une barre de défilement horizontale apparaît c’est que le site n’est pas responsive (ou mal responsive).

    Quand vous ne faites pas du "Mobile first", c’est l’inverse qui se produit : les navigateurs mobiles récupèrent toutes les règles de votre site pour les ordinateurs puis suppriment ou adaptent les éléments, ce qui leur fait plus de travail.
    Définir des tailles fixes en pixels selon certaines conditions données ne permet pas de résoudre ce genre de problèmes, on se retrouve plutôt avec des visuels dédiés à certains appareils, ce qui ne sera jamais optimal. Une application native est un produit développé spécifiquement dans divers “langages” (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d’un “Store” (AppStore, Google Play, Windows store).

    ThemeDesign – Thèmes WordPress Responsive & Retina

    @motjoy, si l’article de stéphanie aborde avec pertinence les enjeux et problèmes techniques du responsive web design, celui-ci est plus générique à l’adaptation de site au divers appareils, et constitue ainsi une bonne ressource à mentionner pour quiconque ne comprendrait que peu ces problématiques. Les sites prêts à l’emploi ThemeDesign sont tous Responsive, le design du site s’adapte à toutes les résolutions d’écran, les menus restent toujours lisibles et s’adaptent à la taille à votre résolution, tous les contenus textes sont lisibles sans devoir faire défiler le site sous vos doigts en permanence. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphone, tablettes, télévision…) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation.

      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. Heureusement, les choses évoluent vite, mais il faudra être prudent : si les personnes avec qui vous travaillez n’ont jamais fait de design responsive, vos premiers essais ne seront probablement pas les meilleurs. 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é.

    ma page d’accueil de mon site mobile est devisé sur 3 partie(3 images différent pour chaque partie), je vais que la première partie soit affiché sur tout l’écran de mobile avec la possibilité de scroller en bas pour voir le reste de la page. Non, ce que vous voulez, c’est créer un site que tout le monde pourra visiter, aussi bien les personnes qui viennent depuis un ordinateur que ceux qui viennent depuis leur mobile, tablette ou que sais-je encore.

    Les sites Internet à hauteur et largeur fixes appartiennent maintenant au passé, les sites doivent occuper tout l’espace d’affichage disponible quel que soit le terminal utilisé, pour s’adapter à toutes les tailles, le Responsive Web Design est la solution du moment . Comme vous le voyez, on peut aussi considérer que certains blocs moins importants sont inutiles sur des mobiles et les faire disparaître (vous remarquerez que le bloc gris n’apparaît plus dans la version mobile).

    Je n’ai pas souhaité dénigrer la qualité de l’article de Raphael sur l’aspect théorique, mais c’est clair que je serais intéressé par un débat argumenté sur les atouts et les faiblesses des frameworks responsives sur le WEB. Au final, le Responsive Web design n’est qu’un moyen parmi d’autres de parvenir à ses objectifs mais ne doit pas être considéré comme la seule éventualité ni comme une “solution magique” à tous les problèmes. @motjoy : "A continuer peut-être sur le forum :)" ==> +1 je te laisse ouvrir le poste dans le bar ^^
    (à une époque on avait des posts du forum dédié à la discussion des articles mais ça a disparu je crois)

    Et ne pas oublier non plus que le RWD (ou la stratégie de contenu mobile) c’est pas QUE le technique et les frameworks mais aussi l’ergonomie, le design, le dev côté serveur, la gestion client et un choix entre site mobile dédié, application mobile ou site responsive va au final également impacté ces étapes du projet :). Le Responsive Design est une technique de réalisation de site web, qui fait qu’un site internet s’adapte automatiquement à l’espace disponible sur l’écran sur lequel il est consulté.