Application des CSS Régie des rentes du Québec Carolyne Dubé, RRQ Éric Fontaine, DMR.

Présentation au sujet: "Application des CSS Régie des rentes du Québec Carolyne Dubé, RRQ Éric Fontaine, DMR."— Transcription de la présentation:

1 Application des CSS Régie des rentes du Québec Carolyne Dubé, RRQ Éric Fontaine, DMR

2 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 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

3 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

4 Le site avant le changement

5 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

6 Résultat

7 Choix de la technique Positionnement des DIV: Float Taille du texte, des zones et images: EM Pourquoi une mise en page élastique ?

8 Style et structure d’une page DIV id=Conteneur Width: 47.5em min-width: 25% max-width: 100% margin-left: auto margin-right: auto

9 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:69.0909em Menu Padding-right: 0.625em width: 12.5em float: left max-width: 350px width: 34.375em float:right

10 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

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

12 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?

13 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 !

14 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

15 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;} http://www.fjordaan.net/tests/fontsi ze-em-perc.html http://www.fjordaan.net/tests/fontsi ze-em-perc.html

16 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 http://www.bigbaer.com/css_tutorials/css. scale.image.html.tutorial.htm

17 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

18 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

19 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 http://www.positioniseverything.net /explorer/italicbug-ie.html

20 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

21 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://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://www.thenoodleincident.com/tutorials/box_lesson/f ont/index.html http://riddle.pl/emcalc/