(RWD) Créé en 2011 par Ethan Marcotte sur A List Apart et dans son livre Responsive Web Design. Selon ce concept, le développement et le design doivent répondre au comportement de l’utilisateur et à son environnement, quel qu’il soit.
à un mix de grilles et structures flexibles, médias, et CSS Media Queries. Le site web doit posséder une technologie qui répond automatiquement aux préférences de l’ utilisateur. Cela élimine donc le besoin de nouveaux développements pour d’éventuels futurs devices.
un terme générique, souvent marketing, qui représente le concept. En termes techniques, on parle également de l’ Adaptive Web Design (AWD). Le RWD et l’AWD ont le même but mais diffèrent par la méthode employée pour l’atteindre.
“Ensemble de structures statiques. Ces structures ne sont pas relatives à la largeur de la fenêtre; elles se redimensionnent selon des Break Points prédéfinis.”
la structure selon la résolution, mais n’utilise aucune détection par device. Le concept de détection par device se nomme Device Experiences. Cette approche, utilisée jusqu’alors, n’envoie au client que ce dont il a besoin.
finement le site web pour un device spécifique. Tout est cependant basé sur les redirections grâce aux à la détection par user agents. Enfin, pour chaque device, le site web a besoin d’ un code différent, potentiellement parsemé de code dupliqué.
serveurs. Un seul set de templates défini un site entier pour tous devices. Les composants clés, qui peuvent varier selon le device, sont gérés par le serveur.
encore expérimental. Il est sujet à de nombreux travaux de recherche et d’optimisation, notamment de la part de personnes comme Brad Frost ou Luke Wroblewski. http://bit.ly/UA6yH4
seul code base Un seul déploiement Une seule URL Permet l’utilisation d’un site pour tout device Gestion des médias Gestion de composants tiers Nécessite une remise en question organisationnelle
pour un type de device On n’envoie que le strict minimum au client Peu de perturbations niveau organisationnel Un set de code par device Détection par user agent Le multi-devices nécessite beaucoup de maintenance
un type de device Un seul code base Un seul déploiement Une seule URL On n’envoie que le strict minimum au client Expérimental Nécessite un gros changement côté workflow et système
de question. Pour cela, le Responsive Retrofitting est une approche populaire pour créer une meilleure expérience utilisateur pour les devices non- desktop.
place L’interface reste familière aux utilisateurs Simple à gérer niveau organisationnel On gratte seulement la surface du problème Beaucoup de déchets de code Problèmes de performance Le concept du fix “pansement”
peu de risques Apprendre à être flexible Permet de repérer des éléments non nécessaires Un futur Mobile-first Cela reste un site m-dot Fix “pansement” Le projet a des chances d’être tué dans l’oeuf
un nouveau départ La question de la performance est centrale Considération multi-devices Future-friendly Consommateur de temps Nécessite un “shift” mental Difficultés niveau organisationnels
petites parties. Comme le retrofitting, il est impossible d’effectuer un re-design massif. C’est pourquoi certaines compagnies préfèrent y aller par étape. Il existe plusieurs types de Piecemeal.
une sous-liste de pages. Des compagnies comme Microsoft ont adapté des homepages en RWD, tout en laissant la majorité des pages intérieures en desktop uniquement.
à être flexible Chances accrues de lancement du projet Aucune continuité de l’expérience utilisateur Re-design de court terme L’étape suivante a des chances d’être mise de côté
le découpage de l’UI en composant Meilleure vision de l’effort nécessaire Les utilisateurs peuvent être destabilisés par une UI “Frankestein” Peut être arrêté au milieu du processus Problèmes de co-existence technique
permettent de définir des conditions par rapport aux capacités d’un device. Largeur et hauteur de la fenêtre du navigateur, largeur et hauteur de l’écran du device, orientation, résolution, etc.
screen and (min-device-width: 640px) and (max- device-width: 1136px) {} // More or equal than 2 pixel ratio @media only screen and (-webkit-min-device-pixel-ratio: 2) {} // Landscape device orientation @media only screen and (orientation: landscape) {}
media queries pour charger le bon set d’images selon le DPI de l’écran. Sans cela, dans le cas d’un écran low DPI, l’ image pourrait être trop lourde, et dans l’autre cas, l’image pourrait être pixelisée.
du RWD, c’ est de fournir des médias adaptés au client. Il est très important de toujours maintenir le scope d’un développement mobile. Il est donc essentiel d’éviter de charger des médias plus lourds que nécessaires.
valeur relative peut simplifier le CSS et maximiser le meilleur résultat niveau structure. Marges extérieures, marges intérieures, taille de police, etc.
permet l’utilisation de la méthode window.matchMedia(). var mq = window.matchMedia(‘(min-width: 500px)’); if (mq.matches) {} else {} Attention au support de cette méthode pour les navigateurs (IE10+, Android Browser 4+).
media queries en CSS, pour éviter de dupliquer la définition des conditions entre le CSS et le JavaScript. Cependant, cet avantage a aussi un inconvénient : un resize de l’interface n’appliquera pas les changements au JavaScript.
nicolascava
.png){kind=avatar}
honmarkhunt
masaruhr
irinanazarova
nealle
mine2424
akira888
rinngo0302
orgachem
yuukiw00w
yamamotok
hiragram
ryosukedtomita
rocio
danielanewman
marktimemedia
aki_iinuma
colly
keithpitt
pedronauck
wjessup
jonyablonski
mojombo
bermonpainter
gr2m
![CSS Media Queries // Less script div { background: url(/images/[email protected]);](https://files.speakerdeck.com/presentations/2355d80e2771419eb2f2a40b3f3dbeb9/slide_38.jpg){kind=link}
