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 3,7 M de cotisants: 65% sont branchés 1,4 M de bénéficiaires: 25% sont branchés Soutien aux enfants familles: 75% sont branchées Régimes complémentaires de retraite 1,1 M de participants: 65% sont branchés régimes de retraites privés administrateurs de régimes

Bases de notre réflexion Évolution des meilleures pratiques et des normes Augmenter le ratio e-Visiteur/e- Client Arrivée de nouveaux moyens pour accéder au Web

Le site avant le changement

Envergure du changement 3500 pages pages en français 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

Pied de page Style et structure d’une page PIV Contenu Menu et Contenu Pied de page Float: left width: 47.5em max-width: 100% font-size:0.6875em clear:both position:relative width: em Menu Padding-right: 0.625em width: 12.5em float: left max-width: 350px width: em float:right

Pied de page Style et structure d’une page PIV Contenu Menu et Contenu Pied de page Menu Logo Image Barre de navigation bleue Espace pour la signature ministérielle Texte ou contenu principal Fil d’arianeRecherche Publicité Copyright Signature gouvernementale Politique de confidentialité / Déclaration de services aux citoyens

Enjeux pour la page d’accueil Simplicité Accessibilité Image forte Séparer images et textes

DIV de contenu Style et structure - Page d’accueil Message principal De promotion Avec ombrage Message principal De promotion Avec ombrage Planifiez votre retraite Services en ligne NetRégie Formulaires et publications Nos programmes Vie à deux Enfants Travail Retraite 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 {font- size:1em;} UL UL, LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em;} ze-em-perc.html ze-em-perc.html

Technique - Taille des images Pixel 200 X 100 = EM 12.5 X 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%} scale.image.html.tutorial.htm 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 /explorer/italicbug-ie.html /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 QuickReferences/CSS-2.0.pdf QuickReferences/CSS-2.0.pdf ont/index.html ont/index.html