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

1. ANDRÉ DUBREUIL
ARCHITECTE D’INFORMATION
adubreuil@tink.ca
DESIGN ADAPTATIF / MOBILITÉ

2. DESIGN ADAPTATIF

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. 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. 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. 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. 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. 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. SITE MOBILE DÉDIÉ

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

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. 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. À CONSIDÉRER

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. 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. RÉFÉRENCES

18. RÉFÉRENCES
GRILLES FLEXIBLES
18

19. RÉFÉRENCES
LITTÉRATURE
19

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