Du pixel au layout
 

Like this? Share it with your network

Share

Du pixel au layout

le

  • 183 vues

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

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

Statistiques

Vues

Total des vues
183
Vues sur SlideShare
183
Vues externes
0

Actions

J'aime
0
Téléchargements
4
Commentaires
0

0 Ajouts 0

No embeds

Accessibilité

Catégories

Détails de l'import

Uploaded via as Microsoft PowerPoint

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • 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 Presentation Transcript

  • 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. Du pixel au layoutAude MoussetDesigner Interactifi-Breed & AssociésDesignwww.i-breed.com
  • 3. AU COMMENCEMENT…Du pixel au layoutDesign
  • 4. Avant l’image…
  • 5. … était le pixel…
  • 6. …coloré…
  • 7. … et toujours très entouré
  • 8. L’ÈRE DU PIXELDu pixel au layoutDesign
  • 9. DesignContexte d’utilisation
  • 10. 14%84%Autres2%Peu de navigateurs
  • 11. 11%56%25%8%Peu de résolutions d’écran640 x 480800 x 6001024 x 768Autres
  • 12. L’ÈRE DE L’ADAPTATIF : SOYONS FLUIDES !Du pixel au layoutDesign
  • 13. Multitude de contextes
  • 14. Multitude de supports
  • 15. Multitude de navigateurs10 versions 18 versions 22 versions 5 versions 12 versions
  • 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. « Quelle démarche adopter pour permettre àtous les utilisateurs d’accéder à votreinterface de manière optimale ? »Problématique
  • 18. HTML / CSSDu pixel au layoutDesign
  • 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 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. • 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. 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. Prototyper les écrans ciblés
  • 24. Prototyper les écrans ciblés
  • 25. Prototyper les écrans ciblés
  • 26. www.responsinator.comhttp://screenqueri.es/http://responsivepx.com/Tester…
  • 27. WINDOWS 8, RESPONSIVE ?Du pixel au layoutDesign
  • 28. • XAML• HTMLApplications 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
  • 35. • Structure Projet• Composants (LongListSelector vs GridView)• Ergonomie• Code non portable directementVers une transversalité W8/WP8 ?
  • 36. MERCI !