SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
Sites Web et Mobiles 
Stratégies et enjeux de l'ergonomie 
Webdesign 
Olivier Dommange
Olivier Dommange 
L'ergonomie 
du Web
Olivier Dommange 
Supports – tailles des écrans 
Variété innombrable de tailles d' écrans
Olivier Dommange 
Supports – résolution 
La concentration de pixels par pouces est élevée et relative
Olivier Dommange 
Supports – taille d'écran 
La tailles des écrans
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 ?
Olivier Dommange 
Les solutions 
et stratégies
Olivier Dommange 
Supports – solutions 
1. Ne rien faire... 
Les supports mobiles et navigateurs disposent d'outils d'agrandissement 
du contenu et de la page
Olivier Dommange 
Supports – solutions 
2. Interface fluide 
Largeur des interfaces définies en pourcentage
Olivier Dommange 
Supports – solutions 
3. Application Web : reponsive design 
Styles (CSS), outils (JS) et contenus adaptés pour différentes largeurs de support
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
Olivier Dommange 
Supports – solutions 
5. Application native 
En interaction avec les périphériques et outils du support mobile. 
(géolocalisation, contacts, appareil photo,...)
Olivier Dommange 
https://twitter.c http://mobile.twitter.com om https://twitter.com 
Supports 
Exemple : Twitter
Olivier Dommange 
http://w3.org 
http://w3.org http://w3.org 
Supports 
Exemple : W3C
Olivier Dommange 
http://www.apple.com http://www.apple.com 
http://www.apple.com http://www.apple.com 
Supports 
Exemple : Apple
Olivier Dommange 
Responsive design 
Media queries
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
Olivier Dommange 
Responsive design 
Médias 
all 
screen 
handheld 
print 
aural / speech 
braille 
embossed 
projection 
tty 
tv 
Tous (par défaut) 
Ecrans 
Téléphones mobiles 
Impression 
Vocales 
Plages braille 
Imprimante braille 
Projecteurs 
Terminal (caractères mono espace) 
Télévision
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
Olivier Dommange 
http://screensiz.es/phone 
Responsive design 
Viewport : La surface de la fenêtre du navigateur
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)
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.
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" />
Olivier Dommange 
Mobile 
Interface & outils
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é
Olivier Dommange 
Mobile - navigation 
Les menus sont 
rétractables et 
invisibles. 
Accessibles en un 
«touch clic». 
Priorité au 
contenu.
Olivier Dommange 
Mobile - contenu 
Il n’y a pas d’état 
de survol (:hover). 
Retour aux 
standards du Web 
(bleu et souligné).
Olivier Dommange 
Mobile - contenu 
Les accordéons 
facilitent un 
aperçu groupé du 
contenu.
Olivier Dommange 
Mobile - contenu 
Ajuster les textes 
et les espaces afin 
de faciliter la 
lecture.
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
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
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.
Olivier Dommange 
UI Design 
Interface utilisateur
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
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
Doit comprendre comment 
donner des informations 
Doit être aidant, aisé et intuitif.
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
1. La composition graphique
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
2. Le contenu
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
3. Les outils
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange

Contenu connexe

Tendances

Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesigntakaclike
 
UXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateurUXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateurUXD Meetup
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web DesignStrasWeb
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
Web usability et e-Commerce
Web usability et e-CommerceWeb usability et e-Commerce
Web usability et e-CommerceTechnofutur TIC
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
Determiner son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site webDeterminer son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site webMatthieu Tran-Van
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Information google apps
Information google appsInformation google apps
Information google appsinovallee
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...Microsoft
 

Tendances (14)

Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
UXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateurUXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateur
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Web usability et e-Commerce
Web usability et e-CommerceWeb usability et e-Commerce
Web usability et e-Commerce
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Determiner son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site webDeterminer son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site web
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
Webdesign, UX et UCD #7
Webdesign, UX et UCD #7Webdesign, UX et UCD #7
Webdesign, UX et UCD #7
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Information google apps
Information google appsInformation google apps
Information google apps
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 

Similaire à Webdesign sites web et mobiles-strategies et enjeux-ergonomie

Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardware
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardwareL'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardware
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardwareL'Avenue Digital Media
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Julien Dereumaux
 
X-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME GROUPE
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-aymeodile25
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-aymeacbellec
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-aymecfpj75
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-aymecfpj75
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-aymecfpj2
 
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...polenumerique33
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Tendance webdesign
Tendance webdesignTendance webdesign
Tendance webdesignKelian Nando
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 

Similaire à Webdesign sites web et mobiles-strategies et enjeux-ergonomie (20)

Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
molka foods
molka foodsmolka foods
molka foods
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardware
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardwareL'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardware
L'Avenue Digital Media - Le "Showroom" - Proposition de solutions hardware
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
X-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobile
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-ayme
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-ayme
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-ayme
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-ayme
 
Mettre en scène l'info sur le web etienne thierry-ayme
Mettre en scène l'info sur le web   etienne thierry-aymeMettre en scène l'info sur le web   etienne thierry-ayme
Mettre en scène l'info sur le web etienne thierry-ayme
 
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
Sites internet et reseaux sociaux quelles tendances 2015 - cci bordeaux - ina...
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Tendance webdesign
Tendance webdesignTendance webdesign
Tendance webdesign
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 

Webdesign sites web et mobiles-strategies et enjeux-ergonomie

  • 1. Sites Web et Mobiles Stratégies et enjeux de l'ergonomie Webdesign Olivier Dommange
  • 3. Olivier Dommange Supports – tailles des écrans Variété innombrable de tailles d' écrans
  • 4. Olivier Dommange Supports – résolution La concentration de pixels par pouces est élevée et relative
  • 5. Olivier Dommange Supports – taille d'écran La tailles des écrans
  • 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 ?
  • 7. Olivier Dommange Les solutions et stratégies
  • 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,...)
  • 13. Olivier Dommange https://twitter.c http://mobile.twitter.com om https://twitter.com Supports Exemple : Twitter
  • 14. Olivier Dommange http://w3.org http://w3.org http://w3.org Supports Exemple : W3C
  • 15. Olivier Dommange http://www.apple.com http://www.apple.com http://www.apple.com http://www.apple.com Supports Exemple : Apple
  • 16. Olivier Dommange Responsive design Media queries
  • 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
  • 18. Olivier Dommange Responsive design Médias all screen handheld print aural / speech braille embossed projection tty tv Tous (par défaut) Ecrans Téléphones mobiles Impression Vocales Plages braille Imprimante braille Projecteurs Terminal (caractères mono espace) Télévision
  • 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
  • 20. Olivier Dommange http://screensiz.es/phone Responsive design Viewport : La surface de la fenêtre du navigateur
  • 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" />
  • 24. Olivier Dommange Mobile Interface & outils
  • 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é).
  • 28. Olivier Dommange Mobile - contenu Les accordéons facilitent un aperçu groupé du contenu.
  • 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.
  • 33. Olivier Dommange UI Design Interface utilisateur
  • 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