Du pixel au layout

292 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
292
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Notation
  • Tailles relatives au niveau des typos (em) et des zones de contenu (%)
  • Une application Windows 8 est destinée à s’afficher sur PC ou sur une tablette. Sur un PC elle peut s’afficher en mode plein écran ou en mode snappé, sur une tablette également, avec l’orientation portrait ou paysage en plus. Ce qui nous amène à 6 formfactors différents. L’ergonomie Modern UI permet une adaptation simple et cohérente (Listview)
  • Une application Windows 8 est destinée à s’afficher sur PC ou sur une tablette. Sur un PC elle peut s’afficher en mode plein écran ou en mode snappé, sur une tablette également, avec l’orientation portrait ou paysage en plus. Ce qui nous amène à 6 formfactors différents. L’ergonomie Modern UI permet une adaptation simple et cohérente (Listview)
  • Du pixel au layout

    1. 1. Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr
    2. 2. Du pixel au layoutAude MoussetDesigner Interactifi-Breed & AssociésDesignwww.i-breed.com
    3. 3. AU COMMENCEMENT…Du pixel au layoutDesign
    4. 4. Avant l’image…
    5. 5. … était le pixel…
    6. 6. …coloré…
    7. 7. … et toujours très entouré
    8. 8. L’ÈRE DU PIXELDu pixel au layoutDesign
    9. 9. DesignContexte d’utilisation
    10. 10. 14%84%Autres2%Peu de navigateurs
    11. 11. 11%56%25%8%Peu de résolutions d’écran640 x 480800 x 6001024 x 768Autres
    12. 12. L’ÈRE DE L’ADAPTATIF : SOYONS FLUIDES !Du pixel au layoutDesign
    13. 13. Multitude de contextes
    14. 14. Multitude de supports
    15. 15. Multitude de navigateurs10 versions 18 versions 22 versions 5 versions 12 versions
    16. 16. Multitude de résolutions640x480 : VGA800x600 : SVGA1024x768 : XGA1280x1024 : SXGA1600x1200 : UXGAFormats 4/3, 5/4, 16/9, 16/1016/9 (1280x720 , 1600x900)16/10 (1280x800 , 1920x1200)
    17. 17. « Quelle démarche adopter pour permettre àtous les utilisateurs d’accéder à votreinterface de manière optimale ? »Problématique
    18. 18. HTML / CSSDu pixel au layoutDesign
    19. 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. 20. Cibler le support de manière optimale en utilisant les mediaqueries.– 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. 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 JQueryDes solutions existent…
    22. 22. Identifier les tailles références de votre projet1ère génération de SmartPhone en mode portrait< 480 pxSmartPhones actuels, tablettes en mode portrait< 768 pxEcrans de bureau> 1024 px
    23. 23. Prototyper les écrans ciblés
    24. 24. Prototyper les écrans ciblés
    25. 25. Prototyper les écrans ciblés
    26. 26. www.responsinator.comhttp://screenqueri.es/http://responsivepx.com/Tester…
    27. 27. WINDOWS 8, RESPONSIVE ?Du pixel au layoutDesign
    28. 28. • XAML• HTMLApplications W8
    29. 29. Structure type d’une application W8
    30. 30. Structure type d’une application W8
    31. 31. Structure type d’une application W8
    32. 32. Form factors
    33. 33. Form factors
    34. 34. Des visuels épurés
    35. 35. • Structure Projet• Composants (LongListSelector vs GridView)• Ergonomie• Code non portable directementVers une transversalité W8/WP8 ?
    36. 36. MERCI !

    ×