C'est quoi le Responsive Web Design ?

Merci pour cet article, il donne une bonne vue d'ensemble rapide du sujet.

par contre :
> La présence de sa marque sur l'AppStore (pour ne citer que lui) et de pouvoir disposer d'un "raccourci" sur le smartphone de l'utilisateur

Les raccourcis, ce n'est pas exclusif aux applications natives. En tout cas sur iOS 6 et 7, on peut en mettre un vers une page web sur l'écran d'accueil si on veut. Et en plus, on peut le nommer comme on le souhaite...

@QuentinC : oui on peut, c'est c'est beaucoup moins naturel que pour une app native où c'est automatique.

En effet, c'est le mot clé en vogue avec le flat design. Dommage de ne pas avoir cité Boostrap qui est la référence ...

Bonjour et merci pour l'article !

Un petit point négatif pour le Responsive c'est de "forcer" l'utilisateur a télécharger des informations qui ne seront pas affichées selon son terminal.

Avec le bootstrap de Twitter on a par exemple différentes class ".hidden-xxx" pour afficher / masquer des blocs selon l'écran...

J'ai utilisé un thème pour Magento avec une navigation doublée. Une pour la version desktop avec une richnav et une autre adaptée au mobile. Mais dans le code source les 2 étaient là !

Je pense qu'on peut faire un site dédié sans forcément avoir 2 urls.
Détecter le mobile / tablette et charger un thème spécifique.

Perso j'ai tendance à procéder comme ça. Mais niveau maintenance c'est x templates à modifier à chaque maj... C'est un choix à faire en fonction de la taille du site...

Kaimite

@Digiwebpro : Bootstrap est un framework, un outil, parmi d'autre. 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... mais il n'est pas du tout inévitable.

D'ailleurs, nous n'utilisons pas Bootstrap (que nous considérons comme trop usine à gaz) dans notre agence.

@kaimiteNet : "Un petit point négatif pour le Responsive c'est de "forcer" l'utilisateur a télécharger des informations qui ne seront pas affichées selon son terminal."

Non, justement.
Tu as sans-doute survolé une partie importante de l'article :

"- Une philosophie "Mobile First" et "Enrichissement progressif" facilitant l'accessibilité, la compatibilité et la performance des pages produites
- De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l'affichage de certains composants ou ressources.
"

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

@Digiwebpro Bootstrap la référence en ... ?

@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). Et pour ton thème Magento, c'est un parfait exemple de responsive non maitrisé, j'ai vu la même combine dans bien des thèmes responsive WordPress :(

Souvent les sites "dédiés" ont justement leur propre url en m. pour que l'utilisateur puisse repasser au site non mobile (flickr, rueducommerce, etc.) Mais effectivement tu pourrais juste changer le template sans changer d'url. Les barrières sont de plus en plus minces au final et les techniques se confondent :) J'ai l'impression que les sites en m. sont voués à disparaître pour uniquement envoyer un HTML/CSS différents après UA sniffing.

Commentaire constructif :
"mais là on touche du doigt" >> c'est du digital !

Je suis d'accord avec Digiwebpro.

Quel autre framework Responsive peut se vanter d'être autant utilisé que Bootstrap ?

http://web.developpez.com/actu/59152/Twitter-...

Je pense que l'article de Raphael n'apporte pas grand chose de plus que celui de Stéphanie.

L'intérêt d'un nouvel article aurait été d'avoir un cas d'usage d'implémentation mettant en avant un retour concret d'utilisation avec un framework précis.

@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.
En gros il apporte juste d'être plus généraliste, d'être une entrée en matière.

Merci Raphaël d'ailleurs, à force d'entendre responsive à tort et à travers, c'est toujours bien de remettre l'église au milieu du village.

"Je pense qu'on peut faire un site dédié sans forcément avoir 2 urls.
Détecter le mobile / tablette et charger un thème spécifique. "
Du coup ce n'est plus un site dédié…

@Bootstrap: lourd, pas forcément le mieux équipé. La grande force de Bootstrap c'est surtout que maintenant, la plupart des documents techniques faites par des devs ont de la gueule. :P

@motjoy : En fait nos deux articles n'ont pas le même public ni la même fonction.
Mon article est destiné à un public averti et aborde le "future" du responsive (enfin il y a un an quoi) et tous les enjeux techniques et ergonomiques au delà des media-queries et grilles fluides.
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).
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.) 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. Donc de là à dire qu'il n'apporte pas grand chose de plus je ne suis pas d'accord puisque les buts et lecteurs ne seront pas les mêmes.

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 :)

+1 aux kiwis, et effectivement proposer un article pour Alsa est très simple, « faisez-le » :D

Pour Bootstrap, ça fait un peu peur les commentaires : aucun des pro-bootstrap ne s’est penché sur Foundation (qui est bien mieux adapté à l’univers mobile que Bootstrap), ou même Pure, ou encore sur le couple jQuery UI + mobile, ou même sur des bases plutôt que des structures (Knacss, Toast, Röcssti…) ?

Bootstrap n’est pas la référence — et certainement pas un outil à mettre en avant lorsqu’on s’adresse à un public de tous niveaux.

Pour Foundation, la première place est auto-proclamée sur la home du site :
"The most advanced responsive front-end framework in the world" :D

Mais ce que je trouve intéressant dans ton commentaire Ten, c'est que tu cites différents frameworks, ce qui donne différents points d'entrée pour les lecteurs.

Par exemple, je ne connaissais pas Foundation et ça me donne envie d'y jeter un coup d'oeil. ( donc je n'aurai pas perdu ma matinée :) )

La plus value d'un article sur ce site est aussi parfois dans les commentaires où la discussion continue de vivre.

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.

A continuer peut-être sur le forum :)

@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 :)

Tout d'abord merci pour cet article fort éclairant.

Sur le plan technique, je reste un peu dubitatif sur le fait que le RWD implique nécessairement une grille fluide. Si tel est le cas comment nommer les sites dont la dimension des blocs seraient définis en pixels mais changeraient de mise en forme en fonction de la taille de la fenêtre (via media queries) ?

Il me semble d'ailleurs que fixer la largeur des blocs en em ne les rend pas plus fluide que le pixels (seul le % a cette vertu), juste plus flexible peut-être.

Emmanuel

@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. La grille fluide est le départ de cette réflexion, complétée par d'autres moyens pour en améliorer la qualité.
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.
Par contre certains sites limitent la taille maximale en pixels (notamment ceux s'étant adaptés en RWD sans refondre le visuel, mais pas seulement).

@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). Ma question portait plutôt sur sur le problème de la définition du Responsive Web Design. Par exemple comment définir le site qui présente la google nexus : http://www.google.fr/nexus/7/, que ce soit une bonne ou mauvaise pratique ? Des pistes ? un nouveau terme à inventer ?

@emg75 : Ce site correspond parfaitement à la définition d'un design "Responsive". Pas besoin de nouveau terme à inventer ;)

@Raphael : si vous pouvez m'aider a résoudre ce problème svp?

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?

C'est aussi quelque chose qui a sauvé l'e-Commerce. Et une bonne révolution numérique.

Merci ! vous êtes tous une source d'info étant amateur j'ai beacoup de problèmes à ce sujet

l'article et vos commentaires m'on aider à voir les choses plus claires

Hello,

est-ce que quelqu'un peut me dire comment on injecte des composants html ou du contenu avec l'adaptativ design ?

Merici infiniment :)

@eliottinthesky : Bonjour,

En HTML directement ce n'est pas tout à fait possible pour le moment. Si tu souhaites le faire côté "front", la meilleure solution est d'employer AJAX.

Oui clairement, quelque chose qui a sauvé l'e-Commerce et une véritable révolution numérique!