Slide utilisé lors de la formation ergonomie d'un site web. Par des exemples de sites web, on découvrent les dimensions des pages web, les présentations, les alignements, les statistiques... Les formations sont données à Liège, Namur, Bruxelles et Charleroi en Belgique.

1. Ergonomie d’un site Web
Dimensions et mise en page
Laurent Mottet - www.nakatomi-formation.be
d’un site web
Laurent Mottet
Nakatomi-formation.be
Publication : juillet 2011

2. Ergonomie d’un site Web Analyser : il y a différents médias de différentes tailles
Laurent Mottet - www.nakatomi-formation.be
Taille de l’écran Ecran CRT Ecran LCD % d’utilisateurs Surface utile
15 pouces 800x600 - 1% d’utilisateurs 760x420
15,4 pouces - 1280x800 13% d’utilisateurs 1220x640
17 pouces 1024x768 - 15% d’utilisateurs 960x600
19 pouces - 1280x1024 13% d’utilisateurs -
22 pouces - 1680x1050 10% d’utilisateurs 1220x920
27 pouces - 2560x1440 -
Moyenne mondiale 2011

3. Ergonomie d’un site Web Uniformiser : quelle est la moyenne de votre cible
Laurent Mottet - www.nakatomi-formation.be
17 pouces 1024x768 - 15% d’utilisateurs 960x600
Moyenne mondiale 2011

4. Ergonomie d’un site Web Evoluer : votre cible vous donnera sa taille d’écran
Laurent Mottet - www.nakatomi-formation.be

5. Ergonomie d’un site Web Cibler : ma cible n’a pas le même écran que MOI?
Le bouton > est hors zone
Laurent Mottet - www.nakatomi-formation.be

6. Ergonomie d’un site Web S’adapter : la taille de l’écran n’est toujours égale à...
Taille écran
≠
Laurent Mottet - www.nakatomi-formation.be
Fenêtre navigateur
Taille de l’écran Ecran LCD Taille de la fenêtre du navigateur
22 pouces 1680x1050 1360x784
Statistique du site Nakatomi-formation.be - 2011

7. Ergonomie d’un site Web
Les différentes solutions
Laurent Mottet - www.nakatomi-formation.be
Se baser sur la taille la plus petite
Se baser sur la taille moyenne de la cible

8. Ergonomie d’un site Web Radicaliser : la taille la plus petite est toujours visible
http://www.nakatomi.be
Laurent Mottet - www.nakatomi-formation.be
420 px
730 px

9. Ergonomie d’un site Web Utiliser : une largeur de 960 px
Ent er Title
ht tp:// www.960.gz
www.ente rad dres s.com G oogle
Laurent Mottet - www.nakatomi-formation.be
Done

10. Ergonomie d’un site Web Utiliser : une largeur de 960px sur 600px - site cadre
Laurent Mottet - www.nakatomi-formation.be

11. Ergonomie d’un site Web Inciter : il y a une vie après 600px ou 800px, on scroll
Laurent Mottet - www.nakatomi-formation.be

12. ht
p /
: / w ww. wk ww. e n t r a d d r e s s . o m
s y ne .
t b e c G oogl
e
Ergonomie d’un site Web Etonner : même au-delà des 3000px
E nt e r Tit le
www.e nt e ra ddre s st.c om
ht t p:/ /www.s ky ne .be G oogle
Laurent Mottet - www.nakatomi-formation.be
D n
oe

13. Ergonomie d’un site Web S’adapter : une partie du site peut s’aggrandire
Laurent Mottet - www.nakatomi-formation.be

14. Ergonomie d’un site Web
Site centré, à gauche ou plein écran
Laurent Mottet - www.nakatomi-formation.be

15. E n t e r T it le
h t t p :/ / w ww . n ak a t o mi- f o rm a t ion . b e / G o o g le
Ergonomie d’un site Web
Laurent Mottet - www.nakatomi-formation.be
Gauche
E n t e r Tit le
h t t p : / /w w w . lalib re . be / G o o g le
Do n e
Centré
Do n e

16. Ergonomie d’un site Web La taille du site peut-être relative à l’écran
Site pour un écran de 2560 px
Laurent Mottet - www.nakatomi-formation.be
Site pour un écran de 1280 px

17. Ergonomie d’un site Web
1200px
700px
Attention à la pixelisation des images
900px
Laurent Mottet - www.nakatomi-formation.be

18. Ergonomie d’un site Web Mise en page en fonction du média
Laurent Mottet - www.nakatomi-formation.be

19. Ergonomie d’un site Web Mise en page en fonction des médias
Laurent Mottet - www.nakatomi-formation.be

20. Ergonomie d’un site Web
C o n ta c t
Laurent Mottet - www.nakatomi-formation.be
www.nakatomi-formation.be
Laurent Mottet
www.nakatomi-formation.be/ergonomie
laurent@nakatomi.be
https://bitly.com/japJRG twitter.com/nakatomi