4,5 Mo - Webmaestro

Application des CSS
Régie des rentes du Québec
Carolyne Dubé, RRQ
Éric Fontaine, DMR
Qui sont les clients de la Régie?

Régime de rentes



Soutien aux enfants


3,7 M de cotisants: 65% sont branchés
1,4 M de bénéficiaires: 25% sont branchés
856 000 familles: 75% sont branchées
Régimes complémentaires de retraite



1,1 M de participants: 65% sont branchés
1 671 régimes de retraites privés
10 000 administrateurs de régimes
Bases de notre réflexion



Évolution des meilleures
pratiques et des normes
Augmenter le ratio e-Visiteur/eClient
Arrivée de nouveaux moyens pour
accéder au Web
Le site avant le changement
Envergure du changement

3500 pages
1 750 pages en français
 1 750 pages en anglais



25 gabarits MCMS
Quand faire le virage ?
Changement au visuel du site
 Simplification de la page d’accueil
 Amélioration à l’ergonomie

Résultat
Choix de la technique



Positionnement des DIV: Float
Taille du texte, des zones et images:
EM
Pourquoi une mise en page
élastique ?
Style et structure d’une page
DIV
id=Conteneur
Width: 47.5em
min-width: 25%
max-width: 100%
margin-left: auto
margin-right: auto
Style et structure d’une page
PIV
Menu Contenu
Padding-right:
0.625em
width: 12.5em
float: left
max-width:
350px
width: 34.375em
float:right
Pied de page
font-size:0.6875em
clear:both
position:relative
width:69.0909em
Pied de page Menu et Contenu
PIV
Float: left
width: 47.5em
max-width: 100%
Menu Contenu
Texte ou contenu principal
Publicité
Signature gouvernementale
Pied de page
Politique de confidentialité / Déclaration de services aux citoyens
Copyright
Pied de page Menu et Contenu
PIV
Logo
Image
Barre de navigation bleue
Espace pour la signature ministérielle
Fil d’ariane
Recherche
PIV
Style et structure d’une page
Enjeux pour la page d’accueil




Simplicité
Accessibilité
Image forte
Séparer images et textes
Style et structure - Page d’accueil
Message
Message principal
principal
De
De promotion
promotion
Avec
Avec ombrage
ombrage
Vie à deux
Enfants
Travail
Retraite
DIV de contenu
•Planifiez votre retraite
•Services en ligne NetRégie
•Formulaires et publications
•Nos programmes
Invalidité
Décès
Question Retraite
Avez-vous votre plan?
EM: Techniques et outils de bases

1 EM: dépend de la taille de
caractère de base du fureteur
Font-Size: détermine tout le reste

Toujours garder en tête

Qui est mon père ?

Essentiel:
Une bonne calculatrice !
Technique - Taille du caractère

La taille de base des caractères est
définie en EM
Au niveau de la DIV de contenu
 Besoins particuliers: au niveau de la
balise


Titres H1, H2, H3, H4 :
Taille supérieure à l’unité de base
 Définit une classe propre à la balise

Technique - Taille du caractère



Problème de taille rencontré
Cause: balises imbriquées
Solution:
Body{ Font-size=100%;}
 form, input, select, th, td {fontsize:1em;}
 UL UL, LI LI, LI P, TD P,
BLOCKQUOTE P {font-size:1em;}
 http://www.fjordaan.net/tests/fontsi
ze-em-perc.html

Technique - Taille des images


Pixel 200 X 100 = EM 12.5 X 6.25
2 techniques:
1.Attribuer une classe à l’image

img. classe{width:12.5em;
height:6.25em;}
2.Placer l’image dans une DIV



#divImg{width:12.5em;
height:6.25em}
img {width:100%; height:100%}
http://www.bigbaer.com/css_tutorials/css.
scale.image.html.tutorial.htm
Technique - Taille des images





Problème de taille rencontré
Cause: font-size de la DIV différent
de 1em
Solution: changer la base de calcul
Problème: image pixellisée
Solution: augmenter la résolution
Autres problèmes rencontrés



Problème: Erreur Fatale lors de
l’impression dans Internet Explorer
et Firefox
Cause: Float, lorsque la page
s’imprime sur plus d’une page
papier
Solution: retirer les float lors de
l’impression
Autres problèmes rencontrés




Problème: IE: Mauvais calcul des
dimensions
Cause: Caractères italiques
Solution: Pour IE 6 et moins:
overflow:hidden
http://www.positioniseverything.net
/explorer/italicbug-ie.html
Autres problèmes rencontrés



Problème: IE: tronque les
caractères italiques en début de
ligne
Cause: Caractères italiques
Solution: Pour IE 6 et moins: ajout
d’un padding-left de 1px
Références












http://w3c.org
http://www.csszengarden.com/tr/francais/
http://www.devguru.com/technologies/css2/index.asp
http://142.104.48.20/Benjamin.Jung/uploads/Download.
QuickReferences/CSS-2.0.pdf
http://fr.selfhtml.org/css/proprietes/printlayouts.htm
http://www.positioniseverything.net
http://www.mezzoblue.com/zengarden/alldesigns/
http://www.fu2k.org/alex/css/
http://www.bigbaer.com/css_tutorials/
http://www.fjordaan.net/tests/fontsize-em-perc.html
http://www.thenoodleincident.com/tutorials/box_lesson/f
ont/index.html
http://riddle.pl/emcalc/