Le téléchargement de votre SlideShare est en cours. ×
0
Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!...
Du pixel au layoutAude MoussetDesigner Interactifi-Breed & AssociésDesignwww.i-breed.com
AU COMMENCEMENT…Du pixel au layoutDesign
Avant l’image…
… était le pixel…
…coloré…
… et toujours très entouré
L’ÈRE DU PIXELDu pixel au layoutDesign
DesignContexte d’utilisation
14%84%Autres2%Peu de navigateurs
11%56%25%8%Peu de résolutions d’écran640 x 480800 x 6001024 x 768Autres
L’ÈRE DE L’ADAPTATIF : SOYONS FLUIDES !Du pixel au layoutDesign
Multitude de contextes
Multitude de supports
Multitude de navigateurs10 versions 18 versions 22 versions 5 versions 12 versions
Multitude de résolutions640x480 : VGA800x600 : SVGA1024x768 : XGA1280x1024 : SXGA1600x1200 : UXGAFormats 4/3, 5/4, 16/9, 1...
« Quelle démarche adopter pour permettre àtous les utilisateurs d’accéder à votreinterface de manière optimale ? »Probléma...
HTML / CSSDu pixel au layoutDesign
• Une grille flexible– Évitez d’utiliser des tailles en pixel– Exprimez les tailles de typo en em– Et les zones de contenu...
Cibler le support de manière optimale en utilisant les mediaqueries.– un type de média : screen, handheld, print…– une tai...
• Quelques frameworks d’agencement fluides :– 960 grid system– CSSgrid– Columnal– The 1140px CSS Grid System• Quelques pis...
Identifier les tailles références de votre projet1ère génération de SmartPhone en mode portrait< 480 pxSmartPhones actuels...
Prototyper les écrans ciblés
Prototyper les écrans ciblés
Prototyper les écrans ciblés
www.responsinator.comhttp://screenqueri.es/http://responsivepx.com/Tester…
WINDOWS 8, RESPONSIVE ?Du pixel au layoutDesign
• XAML• HTMLApplications W8
Structure type d’une application W8
Structure type d’une application W8
Structure type d’une application W8
Form factors
Form factors
Des visuels épurés
• Structure Projet• Composants (LongListSelector vs GridView)• Ergonomie• Code non portable directementVers une transversa...
MERCI !
Du pixel au layout
Prochain SlideShare
Chargement dans... 5
×

Du pixel au layout

97

Published on

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

Published in: Technologies
0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
97
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
4
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • 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)
  • Transcript of "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 !
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×