Le document traite des meilleures pratiques en matière de conception web, mettant en avant l'importance de comprendre le contenu avant le design et de concevoir directement dans le navigateur. Il aborde également la nécessité d'une flexibilité dans l'affichage des sites web à travers différents navigateurs, ainsi que des conseils sur la rédaction et les URL. Enfin, des outils comme Modernizr sont mentionnés pour détecter les capacités des navigateurs, pour améliorer l'expérience utilisateur.

1. Web { Design
Project } Management*
David Roessli
cybermedia concepts
© Copyright 2010, David Roessli. These slides may not be used without permission.

3. Web designer

4. design visuel
Web designer

5. design de
l’interface (UI)
design visuel
Web designer

6. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer

7. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code

8. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information

9. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design des
stratégies
de contenu

10. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design des
stratégies
IT design
de contenu

11. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design design des
ou
Design? stratégies
IT design
de contenu

12. Je fais des sites
web

13. http://cybmed.com
http://davidroessli.com/about
@roessli

14. Les choses dont
je ne parlerai pas
aujourd’hui:

15. Les sujets qui ne figurent pas
à l’agenda:
‣ Systèmes de gestion de projet
‣ Méthodologies de développement
‣ Stratégie de contenu
‣ HTML5, CSS, JavaScript (enfin, juste
un peu)

17. Le web design
aujourd’hui*
(*) pour moi

18. Présenter Expliquer Conseiller
Analyser Proposer Concevoir
Gérer Développer Tester

19. Présenter Expliquer Conseiller
Analyser Proposer Concevoir
Gérer Développer Tester

20. Présenter Expliquer Conseiller
Analyser Proposer Concevoir
Gérer Développer Tester

21. Types projets:
vierge refonte intégrer

22. Types projets:
vierge
refonte intégrer

23. Contexte Fonction
Audience Contenu

24. rédaction balisage
mise en forme comportement

25. semantics usability
accessibility findability

26. multidisciplinaire

27. Le contenu
avant le design

29. Faites votre mieux pour:
‣ Comprendre la nature du contenu
‣ Le contenu influence et guide le
design
‣ Concevoir avec du vrai contenu
‣ Responsabiliser le client

30. Lorem ipsum

31. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id
est laborum.

32. Lorsque vous utilisez Lorem Ipsum
vous assumez que le problème de
communication a déjà été résolu,
et qu’il n’est qu’un bruit de fond
par rapport au problème “plus
important” du style visuel.

33. Concevoir dans
le navigateur

34. Pour concevoir le meilleur site web
possible, utilisez le meilleur
navigateur du moment, et pas leur
plus petit commun dénominateur
ou le plus populaire.

35. ‣ Choisir votre navigateur de test

36. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur

37. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur
‣ Identifier les problèmes plus tôt
dans le processus de design

38. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur
‣ Identifier les problèmes plus tôt
dans le processus de design
‣ Eviter les remises en cause tardives

39. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

40. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

41. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

42. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

43. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

44. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?

45. non
http://dowebsitesneedtolookexactlythesameineverybrowser.com

46. Est-ce que les sites web
doivent être vécus
exactement de la même
manière dans tous les
navigateurs?

47. Est-ce que les sites web
doivent être vécus
exactement de la même
manière dans tous les
navigateurs?

48. non plus
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

49. Oui, mais…
et IE6?

54. HTML5/CSS3
dès aujourd’hui

55. <!DOCTYPE HTML>

56. Styling
article, aside, dialog,
figure, footer, header,
hgroup, nav, section
{
display:block;
}

57. Styling > IE
Internet Explorer ne reconnait pas
les éléments HTML5 sauf s’ils ont été
créés par JavaScript avant…

58. Styling > IE
<!--[if lt IE 9]>
<script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js
"></script>
<![endif]-->
Remy Sharp
http://html5shiv.googlecode.com

59. Stylez avec
Modernizr

60. Modernizr pour identifier les
capacités du navigateur
<script src="modernizr-1.5.min.js"></script>
http://www.modernizr.com/

61. Modernizr pour identifier les
capacités du navigateur
<html>
http://www.modernizr.com/

62. Modernizr pour identifier les
capacités du navigateur
<html class="canvas canvastext geolocation
rgba hsla multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface">
http://www.modernizr.com/

63. Modernizr pour identifier les
capacités du navigateur
<html class=”canvas canvastext geolocation
rgba hsla no-multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface”>
http://www.modernizr.com/

64. Modernizr pour identifier les
capacités du navigateur
.multiplebgs div p {
/* propriétés pour les navigateurs qui
supportent multiple backgrounds */
}
.no-multiplebgs div p {
/* propriétés alternatives pour ceux
qui ne le supportent pas */
}
http://www.modernizr.com/

65. findmebyip.com

66. Modernizr > Safari 5
http://www. findmebyip.com/

67. Modernizr > Safari 5
http://www. findmebyip.com/

68. media queries

69. media query pour cibler le
device de sortie
@media print {
/* propriétés pour la
version imprimable */
}

70. media query pour cibler les
plateformes mobiles
@media only screen
and (max-device width:480px) {
/* propriétés pour ce
type d’écran */
}

71. media query pour cibler les
plateformes mobiles
@media only screen
and (max-device width:480px
and (orientation:landscape) {
/* propriétés pour ce
type d’écran dans cette
orientation */
}

72. media query pour cibler les
plateformes mobiles
<link rel="stylesheet"
href="handheld.css"
media="only screen
and (max-device width:480px)"/>

73. 2010.dconstruct.org

74. 2010.dconstruct.org

75. 2010.dconstruct.org

76. IE conditional
statements

77. IE conditional statements
<!--[if IE]> … <![endif]-->

78. IE conditional statements
<!--[if gte IE 7]>
<link rel="stylesheet"
href="ie7.css"
media="screen, projection" />
<![endif]-->

79. IE conditional statements
<!--[if !IE 6]><!--><link rel="stylesheet"><!--<!
[endif]-->
<!--[if gte IE 7]><link rel="stylesheet"><![endif]-->
<!--[if IE 8]><link rel="stylesheet"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://
universal-ie6-css.googlecode.com/files/ie6.0.3.css"
media="screen, projection" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet"><![endif]-->

80. Universal Internet
Explorer 6 CSS

81. Universal Internet Explorer 6 CSS
Andy Clarke
http://forabeautifulweb.com/s/239

82. Universal Internet Explorer 6 CSS
<!--[if IE 6]><link rel="stylesheet" /><![endif]-->
Andy Clarke
http://forabeautifulweb.com/s/239

83. Universal Internet Explorer 6 CSS
<!--[if IE 6]>
<link rel="stylesheet"
href="http://universal-ie6-css.googlecode.com/
files/ie6.1.1.css"
media="screen, projection" />
<![endif]-->
Andy Clarke
http://forabeautifulweb.com/s/239

84. osteofrance.com

85. osteofrance.com

86. osteofrance.com/osteopathie

87. osteofrance.com/osteopathie

88. Universal Internet Explorer 6 CSS
<!--[if !IE 6]><!-->
<link rel="stylesheet" href=" … " />
<!--<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet"
href="http://universal-ie6-css.googlecode.com/
files/ie6.1.1.css"
media="screen, projection" />
<![endif]-->
Andy Clarke
http://forabeautifulweb.com/s/239

89. Le diable est dans
les détails

90. Soignez la
microcopie

91. La taille ne fait
pas tout

92. Lorsque vous rédigez pour le web, les
petits détails font toute la différence.
Votre microcopie doit guider les
utilisateurs et le ton doit promouvoir
la confiance qu’ils ont en vous.

93. ‣Guider
‣Aider
‣Rassurer

94. ‣Guider
‣Aider
‣Rassurer
‣Stylé et fonctionnel

105. Soyez fétichiste
avec vos URLs

106. _cassia_/3990384437

107. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là

108. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/

109. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/

110. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/

111. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/

112. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/

113. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/
Ajoutez du sens et évitez les adresses illisibles.

114. ‣ Choisissez des mots simples mais
pertinents;

115. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;

116. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;
‣ Utilisez des verbes pour les actions;

117. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;
‣ Utilisez des verbes pour les actions;
‣ Prévoyez des redirections pour les
typos et pluriels (voire les
synonymes).

118. Enrichissez avec
des microformats

119. http://microformats.org

120. hCard
hCalendar
rel-license
rel-nofollow
rel-tag
XFN
…

121. Je donne une présentation
sur le web design le 9 juillet
aux Ateliers Nomades, à
Genève.

122. <span class="vevent">
Je donne une<span class="summary">
présentation sur le web design</span> le
<abbr class="dtstart"
title="2010-07-09">9 juillet</abbr> aux
<span class="location">Ateliers Nomades,
Genève</span>.
</span>

123. “My random
¢2 cents worth”

124. Créez rapidement
quelque chose

125. 7360738@N03/2054277784

126. Visez l’essentiel
d’abord

127. 35483361@N02/3741956789

128. Soyez
agile

129. joiseyshowaa/2402764792

130. Dansez, chantez,
dessinez, codez

131. bettermo/539452482

132. Remettez-vous en
cause

133. 7360738@N03/2054277784/

134. Inspirez-vous,
mais ne volez pas

135. batiks/3779699489

136. Merci.

137. http://ro.ess.li/nomades