Éducation, société et technologie

Design Web orienté accessibilité

André Vincent — 2009-06-03T14:58:14Z

Une présentation sous forme de diaporama de l'approche “Access-Oriented Web Design”.

L'objectif de cet approche est de rendre un site Web accessible à tous types d'agent utilisateur sur les diverses plateformes actuelles.

L'approche consiste à concevoir un site Web en utilisant de manière optimale le balisage HTML. Ensuite, d'améliorer la présentation selon les technologies et le rendu de chaque type d'agent utilisateur à l'aide des feuilles de styles (CSS) et du langage Javascript.

Source : Access-Oriented Web Design : Building highly-interactive web apps that work for everyone

Notions de design de l'interface utilisateur

André Vincent — 2007-08-19T00:59:09Z

Le Centre collégial de développement de matériel didactique (CCDMD) a produit un guide qui expose les règles de base des normes graphiques, ergonomiques et visuelles du design de l'interface usager d'un logiciel ou d'un site Web.

D'abord destiné aux auteurs de ressources d'enseignement et d'apprentissage informatisées (REA), les concepteurs de sites Web y trouveront certainement matière à réflexion de même que quelques trucs qui pourront les aider. Aussi, la terminologie employée dans ce document permettra aux différents intervenants de discuter en utilisant des expressions et un langage communs.

La brochure de 32 pages est distribué gratuitement au format PDF et disponible dans la section complément à l'adresse suivante :

Téléchargement

Table des matières

Source : CCDMD

Parution 2007
32 pages pages
Format PDF

Design : Les contraintes matérielles et logicielles

André Vincent — 2004-11-29T13:48:59Z

Apprenez à connaître les logiciels et le matériel de vos visiteurs. Quels logiciels de navigation utilisent-ils ? Quelle est la résolution de leur écran ? Combien de couleurs peuvent-ils afficher ? Voilà autant d'indications qui vous dicteront les possibilités qui vous sont offertes dans la conception de vos pages web.

Sommaire

Les logiciels de navigation

Il existe plusieurs centaines de navigateurs web différents, déclinés en de multiples versions pour divers systèmes d'exploitation. Certains dominent le marché, d'autres émergent tandis que d'autres disparaissent lentement. Dans la conception, l'édition et la production de pages web, il est important de bien tenir compte de cette réalité. C'est le logiciel de navigation qui interprète une page HTML. Il faudra composer avec ses capacités et insuffisances. Il est donc important de connaître les navigateurs les plus utilisés, mais aussi les tendances.

Statistiques de Browser News (à ce jour)
Statistiques de w3schools (à ce jour)
Statistiques de OneStat (novembre 2005)

Bien que forts différents, ces résultats indiquent quand même une tendance qui se confirme depuis un an :

Internet Explorer pour Windows (IE/Win), plus précisément dans sa version 6.0 domine encore le marché, mais perd progressivement du terrain. Ça demeure toutefois encore un incontournable.
Les versions 5.0 et 5.5 de IE/Win disparaissent rapidement, mais demeurent encore significatives.
Les diverses moutures du navigateur à code ouvert et multiplateforme Mozilla (en premier lieu Firefox, mais aussi Netscape, Camino, et tous les navigateurs basés sur le moteur de rendu Gecko) rencontrent de plus en plus d'adeptes ; les utilisateurs ont quadruplés en moins d'un an et ce, au détriment de IE/Win.
Les navigateurs marginaux ou alternatifs maintiennent ou augmentent leur position : Opera (multiplateforme), Safari d'Apple (exclusivement pour Mac).
Internet Explorer/Mac qui était à une époque dominant sur Mac OS (et dans une certaine mesure largement en avance sur ses concurrents pour sa conformité aux standards) est en voie de disparition totale depuis l'apparition de Safari et la décision de Microsoft d'en stopper le développement.

Voir : Tendances selon Browser News

Conclusion : Les logiciels qui respectent les principales normes, standards et spécifications du W3C (HTML, XHTML, XML, CSS2) représentent aujourd'hui plus de 90% des logiciels de navigation utilisés par les internautes sur ordinateur personnel (sans compter les autres périphériques d'accès au web, tels les téléphones cellulaires, les blocs notes électroniques, les appareils pour handicapés, etc...). Il n'existe donc plus de raisons de produire des pages web qui ne respectent pas les normes et standards.

La résolutions des écrans

Selon OneStat (juin 2004) et w3schools (à ce jour)

près de 65% des internautes utilisent des écrans ayant une résolution de 1024 x 768 et plus,
près de 35% des internautes utilisent une résolution de 800 x 600,
moins de 1% des internautres utilisent une résolution en deça de 800 x 600.

Conclusion : Le design d'un site web doit se présenter correctement dans une fenêtre de largeur de 750 pixels, tout en pouvant exploiter un largeur de 960 pixels et plus. De là le concept de plus en plus répandu de mise en page fluide ou liquide qui peut s'adapter à tout type d'afficheur.

La palette des couleurs

Selon w3schools,

plus de 65% des écrans affichent des millions de couleurs (32 bit),
30% peuvent afficher des milliers de couleurs (24 bit)
seulement 6% des écrans affichent moins de 65 536 couleurs

Conclusion : Utilisez toutes les couleurs qui vous semblent appropriés. Oubliez la théorie des couleurs dites « web safe » et la très limitative palette de 216 couleurs de Netscape.

Design : arborescence et maquette

André Vincent — 2004-09-16T10:01:12Z

Arborescence

L'arborescence d'un site web est un outil de planification des liens entre les diverses parties, sections, rubriques ou pages d'un site web. L'arborescence servira ainsi de guide :

pour le découpage du contenu du site,
pour l'organisation des fichiers sur le serveur,
pour la construction d'une maquette par l'infographiste,
pour l'organisation du système de navigation sur le site.

Voici un exemple typique d'arborescence, tiré du plan du site education@canada (dorénavant hors-ligne).

Design : exemples de mise en page Web

André Vincent — 2004-09-01T02:27:52Z

En général, les meilleurs concepts de mise en page sur le web répondent tous au bon vieux principe du baiser (en anglais KISS - Keep It Simple and Stupid). En voici quelques exemples.

Sommaire

Des concepts devenus des classiques

Apple - tout en onglets...
Adobe - tout en CSS...
Quark - tout fleuri (aussi en CSS)...
Lycos - quand l'ancêtre des portails se met aux CSS...
Stop Design - quand l'un des gourous des CSS épure le design de son site.
Adaptive Path

...même pour des blogues modestes

Le projet Zen Garden

Le projet Zen Garden présente près de 400 concepts de mise en page utilisant tous exactement le même fichier (x)html. Seule la feuille de styles différe. Éblouissant. Nous en avons retenu quelques uns soit pour leur qualité graphique ou pour l'originalité et la simplicité des techniques retenues.

Greece Remembrance - le classicisme remit au goût du jour...
Obsequience - pour une mise en page légèrement asymétrique...
Like the Sea - la pseudo-transparence de la mer et des coquillages...
Daruma - poupée russes et papillons...
Subway Dream - l'élégance de la vie urbaine...
By the Pier - les pieds dans l'eau, au bout du quai...
Contemporary Nouveau - une touche d'élégance contemporaine...
Mediterranean - aux couleurs de la Méditerranée...
15 petals - une simplicité toute fleurie...
Mediterranean - sobriété et chaleur méditéranéenne...
Invitation - une invitation d'allure classique...
Odissey - une épopée digne de la Grèce antique
Industrial - industriel et austère...
Tulipe - une navigation toute en largeur et menu déroulant
Maya - un art antique servi à la moderne...
Red Frog - Frog comme « grenouille »...
Oceans Apart - le calme de la mer...
Springtime - un air printanier tout en nuances de vert...
Miracle Cure - un retour dans un passé récent...
Zen Pool - vraiment zen...
Muto Verde - le nom dit tout...
Lotus - tout en nuance transparente...
Lost Highways - du département des ponts et chaussées...
Egyptian Dawn - sable, pyramide, chameau et soleil...
Outburst - éblouissssssant...
Ballade - à quelle enseigne logez-vous...
Silent Strenght - quand le silence s'affiche...
Night Drive - conduite de nuit...
Extreme Limits - un peu de sport extrême...
Dune Temple - à vos manettes de jeu...
Color Dream - rêvez-vous en couleur ou en noir et blanc ?
Burning - en toile de fond...
Little Lili - la simplicité épurée...
TechnoHM - un peu trop techno...
RPM - aimez-vous l'heavy metal ?
Killer Style - quand la lisibilité et le bon goût ne sont pas un critère ?
Golden Mean

Les concours de design Web et autres galeries

Toujours en respectant les standards.

Design : Format des images pour le web

André Vincent — 2004-08-01T04:00:00Z

Des deux grands types d'images produits à l'aide d'ordinateurs (images matricielles et images vectorielles), seuls les formats matriciels sont universellement utilisés dans le cadre de production de pages web. Et parmi la centaine de formats matriciels encore en usage, seuls quatre sont utilisés : GIF, JPG,PNG et BMP. Nous allons en analyser les caractéristiques.

Consultez d'abord ce document 6 pages abondamment illustré préparé par Colettes Sigouin et Jean-François Dorval enseignants au département d'infographie du Collège Ahuntsic :


Images pour le web

En complément

PNG face au GIF

Pour en savoir plus sur PNG

PNG est un format de compression d'images sans perte de d'information (lossless), du même type que GIF ou TIF, contrairement à JPEG.

Contrairement au GIF, il supporte des images en 24 bits (16 millions de couleurs), et contrairement au JPEG il supporte des images 32 bits (16 millions de couleurs + 256 niveaux de transparence). Il possède aussi d'autres caractéristiques uniques.

Sommaire :

Quand utiliser le PNG ?
Questions fréquentes
Tests et Exemples
Navigateurs supportant correctement le PNG
Liens utiles Contact

Quand utiliser le PNG ?

Une première chose : Le PNG n'est pas le choix ultime dans tous les cas. C'est le meilleur choix lorsqu'il s'agit d'enregistrer :

Captures d'écran.
Illustrations au trait (logos, symboles, histogrammes, schémas, icônes, etc.)
Images contenant principalement du texte.
Images aux bords bien nets et/ou surfaces unies.
Images 2 couleurs (noir et blanc).
Images contenant un nombre réduit de couleurs

Ce n'est par contre pas le meilleur choix lorsqu'il s'agit d'enregistrer :

Photos ou images aux bords flous.
Images de jeux en 16 millions de couleurs.
Documents scannés en niveau de gris ou en 16 millions de couleurs.

Pour ces trois cas, le JPEG est souvent un meilleur choix pour ce qui est de la taille du fichier. Par contre on a une perte plus ou moins importante de la qualité, selon le taux de compression.

Souvent le PNG donne un fichier plus petit, pour une qualité d'image non altérée, contrairement au JPEG qui dégrade et au GIF qui oblige un passage en 256 couleurs maximum.

Questions fréquentes

Pourquoi remplacer le GIF par le PNG ? La différence de taille n'est pas si grande pour une même image en 256 couleurs...

En fait le GIF est soumis à une license de Unisys (il utilise l'algorithme LZW), donc tout programme créant des GIF doit payer une license [1]. C'est pourquoi certains programmes gratuits ne proposent pas toujours de sauver des GIF (même si souvent les programmes gratuit obtiennent la licence d'Unisys sur simple demande). Un format tout à fait libre existe, et est plus efficace, donc autant l'utiliser !

Oui mais PNG c'est pas aussi compatible que GIF, non ?

En fait c'est vrai, mais bon, il faut relativiser les choses. Le PNG est donc destiné à être utilisé pour les pages web. Il fonctionne sous Internet Explorer 4 et + (sur le 4 il ne fonctionne que "inline"/"embedded", mis dans une page, et pas à part), Netscape 4.5 (les versions 3.x et 4.x peuvent les afficher grace à un plug-in), Opera 4 et +, Mozilla, et bien d'autres browsers récents. Sachant que beaucoup de monde crée des pages "Compatible IE 5", on peut dire que le fait de réduire la compatibilité des images aux browsers de version 4 n'est pas un trop gros problème.

Quels autres programmes l'acceptent ?

Quasi tous les programmes d'image un rien importants. Paint fourni avec Windows, ne le supporte pas mais bon, il y a des limites aussi ;-) Par contre il semblerait que Paint fourni avec Windows XP le supporte.

Quand je sauve en PNG, j'obtiens toujours un fichier nettement plus gros, même pour un nombre de couleurs égal.

Les fichiers créés par certains programmes sont anormalement gros : Macromedia Fireworks : Il faut sauver l'image au format web, via la commande "File" -> "Export Preview" et choisir "PNG 24 bits". On obtient alors une image qui a quasi la même taille que celle créée par Paint Shop Pro. Adobe Photoshop : Les fichiers sont un peu plus volumineux que ceux de Paint Shop Pro par exemple. En utilisant la commande "File" -> "Save for web" la taille de l'image diminue, mais pas encore suffisemment. Le plugin gratuit SuperPNG permet d'améliorer ça.

Et pour les GIF animés ?

Il existe une version animée du PNG : le MNG. Malheureusement seul Mozilla le supporte. Ni Opera, ni Internet Explorer, ni Netscape 4 ne savent lire ces fichiers. Pour les animations le GIF reste donc obligatoire

Mes images apparaissent plus foncées dans Internet Explorer, les couleurs ne correspondent pas avec les codes HTML/CSS alors que dans mon programme de retouche d'image les couleurs correspondaient.

Il semblerait qu'Internet Explorer lise mal les infos d'un des blocs contenus dans les fichiers PNG, c'est un des nombreux bugs de ce navigateur. Il s'agit du bloc "gAMA". Vous trouverez sur cette page des explications sur la manière de supprimer des blocs.

Tests et exemples

Comparaisons PNG / GIF / JPEG :

Navigateurs supportant correctement le PNG :

Mozilla :

mozilla-europe.org/fr. Navigateur réécrit à partir de zéro, destiné au départ à faire Netscape 6 (étant donné que Netscape 5, basé sur la version 4, a été abandonné). En plus du navigateur, il comporte des clients mail, news, irc, et un éditeur web. Il s'agit d'un des navigateurs les plus respectueurs des standard, et il est libre (gratuit + code source ouvert). Une grande quantité de plugins existent, permettant de modifier pas mal de choses dans l'interface et les fonctionnalités.

Mozilla Firefox :

mozilla-europe.org/fr/products/firefox. Partie "navigateur web" de Mozilla. Si vous n'avez pas besoin des autres modules, Firefox est peut-être plus adapté. Il supporte la plupart des plugins créés pour Mozilla.

K-Meleon :

www.kmeleon.org. Navigateur très léger utilisant le moteur de Mozilla pour l'affichage des pages web, mais ayant sa propre interface. Si Mozilla et Mozilla Firefox semblent trop lourd sur votre machine, K-Meleon vous plaira peut-être plus. Tout comme Mozilla, ce navigateur est libre. Malheureusement les majorité des nombreux plugins modifiant l'interface de Mozilla ne pourront pas s'adapter à K-Meleon.

Opera :

www.opera.com. Ce navigateur-ci possède son propre moteur, et est également très respectueux des standard. Dans certains cas la compatibilité avec les pages mal écrites (c'est-à-dire "optimisées pour Internet Explorer") est parfois meilleure. Le plus gros désavantage face à Mozilla est qu'il s'agit d'un logiciel commercial. Une version gratuite est disponible, mais une publicité est alors affichée en permanence dans le haut de l'écran (ce n'est pas trop gênant, car elle occupe la zone inutilisée à droite de la barre d'outils).

Liens utiles

PNG Home Site
Site officiel regroupant des informations sur le PNG, des exemples d'images et des librairies de programmation.

Burn All Gifs.
Le « combat » contre le GIF.

PNG Crush
Programme optimisant les fichiers PNG, permettant de réduire leur poids tout en n'altérant pas l'image. Un programme de conversion de BMP vers PNG est également disponible sur ce site.

SuperPNG : www.fnordware.com/superpng
Plugin pour PhotoShop permettant de sauver des PNG nettement plus optimisés au niveau de la taille du fichier.

PNG Behavior
Astuce pour faire fonctionner les PNG 32 bits (avec niveaux de transparence) dans Internet Explorer 5.5 et 6. Ça fonctionne dans la majorité des cas, mais malheureusement pas 100%. Ça reste quand même la solution la plus simple à mettre en oeuvre.

PNG in Windows IE
Une autre manière de faire fonctionner les PNG 32 bits dans Internet Explorer.

Cross-browsers semi transparent background
Une méthode simple pour placer une image en arrière-fond par CSS, compatible IE/Win 5.x et 6.0

PNGShot
Un soft qui sauve automatiquement les captures d'écrans dans des fichiers PNG lors de l'appui de la touche "Print Screen". Il peut également les uploader sur un serveur web et placer l'URL dans le presse-papiers.

TweakPNG : entropymine.com/jason/tweakpng
Affiche le contenu des fichiers PNG, mais sous forme de blocs de données, et non d'image. Cela permet de voir exactement ce qu'il y a comme données en plus de l'image elle-même et d'éventuellement faire des modifications (par exemple pour supprimer le bloc "gAMA" mal interprêté par Internet Explorer).

PNG-24 Alpha Transparency with MSIE
Un script PHP exécuté côté serveur pour rendre la transparence des images PNG-24 (y compris celles placées par CSS en image de fond) compatible avec Win/IE.

Adaptation d'un article originalement paru sur http://www.antp.be/PNG/

Source : http://www.antp.be/PNG/

[1] Plus tout à fait. Voir la précision en commentaire au bas de la présente page

Design : couleurs

André Vincent — 2004-06-15T04:00:00Z

De l'utilisation pertitente des couleurs dans la conception de sites web.

Sommaire

Sur la théorie de la couleur

Sélecteurs de couleurs interactifs

Générateurs d'images colorées

Colormix

Autre références

Les 216 couleurs dites « sécuritaires » (web safe colors).

Design : ergonomie

André Vincent — 2003-12-18T05:00:00Z

Références sur l'ergonomie dans la conception de pages web.

1. Ergonomie :
Connaître les modes de consultation des internautes

2. Enrichissement :
Qu'est-ce que le média internet apporte de plus que l'mprimé ?

3. Du média imprimé au média internet :
Qu'est-ce qui ne change pas ?

Des règles qui demeurent

Qu'est-ce qui change ?

4. Instructions pratiques
Pour mieux écrire sur le web

5. Utilisabilité (usability)
dans dans la conception et le design de sites Web,

Et surtout les célèbres Top Ten Mistakes de Jakob Nielsen . Heureusement plusieurs de ces erreurs tendent à disparaître du web ou ne sont plus considérées comme telles aujourd'hui, alors que de nouvelles apparaîssent.

La trouvabilité (sic) - selon Peter Morville

La conception de l'expérience utilisateur

Sources principales de cette page :

Existe-t-il une écriture web ?