2017

Russir le design de son site

Mohamed Aggouni

Dans cet ouvrage tout en

couleurs, Les auteurs
expliquent clairement et
simplement les techniques et
astuces pour construire
rapidement un site

Mohamed Aggouni
 Russir le design de son site

Concevoir son site Internet :

le design et l'ergonomie
Respecter les standards
Vos visiteurs sont habitus certains mcanismes, ne les perturbez pas. Ils doivent se
sentir comme chez eux !

Pas de textes souligns : sur le web, un
mot ou une expression souligne est un
lien. N'utilisez jamais le soulignement
dans un autre but. Jouez plutt sur la
couleur, sur la taille ou sur le gras et
l'italique.
Un affichage rapide : les visiteurs sont
presss. Ils s'impatientent trs, trs vite.
Vos pages ne doivent pas peser plus de
30 50 Ko tous compris (avec les images
et les animations). Ce point est
absolument essentiel.

Des colonnes troites : l'oeil se fatigue
s'il doit parcourir des kilomtres pour
suivre le texte. Vos colonnes doivent faire
15 cm de large au maximum. Des colonnes
de 10 cm sont idales.
Des titres de page : O suis-je ? D'o
vins-je ? O vais-je ? Evitez vos
visiteurs de se perdre dans ces questions
philosophiques ! Donnez-leur des
repres !

Du texte lisible : ce conseil l'air
stupide. On voit malheureusement
beaucoup de sites qui proposent du texte
jaune sur fond gris, par exemple. Le texte
le plus lisible et le moins fatigant est le
texte noir sur fond blanc. Vous pouvez
vous loigner lgrement de ce standard
condition de toujours garder un bon
Des sous-titres, une mise en page are
: Segmentez vos informations en
chapitres clairement identifis. Vos
visiteurs doivent pouvoir choisir ce
qu'ils veulent lire ou zapper.
Des menus simples : vos visiteurs ne
passeront pas plus de 10 secondes
essayer de comprendre l'architecture de

2
contraste entre le fond et le texte.
Oubliez les gadgets : Compteurs,
animations flash et autres gadgets
n'apportent rien votre site. Ils fatiguent
les yeux et distraient les visiteurs de votre
vritable contenu. On se moque
perdument de savoir qu'on est le 250me
visiteur sur votre site depuis le 4 avril
1950. Les compteurs sont truqus sur la
plupart des sites et tout le monde le sait.
Une taille de texte confortable
: beaucoup d'internautes ont une vue
basse ou moyenne. Les sites utilisant des
caractres microscopiques sont fatigants.
votre site. La norme consiste placer :
- Les chapitres principaux en haut de la
page
- Les sous chapitres gauche de la page
- Les renvois, les publicits, droite de
la page
- Les rfrences (bibliographie) en bas
de la page
En respectant ces habitudes, vous
faciliterez la navigation sur votre site.
Des caractres standards : pour tre
sr que vos visiteurs pourront voir vos
pages comme vous les voyez, vous devez
absolument rester dans les grands
standards de caractres : arial, times,
verdana.

A lire en complment : Ergonomie d'un site Web par Kreatys

En dtail ...

Quelques principes de mise en page

La communication crite existe grande chelle depuis plus de 500 ans. Cette longue
exprience a permis de dgager des rgles universelles qui s'appliquent toujours et
pour tout le monde. Pourquoi diable le web s'obstine-t-il les ignorer ???

Les lgendes des belles images sont lues

mme par les visiteurs presss !

3
source image : civilization.ca

La mise en page doit tre conue comme une pyramide. Cette pyramide va fonctionner
comme un entonnoir qui va "aspirer" les lecteurs dans vos pages.

Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le
titre est absent ou peu intressant.

Le chapeau : Situ sous le titre, ce texte court (en caractre gras ou de taille
moyenne) permet aux lecteurs de vrifier que la page correspond bien leurs attentes.
Il doit rsumer l'essentiel de votre page en 2 5 lignes. Ce texte doit donner envie
vos visiteurs de lire le reste du texte !

Les paragraphes : Vous devez dvelopper une seule ide par paragraphe. Une fois
votre texte termin, demandez-vous si les paragraphes ne pourraient pas tre r-
ordonns de faon plus logique. N'hsitez pas supprimer les paragraphes qui
n'apportent rien votre propos.

Les sous-titres : Capter l'attention, c'est bien. La conserver, c'est mieux. Le sous-
titre vous permet de rattraper un lecteur qui allait quitter la page.

En plus des lments indispensables noncs ci-dessus, vous pouvez utiliser

des jokers ! Ces attrape-lecteurs vont vous permettre de gagner quelques points
d'audimat :

Les images : Illustratives, explicatives, humoristiques, surprenantes : tous les coups

sont permis !!! Vous devez intgrer au moins une image par page pour reposer l'oeil
de vos lecteurs et capter leur intrt. Attention au poids !!! Vous devrez trouver des
images de petites dimensions parfaitement lisibles. Plus une image est simple, moins
elle "psera" lourd et mieux elle jouera son rle d'illustration.

Les lgendes d'images : Si votre image est illustrative, il faut absolument lui
attribuer une lgende ! Les lgendes des belles images sont lues mme par les visiteurs
presss !

Les encadrs : Un petit texte amusant ou anecdotique, ou un complment

d'information peuvent tre ajouts votre page sous la forme d'un encadr. L'encadr
peut ventuellement avoir un fond lgrement plus fonc que le reste de la page. Les
encadrs permettent de "casser" les mises en page trop rigides et apportent un ct un
peu "fun" aux pages srieuses.

Importance du contraste

L'oeil et l'esprit ont une sensibilit instinctive aux contrastes. Puisque votre but et de
capter, puis de garder l'attention des lecteurs, vous allez devoir doser savamment vos
contrastes en tenant compte de deux rgles fondamentales :

4
 Le contraste doit attirer l'attention sur les zones les plus intressantes de votre page.
Trop de contraste tue le contraste !

Orange sur bleu ou vert sur jaune :

les couleurs complmentaires sont celles
qui prsentent le plus fort contraste
pour l'oeil humain.

Voici quelques possibilits pour crer des contrastes sur vos pages :
Changement de couleur : dans le texte, dans les cadres, dans les fonds
Changement de luminosit : dans les fonds, dans les images
Changement de forme : dans la mise en page du texte. Vous pouvez changer les
dimensions ou le nombre des colonnes, crer des encadrs, dgager des zones sans
texte
Changement de taille : pour le texte
Changement de police de caractre, de style (gras, italique)
Mouvements : les gifs anims ou les animations flash

Toutes ces variations peuvent apporter un "plus" quand elles sont correctement
utilises... ou perdre le lecteur si elles sont employes tort et travers.

Le plus simple consiste crer des pages neutres, quilibres et homognes, et ne

rajouter les contrastes qu'en fonction du contenu de la page (et aprs une bonne
rflexion). En d'autres termes, le fond doit dicter la forme et non l'inverse !

5
Le zapping

Photo originale :
Philippe Ramakers

Tlvision, radios, journaux et sites web : tous les mdia sont touchs par le
phnomne : les lecteurs/auditeurs/spectateurs zappent de plus en plus.

N'allez pas croire que vous pouvez lutter contre ce phnomne en ralisant un site
formidable ! Il faut dsormais accepter le zapping, c'est--dire respecter le choix des
lecteurs et les accompagner dans leurs habitudes. C'est mme l'une des conditions
majeures de la russite d'un site Internet.

Les boutons "Page prcdente", "Page suivante" et "Haut de page" facilitent la

navigation des zappeurs.
Le dbut de vos pages doit se prsenter sous la forme d'un rsum qui permettra aux
lecteurs presss de lire l'essentiel en peu de temps. Ils dcideront ensuite s'ils
continuent ou s'ils en restent l.
La segmentation en paragraphes regroups par chapitres (avec des sous-titres)
donne la possibilit de sauter les parties juges inintressantes.

Un jugement en un clin d'oeil

Si l'on en croie cette tude de l'universit de Carleton, les internautes jugent de

l'intrt d'une page en 50 millisecondes. Cette conclusion est issue de l'exprience
suivante : une srie de pages a t montre 2 panels d'internautes. Pour le premier
panel, le temps d'affichage de chaque page tait de 500 millisecondes (1/2 seconde).
Pour le deuxime, le temps d'affichage tait de 50 millisecondes. A chaque fois, une
partie du panel a eu l'occasion de revenir sur les sites examins pour confirmer son
jugement. Les jugements de tous ces groupes ont t extrmement proches. Cela peut
amener conclure que le jugement d'un internaute est dj tabli au bout de 50
millisecondes.

6
Photo originale : UseIt.com

Plusieurs tudes rcentes ont tudi la faon dont l'oeil du lecteur parcours une page
Web et ont mis en vidence de faon formelle le type de lecture que pratiquent la
majorit des internautes.

Sur le visuel ci-contre, les parties en rouge sont celles sur lesquelles l'oeil des visiteurs
s'est attard le plus longtemps. Les parties jaunes sont celles ayant bnfici d'une
visibilit moyenne et les parties bleues celles qui ont eu droit un passage bref. Toutes
les parties en gris n'ont pas ou quasiment pas t vues par les visiteurs.

On constate que l'oeil explore la page Web en suivi un parcours

qui a plus ou moins la forme d'un "F" majuscule. C'est le centre gauche de la page qui
bnficie du maximum de visibilit. L'oeil "accroche" sur les titres et les sous-titres
ainsi que sur toutes les parties de la page prsentant un contraste fort (couleur ou
luminosit) par rapport la tonalit gnrale de cette page. L'oeil a galement
tendance explorer les lments situs droite des titres ou des diffrents lments
qui sont parvenus attirer son attention.

Si on s'intresse l'ordre dans lequel ce parcours a lieu, on constate que le premier

balayage est horizontal et se situe dans la partie suprieure. L'oeil entame ensuite un
balayage vertical cal sur le ct gauche du contenu principal avant d'explorer tous les
points "d'accroche" fort contraste.

7
Si vous souhaitez savoir comment vos propres pages seront vues pas vos visiteurs, vous
pouvez utiliser l'outil Feng-Gui qui tente de simuler la faon dont l'oeil humain
analyse les pages Web

Gardez ces lments en mmoire lorsque vous construisez vos futures pages. Ils
amnent en particulier conclure que :

La prsentation en liste, permet l'oeil de se caler sur la "puce" de gauche et

garanti une meilleure lecture qu'un paragraphe ordinaire.
Le titre de votre page ainsi que les deux paragraphes qui le suivent sont essentiels
pour accrocher l'intrt du lecteur.
Les sous-titres (en tte de chaque paragraphes) permettent de raccroche le
lecteur avant qu'il ne quitte dfinitivement votre page
Les contrastes sont essentiels pour attirer l'oeil du lecteur.

Dans l'une de ses pages de conseils, Google prconise un

placement des publicits qui semble s'inspirer de ces parcours. Le cadre rouge
reprsente l'emplacement le plus lu, suivi des cadres orange puis jaunes et blancs.

La prise en compte de ces conseils peut avoir une influence considrable sur les
revenus apports par ces publicits.

A lire en complment :

UseIt.com :"F-Shaped Pattern For Reading Web Content"

Labnol : "Where should I place Google Ads for high CTR"

Consultez galement notre page intitule "Ecrire pour le Web"

L'esthtique

Dans leur immense majorit, les internautes recherchent de l'information pratique,

pas des belles images. La recherche esthtique que vous mnerez sur votre site ne
doit jamais nuire, en aucune faon, l'aspect pratique et la lisibilit du contenu.
Attention, en particulier, ne pas faire exploser le temps de chargement de vos pages
par l'emploi abusif d'images ou d'animations (voir optimiser les images de votre site)

Grez vos priorits dans l'ordre suivant : contenu / clart-ergonomie / rapidit

d'affichage / esthtique. Et si cette hirarchie vous semble discutable, vous pouvez

8
toujours vous forger votre propre opinion en lisant cette discussion concernant les
critres de qualit d'un site sur Webmaster-Hub.

Cela dit, si la chose est possible : autant associer l'agrable l'utile ! Un design
original, esthtique et pratique peut avoir un impact trs important sur la faon dont
vos visiteurs percevront votre site et sur la trace qu'il laissera dans leurs mmoires.
Nous avons pu constater une hausse de frquentation de l'ordre de 20% aprs la
refonte de l'esthtique d'un site.

On dit que les gots et les couleurs ne se discutent pas... c'est faux ! Surtout lorsque
l'on s'adresse au plus grand nombre. Votre site doit plaire au maximum de visiteurs,
soignez vos accords de couleur. Le site SmartPixel peut vous aider choisir la gamme
des couleurs de votre site.

Pour le reste, si vous n'tes pas graphiste vous-mme, faites appel aux talents qui se
proposent gratuitement sur les forums (4Claverie / Graph-Academy / Black-
Widow / Ironway-Design / French-graff, etc.)

Dans le doute, inspirez-vous de la page d'accueil de Google et FAITES SIMPLE ! La

beaut rside dans la simplicit.

La couleur

La couleur n'a pas seulement une influence sur l'esthtique d'un site. Elle participe
pleinement au design dans le mesure o elle peut influencer la lisibilit (l'accessibilit)
des pages et modifier la perception de ces pages par les visiteurs.

Arkantos Consulting propose une rflexion intressante sur les "effets de la couleur
des sites internet sur la mmorisation et l'intention d'achat".

ColorSelector, YoyoDesign et Iamcal : permettent de slectionner des couleurs et

d'apprcier en temps rel leur lisibilit pour diffrents troubles de la vision (cataracte,
protanopie, deutranopie, tritanopie). ColorDoctor et VisCheck simulent les troubles
de perception de la couleur pour tout document affich l'cran.

Le "journal du net" propose un bon rsum des problmes lis au daltonisme et des
solutions pour y remdier. Il propose galement plusieurs outils permettant
d'effectuer des tests : Wellstyled et Snook : proposent des accords de couleurs qui
prservent une bonne visibilit.

Voici galement une liste de ressources lies au thme de la couleur et proposes par
Jean-Eric Pelet sur Forum-Marketing :

La persistance rtinienne : quelques dmonstrations des effets de ce phnomne

L'Art de la Couleur : un cours thorique sur l'usage de la couleur en peinture
artistique.
Contraste et lisibilit : un bref article de Sbastion Billard qui comporte plusieurs
rfrences intressantes

9
 Criteria for optimal web design (designing for usability) : un rsum des critres
de lisibilits (en anglais)
DezignBox : la symbolique des couleurs
Le chromlog : un blog consacr la couleur !
Colormatters : Symbolique des couleurs, motions, effets sur le corps, sur la
vision, tudes de cas, enqutes... (en anglais).

Le design et l'ergonomie web

L'ergonomie

Il est important de comprendre ce qu'est l'ergonomie d'un site

web. Il faut toujours se mettre la place de l'utilisateur. Celui-ci a besoin de se
sentir l'aise, de trouver les informations qu'il cherche rapidement et de
prendre plaisir lire ce qu'il voit sur le fond comme sur la forme. On ne doit
pas chercher l'information, elle doit apparatre naturellement. Il faut galement
ajouter son site les conventions qu'on peut retrouver sur les sites les plus
populaires. Par exemple, depuis toujours les sites ont leur logo en haut
gauche de leur page et lorsque l'on clique dessus on tombe sur la page
d'accueil du site, c'est une habitude utilisateur, tout le monde fait a. Si vous
mettez le lien vers votre page d'accueil en bas droite avec un GIF anim de la
dcennie dernire, cela pourrait agacer l'utilisateur et ferait passer votre site
pour un site amateur.

Le design

La notion de mode existe aussi sur internet, le design devient

de plus en plus simple et lger. C'est d'ailleurs le cas de iOs7 et Windows 8
galement pour ne citer qu'eux en exemple. On cherche crer des logiciels
efficaces avant tout. Un site/logiciel simple et pur c'est un projet russi. Il
n'est pas vident de partir de rien et faire un site agrable lire. Soit on a un
sens artistique et donc il n'y a rien apprendre, soit on n'en a pas et l c'est
plus difficile. Le design ne s'apprend pas vraiment, il faut s'inspirer de la mode

10
du moment. Mon conseil pour crer un site design, surfez sur internet, mettez
en favoris vos sites prfrs et CSSW vous apprendra comprendre comment
les dveloppeurs ont ralis leur site, vous pourrez vous inspirer de vos sites
prfrs. Un article sur Bootsrap vous apprendra faire de beaux sites
modernes sans que vous ayez le talent artistique d'un designer web.

Le web de demain

Votre site doit tre parfaitement adapt tous les supports.

Aujourd'hui un site web peut tre vu depuis un cran de 30 pouces avec des
rsolutions dpassant les 4000 pixels, sur une tablette ou un smartphone. Il
faut que votre site soit adapt tous les supports. La rponse ce besoin
s'appelle le responsive design.

Le responsive design

Aujourd'hui on peut faire un seul site web pour tous les

supports. Il suffit de dire au navigateur d'afficher ou de cacher tel lment en
fonction de la taille de l'cran, on parle alors de responsive design. Vous devez
garder cette information dans votre tte ds le dbut de projet. Pour chaque
page ralise testez-la sur votre smartphone, tablette ou simplement rduisez la
taille de votre navigateur pour voir le rsultat de votre travail.

CRATION DU SITE SUR PHOTOSHOP

Vous allez apprendre dans ce tutoriel crer le design de votre site sous photoshop,
pour ensuite le mettre sous format (x)HTML avec laide de CSS, en gros pour lafficher
sur le web quoi ^^ Si vous tes dbutant, vous tombez bien car je vais vraiment
commencer depuis le dbut ! :p

Une dernire chose, je fais le design pour lun de mes sites, mais ce sera vous de faire le
votre comme il vous en convient ;)
Si vous savez dj faire un design sous photoshop ou si vous en avez dj fait un pour
votre site, vous pouvez tout de suite passer au chapitre II pour la dcoupe !!

11

o Plan du chapitre:
o Avant de se lancer... structure et thme du site !
o La bannire
o Le fond
o L'interface
o Le menu
o Le corps

AVANT DE SE LANCER... STRUCTURE ET THME DU SITE !

Aujourdhui nous allons crer le design de notre siteweb. Cest bien beau tout a mais il
va tout dabord falloir rflchir son organisation et ses couleurs avant de se lancer !
Moi je vais faire le design dun site ayant pour thme la musique folklorique, les cultures
celte et viking, le mtal, et dautres trucs persos :p
Un site sans prtention aucune... qui n'est pas communautaire. Un site personnel en gros
!

Il est important d'avoir en tte l'organisation de votre site, sinon vous allez improviser
un design qui risque au final d'tre dcevant.
Vous devez galement dcider de la taille du site, s'il sera extensible (s'il s'tend selon les
rsolutions des crans) ou au contraire fixe.
Le mien sera fixe et sera adapt pour des rsolutions d'cran partir de 1024px/768px !
Voila le schma de mon site:

12
Si vous avez le votre en tte tant mieux !

Maintenant qu'on a dfini les blocs de notre site, on va dcider des couleurs de celui-ci...
un site sur le folklorique moi je le verrais bien avec du marron... a m'voque aussi de
belles plaines bien vertes, on va utiliser du vert ! Du beige aussi ! Les menhirs et tous ces
beaux cailloux, c'est gris ! On en utilisera peut-tre xD

Le plus important je le rpte, c'est de le visualiser dans notre tte... parfois il faut tre
inspir xD
Si c'est un site thme qui emprunte une image en guise de bannire, je m'aide aussi de
la bannire pour dterminer les couleurs !

Bon j'ai trich j'ai dj fait la bannire :p On va voir comment la faire ds le prochain
sous-chapitre !

13
Voila les couleurs que je vais utiliser, gnralement je les trouve au pif en faisant des
essais:

Bon bin on est parti !

PS: dans tous les sous-chapitres qui vont suivre, vous n'aurez qu' piocher des astuces
pour faire votre design !

LA BANNIRE

Que dire sur la bannire ?

Pas grand chose, c'est vous de trouver une image adapte pour votre site. Retravaillez
un peu l'image, recadrez-l et ajoutez-y votre logo !

Vous avez de la chance je vais dtailler la cration de ma bannire, peut-tre que a vous
apprendra manier photoshop un peu mieux qui sait ?
Sautez directement au prochain sous-chapitre si a ne vous intresse pas ;)

Bon tout d'abord ouvrons l'image travailler sur 'toshop !

Je tiens prciser que cette image fait 1024px/768px, contrairement ce que la
miniature peut nous faire croire !

14
Elle est un peu terne notre image, on va raviver les couleurs !
Cliquez sur "Image" dans la barre de menu en haut puis "Adjustements /
Ajustements", et enfin "Brightness/Contrast"("Luminosit/Contraste")
Pour mon image je mets le contraste 60% et j'augmente la luminosit 35% !

Voila le rsultat:

15
Maintenant on va recadrer le tout, une bannire c'est rectangulaire pardi ! :p
Prenez l'outil "Crop Tool" (je ne sais pas comment il se nomme en franais, regardez
donc l'image ;) )

Ensuite gardez le clic gauche sur l'image et fates un cadre rectangulaire sur votre
image:

16
Validez votre slection avec "Entre" !

Notre bannire commence ressembler quelque chose :)

Il ne reste plus qu' mettre un p'tit logo !

Avec l'outil d'criture ("Horizontal Type Tool", voir l'image), prenez une criture noire
par exemple, choisissez une police de caractres sympathique et crivez votre logo !

17
On va modifier les options de notre logo histoire qu'il soit beau :p
Avec le clic droit, cliquez sur le calque de l'criture ( droite, voir l'image ci-dessous), et
choisissez "Blending Options / Options de mlange".

Pour ma part je voudrais bien une criture assez mtallique ^^

Je connais une mthode pour faire ressortir les reliefs comme si c'tait du mtal ou de
l'or taill :p
Cochez "Outer Glow / Lumire Externe" pour un petit effet d'aurole, "Inner Glow /
Lumire Interne" pour rehausser les bords de l'criture, "Bevel and Emboss" (alors l
impossible de vous traduire, regardez encore l'image suivante ;) ), "Gradient Overlay /
Dgrad" et "Stroke / Contour" pour le contour !

18
Et bien en fait vous allez tout dcochez sauf "Gradient Overlay / Dgrad" et "Stroke /
Contour" ! Je ne vous prends pas pour des abrutis, non, c'tait juste pour vous montrer
ce qu'on va utiliser ;) Bon tout d'abord on va s'occuper du dgrad !
Cliquez justement sur cette option et mettez un joli dgrad de gris et de blanc :) (le gris
c'est pour notre effet mtallique ^^)

Puis cliquez sur "Stroke / Contour" et prenez les options ci-dessous :p

19
Bien, bien !
Maintenant le plus important, notre petit effet de mtal !!
On va le faire avec "Bevel and Emboss":
Choisissez comme style un "Inner Bevel / Relief Interne", et comme "Deph /
Profondeur" le maximum, c'est dire 1000% !!
En "Size / Taille" prenez 5 pixel. Laissez le reste comme il est, et voila le rsultat:

20
Peaufinez le tout avec de la lumire externe et interne blanche si possible:

Il ne nous reste plus qu' rduire la bannire pour un design adapt 1024pixel de
largeur.
Fates un clic droit sur la barre de votre espace de travail et cliquez sur "Image Size /
Taille de l'image":

21
Ensuite choisissez sa largeur en pixel si possible, moi je prend 850 pixel, vous prenez ce
que vous voulez ;)

Et bien voila on en a enfin fini avec la bannire... rendez-vous au prochain sous-chapitre

22
!

LE FOND

Passons au fond !! C'est gnralement la premire chose que je fais pour mes sites.
Ouvrez un nouveau fichier, avec 1024pixel de largeur au minimum, et une bonne
hauteur pour pouvoir travailler correctement.

Slectionnez l'outil "Paint Bucket Tool / Pot de peinture" et prenez une couleur
marron (comme celles qu'on avait choisi en dbut de chapitre)

Remplissez le contenu du nouveau document avec le pot de peinture !!

Par la mme occasion glissez votre bannire sur notre document ;)

23
Ca... c'est fait.

L'INTERFACE

On va maintenant faire l'interface de notre site, enfin les cadres et tout a ^^

Commenons par crer un nouveau calque, entre le fond et la bannire.

Pour cela slectionnez le fond (background) et utilisez le raccourci CTRL + ALT + n (n
miniscule sinon c'est carrment un nouveau doc' que vous crez !).
Renommez-le si vous voulez pour vous y retrouver ;)

24
Maintenant avec l'outil de slection rectangulaire (Rectangular Marquee Tool) tracez
une slection qui entoure la bannire.

25
Il nous reste plus qu' remplir notre slection grce l'outil "Paint Bucket Tool / Pot de
peinture" avec l'une des couleurs qu'on avait choisi !

Moi j'trouve que a commence avoir de la gueule :p

Bon on va faire un autre cadre derrire celui qu'on vient de faire, crez nouveau un
calque (CTRL + ALT + n) en prenant bien soin de le faire juste au dessus du
fond (background) et en dessous de celui qu'on a fait prcdemment !

Fates ce cadre avec une autre couleur sombre si possible comme ceci:

26
Maintenant, toujours avec ce calque, allez dans "Blending Option / Option de
Mlange" avec clic le droit. On va rajouter une bordure noire aux cadre et un peu
d'ombre sur ses contours.

Cochez les cases "Outer Glow / Lumire Externe" et "Stroke / Contour".

27
On commence par quoi :p ? Le contour ?
C'est parti !

Cliquez sur l'option de contour, prenez comme taille (size) 1 pixel,

comme position externe (outside), et une belle couleur noire!

28
Cliquez prsent sur l'option de lumire externe pour faire l'ombre. Je tiens rappeler
au passage que j'avais fait un tuto pour savoir comment faire cette ombre externe, a se
passe ici.
Bon parce que je suis un type sympa, je vais vous rexpliquer vite fait comment faire.
Il faut tout d'abord vous mettre en "Blend Mode / Mode de Mlange" normal.
C'est le plus important ;) Maintenant prenez une couleur noire et modifiez
l'opacit (opacity) de manire obtenir un gris. Augmentez la taille (size) et vous avez
votre effet d'ombre sur tous les bords !!!

29
Par la mme occasion j'ai omis de faire une bordure ma bannire... maintenant que
vous savez faire, je vous laisse en crer une ;)

Voila le rsultat de tout ce qu'on vient de faire:

30
L c'est beau !

LE MENU

On passe au menu maintenant ?

C'est qu'on a bientt fini notre design, il nous reste plus que le menu et le corps, alors
courage et on attaque bientt la dcoupe !

Nous allons donc commencer par faire un nouveau cadre, de forme rectangulaire et si
possible trs allonge, et on va le remplir avec l'outil "Paint Bucket Tool / Pot de
peinture" de gris (presque bleu je vous l'avoue :p)
Tout a vous savez faire maintenant, je ne vous apprends plus rien ;)

31
Okay et histoire de retravailler l'ombre, vous allez me mettre une lgre ombre interne
tiens !
C'est exactement comme tout l'heure, mais au lieu de modifier l'option "Outer Glow /
Lumire Externe", vous modifiez l'option "Inner Glow / Lumire Interne"...
Rajoutez-y une bordure noire et voila notre beau menu:

Passons au dernier cadre et on en aura fini avec le design !

LE CORPS

Bon pour le corps je ne sais mme pas si a vaut le coup de vous le dtailler ^^'
Vous fates un cadre comme d'hab', vous le remplissez de beige, vous mettez de l'ombre
interne, un contour noir !

Moi perso j'obtiens a:

32
EH ! On a pas encore fini, j'ai un p'tit effet sympathique vous montrer, il s'agit de
faire un petit contour une fois de plus mais que sur 3 bords... enfin vous allez voir c'est
styl ^^

Le truc c'est de faire encore un cadre, qui soit exactement pareil que celui du corps (en
dessous du calque du corps par contre !) mais qui fasse un pixel de plus que ce dernier
sur tous les bords except le bord du haut. Vous le remplissez d'une couleur claire et le
tour est jou:

33
 (l'image est zoome)

Aperu:

34
On a fini Halllouia !!! Prenez bien soin de garder votre design et celui de votre bannire
au format .psd !!! C'est important si vous voulez modifier votre design un de ces 4 !!
Combien de fois j'ai d recrer un design entier parce que je n'avais pas gard de .psd
...

Ceci fait, rendez-vous au prochain chapitre pour la dcoupe ;)

7 astuces pour amliorer le design de votre

site web

35
Vous avez cr votre site mais vous ne savez pas par o commencer pour ce qui est du
design de votre site? Vous dsirez donner une apparence plus professionnelle votre site
web existant? Suivez ces sept astuces pour amener le design de votre site web un autre
niveau!

1. Bien choisir ses couleurs.

Le choix des couleurs est trs important pour avoir un site web russi. Vos couleurs
doivent bien sharmoniser pour ajouter du dynamisme votre site. On conseille de vous
limiter trois couleurs, et dutiliser la rgle du 60/30/10, soit une couleur dominante qui
occupe 60% de la surface de votre site, une couleur complmentaire qui contraste bien
avec la couleur dominante et qui occupe 30% de la surface, et une couleur accent qui
occupe 10% de la surface. Il est galement ncessaire de choisir des couleurs qui
conviennent lambiance que vous dsirez donner votre site. Par exemple, les couleurs
pastel rappellent normalement la douceur, les couleurs vives ou non rappellent la
jeunesse ou le dynamisme, tandis que les couleurs neutres donnent un air plus srieux. Si
vous avez besoin daide pour crer une belle palette de couleur, des outils comme Adobe
Color CC, ou ColourCo pourraient vous aider.

2. Bien choisir ses polices.

Les polices dcoratives sont gnralement bien jolies, mais rarement pratiques. Elles
sont souvent plus difficiles lire et ne conviennent pas toutes les situations. Pour bien
choisir une police, vous devez miser sur la lisibilit et la fonctionnalit. Les polices sans-
srif, comme Arial ou Raleway, sont habituellement utilises sur le web pour leur bonne
lisibilit et leur aspect moderne. Par contre, si vous dsirez donner un look plus
36
classique votre site, une police avec srif, comme Cardo, sera de mise. Pour plus
dinformation pour bien choisir ses polices, consultez notre article sur le sujet.

3. Bien choisir ses mdias.

Bien sr, les photos ajoutent beaucoup dattrait visuel votre site web, par contre, vous
devez vous assurer quelles sont de bonne qualit car les photos floues enlvent
beaucoup de professionnalisme votre site. De plus, les grandes photos darrire-plan
sont trs populaires mais pour quelles embellissent votre page daccueil, vous devez
avoir une photo assez grande pour quelle ne soit pas floue lorsquelle sera plein cran.

4. Ne pas surcharger.

Pour bien mettre en valeur linformation que vous dsirez transmettre, il faudra purer
votre contenu. Bien quil soit tentant de remplir tout lespace disponible avec le plus
dinformation possible, cela naidera pas votre utilisateur trouver linformation quil
recherche rapidement. Il est mieux de sen tenir aux informations plus importantes, et
bien structurer votre contenu. De plus, nayez pas peur de laisser des espaces blancs,
cela laisse respirer votre mise en page et met le reste des informations encore plus en
valeur.

5. tre constant.

Votre site internet doit tre en continuit avec le reste de votre marque. On doit se sentir
dans le mme univers que votre logo ou votre carte de visite De plus, pour sentir une
cohsion entre les pages, on doit retrouver environ le mme type de mise en page, les
mmes alignements et une structure similaire pour que lutilisateur sache quil est dans
le mme site web.

6. Sassurer davoir une bonne lisibilit.

Avant tout, le design de votre site web doit mettre en valeur votre contenu. Il ne doit pas
distraire votre utilisateur. Vous devez vous assurer davoir un bon contraste entre la
couleur de la police et la couleur de votre fond pour avoir une bonne lisibilit. Si vous
dcidez dutiliser une photo comme arrire-plan, vous aurez plus de difficult ajouter
du texte dessus. Pour conserver une bonne lisibilit, il devra tre plus gros et plus
contrastant que sur un fond uni. Assurez-vous que linformation que vous dsirez
communiquer est bien mise en valeur, pour que votre utilisateur nait pas fouiller trs
longtemps pour trouver ce quil cherche.

7. Se tenir au courant des nouvelles tendances.

Finalement, pour avoir un site au top, vous pouvez vous tenir au courant des dernires
tendances, et faire votre site en flat design, ou suivre la tendance du long scrolling et
tout condenser votre contenu sur une trs longue page daccueil. Vous pouvez mme

37
aller jeter un coup doeil notre compte pinterest pour y voir les dernires tendances
design, et plein dautres astuces pour crer votre site web.

Les secrets du design des sites Wix succs

Les secrets du design des sites Wix succs

Un proverbe coren dit la perfection est un chemin, non une fin . Tout web designer a
conscience du fait quun site Internet peut toujours tre amlior. Lobjectif doit tre de
viser continuellement la perfection, autant en matire de design que dutilisabilit mais
cette cible mouvante est difficile atteindre.
Choisir le Template idal pour votre site et vous tenir inform des grandes tendances du
web design sont certes des atouts considrables pour commencer du bon pied, mais ils ne
vous garantissent pas la conqute des Internautes. cet effet, certaines amliorations
chirurgicales vous seront dune aide prcieuse afin de vous dmarquer rellement sur le
Web.
Nous avons interview nos designers afin quils nous rvlent les aspects des sites Web
succs qui les ont sduits. Nous vous prsentons un condens de leurs observations :

38
Un espace Web sur son 31

Ne sous-estimez pas limportance des dtails. Un design align et des lments

symtriques constituent les fondements dun site visuellement cohrent donc
professionnel. Ce nest pas uniquement une question desthtique : lexprience de vos
utilisateurs dans son ensemble sen verra amliore. Une technique utile pour aligner
vos lments consiste utiliser les rgles violettes qui saffichent sur votre site lorsque
que vous les dplacez.
Suivre les lignes nest pas dans votre ADN ? Vous pouvez annuler laffichage
automatique des rgles en cliquant sur un simple bouton.
Si vous dsirez grouper des lments pour les aligner dun coup, il vous suffit de suivre
les instructions suivantes : maintenez la touche Ctrl de votre clavier enfonce et
slectionnez les diffrents lments que vous souhaitez aligner > Effectuez un clic-droit
sur la bote qui saffiche autour de votre slection > Cliquez sur licne Paramtres dans
le menu pop-up > Cliquez sur Aligner et choisissez lorientation qui vous convient.
Linfo en plus : purez au maximum vos pages. Le trop plein dlments graphiques est
un moyen infaillible de provoquer un strabisme chez les visiteurs.

Un en-tte qui ne perd pas pied

Il tait un petit surfeur qui navait ja ja jamais navigu. Sil perd votre menu de vue en
scrollant (cest dire en faisant dfiler de haut en bas) votre site, il risque fort de ne pas

39
trouver lobjet de ses recherches et de cliquer sur licne rouge la croix blanche de
longlet de navigation. Pour viter cet cueil, vous navez qua fixer len-tte de votre
site. Elle accompagnera alors vos visiteurs le long de votre site.
Vous souhaitez fixer votre en-tte ? Rien de plus simple ! Il vous suffit de suivre ces
instructions.
Linfo en plus : renseignez-vous sur la tendance du long scrolling qui fait des ravages
sur le Web.

Des icnes sociales chaleureuses

De plus en plus de sites prsentent des liens vers leurs comptes sur les rseaux sociaux (si
ce nest pas votre cas, cliquez ici pour savoir comment procder). Saviez-vous que Wix
vous donne accs une vaste slection dicnes prconues ? En plus dapporter une
touche plus sophistique votre site, cela permettra de rendre vos liens sociaux plus
attractifs donc de gnrer du passage.
Attention : dans les Templates Wix, les icnes sociales sont lies par dfaut aux comptes
sociaux de Wix. Non pas que la pub gratuite nous drange, mais dans votre intrt,
mieux vaut paramtrer les vtres correctement.
Linfo en plus : si vous envoyez vos fans vers votre compte Facebook, pensez crer une
photo de couverture percutante.

40
Des transitions qui font effet

Cette astuce originale vous permet de surprendre vos visiteurs et de rendre votre site
plus dynamique. Vous pouvez faire votre choix parmi plusieurs effets de transition
entre vos pages : vertical, horizontal etc. Prenez soin de slectionner un style qui
corresponde votre site. Du bon got, voil le mot dordre dune transition russie.
Vous trouverez un tutoriel sur le sujet ici.
Linfo en plus : vrifiez que toutes vos pages sont en place en suivant ce lien.

41
Dess photos filtres en mode Instagram

Lune des tendances les plus fortes en matire de cration dimages est la superposition
de filtres. Instagram a fix un nouveau standard de mode en matire de photographie et
il serait dommage de rester la trane. Pour vous faciliter la vie, Wix vous propose un
diteur dimages intgr loutil de cration de sites. Trs simple dutilisation, il vous
suffit de quelques clics pour donner vos photos le look idal.
Linfo en plus : la recherche dautres tendances de cration de visuels ? Cet
article devrait vous intresser.

42
Des images qui dfilent dans des galeries

blouissiez vos visiteurs en faisant dfiler vos images dans des galeries lgantes. Wix
met votre disposition un large choix de galeries de tous genres : 3D, 2D, interactives,
statiques, miniatures, diaporama pour ne parler que des plus classiques. Le clou du
spectacle : vous pouvez transfrer vos images dune galerie lautre en un simple clic !
Comme en cuisine, la prsentation de vos visuels est aussi importante que leur qualit.
Rien de telle quune galerie soigne pour mettre en apptit vos visiteurs.
Linfo en plus : si vous ne vous sentez pas dhumeur les essayer une une, cet article
pour prsente une slection de nos galeries les plus rcentes.

43
Des icnes qui cassent la baraque

Avec lascension du Flat design du quoi ? les icnes voient leur cote de popularit
monter en flche. Outre la touche moderne quelles apportent, les icnes contribuent
orienter visuellement les visiteurs. Vous pouvez utiliser les Clip Art que Wix vous
propose dans lditeur pour vous, cest gratuit. Allez-y de bon cur, a nous fait
plaisir.
Comment ajouter un clip art (ou une icne) sur votre site ? gauche de lditeur,
cliquez sur licne Ajouter > cliquez sur Image > cliquez sur ClipArt.
Linfo en plus : si vous recherchez une icne spcifique qui nest pas propose dans
lditeur, vous pouvez utiliser les ressources gratuites prsentes sur cet article.

44
Des vidos qui ont du punch

Nous avons trait plus haut de limportance des galeries dimages. Vos vidos sont tout
aussi importantes et mritent dtre prsentes avec bon got. Dcouvrez notre galerie
de vidos, personnalisez-la comme vous lentendez et dynamisez votre design.
Linfo en plus : faites en sorte que vos vidos soient rfrences sur YouTube en
suivant ces conseils et gagnez en visibilit !

45
Une page contact qui renseigne

Lutilit premire de votre page de contact est de renseigner vos visiteurs sur toutes les
informations pratiques lies votre entreprise adresse, tlphone(s), email, fax,
tlgraphe sans fil etc. Une astuce que nous chrissons particulirement consiste
afficher une carte Google Maps sur votre page contact. La clre pingle rouge de
Google permettra vos visiteurs de vous localiser facilement et de trouver leur chemin
vers vos locaux.
Linfo en plus : inscrivez-vous sur Google My Business pour informer le gant de la
recherche en ligne au sujet de votre entreprise. Il est essentiel dy figurer, croyez-nous
sur parole : sans Google, la fte est moins folle.

46
-----------------------------------------------------------------------------------------------------------------

LES MEILLEURES ASTUCES POUR RUSSIR

LE DESIGN DE SON SITE INTERNET DE SPORT

Faster, Higher, Stronger La devise olympique, accessoirement tube des Daft Punk et
de Kanye West avec une lgre modification, peut trs bien qualifier un site web sportif
russi ! Aller au-del du conventionnel sans ngliger les bases de lexprience utilisateur,
47
oser des exprimentations graphiques sans altrer la fluidit de la navigation, capitaliser
sur les valeurs du sport sans tomber dans lexcs Le web design dun site sportif doit
tre la fois percutant et clair, dynamique et fluide. Pour russir le design de son site
internet sportif, il faut tout prix viter certains contretemps qui sexacerbent
davantage dans le secteur du sport : la lenteur, les templates impersonnelles et la non-
adaptation aux terminaux mobiles. La lenteur et le ct responsive relvent surtout de
considrations techniques. Qui imagine un instant un site sportif pris en flagrant dlit de
lenteur ? En effet, les valeurs du sport incluent la performance, la vitesse, le
dpassement de soi des valeurs que lon pourra difficilement sous-entendre avec un
site qui met 20 secondes se charger entirement.
Nous nous intresserons au design dans ce billet qui vous prsente quelques bons
rflexes adopter pour russir votre site internet sportif. La toile est largement pourvue
en sites internet spcialiss dans le sport. On serait donc logiquement tents dopter
pour un design de rupture pour se dmarquer et tirer son pingle du jeu. Toutefois, il est
vital dviter lexotisme , ou du moins, de le limiter certains aspects secondaires
pour ne pas brusquer le visiteur. Explications

#1 Le design est structur, pas structurant !

Comme dans tous les secteurs dactivit, point de dcision sans analyser et comprendre
son march et performer un benchmarking pour identifier les bonnes pratiques.
Comment et pourquoi votre cible va-t-elle se rendre sur votre site ? La rponse cette
question vous permettra de trancher sur les lments mettre en avant sur le site, ce qui
va naturellement influer sur le design. Faut-il prvoir un bandeau dinformations qui
dfilent en haut de lcran ? Faut-il prvoir un slider avec les 5 ou 6 actualits de la
journe ? Faut-il plutt mettre en avant une promotion ? En somme, noubliez pas que
le design doit tre structur et non structurant : il doit servir votre contenu pour le
prsenter sous sa meilleure forme, et non le conditionner.

#2 Mieux connatre ses clients pour mieux les satisfaire

Les visiteurs de votre site seront les premiers garants de la russite de votre site
internet : au-del de ses retombes commerciales positives, un trafic massif sera le
meilleur catalyseur de visibilit de votre site sur le ct SEO. Il est ainsi ncessaire que
vous preniez en compte leurs attentes, motivations, besoins et chemins de prises de
dcisions. Vous devrez donc dvelopper vos personas acheteurs ou buyer persona
pour contenter tous les types de visiteur avec un design unique. Vous dgagerez donc
une ligne directrice pour raliser le thme de votre site. Vous pouvez tenter un test A/B
pour mettre en concurrence deux versions de votre site et rationnaliser ainsi la prise de
dcision. En dfinitive, mieux vous cernerez votre clientle type, mieux vous ajusterez
votre design.

#3 Espaces blancs, aration et polices zen

En rgle gnrale, les blogs des sites internet de sport sont particulirement toffs. De
plus, ils sont dexcellents vecteurs de trafic dans la mesure o les sujets passionnants ne
manquent pas dans le sport. Vous le savez, le blog est la plaque tournante de lInbound
Marketing. Cette assertion est encore plus vraie dans le sport. Pour que vos articles de
fond, vos chroniques, vos billets dhumeur, vos guides et autres types de contenus soient
parfaitement digestibles pour votre lectorat, assurez-vous dintgrer ces deux lments :
les espaces blancs vides et les polices simples. Il suffit de se rendre sur le site du

48
journal Le Monde et de tester le mode Zen pour comprendre tout lintrt de cette
mesure. En effet, un espace blanc gnreux dans le pourtour immdiat dun contenu
favorisera une lecture agrable et poussera le visiteur aller jusqu la fin. Lenjeu ?
Cest gnralement la fin que se trouvent les CTA (Call To Action), les formulaires
remplir, etc. Les espaces blancs apportent une fentre de respiration salvatrice en
limitant les parasites. Si dans le milieu acadmique, on prfre une taille de police
denviron 12 pixels, nous ne pouvons que vous conseiller plus grand sur un site internet.
Vos visiteurs doivent pouvoir lire environ un mtre de leur cran sans avoir utiliser
la fonction zoom de leur navigateur.

#4 Optimiser votre site et le rendre Responsive

Au cours des dernires annes, le nombre des utilisateurs du web sur tablettes et
smartphones a grandement augment, au dtriment des utilisateurs traditionnels. Un
site en responsive design amliore lexprience des utilisateurs multi-interface, booste les
performances SEO dans la mesure o Google accorde une importance grandissante la
navigation sur les terminaux mobiles, rduit drastiquement le temps ncessaire la
maintenance du site (si vous adoptez une approche mobile only o le site doit
dabord dtecter si lutilisateur utilise un mobile pour lui renvoyer une version ddie,
vous devez grer la maintenance des deux versions sparment) De plus, dans le
domaine du sport, votre cible a de fortes chances dtre particulirement actives. Elle
voudra consulter les brves dactu en attendant le bus ou dans lascenseur, parcourir cet
article que vous avez publi sur le footing pendant sa pause djeuner, senqurir des
horaires des matchs du week-end pendant un trajet en taxi, etc.

Responsive Design : 10 conseils pour russir !

10% du trafic internet mondial se fait via les smartphones ou les tablettes. Il devient
ainsi incontournable dadapter son site ou son blog aux mobiles. Pour ce faire, une
nouvelle mthode de dveloppement Web est ne, le responsive design.

Le principe du responsive design est de rendre son site internet visible sur tous les
crans, que ce soit celui dun smartphone, dune tablette ou sur lcran dun ordinateur.

Pourquoi utiliser le responsive design ?

Le trafic sur les smartphones et tablettes ne cesse daugmenter ! Cest un fait. Et la

souris nest pas la mme chose que le doigt. Exemple, il faut au moins 50 pixels pour
crer un bouton pour un doigt, alors que 10 suffiront pour une souris. Il est donc
presque normal dadapter son site web aux interfaces tactiles et plus petites.

4 raisons dutiliser le responsive design linterface ddie !

Peut tre avez-vous cr un site spcialement pour les tlphones, transformant votre
http://www.monsite.com en http://m.monsite.com ! Voici 4 raisons dutiliser le
responsive design :

49
1. Amlioration de lexprience utilisateur : tous les bons webmasters cherchent
rendre la visite de leurs utilisateurs la plus agrable possible. Rappelez vous que
lutilisateur vient pour trouver une information, et il doit la trouver rapidement !
Le responsive design vous permettra de nafficher que les informations
indispensables pour les utilisateurs.
2. Supprimer les redirections : Comme vous utilisez le mme site pour les
terminaux mobiles et pour les cran dordinateur, vous navez plus besoin de
crer de redirection vers votre site mobile ! Vous gagnerez ainsi du temps de
dveloppement !
3. 1 site = 1 maintenance ! En utilisant le responsive design, vous viterez de faire
de la maintenance sur deux sites !
4. Contrle de vos visiteurs : Je pense notamment Analytics. Plus vous aurez de
sites, plus difficile il sera de faire un bilan de vos visites.

Comment faire du Responsive Design !

Je vous proposes 10 tapes de construction dun site Responsive Design :

Simplifier votre architecture !

La premire tape est de revoir larchitecture de votre blog et de la simplifier au

maximum. Vous pourriez par exemple :

Supprimer les <div> inutiles

Supprimer les styles inline (remplacez les par des float !)
Supprimer le flash ou le Javascript (Je vous conseille de le faire mme si vous ne
faites pas de Responsive Design)
Utiliser les proprits Absolute et Float bonne escient
Le superflus

Et afin doptimiser au maximum vos chances de russite, nhsitez pas :

Utiliser la technologie combin HTML5/CSS3

Utiliser des feuilles de style des remise zro : resetstylesheet
Utiliser larchitecture la plus simple.

Pour valider cette tape, dsactivez le CSS de votre site, normalement le site devrait
garder sa lisibilit !

Utilisez les mdias Queries !

Le media Querie est une fonctionnalit permettant de demander au navigateur quelles

sont ses proprits (taille). Cest le meilleur moyen pour faire un simple SI cette
taille ALORS ce style ! Nous allons pour le responsive design, nous allons nous
focaliser sur la taille de lcran et donc sur la proprit WIDTH. Pour cela, il y a
plusieurs mthodes. Jai utilis pour ce blog, la mthode qui dclare les diffrentes
feuilles de style dans le <head> :

50
?

<link rel="stylesheet" media="screen and (min-width:1024px)" href="/style.css"

1 type="text/css">

2 <link rel="stylesheet" media="screen and (max-width:1024px)" href="/tiny.css"

type="text/css">

Mais il existe dautres mthodes :

Dans les balises <style></style> du <head> :

<style>
@import url(tiny.css) (min-width:300px);
@import url(big.css) (min-width:900px);
</style>

Dans la feuille de style (Si vous tes fan de Tous dans un mme fichier

?
1 @media screen and (max-width:300px){

2 /* CSS pour les petits ecrans */

3 }

4 @media screen and (max-width:600px){

5 /* CSS pour les grands crans */

6 }

Pour ma part jai opt pour la dclaration dans le <head>, je trouve a plus propre !

51
Quelles sont les principales rsolutions dcran !

Ce schmas nous montre toutes les rsolutions dcran. Les icnes vertes sont les
rsolutions les plus rpandues. Il faudra donc cibler ces dimensions pour
notre responsive design !

Dfinir les rsolutions englobantes !

Lobjectif de cette tape est de dfinir quelles sont les rsolutions dcran que vous
souhaitez cibler. Par exemple, sur mon site, jai 2 versions, celle pour les grandes
rsolutions et celles pour les petites. Je ne me suis pas inquiter de faire une version
pour rsolution intermdiaire.
De ce fait mon design apparat de deux manires diffrentes sur les tablettes en fonction
de lorientation de lcran (portrait ou paysage !)

Selon limage, il faut travailler en priorit sur :

Les rsolutions infrieures 480px (SmartPhone)

Les rsolutions entre 480 et 768px (Tablettes)
Les rsolutions suprieures 768px (Les crans de PC)

Ce qui devrait vous donner un code de ce style :

1 <link rel="stylesheet" media="screen and (min-width:768px)" href="/big.css" type="text/css">

2 <link rel="stylesheet" media="screen and (max-width:768px) and (min-width:480px)"
3 href="/small.css" type="text/css">

52
 <link rel="stylesheet" media="screen and (max-width:480px)" href="/tiny.css" type="text/css">

Rendez votre design flexible !

On va rentrer dans le vif du sujet pour notre tutoriel sur le responsive design, puisque
nous allons attaquer la stylisation de notre site. Lobjectif nest pas de vous donner du
code copier/coller, cest compltement inutile puisque le responsive design doit faire
parti de votre style par dfaut !!

Comme dit dans le sous-titre, lobjectif est de rendre votre design le plus flexible
possible, il faut donc supprimer toutes tailles invariables (width:***px). Voici quelques
conseils :

Transformez vos tailles en proportion

o Pour un design en 3 colonnes (200px, 300px, 800px) remplacez cela par
(15%, 23%, 62%)
ATTENTION ! La somme de vos proportions doit tre gale 100 !

En plus dtre pratique pour le responsive design, cette mthode rend votre site agrable
pour les personne ayant de grandes rsolutions (mais nous y reviendrons !)

Un petite astuce supplmentaire donne par le design, lutilisation du box-sizing:boder-

box. Cette proprit CSS est tout simplement magique, elle permet dviter les maux de
ttes de calcul des dimensions avec les width, les margin et les padding !

1 div

2 {

3 width:75%;

4 padding:15px;

5 margin:5px;

6 }

Concrtement, jai une div qui a un width de 75%, un margin 5px et un pagging
15px. Si on calcul tout a, on se retrouve avec un width > 100% Improbable. En
utilisant la proprit box-sizing:border-box, si vous utilisez le width 75%, lensemble
fera finalement 75% ! (Cest vraiment pratique !)

53
Donnez de lintelligence vos images !

vitez absolument de fixer la taille de vos images, rendez les les plus fexible possible en
appliquant un width:85%, au lieu dun width:250px !

Nhsitez pas utilis la proprit max-width pour viter que vos images faible
rsolution ne deviennent illisibles !

Jai un trs gros cran !!!

Et oui, de mme quil faut adapter son design pour les petits crans, il ne faut pas
oublier ceux qui ont de gros cran !!

Pour se faire, utilisez un simple max-width:1200px, sur votre body, cela devrai viter
que les rsolution 2560px ne soit troubl en arrivant sur votre site !

Soyez relatif !

Lobjectif de cette tape, est de faire en sorte que tout votre design dpende du premier
bloc (body). Pour cela, deux mthodes soffrent vous :

La cascade des % : Vous dtermin la taille du bloc initial, et tous les blocs
suivant devront tre dtermins en % !
La mthode des emphemeral unit (em) : Le principe de lunit em est trs simple,
il suffit de fixer lunit de dpart, puis tout dpendra de cette unit (en em) :

54
?
1 body{

2 font-size:16px;

3 }

5 div.1{

6 width:46em; /* 46*16 = 736px */

7 }

9 div.2{

10 font-size:1.2em; /* 1.2*16 = 19.2px */

11 }

Vous avez compris le principe ? De ce fait, dans votre responsive design, si vous utilisez
bien cette mthode, il ne vous suffira plus qu dterminer lunit de dpart (12 pour le
tiny, 14 pour le small et 16 pour le big !)

Petite resolution ? Une seule colonne !

Pour les petites rsolutions dcran, il est ingnieux de tout linaris en une colonne.
Permettant ainsi une navigation plus efficace sur les smartphones.

Le principe est simple, fixez tous vos blocs : width:100%.

Mais attention, tous vos blocs ne sont pas forcment utile sur les smartphones, rappelez
vous que les utilisateurs viennent chercher une information et si en arrivant sur votre
site, ils doivent dabord descendre tout en bas de la page pour rcuprer une
information, vous pouvez tre certain quils ne resteront pas !

Faites donc le mnage quand vous passez sur le design tiny (qui devrait tre
laffichage 1 colonne). Vous pourriez supprimer :

La pub
Les archives
Les articles relatifs (ils viennent juste chercher un info pas plus !)

Une fois que vous aurez fait tout cela, il ne vous reste plus quune tape pour russir
votre responsive design !

55
Vrifier votre viewport !

Il est possible que certain navigateur pour smartphone et tablette triche sur leur
rsolution en envoyant votre site de fausse instruction sur la rsolution dcran ! Il est
donc impratif de supprimer cette fausse information pour tre certain que votre site
apparaisse proprement sur les smartphones.

Pour cela, utilisez linstruction :

<meta name="viewport" content="width=device-

1
width">

Cette instruction vous permettra de rcuprer la vritable valeur de la rsolution

dcran du terminal !!

Liens vers lauteur du design :

twitter : @splio
facebook : spliogroup
site: splio.com

Voil !

Une fois que vous aurez accompli toutes ces instructions, vous devriez avoir un
site responsive design !

Un outil pour tester votre responsive design !

Avant de partir, je voudrais vous proposer un outil pour tester votre responsive design :

Un marque page : Lorsque vous naviguez sur votre site et cliquez sur ce
marque page, des outils apparatront pour tester votre site sous diffrentes
rsolutions
o Pour ajouter ce marque page, cliquez et dplacez le lien dans votre barre
des favoris !

56
Voil, jespre que ce tutoriel vous aura aider crer un beau responsive design !
Nhsitez pas partager vos techniques en commentaire !

57