Bonjour,
Je viens de publier un article qui traite du responsive design: Les fondamentaux du Responsive Web Design.
J'espère qu'il vous plaira.
Cordialement
Version imprimable
Bonjour,
Je viens de publier un article qui traite du responsive design: Les fondamentaux du Responsive Web Design.
J'espère qu'il vous plaira.
Cordialement
Merci pour le partage je le lis ce soir.:)
Très bon article :ccool:
Super article, vraiment impeccable rien à redire :ccool:
Merci pour ce travail, je diffuse! :ccool:
Très bon article! :ccool:
Juste une remarque:
l'image représentant la résolution 320 * 480 pixels est la même que celle juste au dessus (problème de copier-coller du lien a priori ;) )
Article très complet, mais y'a quand même des trucs avec lesquels je ne suis pas d'accord.
Par exemple la technique des images compressées.
http://objetdirect.developpez.com/tu...es/image21.png
Comment une image plus grande et non compressée pourrait être plus légère qu'une plus petite compressée à 80% ? ça n'a pas de sens !
Il y a sans doute confusion, peut-être qu'il ne s'agit pas 0% de compression mais un indice 0 en qualité, d'après l'algo JPEG. Mais voilà ce que ça me donne quand j'enregistre une image avec une qualité à 0% :
http://i.imgur.com/s3VOARU.jpg
C'est insipide, même en lui mettant une taille 16 fois plus petite sur navigateur. Je ne vois pas en quoi les algos de redimensionnement des images des navigateurs donneraient un meilleur résultat que celui de Photoshop.
Aussi, je suis complètement contre le principe du Responsive Server-Side qui va selon moi à l'encontre du principe-même du Web responsive. Le Web Responsive c'est une méthodologie et des techniques qui visent à afficher un même contenu web de la manière la plus adéquate selon le contexte d'utilisation. Or là on commence à faire de l'User Agent Detection côté serveur dans le but d'envoyer un contenu différent. A l'extrême cette pratique ne vaut pas mieux que celle de faire une version mobile du site, m.monsite.com à la mode 2005...
Comme le scandent tous les auteurs cités, il n'y a qu'un seul Web (One Web Approach). Il faut donc que ce qui sorte des serveurs soit identique qu'importe le type de périphérique qui le demande. Sinon ça équivaut à discriminer les devices.
Attention, je ne dis pas qu'il faut afficher le même contenu sur tous les devices ! Le responsive content est très important, peut-être l'aspect le plus impactant du Web responsive d'ailleurs. Seulement dans la démarche, il faut que ce soit le client qui réclame un contenu différent, et non le serveur qui lui serve un contenu différent sans lui demander son avis.. Le chargement de CSS selon le résultat d'une media query est un bon exemple, et on peut facilement adapter ce principe pour charger des JS et des données sérialisées en AJAX selon le match de media queries.
Bonjour !
Très bon :ccool:, article clair et pertinent qui pose les fondamentaux du Responsive Design.
Concernant les images, j'ai pour habitude d'utiliser la même approche avec ce polyfill : Picturefill
Du coup, je vais comparer avec Retina.js.
Merci !
A+
ps : j'adopte aussi la même approche que @SylvainPV concernant cette philosophie : il faut que ce soit le client qui réclame un contenu différent [note : en fonction du "match de media queries" ], et non le serveur qui lui serve un contenu différent sans lui demander son avis.
En effet, il faudra que je la remplace :/Citation:
Envoyé par xelab
Je le ferai dès que j'aurai un petit moment
Merci !
Bonsoir,Citation:
Envoyé par Kaamo
Tout dépend notre stratégie, mais l'intérêt de déléguer une partie de cela sur le serveur est de limiter des appels "inutiles" avec le serveur et de réduire la bande passante.
Après, nous pouvons faire comme nous voulons: nous pouvons tout faire côté client, serveur ou faire un mixe des deux ! Tout dépend du temps et de ce que vous voulez faire :)
Il est vrai que je me suis mal exprimé.Citation:
Envoyé par SylvainPV
En fait, ce que je veux dire, c'est une image de taille X, compressé normalement, s'affiche quasi de la même façon qu'une image 2X, compressé plus fortement, mais que nous affichons en taille X.
Cela permettant de réduire la bande passante (très intéressant pour la mobilité donc).
Merci pour vos tous vos retours !
Je vais en prendre note et améliorer mon article afin de rectifier certains de mes propos et de corriger également certains petit soucis d'édition.
Merci encore
Pour réduire la bande passante, la tendance est aux sites full-AJAX: lorsque l'on charge le site, on charge la page principale (souvent index.html) qui est une sorte de coquille vide avec les librairies, scripts, CSS et le DOM correspondant à la structure de base (header, footer, menu de navigation etc...). Puis tout le contenu est chargé en AJAX ensuite.Citation:
Envoyé par roche.jul
Au lieu de retélécharger tout le DOM structurant et d'aller chercher des scripts et CSS en cache, on charge uniquement le nouveau contenu HTML. Pour aller encore plus loin, on peut également charger uniquement la data sérialisée (bien souvent en JSON) et déléguer le rendu de la page au Javascript. Là on atteint le maximum en optimisation de bande passante, au prix d'un chargement au démarrage un peu plus long (mais qui peut se faire en tâche de fond)
Avec ce mode de fonctionnement, on peut donc passer des arguments aux requêtes AJAX et ne pas avoir besoin d'UA sniffing côté serveur.
Donc on gagne réellement en rapport qualité/poids en prenant des images plus grandes et une compression plus élevée ? Est-ce que si on prend l'image de taille X et qu'on la compresse autant que l'image 2X, on ne peut pas arriver au même ratio qualité/poids ?Citation:
Envoyé par roche.jul
Une technique que j'utilisais pour les images de résolution différentes en web responsive, était de modifier directement l'attribut src de mes images en Javascript
pour une image de 240 pixels de largeCode:
2
3
4
5
6
Je peux ajouter facilement ces arguments selon la deviceWidth puisque je repose presque entièrement sur du templating Javascript dans mes sites. L'inconvénient est qu'on doit disposer côté serveur des images en différentes tailles, ou d'une fonction de retaillage à la volée.
Pour les images, il y a un très bon article sur les images sur html5rocks: http://www.html5rocks.com/en/mobile/...gh-dpi-images/
Et pour tu sites les site full-ajax. Certes, je suis d'accord, c'est juste que souvent, beaucoup de gens ont tendance à mettre toutes les CSS / Js dans le header, et ne font pas la vérification de la nécessité.
Après, comme je le dis, ce n'est pas une obligation, l'aspect RESS: c'est un supplément qui est à mon sens intéressant, mais pas indispensable.
Cordialement
Très bon article, si seulement plus de site pouvaient en bénéficier…
Petite question, pourquoi toujours utiliser le query screen and (max/min-width) au lieu de simplement max/min-width ? Même si quasiment tout le monde utilise le média screen, celui qui en utilisera un autre n'affichera rien du tout non ?
PS: Attention il y a une image répétée deux fois juste avant le chapitre VI. Faisons un exemple, j'imagine que le rendu mobile ne ressemble pas à ça ;)
Et bien voilà, je ne sais quoi vous dire ... :roll:
J'ai lu votre article sur le responsive design il y a deux jours, et je suis débutant en html, php, css et autres.:roll:
Malgré quelques petits soucis de mise au point, le résultat est le suivant (voir les images jointes), j'ai pu réaliser mon premier site RD grâce à vos conseils.
Donc un grand MERCI et un grand BRAVO !!! :ccool:
Vous avez des vrais dons de pédagogue, franchement top ...
Bonjour,
Article intéressant.
Je me permet de signaler un bug rencontré sous Chrome :
- dans les sources du css la ligne 39 est héritée et, lorsque je réduit la largeur de ma fenêtre de manière à avoir le menu à l'horizontale, le menu prend toute la hauteur de la page comme lorsqu'il est à la verticale
Supprimer cette ligne corrige le problème.
J'imagine que tu voulais dire "limiter la consommation de bande passante" ;)Citation:
Envoyé par roche.jul
Citation:
Envoyé par shenron666
Je rencontre le même problème sous Chrome mais en supprimant la ligne 39, cela ne résout pas le problème. Peux-tu spécifier la ligne que tu as enlevé ?
Merci
J'ai fait la modification dans le block css suivant :
en supprimant la ligne 39 correspondant à "min-height: 100%;"Code:
2
3
4
5
6
Bon article, il très intéressant, très bien illustré, merci !
Bonjour,
Débutant en html, j'avais construit mon site en ....2001 avec des sympathiques javascripts donnant de la vie au site.
Effectivement aujourd'hui à refaire un site, mieux vaut songer à la faire comme vous dites ....'responsive' :D
j'ai lu et relu tout l'intérêt et c'est bien d'y avoir pensé avec le nombre grandissant d'écrans aux tailles toutes différentes.
Après avoir téléchargé votre example décrit, il fonctionne très bien en cliquant sur 'index'.
Le hic d'où ma question sur ce forum, lorsque je l'ouvre avec un editeur de site namoweb et que je l'exécute, il apparait un msg 'erreur survenue dans le script de cette page' - erreur ligne 6 - caractère 2770 - type accès refusé. je continue alors à exécuter les scripts et tout 'baigne'.
J'ai aussi repris le fichier Inex sous NVU, autre editeur de site et là pas d'erreur hormis que l'aperçu donne la colonne rouge 'menu' et dessous la partie centrale.
Quelqu'un aurait - il un moment pour m'aider à solutionner ces petits bugs ?
Bien cordialement à touus pour ce gigantesque travail quue vous faites avec internet et le web
Bonjour, en espérant que ce sujet soit toujours d'actualité...! :?
Tout dabord merci pour le travail ! J'ai essayé de me servir de cette base pour me faire un petit site internet mais je me heurte à un problème :aie:
Tout semble fonctionner mis à part le menu déroulant. Aucun problème lorsqu'il est en "mode" horizontal mais impossible de le faire fonctionner quand il passe en "mode" vertical :?
<div class="menu">
<ul>
<a href="Home.html"><li>Home</li></a>
<a href="Event.html"><li>Events</li></a>
<a href="Restaurant.html"><li>Restaurant</li></a>
</ul>
<select>
<option selected="selected">Home</option>
<option>Events</option>
<option>Restaurant</option>
</select>
</div>
Merci d'avance :P