Intervention de 20 min aux Rencontres Interactives de Caen - Mai 2012.

1. Le Responsive Design
impact sur les processus de production
Assistance à la Maîtrise d’ouvrage (AMOA)
Ergonomie
Design

2. C’est quoi le web?
2011: 600 nouveaux terminaux

3. Trafic moyen par type de terminal
% des utilisateurs
2011
2015
Mobiles non-Smartphones
0,11 %
0,06 %
Objets connectés (M2M)
0,2 %
3,6 %
Ebook readers
0,7 %
3,9 %
Tablettes
2,7 %
11,2 %
Smartphones
4,9 %
16,8 %
Laptops et desktops
91,4 %
64,4 %
Source: http://newsroom.cisco.com/press-release-content?type=webcontent&articleId=668380
2015 en France
• 28% des visiteurs sous tablettes
et mobiles
• Résolution moyenne mobile :
960×640 / 3,5 pouces / 326 ppp
• 33% des visiteurs sous
terminaux tactiles
• + 600 nouveaux terminaux sur le
marché.

4. Responsive design: Définition
« Le Responsive Design et une approche de conception Web qui
permet à une interface de s’adapter aux différentes tailles et
résolutions des terminaux qui la consultent. »

5. Les bénéfices (théoriques)
• Division des coûts de conception
• Division des coûts/temps de maintenance
• Amélioration globale de l’expérience utilisateur
sur TOUS les supports
• Anticipation sur l’avenir des usages

6. La réalité
L’approche responsive peut affecter:
• Le modèle économique: Pas de régie pub
• La RH :Compétences rares / chères
• La direction des projets: Nouveaux processus
L’approche responsive impacte
• Le choix des contenus (Flash, propriétaire, taille..)
• Le choix des fonctionnalités
• La relation client: Livrables plus abstraits
• Les coûts de tests

7. Responsive ou pas?
• 0% ou 100% Responsive?
• Responsive partielle?
Étudier la « compatibilité responsive »
• Des contenus (Content first)
• Des supports (Mobile first)
• Tenter l’approche «Patterns first»?

8. Responsive jusqu’où?
Mobiles
Smartphones
Smartphones / tablettes / e-Readers / NetBookd
Desktop / TV, etc….
1920 x 1200
2550 x 1440
96
X
65
128
X
128
128
X
160
176
X
208/220
240
X
320
320
X
480
640
X
200/360/480
800 X 352/400/480
1024 X 768
1280 X 720/800/1024
• Listez les terminaux à prendre en compte
• Constituez vos familles de résolution
• Définissez les points de ruptures

9. Bonnes pratiques 1: Le contenu
Compatibilité des contenus
Une interface responsive restreint le contenu aux limites «physiologiques»
de chaque terminal.
Solutions:
• Limiter la longueur des articles
• découper les contenus en plusieurs parties (= gabarit spécifique pour
les petites résolutions).
• Modifier la taille des éléments pour les grandes résolutions
• Faire disparaître le contenu sur certaines résolutions
TIPS: Précisez le degré de compatibilité de chaque contenu avec chaque
terminal retenu dès l'inventaire des contenus. Vous devez définir si un design
pattern ou un type de contenu posera des problèmes d’affichage ou une
expérience utilisateur pénible sur une résolution ou un terminal.

10. Bonnes pratiques 2: les fonctionnalités
Compatibilité des fonctionnalités
• Toutes les fonctionnalités ne sont pas disponibles sous tous les terminaux.
• Toutes les fonctionnalités ne sont pas pertinentes sous tous les terminaux.
Attention aux contraintes hardware
•
•
•
•
La géolocalisation
Aux interactions riches (Formulaires complexes, un configurateur, etc…)
Orientations
Cameras ou photos

11. Bonnes pratiques 3: l’ergonomie
Considérations ergonomiques
Attention aux
•
•
•
•
•
Systèmes d'information complexes
Navigations multiples
Méga menus
Arborescences à quatre ou cinq niveaux de profondeur.
Performances!
TIPS:
• Pour optimiser l'accessibilité : limiter le masquage de fonctionnalités entre
les différentes versions.
• Si vous choisissez malgré tout de cacher certaines fonctionnalités, alors
pensez à mettre un switch "Version desktop" / "Version smartphone", qui
puisse désactiver / réactiver les media-queries, à l’aide de javascript.

12. Bonnes pratiques 4: le design
Ne pensez pas « webdesign »,
pensez « Direction Artistique»!!!!

13. Le processus de conception « Patterns
first »
Phase
préparatoir
e
• Liste des terminaux visés
• Etc…
UX
Prototypa
ge
• Inventaire des contenus &
fonctionnalités
• Architecture de l’information
(siteflow)
• Inventaire des design
patterns
• Zoning
• Modèle de données
• Inventaire des
incompatibilités
• Définition du nombre de
versions dédiées
• Liste des points de ruptures
Compétences:
• Connaissances des patterns
natives
• Flux HTML
• Possibilités JavaScript
• Connaissance des
contraintes Devices
• Expérience des usages
• Anticiper les contraintes de
conception
• Prototypes HTML
• Tests sur terminaux
Productio
n
• Design
• Intégration finale
• Développement
• Mapping
• Etc…
Compétences:
• Ergonomie IHM
• Flux HTML
• Intégration
• Developpement JavaScript
• Connaissance des
contraintes Devices
• Expérience des usages
• Anticiper les contraintes de
conception

14. Phase de prototypage
UX
Prototypage
Product
Version 1
Version 2
Desi
gn
Inventaire
des
Design
patterns
Arboresce
nce
Version 3
Layout
Patterns
Prototypes
(HTML/CSS/JS)
Test
s
(re)Intégration

15. Layout patterns
1
1
1
1
1
2
2
3
3
2
1
3
2
1
2
1
2
2
2
3
3
1
1
2
2
3
1
2
3
1
3
3
2
2
1
3
2
1
3
2
1
3
2
1
3
3
3
3

16. Conclusion
Adaptez vos processus de production à votre
contexte d’entreprise, aux profils de vos clients et
aux projets!
Merci!
laurent@demontiers.com
Twitter: @L_Demontiers