Webtrospection » Création Web

Améliorez le chargement de vos pages : Google performances du site

Maxime — Fri, 04 Dec 2009 06:26:36 +0000

Google s’évertue à participer à l’amélioration globale du Web, dont un des critères essentiels concerne le confort de navigation des internautes. À défaut de pouvoir modifier les sites qu’il indexe (manquerait plus que ça tiens), le géant nous propose un nouvel outil très intéressant : performances du site.

Étant donné que je ne fais pas dans la finesse, j’ai dévoilé l’intrigue de mon billet dans l’introduction… Vous l’aurez compris, Google performances du site permet de tester et d’obtenir des informations précieuses sur la rapidité des changements de vos pages. La Fonctionnalité expérimentale « Performances du site », disponible dans les Labos des Outils pour webmasters, fournit des informations concernant la réactivité de votre site.

Le service donne accès au temps de chargement moyen des pages de votre site, il propose également une courbe d’évolution (ne vous y trompez pas, le but n’est pas de faire grimper le graphique mais l’inverse !), ainsi qu’une comparaison avec l’ensemble des sites indexés par Google.

Balancer des chiffres c’est bien joli, surtout quand on apprend qu’on est plus rapide que 67 % des sites mais ça n’a pas beaucoup d’intérêt. N’est-il pas ? Rassurez-vous, notre ami a pensé à tout : en bonus des statistiques, vous avez droit à des recommandations pour améliorer le temps de chargement de vos pages, avec le descriptif des bénéfices apportés.

A lire également

Lien permanent | Mots-clefs : Google

50 menus de navigation stylisés

Maxime — Fri, 18 Sep 2009 08:50:02 +0000

Pour les amateurs de Web design, je viens de mettre la main sur une compilation de 50 menus de navigation originaux. De quoi régaler les pupilles et inspirer les Graphistes en mal d’imagination.

À base de CSS, éventuellement couplés avec du JavaScript ou réalisés en Flash, ces menus s’intègrent parfaitement dans le design de leurs sites respectifs. Mieux encore, ils permettent de passer d’une simple fonctionnalité de navigation un élément à part entière du design !

Attention toutefois, le conseiller en accessibilité que je suis se doit de signaler que certaines des présentations de cette galerie ne sont pas franchement adéquates pour une navigation accessible aux personnes en situation de handicap. À éviter absolument : les menus en Flash qui sont une plaie en la matière, bien qu’ayant un potentiel graphique des plus intéressants.

A lire également

Lien permanent | Mots-clefs : Accessibilité web, Design / Graphisme, Graphisme

40 polices d’écriture pour le Web design

Maxime — Mon, 14 Sep 2009 09:01:11 +0000

Les polices d’écriture, autrement appelées fonts, sont un élément clé dans la réalisation d’une maquette de site, notamment en ce qui concerne le logo ou la bannière. Les graphistes peuvent s’autoriser toutes sortes de fantaisies à ce niveau, contrairement au texte du contenu des pages qui se doit lui de ne pas être affiché sous forme d’images et lisible, ce qui limite le nombre de polices utilisables.

Amateurs de typographies sobres, propres et tout à fait adapté aux usages du Web, vous allez apprécier le téléchargement gratuit de ces 40 polices d’écriture que je vous invite à découvrir.

J’aime beaucoup Sansation et Eurofurence. Duepuntozero est carrément sympa pour un style 2.0, elle porte bien son nom.

A lire également

Lien permanent | Mots-clefs : 2.0, Ergonomie, Graphisme

Appréhension du design et de l’ergonomie pour webmaster amateurs ou débutants

Franck — Tue, 11 Aug 2009 14:44:29 +0000

Il est parfois déroutant pour un webmaster de créer un site internet qui soit beau et ergonomique à la fois. Pourquoi ? Tout simplement parce que le graphisme tout comme l’érgonomie nécessitent bon nombre de compétences autant techniques qu’artistiques qui peuvent prendre des centaines d’heures (années ?) à acquérir… Néanmoins il est essentiel de commencer votre travail sur de bonnes bases. Je vais essayer de réunir quelques principes de bases qui pourront vous aider dans la mise en place de sites web sur les sujets du design et de l’ergonomie.

Le design

C’est la partie visuelle de votre site. Le design (ou graphisme) doit être particulièrement soigné, équilibré car il reflète l’image de votre activité. C’est ce que l’on appelle dans le commnément « l’identité visuelle« .

A la conception de votre design via Photoshop, Illustrator… ou GIMP (pour les pauvres ou les honnêtes), vous devrez garder en tête que le support que vous allez créer devra accueillir du contenu. Evident ? Au premier abord oui, pourtant c’est un concept assez difficile à assimiler chez certain créateurs… Simplement parce qu’on a tendance intrinsèquement à dissocier le design du contenu, alors que ces deux éléments doivent former un tout homogène : le site. Donc un bon design est un design réfléchi en fonction du contenu qu’il va accueillir, pour ça, préparez votre design en faisant des schémas, une esquisse peut suffire parfois.

Et en pratique ?

Les couleurs

C’est le premier truc auquel je réfléchis. Personnellement j’essaye de trouver des couleurs qui s’associent bien : jaune/violet, noir/couleurs vives… Les couleurs devront êtres choisies en fonction du type d’activité du site web que vous créez. Si vous avez du mal à trouver des nuances harmonieuses voici un site qui pourra vous aider.

Généralement pour moi c’est 3 couleurs, sélectionnées en fonction des désirs du client principalement, sinon, en fonction de son activité, les couleurs de son logo… Il faut s’imprégner de l’univers du thème choisi par l’intermédiaire de photos ou de supports de communication existants, c’est une étape plutôt subjective.

Voici la manière qui met permet de déterminer les couleurs nécessaires à la réalisation d’un design : exemple, je dois designer un site vitrine (environ 10 pages) pour un fabricant de portes; nombre de couleurs ? 3, lesquelles ? marron (pour le bois), gris (pour l’acier) plus une troisième couleur qui pourrait très bien être du rouge, vert, bleu ou jaune qui relèverait les deux couleurs précédentes et qui pourrait se rapprocher par la même occasion du panel de couleurs proposées par le fabricant.

Attention, choisir 3 couleurs ne signifie pas que je ne peux pas en utiliser plus ou moins. Pour un site e-commerce je pourrais garder mes 3 couleurs dominantes, puis en utiliser d’autres pour donner une identité à chaque catégories de produit par exemple. Le tout est qu’il faut 2-3 couleurs dominantes qui structurent visuellement votre design et le rende homogène.

Les formes

Comme pour les couleurs, c’est assez instinctif, néanmoins je respecte quelques règles. Pour le site de notre fabriquant de portes, je choisirais un design globalement carré et structuré (pour le côté serieux, hé oui, si vous achetiez une porte à 3500 balles vous souhaiteriez au moins qu’elle soit droite et bien cadrée dans l’ouverture prévue à cet effet… et une ou plusieurs courbes dans le header, pour la douceur et en fonction des photographies mises à disposition. Comme vous l’aurez remarqué les formes varient d’un site web à un autre, mais structurellement c’est souvent identique, petit rappel rapide :

Une page web centrée dans une largeur comprise généralement entre 800 et 1100px (pour convenir aux principales résolutions d’écran),
Un header en haut de page, présentant votre logo (souvent à gauche et cliquable pointant vers l’index) composé de photos ou des formes abstraites (souvent en dégradé depuis la mode 2.0) d’une hauteur variable (qui tend à l’augmentation depuis la mode 2.0 et la hausse des résolutions d’écran…,
Un corps, soit une zone centrale dédiée au contenu, adaptable en hauteur,
Un footer (pied de page) sur lequel on retrouve généralement le logo de l’entreprise, et le texte nécessaire à la SEO.

A partir de cette structure simple peuvent se décliner un tas de formes, pour que votre site soit clair visuellement évitez la surcharge de formes inutiles, surtout dans la partie centrale qu’occupe le contenu. Les formes et contours de votre design doivent diriger naturellement les visiteurs vers le contenu qu’il souhaite voir sur votre page. Les choses doivent se faire simplement et la surcharge d’éléments visuels que l’on peut constater, par exemple, sur de gros portails d’informations, embrouille le visiteur. Un visiteur perdu c’est du taux de rebond garanti !

Pour avoir une bonne appréhension des formes il faut un sens esthétique qui n’est pas forcément inné chez tout le monde, travaillez le en regardant attentivement des sites de références dans le domaine. Voyez ce qui vous choque esthétiquement sur un site puis ce que vous trouvez agréable à regarder.

Petit exercice pratique, regardez ceci :
http://yvettesbridalformal.com/index.htm

Puis ceci :
http://www.alsacreations.com/

Quels sont les différences fondamentales entre ces deux sites web ?

Les images

Les images (photographies, représentations, pictogrammes… vont devoir être travaillées et adaptées pour coller parfaitement à l’ensemble de votre design. Pour cela les logiciels pré-cités vous offriront un panel de possibilités phénoménal, que ce soit en terme de retouche et de manipulation d’images. Dans tout les cas, évitez la surcharge et faites clair. Une image n’a pas assez de contraste ? Remettez en ! Une image est floue ? Mettez plus de netteté ! Vous devez particulièrement faire attention aux détails comme l’agencement de vos photos, la netteté, la luminosité, le contraste, ou encore la déformation car ce sont tout ces détails qui feront la différence !

Quelques trucs à savoir à propos des images :

Pour un design de site vous travaillez en 72 dpi,
Gare à l’utilisation d’images trop compressées sinon bonjour la pixelisation !
Utilisez des images libres de droits (vous en trouverez à très bas prix sur fotolia par exemple),
Quand vous enregistrez vos designs pour le web, faites bien attention au taux de compression. Le fichier final du design sera un compromis entre qualité (ajustement de la compression, ajustement des niveaux, niveau du flou… et poids. Plus un design contiendra de couleur et sera net plus il sera long à charger pour vos visiteurs,
Sur un site web évitez les GIFs animés, ils doivent être utilisés avec parcimonie car le GIF animé va attirer immédiatement l’attention du visiteur et risque de le perdre si il y en a trop sur la page. C’est une erreur typique que l’on retrouve sur les sites internet de débutants, le summum étant l’arrière plan mozaïc animé,
Attention à l’utilisation du format .PNG car la transparence est mal gérée sur certains navigateurs d’anciennes générations (IE 6 par exemple),
Quand vous placez une photographie sur un site web pour illustrer un article par exemple, si vous souhaitez que vos visiteurs puissent la visualiser en grand, créez d’abord une vignette de la photo, puis un lien cliquable qui pointera vers la photo en haute résolution. L’erreur généralement commise est d’insérer une photo en grand format et de forcer la taille pour qu’elle soit petite. Car si la taille change, le poids de la photo lui, reste le même.

L’ergonomie

C’est elle qui va répondre aux attentes de vos visiteurs. Elle permet à un visiteur de naviguer le plus naturellement possible, d’atteindre son objectif (recherche d’un produit dans un site e-commerce, recherche du moyen de paiement, l’accès aux coordonnées de l’entreprise etc… rapidement. Bien sûr l’ergonomie dépend de plusieurs facteurs comme l’âge, le rapport à l’outil informatique, les difficultés liées aux handicaps, le materiel utilisé ou le navigateur. C’est pour ces raisons que vous devez adapter votre site en fonction du plus grand nombre pour que chacun puisse accéder de manière optimale à l’information. Loin de moi l’idée de donner des leçons en terme d’ergonomie web ou d’accessibilité, des tas de bouquin vous en parlerons bien mieux que moi. Néanmoins il est important de prendre en compte ce paramètre dès le début de la création d’un site web. Cela évite les retouches tardives et permet de fidéliser vos visiteurs.

Concrètement pour améliorer l’ergonomie :

Créer un breadcrumb (chemin de fer ou fil d’Ariane, il s’agit de l’arborescence de votre site, généralement placée sous le header). Cela permet aux visiteurs de se repérer sur votre site (et c’est bon pour la SEO au passage),
La règle des trois clics doit être respectée autant que possible. C’est à dire que le visiteur doit avoir accès à l’information en maximum 3 clics, exit donc les menus déroulant à 10 niveaux,
Vos textes doivent êtres clairs, par exemple n’écrivez pas en blanc sur noir, choisissez une typo lisible comme l’arial (l’utilisation du comic sans ms est une faute de goût impardonnable), comprise dans une taille raisonnable (pas la peine de mettre le texte en 20px). Choisissez une bonne hauteur d’interligne et structurez vos textes en paragraphes, avec des titres et/ou sous-titres de différentes couleurs (les couleurs du site). Et n’oubliez pas de mettre vos liens hypertexte en évidence,
Faites attention au poids de votre page web, elle doit être la plus légère possible. Pour ça, optimisez votre code HTML et vos feuilles de style CSS, optimisez vos images. Pour la vidéo et le son préférez le streaming,
Ne mettez pas de musique en fond sonore,
Gardez la même structure de page sur l’ensemble du site, le visiteur doit connaitre le fonctionnement de votre site dès la première page,
Respectez les normes d’accessibilité W3C.

Conclusion

Sur toute la chaine de conception d’un site web, il vous faudra penser global, le site final comme un tout homogène, le design lié à l’ergonomie elle même liée au code et à l’accessibilité, ainsi qu’a la SEO. La difficulté réside dans la polyvalence que demande la discipline et du fait que le design est un art, donc subjectif. Le seul moyen de s’améliorer est de tester, comparer et recommencer, tout en gardant à l’esprit le but que vous souhaitiez atteindre pour le résultat final de votre site.

A lire également

Lien permanent | Mots-clefs : Accessibilité web, Design / Graphisme, Développement, Ergonomie, Graphisme, Web

Lorem ipsum, pour tester l’apparence de vos pages

Maxime — Thu, 06 Aug 2009 09:27:40 +0000

Lorsqu’on réalise un site Web l’une des premières étapes de production consiste dans la conception des maquettes des pages. La majorité des Web designer utilise des logiciels type PhotoShop ou illustrator pour parvenir à leurs fins. En règle générale le contenu textuel du site n’est pas définitif (voire pas défini du tout) à cette étape, c’est pourquoi nous mettons en place un faux-texte pour mieux visualiser la mise en page. Ce faux-texte est plus communément appelé Lorem ipsum.

Non, lorem ipsum n’est pas un message crypté tout droit sorti de l’esprit farfelu d’un développeur sociopathe. Il est utilisé depuis le XVIe siècle dans l’imprimerie pour la simulation de texte. On attribue son origine à Cicéron qui dit ainsi : Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit [...] ou Il n’existe personne qui aime la souffrance pour elle-même, ni qui la recherche ni qui la veuille pour ce qu’elle est [...]. Lorem ipsum remonte à loin, très loin, 45 avant Jésus-Christ.

Si l’imprimerie et la création Web sont deux domaines très différents, ils ont en commun l’aspect graphique qui nécessite d’effectuer des tests sur la mise en page. Mais alors pourquoi s’enquiquiner à balancer du latin ? pour faire le malin ? pas du tout ! L’utilisation d’un faux texte incompréhensible (sauf si on parle latin évidemment) permet aux clients et aux graphistes de se focaliser sur le visuel global du site sans être choqué par l’absence de texte.

Lorem ipsum a cet avantage de produire des mots à longueur variable essayant d’imiter une occupation normale des espaces. En revanche on peut considérer que le texte n’étant jamais vraiment lu il ne permet pas de vérifier la visibilité effective, ce qui peut représenter un inconvénient majeur si l’on n’est pas particulièrement attentif à ça.

Pour finir, de ressources Web pour générer du faux texte Lorem ipsum en fonction de vos besoins :

Lorem ipsum : générateur automatique de lorem ipsum, avec moult paramètres. À utiliser pour la conception graphique.
HTML-ipsum, du texte lorem ipsum avec les balises HTML qui vont bien (titres, paragraphes, listes). Pratique pour tester l’intégration de vos maquettes.

A lire également

Lien permanent | Mots-clefs : Design / Graphisme, Ecriture, Web

Pourquoi j’ai choisi de bannir Internet Explorer 6

Maxime — Wed, 17 Jun 2009 15:30:57 +0000

J’ai déjà mentionné à plusieurs reprises le nom d’Internet Explorer 6 sur ce blog et pour ceux à qui ça aurait échappé ce n’était jamais élogieux… En effet j’ai un dégoût profond pour ce navigateur ancestral qui m’a poussé à prendre certaines décisions radicales concernant mon activité professionnelle, ce que j’assume pleinement et souhaite vous présenter aujourd’hui.

Avant toute chose je dois vous expliquer ce qui me pose problème avec IE6, en tant qu’utilisateur et concepteur Web (je précise que ce billet n’incrimine que la version 6 d’Internet Explorer, une chose à la fois ! ) :

IE6 est un navigateur Web anachronique. Livré depuis 2001 avec Windows XP, il n’a pas évolué depuis neuf ans, sauf quelques petites mises à jour en 2004 avec le SP2 (blocage des pop-up et légère amélioration de la sécurité). Une telle hibernation a engendré des failles critiques qui mettent en péril la sécurité pendant la navigation. Bien entendu tous les autres navigateurs à évolution constante (Firefox, Opéra, Safari) sont beaucoup plus sûrs puisque obsédés, au sens positif du terme, par la détection et la correction d’éventuelles vulnérabilités,
IE6 ne supporte pas les standards Web dictés par le W3C ce qui signifie qu’un site développé pour l’ensemble des navigateurs devra être spécifiquement modifié pour plaire à IE6. Un vrai cauchemar et une perte de temps énorme pour les concepteurs Web qui passent autant de temps à corriger les aberrations affichées sur Internet Explorer 6 qu’à coder le site. Imaginez le calvaire si tous les navigateurs décidaient de faire leur propre micmac, le Web imploserait rapidement,
IE6 n’apporte aucun confort de navigation à ses utilisateurs, contrairement aux navigateurs modernes qui proposent un panel de fonctionnalités très pratiques.

Vous l’avez compris, IE6 est totalement obsolète. Ce n’est pas sale ! C’est même tout à fait normal après neuf ans d’existence et Microsoft en est conscient puisque deux nouvelles versions ont été proposées depuis.

Oui mais Internet Explorer 6 est toujours là et représente 10 à 20 % de part de marché en France. Un pourcentage faible mais assez important pour qu’on s’en inquiète et surtout pour vampiriser l’énergie des concepteurs Web.

C’est ainsi que j’en viens à l’explication de mon choix de ne plus optimiser l’affichage de mes sites pour Internet Explorer 6. « 20 % c’est énorme » peut-on dire. Je ne suis pas d’accord. À mesure que le temps passe ce pourcentage baisse significativement, la mise à jour de Windows proposant l’installation d’IE8 accélère encore ce mouvement, c’est pourquoi on peut espérer une mort imminente d’IE6 (fin 2009 ?).

Notons également que la grosse majorité des utilisateurs d’Internet Explorer 6 sont des sociétés qui bloquent les mises à jour automatiques de Windows, et donc empêchent l’installation d’une nouvelle version d’Internet Explorer. La raison de ces blocages est très simple : les administrateurs réseaux n’ont pas envie de se fatiguer à faire leur boulot améliorer la sécurité des parcs informatiques dont ils sont responsables, ou les intranets de ces sociétés ont été développés spécifiquement pour IE6 et on redoute des soucis avec les navigateurs propres.

Étant donné que les sites que je réalise ciblent principalement les particuliers jusqu’à présent, je ne vois pas l’intérêt de perdre un temps précieux à adapter ça à un navigateur qui dérange tout le monde et qui est voué à disparaître dans un futur assez proche. D’autre part j’ai envie, à mon niveau, de participer au progrès du Web qui ne pourront se faire tant qu’existeront des boulets technologiques tel qu’Internet Explorer 6.

« Boycotter IE6 c’est pénaliser ses utilisateurs ». Non, double non. Tout d’abord ceux qui se servent encore de ce navigateur finiront bien par en avoir marre de voir des sites dans un affichage médiocre et choisiront d’installer quelque chose de plus récent, je leur rends service. Ensuite je n’abandonne pas ces personnes à leur triste sort : en bas de chacun de mes sites (à l’exception de mon propre site) j’explique qu’ils ne sont pas optimisés pour IE6 et propose un lien de téléchargement d’un navigateur moderne (Firefox, par affinité et par conviction que le libre est l’avenir du Web). Par ailleurs je teste toujours mes projets sur IE6 et essaye de limiter la casse si les modifications à apporter ne me font pas perdre de temps.

Au prochain épisode : « Pourquoi Firefox est 10000 fois qu’Internet Explorer ».

A lire également

Lien permanent | Mots-clefs : Chrome, CSS, Firefox, Internet Explorer, Navigateurs, Opéra, Safari, Web