Archive pour le mot-clef ‘intégration’

Responsive web design : Comment optimiser son site pour mobiles et tablettes (2ème partie)

Par raphaelle, publié dans Cas client, Web design le 06 juillet 2011

Tags : Ergonomie, intégration, media-queries

Dans un article précédent nous avons parlé des outils que nous avons choisi pour la réalisation du site secri.fr, afin d’en faire un site « responsive » (ou en français, « réactif »).

Cependant, avant de passer à l’intégration du site il nous a fallu repenser le design. En effet, le visuel du site en 960px de large avait déjà été validé par le client, avant que nous décidions d’en faire un site réactif.

Note : en principe une telle décision devrait se faire en amont et avec l’accord du client car cela représente plus de travail qu’un site statique (et donc un coût un peu plus important) mais nous avions envie d’expérimenter sur ce projet qui s’y prêtait bien.

Le design initial

Le design de départ, qui avait déjà été validé par le client, prenait la largeur classique de 960px.

Page d’accueil en 960px de large

 

Page listing des annonces en 960px de large

 

J’ai estimé qu’il faudrait prévoir 4 « versions » du site réactif.

• La plus petite irait jusqu’à 320px de large (ce qui correspond au mode portrait de l’iPhone)
• La suivante serait utilisée pour les largeurs entre 320px et 480px (480px étant la largeur de l’iPhone en mode paysage)
• La suivante pour les largeurs entre 480px et 768px (768px est la largeur de l’iPad en mode portrait)
• La dernière correspondrait au design conçu pour le site statique en 960px, et irait de 768px à 1000px de large.

Étant donné que le site secri.fr contient relativement peu de contenu, je n’ai pas vu l’intérêt de prévoir une largeur supérieure car l’interface aurait perdu en ergonomie et en esthétique.

Pour d’autres types de projet on peut tout à fait envisager des largeurs de fenêtre supérieures, comme le fait le site de 320 and up.

Adaptations du design

Page d’accueil en 768px de large

Je suis brièvement repassée par la case Photoshop pour visualiser la page d’accueil en largeur 768px. Il fallait surtout revoir la navigation car les éléments risquaient de ne pas tous rentrer à droite du logo. J’ai donc choisi de sortir le logo de la barre de navigation et de le centrer, ainsi que de centrer la liste des liens.

La liste des biens passe en mode horizontal, ce qui fonctionnera aussi très bien pour la version d’en dessous qui est de 480px de large, avec quelques adaptations.

Page d’accueil en 768px de large

 

Liste des annonces en 768px de large

Pour les pages « A louer » et « A vendre », il n’y a plus assez de place pour 4 annonces par ligne, on passe donc à 3 annonces seulement. Le reste ne change pas.

Page d’annonces en 768px de large

 

Pour les deux versions les plus petites (320px et 480px), je n’ai pas eu besoin de travailler dans Photoshop car le travail effectué sur la version de largeur 768px m’a permis de les visualiser dans ma tête pour ensuite les implémenter directement pendant la phase d’intégration.

Ce que je ferai différemment à l’avenir

• Je travaillerai probablement sur 2 ou 3 tailles du site en parallèle, sans forcément décliner tous les gabarits pour chacune d’entre elles. Il est très possible que je continue à me baser sur un design en 960px de large, tout en réfléchissant à chaque étape à mes choix graphiques et à la manière dont ils vont affecter la syntaxe HTML.
• Je réfléchirai un peu plus aux conséquences de mes choix ergonomiques sur la phase d’intégration, notamment pour éviter l’ajout de scripts supplémentaires.

Dans un prochain article je parlerai de la phase d’intégration. Celle-ci s’est déroulée relativement bien grâce à l’outil 320 and up mais il y a eu quelques petits soucis liés à javascript et à certains navigateurs, pour ne pas citer de noms…

Responsive web design : Comment optimiser son site pour mobiles et tablettes (1ère partie)

Par raphaelle, publié dans Cas client, Web design le 28 juin 2011

Tags : Ergonomie, intégration, media-queries

Nous avons récemment mis en ligne le site secri.fr, pour une agence immobilière située en région parisienne. Nous l’avons intégré de sorte qu’il soit « réactif ». En anglais on parle de « responsive web design« .

En pratique, cela signifie qu’on utilise les media-queries (CSS3) pour appliquer des styles différents selon la taille de l’écran, de la fenêtre, ou encore de l’orientation d’un appareil mobile (smartphones et tablettes).

Cela permet donc de présenter à l’utilisateur un design et une ergonomie optimisés pour chaque type d’appareil qu’il utilise ainsi que pour la taille de la fenêtre de son navigateur.

Pour voir de quoi il s’agit, amusez-vous à redimensionner la fenêtre de votre navigateur lorsque vous êtes sur secri.fr.

Notons que selon les projets, il peut être préférable de créer un site ou une application mobile séparés. Cependant, dans la plupart des cas, l’utilisation des media-queries est la meilleure option car elle est relativement facile à implémenter et reste peu coûteuse.

Les problèmes liés à la création d’un site réactif

Lorsqu’on approche le sujet pour la première fois, cela peut paraître très complexe car très vite, on comprend qu’il va falloir changer ses méthodes de travail.

Quelques questions peuvent venir à l’esprit :

• Dois-je créer une maquette graphique pour chacune des différentes apparences du site ? Cela représente beaucoup de travail et d’échanges avec le client !
• CSS3 ne fonctionne que sur les navigateurs récents ; que faire des navigateurs plus anciens ?
• Comment aborder la phase d’intégration ?
• Est-ce compliqué d’obtenir différentes « versions » d’un site en gardant la même syntaxe HTML ?

Lors de la réalisation du site de Secri Gestion, notre premier site réactif, je me suis confrontée à ces problématiques. Je vais vous faire part du cheminement que nous avons suivi en espérant que cela vous aidera à réaliser vos sites.

L’idée de départ

Peu avant de commencer l’intégration de secri.fr, j’ai trouvé le template 320 and up, créé par le talentueux Andy Clarke. C’est une extension de HTML5 Boilerplate (par le tout aussi talentueux Paul Irish) que nous utilisions déjà pour tous nos sites.

Ces templates, composés de HTML, de CSS et de Javascript, sont une très bonne base pour créer un site réactif en bénéficiant des meilleures pratiques. Grâce au Javascript fourni, même Internet Explorer 6 se comportera comme un navigateur moderne. Enfin presque.

Plus qu’un template, 320 and up est une méthode de travail. C’était ça la vraie nouveauté pour moi car j’ai dû repenser ma manière de travailler. En effet, pour un site statique on passe généralement du design à l’intégration d’une façon assez linéaire.

Dans le cas d’un site réactif ayant 4 apparences différentes (la première pour les fenêtres allant jusqu’à 320px de largeur, puis jusqu’à 480px, 768px, et supérieure à 992px), il va falloir travailler autrement. La méthode d’Andy Clarke consiste à intégrer d’abord la version la plus petite, puis à passer au cran au dessus et ainsi de suite, jusqu’à l’intégration de la version la plus large en dernier. Ayant tenté le procédé inverse par le passé, je ne suis pas prête de revenir en arrière car c’était laborieux !

A noter que nous souhaitions réaliser un site à la fois réactif et flexible, c’est à dire qu’au lieu de « sauter » d’une apparence à l’autre lors du redimensionnement de la fenêtre, les éléments devaient s’adapter à la largeur de la fenêtre avec souplesse. Il fallait donc utiliser des pourcentages pour les largeurs des différents éléments.

Nous verrons dans un prochain article comment je m’en suis sortie au niveau du design, puisque la maquette graphique faisant 960px de large avait déjà été validée par le client.

Deuxième partie de cet article : la phase de design

Créer des sites accessibles, c’est facile

Par raphaelle, publié dans accessibilité le 12 janvier 2011

Tags : accessibilité, Design, html, intégration

Dans cet article nous allons parcourir quelques règles d’accessibilité qui concernent le code HTML, l’écriture des contenus, ainsi que les phases de conception et de design. Ces règles rendent service à une multitude d’utilisateurs. En parallèle, elles favorisent un bon référencement naturel, ce qui n’est pas négligeable. Il y a donc tout à gagner en les implémentant.

Accessibilité web : qui est concerné ?

Selon Wikipedia, l’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Avec 22% de plus de 60 ans (INSEE) et environ 15% de personnes ayant un certain degré de handicap, on s’attendrait à ce que la majorité de sites web soient accessibles. Ils sont pourtant une faible minorité en ce début d’année 2011.

Il y a plusieurs causes à ce manque d’accessibilité du paysage web actuel :

• Les développeurs et intégrateurs ne sont pas formés en accessibilité ou ils ont du mal à communiquer au reste de leur équipe l’importance de l’accessibilité.
• Les clients ne sont pas sensibilisés à ce sujet ou pensent que ça va leur coûter trop cher.
• Les designers pensent qu’un site accessible ne peut pas être esthétique et que leur liberté de création va être réduite.

Il y a probablement d’autres causes en jeu, mais un des problèmes certain est le manque d’information de tous les partis concernés. En réalité, il est relativement facile de créer des sites accessibles en respectant quelques règles de base.

Règles de base pour un site accessible

• Une syntaxe HTML impeccable
  C’est une évidence ! Il s’agit par exemple de n’utiliser des tableaux que pour les données tabulaires ; d’utiliser des balises de titres pour les titres etc. Une bonne syntaxe sera aussi bénéfique pour les moteurs de recherches donc il y a tout à gagner.
• Des titres descriptifs
  Selon un sondage réalisé par WebAIM en 2009 sur l’utilisation faite des lecteurs d’écrans, 50% des personnes interrogées utilisent la fonctionnalité qui leur permet de naviguer d’un titre à l’autre lorsqu’ils cherchent une information. C’est leur manière de « lire en diagonale », d’où l’importance d’utiliser le bon marquage, et de choisir une formulation qui décrira le contenu qui correspond à cette section.
• Des liens descriptifs
  De la même manière qu’un utilisateur de lecteur d’écran peut lister tous les titres d’une page, il peut aussi lister tous les liens qu’elle contient. 16% des personnes interrogées dans le même sondage utilisent cette fonctionnalité. Il est donc important de choisir la formulation de chaque lien avec soin, pour qu’il ait du sens une fois sorti de son contexte. Il faut éviter à tout prix les libellés de type « cliquer ici » ou « en savoir plus ».

  Une méthode possible est de rajouter dans un span caché des internautes voyant une partie du lien :

  Par exemple considérons le lien suivant :

  <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_Web">
  en savoir plus <span class="lecteurDecran"> sur l'accessibilité du web</span>
  </a>

  Dans la feuille de style, définissons un style qui masquera à l’écran le texte contenu dans le span, mais le laissant « visible » pour les lecteurs d’écran :

  .lecteurDecran {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }
  

  Dans cet exemple, les personnes utilisant un lecteur d’écran entendent la totalité du lien, au lieu de seulement « en savoir plus » qui ne veut rien dire une fois sorti de son contexte. Cependant, les personnes utilisant un navigateur classique ne voient que « en savoir plus » à l’écran.

• L’importance des listes
  Les listes sont très utiles car les lecteurs d’écrans annoncent le nombre d’items qu’elles contiennent avant de les énoncer. Ne pas oublier de créer des listes pour les menus de navigation. En fait, les listes sont assez fréquentes et elles ne doivent pas nécessairement être accompagnées de puces ou des numéros à gauche.

  Une petite astuce consiste à se poser la question suivante : est-ce un titre ou un paragraphe ? Si la réponse est négative, il y a de grandes chances pour qu’il s’agisse d’une liste.

• Mettre les contenus importants en haut de page
  Dans le code HTML, il est préférable de mettre le contenu important avant les contenus contextuels ou secondaires. Les lecteurs d’écrans lisent les pages de haut en bas, il est donc logique de leur présenter les contenus importants en premier. Pour les internautes voyants, on se sert de CSS pour placer les différents contenus où on le souhaite sur la page.
• L’attribut ALT
  Toutes les images qui ne sont pas des images de fond (ces dernières sont définies dans les feuilles de style), doivent impérativement avoir un attribut ALT. Si ces images sont purement décoratives cet attribut doit être laissé vide. De cette manière, le lecteur d’écran l’ignorera totalement.
  Si en revanche une image apporte du sens, le texte contenu dans l’attribut devrait être descriptif mais bref.

  77% des utilisateurs de lecteurs d’écrans veulent savoir qu’une photo représente une jeune femme qui sourit, contre seulement 12.8% qui préféreraient que ce genre d’image soit totalement ignorée par le lecteur d’écran. Ce type de visuel peut apporter une information sur le ton et l’image de marque d’une entreprise par exemple.

• La conclusion en premier
  Pour chaque paragraphe, il est conseillé de résumer le contenu de celui-ci dans la première phrase, pour que l’utilisateur de lecteur d’écran soit en mesure de décider s’il souhaite continuer à lire ou passer à une autre partie de la page. Tous les utilisateurs bénéficieront de ce style d’écriture.
• Des titres de pages descriptifs
  Le titre de la page web est le premier élément que lit un lecteur d’écran, c’est pourquoi il est essentiel qu’il soit pertinent et descriptif.

Une multitude de déficiences et de handicaps

Nous nous sommes focalisés sur les utilisateurs non voyants utilisant des lecteurs d’écrans, mais il existe bien d’autres profils d’utilisateurs handicapés auxquels il faut penser.

Selon une étude publiée en 2002 sur les handicaps, il y a en France environ 12 millions de personnes souffrant d’un handicap, à des degrés très variés. Cela correspond à environ 15% de la population. De plus, ces chiffres ne prennent pas en compte des déficiences assez répandues qui ne sont pas des réellement des handicaps, mais qu’il faut tout de même inclure dans la problématique de l’accessibilité web. Il y a par exemple le daltonisme (8% de la population), la dyslexie (10% de la population) et l’épilepsie (environ 1% de la population).

Pour faciliter l’expérience de ces utilisateurs ainsi que de tous les autres, on peut ajouter quelques règles pour les phases de conception et de design :

• Utilisation de contrastes forts
  Le contraste entre le texte et la couleur de fond doit être important pour être facile à lire. De plus, il est recommandé d’utiliser des fonds clairs avec du texte foncé plutôt que l’inverse pour les sites avec beaucoup de contenu.

  Il existe plusieurs outils en ligne pour vérifier que l’on a fait un bon usage des couleurs, comme Check my colours et Contrast-A

• Utilisation des couleurs avec parcimonie
  Il peut être tentant, pour le web designer débutant, d’utiliser une palette chromatique large, cependant trop de couleurs peuvent nuire à la lisibilité de la page et distraire l’oeil. De plus, éviter les associations de couleurs telles que le rouge avec le vert car les daltoniens auront des difficultés à discerner les deux.
• Eviter à tout prix les animations rapides et répétitives
  Avez vous essayé de lire un article avec plein de bannières de publicité animées à côté ? C’est très pénible pour beaucoup d’utilisateurs. Autant que possible, il faut éviter ces animations rapides et répétées. Si vous devez mettre de la pub sur une page, préférez des versions statiques ou des animations lentes et qui s’arrêtent au bout de quelques secondes.

Conclusion

Rendre un site web accessible, ce n’est pas très difficile, il y a quelques bonnes habitudes à prendre mais une fois qu’elles font parties de nos méthodes de travail, on ne peut pas dire qu’il y ait un travail supplémentaire à fournir.

Cependant l’accessibilité devient plus difficile à implémenter lorsqu’il s’agit d’applications internet riches plutôt que de simple sites web. En effet, celles-ci utilisent souvent des éléments de javascript et de AJAX qui permettent de rafraîchir une partie de la page seulement. D’autre part, ces applications comportent généralement des formulaires qu’il faut savoir intégrer correctement afin qu’ils soient accessibles. Nous explorerons ces domaines dans un prochain article.

Ressources utilisées pour la rédaction de cet article

• Improving usability for screen reader users (Webcredible)
• Sondage réalisé par WebAIM en 2009 sur l’utilisation faite des lecteurs d’écrans (WebAIM)
• Définition de l’accessibilité du web (Wikipedia)
• Personnes handicapées dans le monde, en Europe et en France
  (accessiweb.org)
• CSS in Action: Invisible Content Just for Screen Reader Users (WebAIM)
  
• Screen reader user survey results (WebAIM)

Comment utiliser CSS3 dès aujourd’hui

Par raphaelle, publié dans Design le 11 avril 2010

Tags : css3, Design, intégration, navigateur

CSS3 en bref

CSS3 permet la création d’effets visuels qui ne pouvaient pas être réalisés auparavant, ou qui nécessitaient du marquage en plus et/ou du Javascript.

En bref, CSS3 simplifie le job de l’intégrateur et met plus d’outils à sa disposition.

Parmi les nouveautées inclues dans les specifications CSS3, on trouve :

• text-shadow : en une ligne on peut ajouter une ombre portée à du texte, et bien plus encore car on peut ajouter autant d’ombres qu’on le souhaite. Pour chaque ombre on définit les distances par rapport au texte d’origine sur les axes x et y, ainsi qu’une valeur de flou. Voici un exemple.
• RGBA : avant on avait la propriété « opacity » qui permettait de rendre des objets translucides. L’inconvénient c’est que tout ce qui est contenu dans cet objet devient translucide, ce qui peut rendre les textes moins lisibles. Avec RGBA on peut définir des couleurs de fond et leur degré d’opacité avec la propriété « background », donc pas de problème de texte illisible.
• Images de fond multiples : avec CSS3 on n’est plus limité à une image de fond par objet ; le nombre est a priori illimité.
• box-sizing : cette propriété permet de changer le « box model ». On a la possibilité d’inclure le padding dans la taille de l’objet, ou le padding + la bordure.

Cette liste n’est pas exhaustive ; Il existe bien d’autres propriétés : dégradés, animations, rotations et autres.

Le problème

Toutes ne sont pas compatibles avec les mêmes navigateurs et à ma connaissance, aucune n’est compatible avec les versions 7 et 8 d’Internet Explorer. Il faudra attendre IE9 pour voir du CSS3 chez Microsoft. (Voir ce tableau de compatibilité des navigateurs avec CSS3.)

Comment utiliser CSS3 dès aujourd’hui alors que Internet Explorer concerne plus du tiers des internautes ?

Cela va dépendre du projet, car si vous créez un site pour un public en particulier qui utilise à 80% IE7, ce n’est peut-être pas très intéressant d’utiliser CSS3. En revanche si votre public se situe dans la moyenne avec 35% de IE, ou mieux, si vous vous adressez à un public assez « geek », vous pouvez dès maintenant utiliser CSS3 tout en travaillant sur des vues alternatives pour les navigateurs moins évolués.

Par ailleurs, il faut savoir que certaines propriétés CSS3 peuvent être reproduites à l’aide de filtres pour IE (ombres, transparence, rotations). Ces filtres sont un peu pénibles à utiliser et ne produisent pas exactement les mêmes effets que CSS3 mais ça peut dépanner. Ne pas oublier de les mettre dans des feuilles de style séparées.

Solution : la dégradation gracieuse

Il est tout a fait possible de concevoir un site utilisant CSS3 pour des effets d’ombres, de rotations, de dégradés ou autre, et d’offrir une version alternative, plus simple, aux navigateurs moins évolués.

Cas pratique : CannyBill.com

Le site CannyBill.com a été réalisé par Andy Clarke. Si vous visualisez ce site sur plusieurs navigateurs vous verrez quelques petites différences. Cet article écrit par Andy Clarke explique sa démarche et présente des aperçus des différents navigateurs.

Selon Andy Clarke, star du Design Web et défenseur des standards Web, il ne faut pas chercher à obtenir exactement le même design dans tous les navigateurs ; il faut produire la meilleure version du site pour le meilleur navigateur (sa référence à lui est Safari 4), puis on descend la chaîne des navigateurs jusqu’à IE en adaptant le design.

Au final, l’utilisateur ne se rendra compte à aucun moment qu’il ne voit pas certains effets du fait du navigateur qu’il utilise. On parle donc de « dégradation gracieuse » car quel que soit le navigateur utilisé, l’internaute est face à un site cohérent visuellement.

Cas pratique : For a beautiful web

Sur la page d’accueil il y a 3 jaquettes de DVD en vente. Sur Safari 4, quand on passe la souris sur une jaquette, le DVD sort vers la droite avec un effet de rotation. Sur Firefox 3.6 le DVD sort sans effet de rotation, et sur IE 7 et 8, le DVD ne bouge pas.
Dans aucun de ces cas l’internaute se demande-t-il si c’est normal ou « cassé » – car peu de gens regardent un même site sur 5 navigateurs différents – donc il s’agit d’un petit plus pour les utilisateurs de Safari et Firefox.

CSS3 en 2010

Donc, pourquoi ne pas utiliser CSS3 dès aujourd’hui ? Il existe un outil qui permet de styler les éléments d’une page différemment selon qu’un navigateur supporte telle ou telle propriété CSS3 en incluant un simple fichier Javascript. Il s’agit de Modernizr. Par exemple, si le navigateur utilisé ne supporte pas le RGBA, Modernizr ajoute la classe « no-rgba » sur le tag HTML, ce qui permet de définir d’autres couleurs pour tous les navigateurs qui ne supportent pas RGBA.

Dans cette expérience, j’ai utilisé du RGBA, des images de fond multiples, et la propriété box-sizing pour inclure le padding et la bordure dans les tailles que j’ai défini.

Quelques liens

J’ai trouvé plusieurs outils qui génèrent les styles en donnant les versions des différents navigateurs. Chacun de ces outils ne propose pas les mêmes propriétés donc il faut en utiliser plusieurs.

• CSS3 please
• CSS3 generator
• Plusieurs outils par Western Civilisation :
  • pour les transformations 2D et 3D
  • pour les dégradés
  • pour les ombres de texte
  • pour les contours de texte
• CSS3 gradient generator pour générer des dégradés
• Border radius pour générer des coins arrondis

Typographie, navigateurs et CSS

Par raphaelle, publié dans Web design le 19 mars 2010

Tags : css, Design, intégration, navigateur, texte, typographie

Récemment, alors que j’étais en phase d’intégration d’un site dont je venais de réaliser la maquette graphique, je me suis heurtée à quelques problèmes de rendu de typographie.

Il faut savoir que le site en question a un fond très foncé avec du texte clair, et que j’ai plus souvent conçu des sites clairs au texte foncé (meilleure lisibilité).

1er problème : rendu du texte plus gras sur mac

A ma grande surprise, mes titres en Palatino italisés apparaissaient en gras sur Mac. Je savais que sur Mac le texte était plus gras que sur Windows, ce que je ne savais pas c’est que l’écart est encore plus élevé quand le fond est foncé et le texte clair. En plus de ça chaque navigateur a un rendu un peu différent. Je n’étais pas prête à accepter une telle injustice donc je me suis lancée en quête d’une solution.

Je n’en ai pas trouvé à ce jour. Les différentes valeurs de font-weight (100, 200, … 900) ne servent à rien si la famille de police d’écriture ne contient pas suffisamment de variations, ce qui est souvent le cas. J’espérais trouver un moyen de tricher un peu avec de Javascript, sans succès.

Pour éviter ce genre de surprise, je vais peut-être essayer TypeKit sur le prochain projet. C’est une bibliothèque de polices d’écritures qui ne coûte pas cher (gratuit jusqu’à 2 polices pour un site) et qui est censée avoir un impact négligeable sur la performance du site. Cela me permettra de jouer sur les différentes variations d’une même police (extra light, light, roman, etc.).

2ème problème : rendu du letter-spacing

Dans Photoshop j’avais choisi de réduire l’espacement entre les lettres par -5 pour les titres. Dans ma feuille de style j’ai donc joué avec différentes valeurs de letter-spacing afin d’arriver à un résultat similaire. J’étais plutôt satisfaite de la valeur -0.02em. Sauf que ça ne marchait ni dans IE6 ni dans IE7, mais ce qui me dérangeait le plus était que ça ne marchait pas bien dans Chrome alors que le rendu devrait être le même que sur Safari (en théorie).

Je n’ai pas trouvé d’explication valable mais sur un forum on m’a proposé d’utiliser la valeur -1px au lieu d’une valeur relative en EMs et c’est l’option que j’ai choisie. J’utilise toujours des valeurs relatives pour le texte mais dans ce cas particulier j’estime que ça n’enlève rien à l’accessibilité du site.

Par contre sur la dernière version de Firefox pour Mac (3.6), les lettres de mes titres sont un peu trop serrées. A propos de Firefox, voici un article qui révèle quelques bugs qui varient d’une version de Firefox à l’autre. Mon problème pourrait en être un de plus.

Au final j’ai donc choisi la valeur -1px car elle rend bien sur la plupart des navigateurs. Après tout, peu de gens sont sur Firefox pour Mac et quand bien même ils utiliseraient ce navigateur, c’est tout à fait lisible.

Conclusion

Il faut accepter que les rendus seront un peu différents d’un navigateur à l’autre et que ça fait partie du jeu. En tant que designer web avec des qualités d’intégrateur, j’ai toujours envie que le site soit la réplique exacte de mon PSD, puisque c’est ce que le client a validé, cependant certains détails échapperont toujours à notre contrôle.

Quand on pense au temps que le designer passe à rendre son site « joli » dans tous les navigateurs, l’idée de travailler directement dans celui-ci fait sens. Nous explorerons cette idée dans le prochain article.