Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Du pixel au layout

383 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
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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 !

×