CSS & Webdesign » Ergonomie & Accessibilité http://css.4design.tl Le blog de l'intégrateur web Sun, 20 May 2012 15:30:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 La journée mondiale de l’accessibilité, c’est maintenant ! http://css.4design.tl/journee-mondiale-accessibilite-9-mai http://css.4design.tl/journee-mondiale-accessibilite-9-mai#comments Wed, 09 May 2012 17:49:58 +0000 Bruno Bichet http://css.4design.tl/?p=11993 Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.

Demain, le Web sera plus humain

Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/journee-mondiale-accessibilite-9-mai/feed 2 Check your <body> avec le W3C http://css.4design.tl/check-your-body-avec-le-w3c http://css.4design.tl/check-your-body-avec-le-w3c#comments Wed, 11 Apr 2012 20:35:20 +0000 Bruno Bichet http://css.4design.tl/?p=11833 Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web.

Principaux validateurs du W3C

  • Unicorn– C’est le Validateur unifié du W3C pour :
    • Vérifier la conformité générale en effectuant tous les tests possibles.
    • Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
    • Vérifier la compatibilité avec les portables.
    • Vérifier la syntaxe des flux Atom ou RSS.
    • Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
  • Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
  • Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
  • CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
  • mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/check-your-body-avec-le-w3c/feed 1 11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants http://css.4design.tl/11-videos-accessibilite-mal-voyants http://css.4design.tl/11-videos-accessibilite-mal-voyants#comments Sun, 12 Feb 2012 18:54:03 +0000 Bruno Bichet http://css4design.com/?p=11438 L’accessiblité des sites web est une choses dont on parle souvent, sans forcément avoir une idée très précise de la manière dont les mal-voyants utilisent les sites que nous concevons, généralement, pour le plus grand nombre. Les enjeux sont importants car le web permet aux mal-voyants de communiquer, de s’informer et de gérer une partie de leur vie quotidienne. Cette série de vidéo proposée par Access-Key de l’Université Nice Sophia-Antipolis devrait fixer les idées sur des cas concrets, pour nous permettre d’améliorer la lisibilité et le décodage de nos sites web.

Ces 11 vidéos en libre-accès illustrent de manière pédagogique les recommandations du WAI :

Merci à la liste de diffusion Pompeurs !

Pompage et CSS débutant nous offrent une liste de discussion francophone pour créateurs de sites web.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/11-videos-accessibilite-mal-voyants/feed 5 Une solution CSS accessible pour remplacer du texte HTML par une image http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image#comments Thu, 17 Feb 2011 08:09:57 +0000 Bruno Bichet http://css4design.com/?p=9192 Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau h1 (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes.

Une solution satisfaisante devrait permettre de garder un document intelligible lorsque les feuilles de styles et les images sont désactivées, mais aussi lorsque l’une ou l’autre seulement est active. Pour cela, il suffit de placer le texte en question derrière l’image via la propriété z-index pour jouer avec la profondeur. De cette manière, le texte apparait lorsque les images et/ou les feuilles de styles CSS ont été désactivées par l’( agent ) utilisateur.

Marquage HTML & CSS

Voici un exemple que j’ai testé en situation réelle pour m’assurer que cette solution n’entrainait pas d’effets de bord sur le reste de la page. Voici donc la partie de l’en-tête avec un logo et une description en mode texte, et une image en dur pour avoir un bon vieil attribut alt des familles comme on les aime ! 

<header>
    <hgroup>
        <h1 id="logo"><a href="/" rel="home">Salut, c'est moi : logo !</a></h1>
        <h2 id="motto">Salut, c'est moi : motto !</h2>
    </hgroup>
    <div id="banner">
        <a href="/"><img src="images/logo.png" alt="CSS & Webdesign" width="940px" height="150px"></a>
    </div>
</header>
header {
    position: relative;
    height: 170px;
}
hgroup {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 1px;
}
#banner {
    position: absolute;
    z-index: 2;
}
Dans un premier temps, la déclaration position: relative sur l’élément header permet de placer hgroup et #banner en position absolue par rapport à header et non au Viewport. La valeur de height: 170px remplace la hauteur qu’aurait du avoir header si les éléments qu’il contient n’avait pas été sortis du flux par le positionnement absolu.

Les éléments hgroup et #banner sont positionnés de manière absolue pour permettre d’utilisation de la propriété z-index. Quant à hgroup, il est en z-index: 1 pour permettre aux liens qu’il contient de rester cliquables (ce qui ne serait pas le cas, s’il leur z-index était inférieur à zéro).

L’image contenue dans #banner est en z-index: 2, ce qui la place au-dessus des éléments contenus dans hgroup. Le décalage en top et left sert à positionner précisément hgroup derrière l’image, selon ses dimensions. Le left: 1px empêche les serifs de certaines polices de caractères de dépasser de l’image.

Aperçu du composé HTML & CSS en images

Après le code, voici le résultat des courses en image avec les différentes cas de figure que l’on peut rencontrer :

  1. Avec CSS et images,
  2. Avec  image sans CSS,
  3. Sans image mais avec CSS,
  4. Sans image et sans CSS.

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Fig. 1 : CSS et images activées. Cliquez pour agrandir l'image.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Fig. 2 : image activée, CSS désactivée. Cliquez pour agrandir l'image.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Fig. 3 : CSS activée, image désactivée. Cliquez pour agrandir l'image.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Fig. 4 : image et CSS désactivées. Cliquez pour agrandir l'image.

Conclusion

Cette solution est loin d’être parfaite, notamment en raison de l’utilisation du positionnement absolu dont je ne suis pas fan ou du moins que j’évite en général pour les éléments structurels d’une page. Il existe certainement d’autres manières de placer du texte derrière une image en faisant en sorte que l’accessibilité des uns et des autres ne soit pas compromise.

Merci à Sébastien Delorme et à Sylvain Fix qui ont inspiré ce billet grâce à leurs commentaires.

A suivre :-)

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image/feed 16 Opquast : dites « bonjour » à M. Référent Accessibilité http://css.4design.tl/opquast-referent-accessibilite http://css.4design.tl/opquast-referent-accessibilite#comments Thu, 16 Sep 2010 06:52:20 +0000 Bruno Bichet http://css4design.com/?p=4797 Je m’étais inscrit il y a déjà quelques temps très longtemps pour suivre les contributions pour la nouvelle version du référent accessibilité pour les sites web édité par Opquast sous la houlette de Elie Sloïm de l’équipe Temesis. Si je connais Opquast depuis son lancement, je me rend compte que je l’ai peu consulté : j’ai l’impression de faire de l’accessibilité comme Jourdain faisait de la prose, mais la plupart du temps, lorsque je prends connaissance d’une bonne pratique, je me rends compte que les miennes sont perfectibles. Vous aussi ? Faites comme moi et commencez donc par télécharger une copie des 217 bonnes pratiques pour la conception de sites web de qualité.

Vidéo de présentation Opquast

Opquast : les bonnes pratiques 2010. Envoyé par Opquast.

217 bonnes pratiques pour mieux «Web développer»

Ces bonnes pratiques sont classées selon une vingtaine de thématiques sur trois niveaux de sensibilité. Elles sont accompagnées d’une courte description menant à une fiche individuelle : numéro, description, date de création, niveau d’automatisation, objectif, solution technique, moyen(s) de contrôle, plus les tags associés.

18 thématiques pour cadrer vos bonnes pratiques

  • Alternatives,
  • Code,
  • Contact,
  • Contenus,
  • E-commerce,
  • Espaces publics,
  • Fichiers et multimédia,
  • Formulaires,
  • Hyperliens,
  • Identification,
  • Internationalisation,
  • Navigation,
  • Newsletter,
  • Présentation,
  • Serveur et performances,
  • Syndication,
  • Sécurité et confidentialité,
  • Tableaux.

Exemples de bonnes pratiques pour l’intégrateur web

Selon votre coeur de métier, il est possible de se concentrer sur les bonnes pratiques liées au design, à l‘intégration HTML/CSS, au référencement, aux contenus ou à l’e-commerce (liste non exhaustive).

  • La bonne pratique numéro 206 indique que Le site propose une ou plusieurs feuilles de style dédiées aux terminaux mobiles
  • La bonne pratique numéro 194 indique que Les liens d’accès aux versions traduites pointent directement vers la traduction de la page courante.
  • La bonne pratique numéro 120 indique que Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.
  • La bonne pratique numéro 118 indique que La soumission d’un formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée

Opquast Reporting

L’inscription à Opquast Reporting permet de suivre gratuitement jusqu’à 3 projets de sites web en proposant une liste des bonnes pratiques à cocher au fur et à mesure de l’avancement de la mise en conformité de votre site.

Il est possible d’ajouter des collaborateurs, de rédiger et partager des notes privée ou des documents, ou encore de voir le pourcentage de bonnes pratiques déjà mises en place grâce à une barre de progression.

Une version Pro à partir de 2,5€ par mois vous permettra de suivre jusqu’à 10 projets avec 5 collaborateurs en bénéficiant d’une synthèse détaillée. Voir les autres offres Opquast.

En bref

Opquast est un outil original pour mettre en oeuvre — là tout de suite — les bonnes pratiques qui permettront à tous les visiteurs de profiter de votre site dans les meilleures conditions, à votre rythme et en fonction de vos priorités.

Lire le blog consacré à Opquast pour en savoir plus.

PS : le flux RSS disponible à l’adresse http://checklists.opquast.com/dailybp/feed permet d’afficher une bonne pratique par jour !

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/opquast-referent-accessibilite/feed 2 Les habitudes de scrolling à la loupe (Eyetracking) http://css.4design.tl/les-habitudes-de-scrolling-a-la-loupe-eyetracking http://css.4design.tl/les-habitudes-de-scrolling-a-la-loupe-eyetracking#comments Mon, 22 Mar 2010 16:16:14 +0000 Bruno Bichet http://css4design.com/?p=5870 Il y a certainement de la vie en dessous des 600px (fold). Mais quelle vie ? D’après l’étude Scrolling and attention réalisée par Jacob Nielsen, les utilisateurs passent 80% de leur temps à chercher des informations au-dessus du fold. Si le scroll est une pratique qui s’est répandue depuis quelques années, il ne concernerait donc que 20% du temps passé sur une page.

Distribution de l’intérêt («fixation») des utilisateurs sur les éléments du site par tranches de 100px.

La zone des 300px à partir du haut de la page est la plus regardée. Source www.useit.com

Quelles implications sur le design ?

Les éléments les plus importants devraient se situer au-dessus du fold sans pour autant sacrifier le bas de la page qui doit rester attrayant.

Pour matérialiser le fold, je trace une ligne à 550px du haut de ma maquette pour être sûr d’avoir l’essentiel. J’ai pris l’habitude de visualiser certains sites avec un Netbook  et leur résolution (1024 x 600) est sans pitié !

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/les-habitudes-de-scrolling-a-la-loupe-eyetracking/feed 10 Optimiser le linkbaiting pour votre site web http://css.4design.tl/optimiser-le-linkbaiting-pour-votre-site-web http://css.4design.tl/optimiser-le-linkbaiting-pour-votre-site-web#comments Wed, 15 Jul 2009 23:41:47 +0000 Bruno Bichet http://www.css4design.com/?p=3248 Depuis la perte des liens constituant ma blogroll lors de l’import de ma sauvegarde réalisée avec la fonction Export XML de WordPress (les liens n’ont pas pas été sauvegardés), je me rends compte que de nombreux sites web (et de blogs) ne facilitent ni n’encouragent le linkbaiting.

Pour ajouter un lien dans WordPress, il faut renseigner le nom du site, son URL et une description. Pour l’URL, pas le choix, il s’agit de votre nom de domaine. En revanche, le nom du site est un élément primordial pour le référencement puisqu’il s’agit de l’ancre du lien. La description va quant à elle nourrir l’attribut title du lien. Son importance vis-à-vis des robots est toute relative mais elle donne une indication précieuse sur la destination du lien qui peut inciter à cliquer.

Selon le nom de votre site, il peut être judicieux de mettre en avant la description qui devrait contenir les mots-clés pertinents pour décrire votre contenu. C’est le choix de Frédéric de Villamil : un nom de domaine très court t37.net et un nom de site descriptif Ergonomie web, Ruby on Rails et Architecture de l’information avec en dessous une description qui ajoute une information utile pour savoir où l’on se trouve : Blog de Frédéric de Villamil sur les métiers du web. Bref, un cas d’école que je vous invite à suivre illico pour ne pas rester sur le bord du web !

Voici quelques suggestions pour améliorer le linkbaiting et le référencement na-tu-rel de votre blog  :

  • Rendre le nom du site et la description sélectionnable avec la souris et à l’aide du clavier. Si l’URL ne pose pas de problème (F6 et Ctrl+C), le nom du site est souvent consitué d’une image ; la description souvent oubliée ; mal placée ou partie intégrante du logo.
  • Ajouter le nom de votre blog ou de votre site web dans la description si votre logo est une image. Assurez-vous que la description se trouve dans le haut de la page, idéalement à gauche, à droite ou sous le logo de votre site web.
  • Prenez soin de rédiger une mini-bio au cas où l’on voudrait étoffer la présentation de votre travail.

J’espère que ces quelques notes vous inciteront à faciliter le travail de ceux qui font un lien vers votre site internet ou votre blog car ils le valent bien ;)

En ce qui me concerne, j’ai légèrement transformé le nom de mon blog début juin 2009 : de css4design, je suis passé à css 4 design avec des résultats significatifs en terme de positionnement sur les requêtes tournant autour de css et design. Deux espaces ont suffit pour que Google trouve mon son chemin :)

N’hésitez pas à me faire des retours sur les éventuelles modifications que vous aurez effectuées sur votre site web : ils nourriront un prochain billet sur ce sujet. Merci d’avance.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/optimiser-le-linkbaiting-pour-votre-site-web/feed 14 100+ comptes Twitter pour webdesigner http://css.4design.tl/100-comptes-twitter-pour-webdesigner http://css.4design.tl/100-comptes-twitter-pour-webdesigner#comments Mon, 13 Jul 2009 13:33:28 +0000 Bruno Bichet http://www.css4design.com/?p=3113 Twitter devient le service web 2.0 sur lequel il faut voir et être vu. Je vous propose un petit voyage dans le webdesign anglo-saxon avec 100 comptes Twitter utiles dans le cadre d’une veille technique et stratégique sur le Webdesign, WordPress, les Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, l’architecture de l’information, etc. Au menu, le pseudo avec un lien vers le compte Twitter et la bio présente sur le profil.

Webdesign

  1. DeliciousHot — Currently Popular content from Delicious
  2. Fleuron — The British Journal of Typography and Design
  3. webdosanddonts — Tips and tricks for the modern day web designer
  4. zeldman — The present-day pachuco refuses to die.
  5. sixrevision — Web developer/designer and founder of Six Revisions.
  6. ilovetypography — Covering news from the Colorado Startup scene
  7. DesignerDepot — Webdesigner Depot is one of the most popular blogs about web design trends, tutorials and much more. It’s run by Walter Apai, a web designer from Vancouver.
  8. nazareth – Web and Graphic Designer, Developer UX, CSS, (X)HTML, Blogger, Twitter Fan, Internet Addict, Freelancer, Adobe Instructor, Digital Illustrator, friend
  9. wwwdesign — Whirl Wind Web &amp; Design Studio provides services for website design, eLetterhead, ecommerce and content management systems small to medium sized businesses.
  10. in_design — Share all important and interesting information about DESIGN via Twitter4all.COM then FOLLOW a moderated selection on this Twitter Design Channel
  11. webdesignledger — http://webdesignledger.com/
  12. 101bestwebsites — 101 Best Websites is a new approach to website showcasing.
  13. designfeed — Tweeting the best web and print design feeds. I’m a bot, I don’t reply to @’s. Please send suggestions for feeds in a DM. Retweets are very much appreciated :)
  14. wpstudios — WPstudios is a visual design and coding agency
  15. mezzoblue — using Twitter for me, not for you.
  16. cwylie0 — web developer, homebrewer, guitarist, herb gardener into comics, horror movies, photography
  17. DesignNewz — Feeding the design community with design and dev related news, articles and tutorials! yay! (please also follow @jophillips)
  18. khoi — Design Director, NYTimes.com
  19. hvdesigns — http://www.hv-designs.co.uk/
  20. justintadlock — Web designer, teacher in Seoul South Korea, and all-around good guy.
  21. Hicksdesign — Designer and cheese fetishist working for Opera Software from the Cotswolds, UK
  22. stevensnell — Web designer, blogger, and freelance writer.
  23. COStartupTrack — Covering news from the Colorado Startup scene
  24. Malarkey — Andy Clarke designs things, then writes and talks about them.
  25. WebDesignDev — Learn web design the easy way!
  26. Minervity — Web/Graphic Designer. Web Developer. Founder of Minervity.com, RazorMade Mediaworks and The MonoTwins.
  27. kevinmarks — Reading your thoughts. if you write them first.
  28. coopercobra — Stage Tech,a mac user, interested in webdesign,typography,graphism
  29. ThemeForest — Awesome ThemeForest Files, Community, News &amp; Chatter
  30. buildinternet — Web design, development, and business blog run by twins Sam and Zach Dunn
  31. webmonkey — I am webmonkey. I help you build websites! | http://www.webmonkey.com/
  32. mikeindustries — Come heavy or don’t come at all.
  33. stefsull — Client-side developer. Beach volleyball freak. Procrastinating workaholic. Codes, trains & writes for food.
  34. dewebtimes — latest in technology from Design, Graphics, Industry News, Photoshop, Showcase, Usability, Web Development. CSS Gallery and Showcase for Your Website.
  35. DesiMatlock — Personal: Mom of twins, daddy’s girl, traveler/polyglot. Work: Web geek, SEO, SEM (lotta PPC) & hand-coded valid (can you say perfectionist?) website redesigns.
  36. bkmacdaddy — Web and graphic designer: SEO XHTML CSS PHP Joomla Templates, Magento Themes, WordPress Themes, Twitter Backgrounds – all your web design dreams in 1 place!
  37. DesignNewTrends –The best news in the design and web development world from around the web.
  38. Abduzeedo — Graphic/web designer and blogger.
  39. markboulton — Is not an early adopter. Apparently.
  40. jasonsantamaria –Designer by day, designer by night.
  41. elliotjaystocks — Designer / author / speaker. Currently accepting new work!
  42. meaganfisher — I love good design, well written markup, and owls. I’m the deputy designer at SimpleBits. When not helping Dan, I work with my own clients.
  43. webofdesign — web design!

WordPress

  1. iandstewart — I’m the WordPress Theme Developer behind the popular Thematic Theme Framework, LaunchPad Theme, and Wpazo.
  2. pimpmywordpress — Help you ‘pimp’ your blog by publishing the latest free themes, hot plugins, blogging tips, tricks and tutorials on using WordPress.
  3. themehacks – love graphic design, wordpress fan. I design themes and templates.
  4. FreelyWordpress — Premium WordPress Themes, Given away for FREE, Blogging Theme, Woo Themes, Thesis Theme and much more.
  5. wordpress — Updates and other fun stuff related to WordPress.org (that’s the self-hosted version).
  6. ozh — WordPress & PHP hacker.
  7. wptavern — Official account for the WPTavern website
  8. wpfreelance — Freelance marketplace for WordPress theme design, plugins, programming and tweaks.
  9. iheartwordpress — WordPress Fanatic, Helper, Designer
  10. photomatt — WordPress, Automattic, Akismet…
  11. hashwp — Finding news about #wp and #wordpress and RT them
  12. themesnack — Premium WordPress Themes &amp; HTML Templates
  13. myWordPress — WordPress Video Tutorials – From basic usage to advanced SEO tactics
  14. ThemeHunter — We hunt for the latest and greatest WordPress themes and share them with you! Some of the themes we feature are paid, many are free!
  15. nathanrice — I do stuff with WordPress. Not kinky stuff, just normal « code » stuff.
  16. wordpress_jobs – wordpress jobs + projects for freelancers, jobber + buyers
  17. adii — Entrepreneur, co-founder of WooThemes and general creator of Rockstar Awesomeness!
  18. wpbeginner — WP Beginner offers tips, tools, resources, and suggestions to #Wordpress Users. If you are a WordPress User, then you should stay updated with our tweets.

Standards Web

  1. meyerweb — Web standards | (X)HTML | CSS | microformats | community | writing | speaking | signing man.
  2. laura_carlson — http://webstandardsgroup.org/features/laura-carlson.cfm
  3. w3c — The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
  4. bblfish — The Semantic Web as philosophical Engineering. Social Cloud Architect at Sun Microsystems.
  5. mollydotcom — The Annoying Standards Girl.
  6. technorati — Who’s saying what. Right now.
  7. t — barcamp bicycler buildingblocks climber cultural evolution gtd hacker independent microformats nerdy optimist pescatarian scientist skeptic
  8. cdibona — Googler, Open Source Dude, Dad
  9. alistapart — A List Apart–For people who make websites
  10. 9swords — Web Developer / Designer – Student of W3Schools Refsnes Data W3C Web Standards
  11. iheni — Accessibility and standards advocate, Sinaphile, kickboxer and Chinese foodie.
  12. webstandard — Web-Developer, Blogger, Autor mit Tweets zu Webdesign, Entwicklung, Usability, Internet, Tools, Trends, …

Javascript

  1. codepo8 — All things web, writing and working together
  2. robertnyman — http://robertnyman.com/
  3. jquery — Write less, do more. News &amp; updates from the jQuery team.
  4. shauninman — Cool like Mint. Hot like a Fever. Designer. Developer. Um, schemer?
  5. jeresig — Creator of jQuery, JavaScript programmer, blogger, author, work for Mozilla.
  6. ppk — Freelance front-end web development consultant, agent, trainer, writer, blogger, and speaker. Currently doing heavy research into mobile browser compatibility.
  7. del_javascript – Javascript News and Links (from del.icio.us)
  8. http://twitter.com/javascript_news — reddit.com/r/javascript_news
  9. http://twitter.com/greatjavascript — I bring great links of Javascript to the wealth of Developers and designers that follow me. WARNING GOOD LINKS!!!
  10. jsninja — Here on Twitter I will sporadically divulge sensitive information regarding JavaScript and its various abstractions…
  11. rem — Invented Squirrels

Graphisme, Photoshop, Illustrator

  1. vectorart – Vector Art : A digital illustration blog for graphic designers & illustrators. Free vectors, brushes, tutorials, fonts and more.
  2. PSDTUTS — The web’s #1 Photoshop tutorials site.
  3. VECTORTUTS — http://vector.tutsplus.com/
  4. patternhead — Designer, blogger, front end coder, pattern designer, painter, wannabee artist in love with Photoshop, Illustrator and Jquery.
  5. hashphotoshop — Finding news about #photoshop and RT them
  6. PshopCreative –We’re the team behind Photoshop Creative – the magazine for Adobe Photoshop inspiration and advice
  7. Colorburned — Brushes, patterns, vectors, tutorials and more!
  8. logomoose — Logo design inspiration gallery
  9. photoshoplady – All of the Best Design Resources Around the World
  10. Photoshop_PSD — Photoshop Tutorials: How To Do, Skills Like A Pro
  11. colorburned — Brushes, patterns, vectors, tutorials and more!
  12. Illustrator_GU — Illustrator articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
  13. InsideAI — We’re members of the Adobe Illustrator product development, marketing, and engineering team. Let us hear from you!
  14. ComputerArts — The world’s best-selling creative magazine
  15. Photoshop_GU — Photoshop articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
  16. NAPP_News — We are the National Association of Photoshop Professionals (led by Scott Kelby), the leading world-wide resource for Photoshop training.
  17. photoshopguides — Fresh Tutorials Added Daily
  18. psdisasters — Pour le fun, histoire de voir ce qu’il ne faut pas faire avec Photoshop !

HTML & CSS

  1. smashingmag — Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
  2. csswg — CSS working group Twitter
  3. IE6 — « this page cannot be displayed »
  4. Elasticss — A simple, yet complete, css framework to layout web-based interfaces. Is cross-platform and is limited only by your imagination.
  5. HTML5_EN — We save the Tweets about XHTML5 and HTML5.
  6. html5 — Notifications of changes to HTML5 drafts
  7. html5gallery — Site showcasing sites built using html5
  8. cssglance – Css websites showcase and web design resources
  9. wufoo – Striving to be the easiest way to collect information over the internet.

Développeurs (oui, ça veut dire PHP)

  1. rasmus — Breaking the Web
  2. depthtouch — Computer Scientist, Website designer and developer. Likes sports, computers :)
  3. AaronGustafson — I make stuff.
  4. developerworks — IBM’s premier Web site for Java, Android, Linux, Open Source, PHP, Social, Cloud Computing, Google, jQuery, and Web developer educational resources.
  5. php_net — An aggregation of and for php coders from twitter.
  6. phpclasses — Free ready to use PHP class scripts contributed by thousands of PHP developers, PHP book review, PHP jobs, listing of PHP professionals, PHP specialist forums<
  7. http://twitter.com/DailyPHP — Another day, another PHP function (created by @jt2k)

Architecture de l’information

  1. iA — UX Designer, Founder iA, creator of webtrendmap.com
  2. deaxon — Interaction Designer
  3. IATV — Information Architect, Information Literacy, UX, IxD, User Experience, Usability, Design, Prague, Ginkgo Love
  4. uxmag — UX Magazine’s Twitter feed. By @alexoid and @cdemetriadis
  5. IA_UXJOBS — UX Jobs from all over the world – Because finding the good ones shouldn’t be hard. Created for and by a UX Designer
  6. designux — User experience design and web development stream.
  7. ux –Better user experience design for the web and beyond.

Misc.

  1. @modeling22 — Coordination For Film Production In Thailand. Passionate about Media & Entertainment Industry, Tech, Marketing, Productivity, Fashions, Jazz. A nice person
  2. inspiredm — Daily inspiration source for web designers, illustrators, Twitter addicts, iPhone lovers, and other creative humans.
  3. delicious50 – Most recent Delicious bookmarks with 50 or more bookmarkers
  4. skyje4u — official account for skyje.com

N’oubliez pas de me rendre visite sur @css4design où je tiens un micro-blog sur les CSS, le HTML, le Webdesign, le Graphisme, etc. Vous y trouverez quelques pensées en vrac et des discussions avec d’autres passionnés du web. Le tout en 140 caractères, parfois moins ;)

Stay tuned and mind the gap!

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/100-comptes-twitter-pour-webdesigner/feed 35 10 bonnes pratiques pour des formulaires HTML efficaces http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces#comments Thu, 02 Jul 2009 14:40:31 +0000 Bruno Bichet http://www.css4design.com/?p=2866 Les formulaires sont indispensables pour recueillir les informations issues des utilisateurs. Leur mise en place nécessite quelques précautions que nous rappelle bbxdesign avec les 10 bonnes pratiques pour réaliser un formulaire d’après la conférence de Luke Wrobleski.

  1. Aller droit au but (Path to completion),
  2. Alignement des labels (Label alignment),
  3. Aide et astuces (Help & tips),
  4. Validation (Inline validation),
  5. Actions primaires et secondaires (Primary & Secondary actions),
  6. Actions en cours (Actions in progress),
  7. Erreurs (Errors),
  8. Input inutiles (Unnecessary inputs),
  9. Organisation du formulaire (Form organization),
  10. Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

  • JotForm — création de formulaires en ligne,
  • webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
  • Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/10-bonnes-pratiques-pour-des-formulaires-html-efficaces/feed 2 Usability Post, un blog sur le design et l'ergonomie http://css.4design.tl/usability-post-un-blog-sur-le-design-et-lergonomie http://css.4design.tl/usability-post-un-blog-sur-le-design-et-lergonomie#comments Mon, 29 Dec 2008 21:14:40 +0000 Bruno Bichet http://www.css4design.com/?p=2607 Usability Post est un excellent blog sur le design et l’ergonomie que je viens de découvrir grâce au non moins excellent article sur les 10 techniques pour améliorer de design de l’interface utilisateur paru sur Smashing Magazine sur les trucs et astuces qui permettent d’améliorer l’ergonomie et l’utilisabilité en se focalisant sur quelques détails qui ont leur importance.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/usability-post-un-blog-sur-le-design-et-lergonomie/feed 8