1. 1. Gurilla Responsive Design Latelier qui vous fera aimer le mobile (et le reste) Stphanie Walter - Flupa UX-Days 2015 Image Jeremy Keith
2. 2. www.inpixelitrust.fr @WalterStephanie Designer web et mobile, spcialise en interface pense que le CSS est un outil de design
3. 3. En attente dune exprience similaire quelque soit lappareil Des utilisateurs multi-cran Image Clemens Lcker
4. 4. Et a cest juste Android en 2014. Je vous laisse imaginer la suite Fragmentation des tailles dcran
5. 5. Et puis le reste des zappareils des zinternets Illustration par Rob Gill
6. 6. Des outils de conception figs
7. 7. Un processus pas adapt lintgration aux mdias
8. 8. Les vrais points de rupture dans le mdia
9. 9. Le Challenge en 1h30 Trouver des modes de conception plus flexibles qui correspondent aux besoins des mdias modernes
10. 10. Disclaimer(s)
11. 11. 1. Inventaire de contenus
12. 12. Partir sur des bases solides et identifier les potentiels points bloquants pour lintgration Inventaire des contenus du site
13. 13. La thmatique Nous allons nous intresser une page produit
14. 14. 2. Priorisation des contenus
15. 15. Priorisation de contenus Ces contenus seront-ils tous prsents sur toutes les tailles dcran ? Ces contenus ont-ils la mme priorit quelque soit la taille du mdia ? Image Nick Royer
16. 16. Couleur de llment ( de fond/ de texte) Hirarchisation visuelle des contenus
17. 17. Taille de llment sur la page Hirarchisation visuelle des contenus
18. 18. Emplacement de llment sur la page Hirarchisation visuelle des contenus
19. 19. Gestion des blancs autour de llment Hirarchisation visuelle des contenus
20. 20. Choix typographiques (graisse, taille, couleur) Hirarchisation visuelle des contenus
21. 21. Proposer plus de contenu directement sur grand cran, la demande sur mobile Priorisation par taille de mdia
22. 22. On part des capacits du mdia le plus bas pour construire au fur et mesure Priorisation par taille de mdia
23. 23. Un accordon sur petits mdias, des onglets sur les plus grands Priorisation par taille de mdia
24. 24. Un post-it = un contenu, prioriser sur la page. Technique 1 : priorisation au post-it
25. 25. Technique 2 : priorisation en tableau Plus linaire , moins flexible, mais un peu plus rapide et permet la comparaison
26. 26. 3. Cration dun graphique de points de rupture Poupe Russe Via Shutterstock
27. 27. Proposer des intervalles dcran provisoires et points de rupture arbitraires Le graphique de points de rupture
28. 28. Proposer en priorit des points de rupture primaires (mise en page gnrale) Graphique de points de rupture primaires
29. 29. Ajouter au fur et mesure des points de rupture secondaires Graphique de points de rupture secondaires
30. 30. Le gros du travail itratif commence ici pour le designer et lintgrateur Et ce nest que le dbut
31. 31. Partags sous licence Attribution - Pas dUtilisation Commerciale - Pas de Modification 3.0 France www.inpixelitrust.fr @WalterStephanie