fait référence à un type de design qui s’adapte à l'environnement dans lequel il est affiché et réagit de manière appropriée en utilisant certains mécanismes (CSS, HTML, Javascript, Serveur). ⟶ Il s'agit d'une technique de conception qui vous permet de créer un site Web unique qui s'adapte à l'appareil sur lequel il est visualisé, qu'il s'agisse d'un ordinateur, un téléphone intelligent ou une tablette. ⟶ Un site construit avec cette technique se redimensionnera automatiquement afin d’optimiser l’expérience sur les différents appareils. ⟶ 3 éléments clés : grille flexible, images adaptatives, media queries. RESPONSIVE WEB DESIGN
mise en page fluide a des dimensions qui dépendent de la grosseur du navigateur web de l’utilisateur. Elles sont déterminées par un pourcentage, ce qui permet, dans la plupart des cas, de prendre tout l’espace alloué et de toujours être plein écran. ⟶ Mise en page adaptive : Différentes mises en page sont déclenchées par l’entremise de points d'arrêt (Breakpoints). Règle générale, il peut y avoir de trois à six points d'arrêt afin d’adapter la mise en page à plusieurs tailles prédéfinies (ordinateur, téléphone intelligent, tablette). RESPONSIVE WEB DESIGN
s'agit d'un hybride de mise en page fluide de base et de la mise en page adaptive. Il y a des points d'arrêt prédéfinis, mais l’utilisation d’une grille de colonnes flexibles permet au contenu de prendre tout l’espace alloué à l’intérieur de celles-ci, les éléments se transforment constamment entre les points d’arrêts en offrant toujours la meilleure structure du site. RESPONSIVE WEB DESIGN
- Pour les appareils à petit écran, tels que les téléphones en mode portrait. 480 pixels - Pour les appareils à petit écran, tels que les téléphones en mode paysage. 600 pixels - Tablettes plus petites (Kindle d'Amazon, Nook, etc.) en mode portrait. 768 pixels – Tablettes comme l'iPad en mode portrait. 1024 pixels - Tablettes comme l'iPad en mode paysage, ainsi que certains écrans d'ordinateur portable, netbook, et desktop. 1200 pixels - Pour écrans larges, portables et desktop à plus haute résolution. RESPONSIVE WEB DESIGN
que vous pouvez présenter le contenu de la bonne taille pour la quasi-totalité de votre public cible. La faiblesse est que vous limitez votre capacité à adapter le contenu d’un point de vue fonctions. ⟶ Avantages : ⟶ Avoir une seule URL pour chacune des pages ⟶ S’adapte à l’écran d’un maximum d’appareils ⟶ Facilite une expérience de marque uniforme d’un appareil à l’autre ⟶ Les mécanismes de SEO, conversion et le suivi (tracking) sont plus faciles à mettre en œuvre ⟶ Le soutien et la gestion du site sont simplifiés du fait de n’avoir qu’un site web ⟶ Inconvénients : ⟶ Coûte généralement plus cher à mettre en œuvre initialement (défis de conception et compatibilité aux appareils et fureteurs multiples) ⟶ Difficile d’y intégrer des fonctions spécifiques aux appareils mobiles (géolocalisation etc.) ⟶ Les temps de chargements sont généralement plus lents que ceux d’une version mobile dédiée RESPONSIVE WEB DESIGN
est que vous pouvez présenter un contenu et des fonctionnalités mieux adaptés/ciblés aux besoins spécifiques de votre public cible dans un contexte prédéfini. ⟶ Avantages : ⟶ Conception initiale plus facile à mettre en place ⟶ Facile d’y intégrer des fonctions spécifiques aux appareils mobiles (géolocalisation etc.) ⟶ Possibilité de limiter les fonctions et contenu au strict nécessaire (expérience spécifique au contexte) ⟶ Les temps de chargements sont habituellement plus rapides que ceux d’une version adaptative ⟶ Inconvénients : ⟶ Coûte généralement plus cher à maintenir et mettre à jour (sites multiples) ⟶ URLs multiples pour chaque page ⟶ Les mécanismes de SEO, conversion et e suivi (tracking) sont plus difficiles à mettre en œuvre ⟶ Combien de versions différentes seront requises afin de bien cibler nos utilisateurs (téléphone, tablette etc.) ? DEDICATED MOBILE WEBSITE
manière de concevoir un site web qui prend très largement en compte l'accessibilité, la sémantique et le référencement. En séparant strictement le fond et la forme, cette technique permet de présenter un contenu simple et de rendre un service minimum à tous les utilisateurs, quel que soit le débit de leur connexion ou leur navigateur, tout en améliorant progressivement l'affichage proposé en fonction de l'équipement de l'internaute. ⟶ La dégradation élégante (top-down) dans le domaine de la conception web correspond à l'adoption massive à deux nouveaux concepts, la séparation du fond (sémantique XHTML) et de la forme (CSS), l'adoption des standards du W3C grâce à l'émergence de nouveaux navigateurs sur le marché. ⟶ Cette idée de régression était soutenue par l'amélioration rapide et continue des technologies, les développeurs visant d'abord les navigateurs les plus récents et considérant ensuite les autres. ⟶ Ces méthodes ont un même but, rendre le contenu accessible au plus grand nombre. Ce qui les oppose est leur approche du problème. PROGRESSIVE ENHANCEMENT
client, ce qui signifie que la page entière est servie au navigateur de l'appareil (le client), celui-ci modifie ensuite l’apparence de la page. ⟶ Les mêmes principes peuvent être appliqués du côté serveur, c'est à dire avant même que la page soit livrée, le serveur détecte les attributs de l’appareil client, et offre une version du site optimisée pour les dimensions et caractéristiques techniques de celui-ci. ⟶ L’adaptation du côté serveur peut donc permettre de fournir une expérience différente et ciblée, sans vous empêcher d'utiliser les technologies les plus récentes, couche-sur-couche, afin de concevoir une expérience optimale peu importe l’appareil utilisé. SERVER-SIDE - RESS
Josh Clark met l'accent sur trois aspects essentiels des comportements d’utilisation mobile : les micro-tâches, la proximité, et le divertissement. ⟶ Ce qui rejoint assez bien la répartition que Google fait des utilisateurs de mobiles «urgent now, repetitive now, bored now ». ⟶ Ces comportements se traduisent en certains types d’interaction communs qu’il faut prendre en considération lors de la conception de solutions mobiles : ⟶ Recherche (informations urgentes, locales): J'ai besoin d'une réponse à quelque chose maintenant, fréquemment lié à ma position actuelle. ⟶ Exploration / divertissement : J'ai un peu de temps à tuer et je recherche des distractions pour occuper mon temps d'inactivité. ⟶ Création / modification (changement urgent / micro-tâches): J'ai besoin de faire quelque chose maintenant qui ne peut attendre.
d'expériences Web mobiles entame la conversation avec une liste d'options de navigation au lieu de faire primer le contenu. ⟶ Règle générale, le contenu doit primer sur la navigation pour améliorer l’expérience mobile. Que les visiteurs y soit afin de vérifier des données fréquemment mises à jour, pour rechercher de l'information locale, ou pour trouver des articles par l’entremise d’outils de recherche ou de communication, ils veulent des réponses immédiates à leurs besoins et non votre plan de site. ⟶ Il est donc important d’avoir un en-tête et une navigation simple qui permettront l’optimisation de l’accès au contenu le plus rapidement possible malgré la résolution d’écran réduite de certains appareils.
morganepeng
isaikaori
hjmkth
ajstarks
weddingpark
medley
goodpatch
hiromitsuuuuu
hrtnde
romanshamin
tatsuyasawanobori
sugiyama_sukedachi
davidbonilla
holman
bermonpainter
sstephenson
dotmariusz
jmmastey
brettharned
carmenintech
myddelton
lara
maltzj
caitiem20
![DESIGN ADAPTATIF / MOBILITÉ ANDRÉ DUBREUIL ARCHITECTE D’INFORMATION [email protected]](https://files.speakerdeck.com/presentations/e8a5539095340131cd82465820109070/slide_0.jpg){kind=link}
