Solutions et alternatives face aux problématiques des tailles d'écran (responsive design, tailles fluide, site dédié aux mobiles ou application mobile). Analyses et ajustements des interfaces, navigation et outils pour les mobiles.
6. Olivier Dommange
source : http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
source : http://www.cruxcollaborative.com/the-mobile-web-an-illustrated-look
Supports – mobile vs desktop
L'avenir est au mobile ?
8. Olivier Dommange
Supports – solutions
1. Ne rien faire...
Les supports mobiles et navigateurs disposent d'outils d'agrandissement
du contenu et de la page
9. Olivier Dommange
Supports – solutions
2. Interface fluide
Largeur des interfaces définies en pourcentage
10. Olivier Dommange
Supports – solutions
3. Application Web : reponsive design
Styles (CSS), outils (JS) et contenus adaptés pour différentes largeurs de support
11. Olivier Dommange
Supports – solutions
4. Site Web dédié
Redirection automatique vers un site Web dédié aux supports mobiles
Interface, outils et contenus créés sur mesure
12. Olivier Dommange
Supports – solutions
5. Application native
En interaction avec les périphériques et outils du support mobile.
(géolocalisation, contacts, appareil photo,...)
17. Olivier Dommange
Responsive design
Egalement appelé « Media queries ». Modifie le le style (CSS) selon deux critères
Média : définit le support
<link rel="stylesheet" type="text/css" href="css/s960.css" media="screen and (min-width:740px) and (max-width:960px)" />
Fonction : fixe les limites d'application
19. Olivier Dommange
Responsive design
Profondeur de la couleur (bits/pixel)
Table de couleurs indexées
Ratio de la taille (ex. 16/9)
Ratio de la zone d'affichage du périphérique
Hauteur en pixel du périphérique
Largeur en pixels du périphérique
Affichage (bitmap ou grid – ex. lcd)
Hauteur en pixel de la zone d'affichage
Profondeur des niveaux de gris (bits/pixel)
Orientation du périphérique (portait ou landscape)
Résolution d'affichage du périphérique
Balayage des téléviseurs (progressive ou interlace)
Largeur en pixels de la zone d'affichage
color
color-index
aspect-ratio
device-aspect-ratio
device-height
device-width
grid
height
monochrome
orientation
resolution
scan
width
Fonctions
min/max
min/max
min/max
min/max
min/max
min/max
min/max
min/max
min/max
min/max
21. Olivier Dommange
Responsive design
Les points de rupture : quelques repères
1024px demeure la
référence minimum de la
largeur des écrans de
bureau (~9%, sept. 2014)
22. Olivier Dommange
Responsive design
Viewport fixé
initial-scale=1.0 : Elimine la possibilité d’agrandir manuellement l’interface.
Impose une proportion de 100% de la taille des contenus.
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
width=device-width : Ajuste la taille des contenus (images) à la taille réelle de l’écran.
23. Olivier Dommange
Responsive design
Impression de la page
Faire disparaître les outils de navigations.
Modifier la taille des caractères en pt.
Modifier les dimensions en mm, cm ou in.
Indiquer les coupures (sauts) de page.
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
25. Olivier Dommange
Mobile
Les supports mobiles nécessitent une
adaptation des interfaces et
des outils de navigation.
Facteurs :
Point d’impact large
Navigation simplifiée
Mobilité
26. Olivier Dommange
Mobile - navigation
Les menus sont
rétractables et
invisibles.
Accessibles en un
«touch clic».
Priorité au
contenu.
27. Olivier Dommange
Mobile - contenu
Il n’y a pas d’état
de survol (:hover).
Retour aux
standards du Web
(bleu et souligné).
29. Olivier Dommange
Mobile - contenu
Ajuster les textes
et les espaces afin
de faciliter la
lecture.
30. Olivier Dommange
Mobile – Les boutons
Ajuster les
boutons afin de
faciliter leur
accès.
Espace cliquables
Minimum—17 pt / 6 mm
Préférable—23 pt / 8 mm
Maximum—43 pt / 15 mm
31. Olivier Dommange
Mobile – Les champs des formulaires
Ajuster les textes
et les espaces afin
de faciliter la
lecture.
Espace cliquables
Minimum—17 pt / 6 mm
Préférable—23 pt / 8 mm
Maximum—43 pt / 15 mm
Espace entre les éléments afin
d'éviter les interférences
Minimum—23 pt / 8 mm
Préférable—28 pt / 10 mm
32. Olivier Dommange
Mobile – Les outils des formulaires
Privilégier des outils
proposant le «touch
clic» à l’utilisation du
clavier.
L’attribut type notament enrichi
en HTML 5 permet de créer des
outils de formulaires pratiques
pour les supports mobiles. Leur
aspect sera cependant celui
défini par le navigateur.
Le Javascript sera cependant
nécessaire pour des outils
personnalisés.
34. Olivier Dommange
UI Design
Le design de l’interface utilisateur (UI) fait
parti de l’expérience utilisateur et consiste à
augmenter la valeur de l’interface.
Aspects Valeur Ce qui concerne...
Composition graphique
Contenus
Outils
Esthétisme
Accessibilité
Utilisabilité
Organisation des éléments dans la page
Mise en évidence de contenus
Positionnement stratégique d’éléments
Terminologie cohérente
Textes descriptifs et exemples
Facilite l’utilisation des fonctionnalités et objets
Propose des alternatives d’utilisation
Intègre des ressources tiers tels que les réseaux sociaux
35. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
Doit comprendre comment
donner des informations
Doit être aidant, aisé et intuitif.
36. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
1. La composition graphique
37. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
2. Le contenu
38. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
3. Les outils
39. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples
40. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples
41. Olivier Dommange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples