Aujourd’hui, plus que jamais dans le monde des interfaces informatiques, les résolutions et la densité des écrans et des affichages imposent des contraintes et une compréhension spécifiques. Nous reviendrons sur la notion de pixel, de résolution, de densité pour nous rapprocher de la notion de layout adaptatif et de responsive design, sur les priorités du form factor et sur les enjeux technologiques liés au choix des langages de développement (html5 ou Wpf).

1. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr

2. Du pixel au layout
Aude Mousset
Designer Interactif
i-Breed & Associés
Design
www.i-breed.com

3. AU COMMENCEMENT…
Du pixel au layout
Design

4. Avant l’image…

5. … était le pixel…

6. …coloré…

7. … et toujours très entouré

8. L’ÈRE DU PIXEL
Du pixel au layout
Design

9. Design
Contexte d’utilisation

10. 14%
84%
Autres
2%
Peu de navigateurs

11. 11%
56%
25%
8%
Peu de résolutions d’écran
640 x 480
800 x 600
1024 x 768
Autres

12. L’ÈRE DE L’ADAPTATIF : SOYONS FLUIDES !
Du pixel au layout
Design

13. Multitude de contextes

14. Multitude de supports

15. Multitude de navigateurs
10 versions 18 versions 22 versions 5 versions 12 versions

16. Multitude de résolutions
640x480 : VGA
800x600 : SVGA
1024x768 : XGA
1280x1024 : SXGA
1600x1200 : UXGA
Formats 4/3, 5/4, 16/9, 16/10
16/9 (1280x720 , 1600x900)
16/10 (1280x800 , 1920x1200)

17. « Quelle démarche adopter pour permettre à
tous les utilisateurs d’accéder à votre
interface de manière optimale ? »
Problématique

18. HTML / CSS
Du pixel au layout
Design

19. • Une grille flexible
– Évitez d’utiliser des tailles en pixel
– Exprimez les tailles de typo en em
– Et les zones de contenu en pourcentage.
• Des images adaptables
– En dimension (ex : max-width:100%)
– En résolution, selon le nombre de dpi du support ciblé.
Un agencement fluide c’est…

20. Cibler le support de manière optimale en utilisant les media
queries.
– un type de média : screen, handheld, print…
– une taille minimale et/ou maximale
– une orientation
– un ratio d’écran 16/9 etc…
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}
…Un agencement fluide c’est :

21. • Quelques frameworks d’agencement fluides :
– 960 grid system
– CSSgrid
– Columnal
– The 1140px CSS Grid System
• Quelques pistes pour gérer Les images adaptatives
– www.adaptative-images.com
– www.monoliitti.com
– Avec JQuery
Des solutions existent…

22. Identifier les tailles références de votre projet
1ère génération de SmartPhone en mode portrait
< 480 px
SmartPhones actuels, tablettes en mode portrait
< 768 px
Ecrans de bureau
> 1024 px

23. Prototyper les écrans ciblés

24. Prototyper les écrans ciblés

25. Prototyper les écrans ciblés

26. www.responsinator.com
http://screenqueri.es/
http://responsivepx.com/
Tester…

27. WINDOWS 8, RESPONSIVE ?
Du pixel au layout
Design

28. • XAML
• HTML
Applications W8

29. Structure type d’une application W8

30. Structure type d’une application W8

31. Structure type d’une application W8

32. Form factors

33. Form factors

34. Des visuels épurés

36. • Structure Projet
• Composants (LongListSelector vs GridView)
• Ergonomie
• Code non portable directement
Vers une transversalité W8/WP8 ?

37. MERCI !