Archive for the ‘Web design’ Category

Truc Accessibilité #3 – se séparer de la souris

7 août 2007

Afin de rendre vos pages accessibles aux non-voyants ainsi qu’à tous ceux qui ne peuvent utiliser une souris, n’oubliez pas de verifier que:

  • Chaque élément qui utilise un attribut de type onmouseover doit être surchargé d’un attribut onfocus, et leur evenement associé doit déclencher une action similaire.
  • Chaque élément qui utilise un attribut de type onmouseout doit être surchargé d’un attribut onblur, et leur evenement associé doit déclencher une action similaire.
Publicités

Truc d’accessibilité #2 – l’ordre de tabulation

6 août 2007

L’ordre de tabulation défini l’ordre apriori logique pour naviguer de lien en lien ou de champs en champs dans les formulaires HTML. On passe d’un champ à l’autre en appuyant sur la touche … TAB (on l’aura deviné).

Verifier que cet ordre est logique, grouper l’information lorsque c’est naturel et approprié afin d’éviter les erreurs d’encodage. Spécifier si nécessaire l’ordre de tabulation au sein des éléments avec l’attribut « tabindex« .

exemple: <input id= »prenom » tabindex= »1″ type= »text » />

Truc d’accessibilité #1 – les accesskey

1 août 2007

Afin de faciliter l’accès de vos pages, prenez l’habitude d’ajouter des raccourcis clavier via la commande « accesskey » qui permet l’accès direct à certaines fonctions du système.

De manière générique, implémentez les accesskey suivantes dans toutes vos pages web:

  • Accesskey ‘1’: contenu principal
  • Accesskey ‘2’: Recherche
  • Accesskey ‘3’: barre de navigation principale

A blind person using a screen reader must experience the links one after another, which is rather inconvenient. They’ve got better things to do.
— Joe Clark

Safari sur Windows

12 juin 2007

C’est une des meilleure nouvelle de ce dernier WWDC, Safari est maintenant disponible également sur Windows. A telecharger immediatement sur le nouveau site d’Apple.

Update:  cette première version est décevante. Esperons qu’Apple nous sortira une nouvelle release TRES rapidement.

Les grilles sont chouettes

1 juin 2007

Si vous êtes un neophyte en mise en page CSS, je vous propose d’aller jeter un oeil sur les templates de grilles proposés par intensivstation. Ils ont en effet remis à jour leurs templates à l’usage des designers web. Le plus difficile maintenant: choisir celui qui vous conviendra le mieux.

70 Expert Ideas For Better CSS Coding

15 mai 2007

Un nouvel article compilation nous est proposé par smashingmagazine.com sur 70 trucs d’experts qui peuvent améliorer nos performances en codage CSS. Une version pdf est même promise d’ici peu …

Mon avis sur le sujet:

  • Pour le reset des CSS, j’utilise personnellement les CSS de yahoo, reset.css et font.css.
  • Pour charger vos pages web plus rapidement, evitez les @import
  • Mettez des commentaires dans vos CSS, ils commencent par /* et se terminent par */

30 Sites Web d’1 page

28 mars 2007

tutorialblog.org nous a referencé une série de 30 sites web d’une page. Ajoutons qu’ils ont également la particularité d’être très réussis.

Truc CSS #9 – réaliser de bô tableaux

27 mars 2007

J’avoue, je ne me suis pas foulé pour le titre mais le contenu en vaux la peine, jugez plutôt:

Si le même principe que le faaaameux Zen Garden, je vous propose aujourd’hui d’aller piquer du code sur le site CSS Table Gallery qui nous propose une gallerie de styles CSS divers et variés de mise en page ce qui releve toujours une gageure, j’ai nommé les tableaux. Je vous ai mis l’adresse sur un style qui me plait, ca vous dit quelque chose 😉

Trier et filtrer ses tableaux HTML

27 mars 2007

Pour eviter de longues et infructueuses recherches sur le web, je vous recommande une librairie Javascript simple et efficace présentée sur javascripttoolbox pour integrer dans les tableaux HTML des fonctionnalités de tri et de filtrage. La librairie Yahoo (YUI) ne propose en effet pas encore de solution satisfaisante avec son composant TableData qui viens juste de sortir en version beta.

La rapidité est impressionnante, même avec de long tableaux. De plus, cette librairie javascript combinée avec une CSS gère efficacement les couleurs alternées sur les lignes.

Petits meubles en cartons pour vos enfants

22 mars 2007

pic1.jpgJe trouve l’initiative vraiment excellente. foldschool met à disposition gratuitement des modeles de tabourets, chaises, .. a réaliser soi-même en carton.

Leur site et assez sympathique et met en avant l’aspect ‘do-it-yourself’ avec des fonds cartonnés, des pages mises en biais et un lettrage en police courrier. J’apprecie rarement ce genre de design, mais la c’est une réussite !