ANDRÉ DUBREUIL
ARCHITECTE D’INFORMATION
adubreuil@tink.ca

DESIGN ADAPTATIF / MOBILITÉ
DESIGN ADAPTATIF
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF
⟶

Le terme « Design adaptatif » fait
référence à un type de design qui
s’adapte à...
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Mise en page fluide :
Une mise en page fluide a des dimensions
qui dépendent d...
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Mise en page adaptative :
Il s'agit d'un hybride de mise en page fluide
de bas...
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Points d’arrêt typiques :
320 pixels - Pour les appareils à petit écran, tels ...
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

Points d’arrêt

Grille flexible

@media screen (max-width: 767px) {
…
}
@media sc...
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF
⟶

La force de cette approche est que vous
pouvez présenter le contenu de la bonne...
SITE MOBILE DÉDIÉ
DEDICATED MOBILE WEBSITE

SITE MOBILE DÉDIÉ
⟶

La force de cette approche est que vous
pouvez présenter un contenu et des
...
ALTERNATIVES
PROGRESSIVE ENHANCEMENT

AMÉLIORATION
PROGRESSIVE
⟶

L' amélioration progressive (bottom-up) est une manière
de concevoir ...
SERVER-SIDE - RESS

CLIENT/SERVEUR
⟶

Une conception adaptative est implantée du
côté client, ce qui signifie que la page ...
À CONSIDÉRER
MOBILITÉ

TROIS TYPE DE COMPORTEMENT
D’UTILISATION IMPORTANTS
⟶

L'auteur Josh Clark met l'accent sur trois aspects essent...
MOBILITÉ

LE CONTENU PRIME SUR LA NAVIGATION

⟶

⟶

⟶

Trop d'expériences Web mobiles entame la conversation avec une list...
RÉFÉRENCES
RÉFÉRENCES

GRILLES FLEXIBLES

18
RÉFÉRENCES

LITTÉRATURE

19
RÉFÉRENCES

ARTICLES
⟶

http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future
Steven Cham...
Upcoming SlideShare
Loading in...5
×

Design adaptatif / Mobilité

724

Published on

Présentation des options de design web disponibles afin de répondre aux besoins mobiles des utilisateurs.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
724
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design adaptatif / Mobilité

  1. 1. ANDRÉ DUBREUIL ARCHITECTE D’INFORMATION adubreuil@tink.ca DESIGN ADAPTATIF / MOBILITÉ
  2. 2. DESIGN ADAPTATIF
  3. 3. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Le terme « Design adaptatif » 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. 3
  4. 4. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Mise en page fluide : Une 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). 4
  5. 5. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Mise en page adaptative : Il 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. 5
  6. 6. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Points d’arrêt typiques : 320 pixels - 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. 6
  7. 7. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF Points d’arrêt Grille flexible @media screen (max-width: 767px) { … } @media screen (min-width: 1200px) { … } .row-fluid .span1 { width: 5.982905982905983%; } .row-fluid .span2 { width: 14.52991452991453%; } Images Typographie Img { p{ max-width: 100%; } font-size:0.875em; /* 16x.875=14 */ } .sidenote { font-size:0.75em; /* 16x0.75=12 */ } 7
  8. 8. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ La force de cette approche est 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 8
  9. 9. SITE MOBILE DÉDIÉ
  10. 10. DEDICATED MOBILE WEBSITE SITE MOBILE DÉDIÉ ⟶ La force de cette approche 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.) ? 10
  11. 11. ALTERNATIVES
  12. 12. PROGRESSIVE ENHANCEMENT AMÉLIORATION PROGRESSIVE ⟶ L' amélioration progressive (bottom-up) est une 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. 12
  13. 13. SERVER-SIDE - RESS CLIENT/SERVEUR ⟶ Une conception adaptative est implantée du côté 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é. 13
  14. 14. À CONSIDÉRER
  15. 15. MOBILITÉ TROIS TYPE DE COMPORTEMENT D’UTILISATION IMPORTANTS ⟶ L'auteur 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. 15
  16. 16. MOBILITÉ LE CONTENU PRIME SUR LA NAVIGATION ⟶ ⟶ ⟶ Trop 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. 16
  17. 17. RÉFÉRENCES
  18. 18. RÉFÉRENCES GRILLES FLEXIBLES 18
  19. 19. RÉFÉRENCES LITTÉRATURE 19
  20. 20. RÉFÉRENCES ARTICLES ⟶ http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future Steven Champeon - Progressive Enhancements ⟶ http://alistapart.com/article/responsive-web-design Ethan Marcotte - Responsive Web Design ⟶ http://alistapart.com/article/understandingprogressiveenhancement Aaron Gustafson - Understanding Progressive Enhancement ⟶ http://blog.easy-designs.net/archives/2011/11/16/on-adaptive-vs-responsive-web-design Aaron Gustafson - Adaptive vs Responsive Web Design ⟶ http://www.loganfranken.com/blog/251/responsive-vs-adaptive-web-design Logan Franken - Responsive vs Adaptive Web Design ⟶ http://www.lullabot.com/articles/responsive-adaptive-web-design Jared Ponchot - Responsive & Adaptive Web Design ⟶ http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php Viljami Salminen - Adaptive vs Responsive, What's the Difference ⟶ http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html Garrett Goodman - Client-side vs Server-side ⟶ https://speakerdeck.com/dmolsen/ress-an-evolution-of-responsive-web-design Dan Olsen – RESS ⟶ http://www.lukew.com/ff/entry.asp?1392 Luke Wroblewski - RESS 20

×