Pompage - Tous les articles par thème

10 raisons expliquant pourquoi les clients n’ont que faire de l’accessibilité, par Christian Heilmann.

Même si les choses ont un peu évolué depuis la parution de cet article de Christian Heilmann, ce dernier vous permettra sans aucun doute de mieux comprendre pourquoi de nombreux clients sont encore peu sensibles à l’accessibilité et vous donnera peut-être quelques idées pour essayer de les faire changer d’avis.

Accessibilité : un regard sur la résolution et la taille des écrans, par Mert Tol.

L’auteur, Mert Tol, examine l’influence sur l’accessiblité des réglages choisis par les (ou imposés aux) utilisateurs quant à la résolution et à la taille de leur écran.

Accessibilité des applications AJAX - implications, par WebAIM.

Présentation d'AJAX et des implications en termes d'accessibilité.

Accessibilité des applications internet riches, par WebAIM.

Présentation de techniques pour rendre les applications Internet accessibles.

Améliorer l’accessibilité par la typographie, par Joe Dolson.

Taille, lisibilité, contraste : quelques recommandations pour éviter que votre texte soit illisible.

Au tableau !, par Roger Johansson.

Rappelons-nous à quoi servent les tableaux : à mettre en forme des données tabulaires. Si on peut en plus rendre le tout compréhensible à quiconque n’utilise pas de navigateur graphique, pourquoi hésiter ? Remettez vos tableaux de données dans le droit chemin de l’accessibilité !

Bien utiliser le texte alternatif, par WebAIM.

Une traduction d’un article de WebAIM qui vous permettra sans aucun doute de mieux comprendre comment implémenter cet élément emblématique de l’accessibilité web qu’est l’attribut alt de la balise image.

Design de poche : Porter votre site web au petit écran, par Elika Etemad et Jorunn D. Newth.

Comment adapter son site web à un petit, très petit écran.

Dimensionner ses fontes avec rem, par Jonathan Snook.

Finis le manque de flexibilité des pixels, ou les maux de crâne à calculer des font-size relatives au parent : Voici une introduction à REM, une nouvelle unité introduite par CSS 3.

Définir des tailles de police dynamiques cohérentes avec CSS, par Robert Nyman.

Comment utiliser les ems (presque) aussi facilement que les pixels pour définir des tailles de police redimensionnables dans tous les navigateurs.

Dégradation élégante & Amélioration progressive, par Tommy Olsson.

Ou comment rendre un site utilisable par tous et agréable pour la plupart.

Gros, rigide, trapu ? gagnez en souplesse !, par Joe Clark.

Utiliser les feuilles de styles pour faire des mises en pages zoomables, c’est plus ou moins exactement ce que les développeurs de navigateurs pour PDA doivent faire pour afficher sur un petit écran des pages larges utilisant le multicolonnage.

Introduction à l’accessibilité de JavaScript, par James Edwards.

Il fut un temps où l’accessibilité de JavaScript signifiait simplement assurer une dégradation élégante lorsque JavaScript n’était pas disponible. Mais, avec la percée d’Ajax et des Applications Internet Riches (RIA), JavaScript n’est plus seulement utilisé pour améliorer l’utilisabilité à la marge, il constitue désormais la base des applications web. De nos jours, parler de l’accessibilité de JavaScript c’est s’assurer que le code JavaScript est accessible en lui-même.

L’accessibilité : politique et design, par Alan Herrell.

Alan Herrell déconstruit les nouvelles lois américaines sur l’accessibilité et leurs implications pour les web designers où qu’ils se trouvent.

La checklist d’accessibilité que je m’étais juré de ne pas rédiger, par Aaron Cannon.

Même s’il n’est pas possible de garantir à 100% l’accessibilité d’un site à travers une checklist, on peut au moins limiter les dégâts.

Le tao du design Web, par John Allsopp.

Nouveau media, vieux rituels ? Le Taoïsme pour aborder le Web d’une autre manière.

Les Super-Sélecteurs !, par Andy Clarke et James Edwards.

Après « La nuit des morts vivants », c’est sans doute la meilleure façon de terminer l’année en permettant à vos visiteurs d’adapter le style de vos pages à leur guise, et en toute simplicité. Alors précipitez vous donc pour voir « Les Super-Sélecteurs » d’Andy Clark et de James Edwards !

Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs, par Anthony T.

De nombreux menus sont à l’heure actuelle activés au survol de la souris. Mais est-ce une bonne pratique et que nous apporteraient des alternatives ? Le rédacteur de UX Movement nous donne son opinion.

Sept erreurs d’accessibilité (1ère partie), par Christian Heilmann.

Un article de Christian Heilmann en deux parties qui traite des raisons qui font que certains produits web n’arrivent pas à être accessibles.

Sept erreurs d’accessibilité (2ème partie), par Christian Heilmann.

La suite de l’article de Christian Heilmann sur les raisons qui font que certains produits n’arrivent pas à être accessibles.

Vous aimez l’accessibilité ? Les moteurs de recherche aussi !, par Andy Hagans.

Un article simple de Andy Hagans qui explique pourquoi et comment le développement de pages web accessibles peut aussi facilement vous aider à améliorer le référencement d’un site par les moteurs de recherche.

Évaluer l’accessibilité d’un site web, deuxième partie : Les premiers points à vérifier, par Roger Johansson.

Maintenant que vous avez les outils, apprenez à vous en servir pour réaliser vos premiers contrôles d’accessibilité en lisant le deuxième article de cette série de Roger Johansson.

Évaluer l’accessibilité d’un site web, première partie : Les préliminaires, par Roger Johansson.

Le premier d’une série de trois articles de Roger Johansson qui devrait vous permettre de commencer à vérifier si votre site est aussi accessible que vous le pensez ou qu’on vous l’a promis.

Évaluer l’accessibilité des sites web 3ème partie, Aller plus loin, par Roger Johansson.

Même s’ils donnent une bonne idée de l’accessibilité générale d’un site, les contrôles automatisés peuvent aussi se révéler insuffisants dans l’évaluation et la production de pages complètement accessibles à tous. Pour aller plus loin dans ce domaine, il sera donc sans doute nécessaire de faire soi-même l’expérience de la navigation web au regard des points mentionnés dans le dernier article de cette série de Roger Johansson.

Mettre en place l’expérience utilisateur : une étude de cas, par Simon White .

Quand de vieilles habitudes sont bien installées, il n’est pas facile d’appliquer de nouvelles méthodes : chaque étape d’un processus devient une nouveauté pour les parties prenantes. Certaines personnes aiment la nouveauté, d’autres non. Mais tout le monde doit embarquer dans le même bateau pour qu’une nouvelle approche de travail fonctionne.

Voici une analyse de comment nous avons mis en place l’expérience utilisateur dans ma société.

Sémantique HTML et architecture côté client, par Nicolas Gallagher.

Voici quelques réflexions, quelques histoires et idées que j’aime bien et sur lesquelles je travaille depuis un an. Pour le HTML, cela recouvre la sémantique, les composants et différentes approches de l’architecture côté client (en front-end), mais je parle aussi des systèmes de nommage des classes, ainsi que de la compression HTTP.

Arrière-plans cliquables, par Dan Cederholm.

Appliquez des images cliquables à vos listes de liens, en les laissant à l’arrière-plan.

Comment vous assurer que vos emails HTML s’affichent correctement et arrivent à bon port ?, par David Greiner.

Suite à la sortie d’Outlook 2007, David Greiner revoit ses consignes sur les bonnes pratiques du design d’emails HTML et en profite pour donner quelques conseils qui peuvent vous assurer d’être bien reçus par vos lecteurs.

Création d’une mise en page fluide à l’aide des marges négatives, par Ryan Brill.

Les marges négatives vous permettront de repousser la zone de contenu loin des bords du navigateur, en laissant de la place pour une colonne latérale. Pratique pour vos mises en pages fluides et complexes !

CSS : on reprend tout à zéro !, par Joe Gillespie.

Vous ne savez rien des feuilles de styles ? Ce n’est pas grave, mais par où commencer ? Pourquoi pas par ce grand feuilleton qui vous apprendra tout pas à pas. Suivez le guide !

CSS : on reprend tout à zéro ! (épisode 2), par Joe Gillespie.

Suite du feuilleton des feuilles de style : principe d’un fichier
CSS, premiers pas pour définir l’aspect du corps de la page.

CSS : on reprend tout à zéro ! (10ème épisode), par Joe Gillespie.

Suite du feuilleton des feuilles de style : petite parenthèse, il
faut vérifier nos pages pour qu’elles soient valides !

CSS : on reprend tout à zéro ! (11ème épisode), par Joe Gillespie.

Suite du feuilleton des feuilles de style : on sépare encore davantage le fond de la forme, et notre feuille de style devient extérieure à la page HTML.

CSS : on reprend tout à zéro ! (12ème épisode), par Joe Gillespie.

Suite du feuilleton des feuilles de style : comment faire pour les tableaux ?

CSS : on reprend tout à zéro ! (13ème épisode), par Joe Gillespie.

Suite du feuilleton des feuilles de style : comment faire pour les formulaires ?

CSS : on reprend tout à zéro ! (14ème épisode), par Joe Gillespie.

Suite du feuilleton des feuilles de style : selon les navigateurs, les interprétations peuvent varier. Comment tout prévoir ?

CSS : on reprend tout à zéro ! (15ème épisode), par Joe Gillespie.

Suite et fin du feuilleton des feuilles de style : les perspectives d’avenir.

CSS : on reprend tout à zéro ! (épisode 3), par Joe Gillespie.

Suite du feuilleton des feuilles de style : on applique du style au
texte, en manipulant polices, interlignage, titres...

CSS : on reprend tout à zéro ! (épisode 4), par Joe Gillespie.

Suite du feuilleton des feuilles de style : réflexions supplémentaires sur la forme du texte, pour avoir la meilleure lisibilité possible.

CSS : on reprend tout à zéro ! (épisode 5), par Joe Gillespie.

Suite du feuilleton des feuilles de style : mise en place des listes, ordonnées ou non, avec puces ou avec images.

CSS : on reprend tout à zéro ! (épisode 6), par Joe Gillespie.

Suite du feuilleton des feuilles de style : les ancres et les liens hypertextes, leurs différents états et leurs différents aspects.

CSS : on reprend tout à zéro ! (épisode 7), par Joe Gillespie.

Suite du feuilleton des feuilles de style : la notion-clé de positionnement relatif ou absolu, avec les boîtes CSS.

CSS : on reprend tout à zéro ! (épisode 8), par Joe Gillespie.

Suite du feuilleton des feuilles de style : on personnalise et on organise les boîtes CSS, à renfort d’id, de class, de span... La page reçoit une solide structure.

CSS : on reprend tout à zéro ! (épisode 9), par Joe Gillespie.

Suite du feuilleton des feuilles de style : mise en place définitive de la page, en trois colonnes.

Des CSS plus efficaces grâce aux raccourcis, par Roger Johansson.

C’est un article au titre comme nous les aimons chez Pompage... Il se passe de commentaires !

Design de poche : Porter votre site web au petit écran, par Elika Etemad et Jorunn D. Newth.

Comment adapter son site web à un petit, très petit écran.

Dimensionner ses fontes avec rem, par Jonathan Snook.

Finis le manque de flexibilité des pixels, ou les maux de crâne à calculer des font-size relatives au parent : Voici une introduction à REM, une nouvelle unité introduite par CSS 3.

Domptez vos puces, dressez des listes, par Mark Newhouse.

Les listes à puces sont idéales pour faire des menus de navigation qui gardent leur sens une fois les feuilles de style ôtées. Apprenez les bases du dressage de listes, bases qui vous serviront par la suite pour créer n’importe quel type de navigation.

Du stretching pour vos sites, par Patrick Griffiths.

Pas complètement liquide, mais pas fixe non plus, le design élastique combine les forces des deux méthodes. Bien réalisé, il peut améliorer l’accessibilité, exploiter des capacités négligées du navigateur et du moniteur, et stimuler votre créativité de designer.

Définir des tailles de police dynamiques cohérentes avec CSS, par Robert Nyman.

Comment utiliser les ems (presque) aussi facilement que les pixels pour définir des tailles de police redimensionnables dans tous les navigateurs.

Feuilles de Styles en Cascades, Promesse contre Réalité, et un regard vers le Futur, par Mark Newhouse.

A l’été 2002, Mark Newhouse faisait le point sur la situation de CSS, séparant ce que les Feuilles de Styles en Cascade étaient capable de faire de ce que l’état des navigateurs permettait d’accomplir.

Font-weight est toujours cassé pour l’ensemble des navigateurs sauf un, par Richard Rutter.

Malgré la course à l’armement des navigateurs en prévision de CSS3, leurs revendications de conformité vis à vis des Acid Tests, ainsi qu’un support toujours meilleur des Standards du Web, il apparaît que les typographes n’ont pourtant que leurs yeux pour pleurer en ce qui concerne le support d’une règle de base : font-weight.

Formulaires : une méthode de validation qui a de l’avenir, par Ryan Seddon.

La validation des formulaires a toujours été une affaire délicate dès les débuts du web. D’abord, il y a eu les rapports d’erreurs de la validation côté serveur. Ensuite, on a évolué vers la validation côté client pour vérifier les résultats en ligne. Aujourd’hui, HTML et CSS3 nous fournissent des types de champs, des attributs et des pseudo-classes qui permettent de déléguer le travail de validation côté client aux navigateurs, voyons donc comment les utiliser.

Formulaires HTML5 : prenez la clé des champs, par Inayaili de León.

Inayaili de León (alias Yaili) fait le point sur les techniques de mise au point de formulaires avec HTML5.

Gros, rigide, trapu ? gagnez en souplesse !, par Joe Clark.

Utiliser les feuilles de styles pour faire des mises en pages zoomables, c’est plus ou moins exactement ce que les développeurs de navigateurs pour PDA doivent faire pour afficher sur un petit écran des pages larges utilisant le multicolonnage.

Inline-block est-il un substitut aux floats ?, par Steven Bradley.

Les dispositions d’éléments avec les CSS sont souvent délicates ; cet article permet de faire le point sur les meilleurs choix à effectuer entre les éléments flottants (floats) et les blocs en ligne (inline-blocks).

Introduction au positionnement CSS, par Noah Stokes.

Retour sur les bases du positionnement CSS, et explications sur les objectifs et fonctionnements des valeurs de la propriété position.

L’impression à votre façon, par Derek Featherstone.

Avec quelques outils et un rien de CSS, créez facilement des versions imprimables qui vous ressemblent !

La grille infinie, par Chris Armstrong.

Les systèmes de grilles sont des composants majeurs du design graphique, mais elles ont toujours été conçues pour des canevas aux dimensions fixes. Jusqu’à présent.

La propriété border-image en CSS3, par Estelle Weyl.

La propriété border-image est apparue en CSS3 mais encore peu utilisée. Explications, syntaxes, exemples, et comment contourner les inévitables bugs navigateurs.

La vengeance des menus déroulants, par Patrick Griffiths et Dan Webb.

Patrick Griffiths et Dan Webb contre-attaquent : leurs menus déroulants sont encore plus légers, plus efficaces et compatibles que lors du premier épisode. Mais où s’arrêteront-ils ?

Les colonnes factices, par Dan Cederholm.

Une technique simple pour obtenir avec CSS des colonnes qui semblent de hauteur égale, indépendamment de leur contenu.

Les pieds (de page) dans le plat, par Bobby van der Sluis.

Avec les vieilles méthodes de mise en page par tableaux, le positionnement vertical était une partie de plaisir. Avec le montage en CSS, c’est une partie d’autre chose. Apprenez comment regagner le contrôle de vos pieds de page et d’autres éléments positionnés verticalement avec CSS, JavaSCript, et le DOM.

Les Portes Coulissantes de CSS, par Douglas Bowman.

Les mises en pages en CSS doivent-elles vraiment êtres plates et carrées ? Non ! Douglas Bowman montre comment créer des menus à onglets sophistiqués à l’aide de CSS et de listes XHTML.

Les Portes Coulissantes de CSS - Chapitre II, par Douglas Bowman.

Ajoutez des rollovers et élargissez les zones sensibles de vos menus à onglets en CSS basés sur la technique des Portes Coulissantes.

Les Super-Sélecteurs !, par Andy Clarke et James Edwards.

Après « La nuit des morts vivants », c’est sans doute la meilleure façon de terminer l’année en permettant à vos visiteurs d’adapter le style de vos pages à leur guise, et en toute simplicité. Alors précipitez vous donc pour voir « Les Super-Sélecteurs » d’Andy Clark et de James Edwards !

On revoit les bases : la propriété « background », par Paul O’Brien.

Tout ce que vous avez toujours voulu savoir sur la propriété background et que vous n’avez jamais osé demander !

Pour des sélecteurs CSS raccourcis, par Harry Roberts.

Plus un site prend de l’ampleur, plus il faut raccourcir les sélecteurs selon Harry Roberts. Voici pourquoi, selon lui, des sélecteurs courts permettent de produire des sites flexibles, faciles à maintenir, et prévisibles.

Principes à connaître pour améliorer vos feuilles de styles, par Hugo Giraudel.

Hugo Giraudel propose de faire le point en 10 étapes sur les bonnes pratiques pour améliorer sa connaissance et son usage des CSS.

Quand CSS et Courriel s’embrassent sous le gui, par Mark Wyner.

Non, l’utilisation de CSS dans un email n’est pas mission impossible. Marc Wyner a quelques trucs efficaces pour vous, si vous n’avez pas peur de mettre les mains dans le cambouis.

Quelles mesures CSS, pour quel usage ?, par Dudley Storey.

Confrontés au foisonnement des systèmes de mesure CSS, les développeurs web peuvent avoir du mal à comprendre quelle unité utiliser à quel moment. Voici une liste de recommandations pour mieux s’y retrouver.

Sprites CSS : Meurs, découpe d’images, meurs !, par Dave Shea.

À l’aide d’une image maîtresse sous forme de grille, on peut stocker toutes les images de boutons, d’image maps et de navigation dans un seul fichier... Dites adieu à la découpe d’images !

Tables Vs. CSS - Un combat à mort, par Sergio Villarreal.

Soit une maquette graphique X. Soit deux techniques de montage : tableaux, et CSS. Laquelle des deux sera la plus efficace et rapide pour reproduire X ?
Sergio Vilarreal ramasse les copies et distribue les bons points.

Techniques et astuces pratiques pour une mise en page CSS, par Mark Newhouse.

Quelques indications pratiques pour abandonner progressivement les tableaux au profit de CSS.

Écrire des feuilles de style efficaces, par Holly Bergevin et John Gallant.

Optimisez vos feuilles de styles avec ces astuces pour des CSS plus légères et efficaces.

8 façons simples d’améliorer la typographie dans vos designs, par Antonio Carusone.

Le support des navigateurs web nous le montre : la typographie est la grande oubliée du design web. Cependant, soigner la typographie, c’est aider le visiteur, et l’inciter à rester sur le site qu’il consulte.

Antonio Carusone nous livre ici quelques astuces pour rendre vos sites plus lisibles.

Communiquer sur le design, par D Keith Robinson.

L’autre jour, j’ai lancé une remarque sur Twitter à propos des « wireframes ». Cela m’a fait réfléchir au processus de design et à la façon dont les designers communiquent leurs choix de conception.

Concevoir un design sans la couleur, par Mark Boulton.

Cet article est le premier d’une série publiée sur le blog du designer Mark Boulton. Mark propose ici de démarrer un design sans aucune couleur.

Contraste et sens, par Andy Rutledge.

Le contraste est l’élément fondamental du design, le premier à créer du sens.

Désacraliser les tests d’utilisabilité, par Dana Chisnell.

Un test d’utilisabilité, c’est quoi ? Voici un retour sur le sujet, ainsi que les étapes importantes à suivre pour le mener à bien.

La propriété border-image en CSS3, par Estelle Weyl.

La propriété border-image est apparue en CSS3 mais encore peu utilisée. Explications, syntaxes, exemples, et comment contourner les inévitables bugs navigateurs.

Le singe baigneur est nu, et autres considérations sur la distinction entre stylisme et design, par Adam Greenfield.

Pour le bien de l’avancement du design en ligne, il est important de faire une fois pour toutes la différence entre designers et stylistes.

Les coulisses d’un design, par Douglas Bowman.

Une explication détaillée du processus et des décisions prises pour monter un des designs du CSS Zen Garden.

Les pixels, voilà l’ennemi !, par Dave Rupert.

Les terminaux offrent des écrans de plus en plus sophistiqués, qui poussent les concepteurs de sites à proposer des images à haute définition. Dans cette course au pixel effrénée, comment garder à l’esprit les contraintes des utilisateurs ?

Mettre en place l’expérience utilisateur : une étude de cas, par Simon White .

Quand de vieilles habitudes sont bien installées, il n’est pas facile d’appliquer de nouvelles méthodes : chaque étape d’un processus devient une nouveauté pour les parties prenantes. Certaines personnes aiment la nouveauté, d’autres non. Mais tout le monde doit embarquer dans le même bateau pour qu’une nouvelle approche de travail fonctionne.

Voici une analyse de comment nous avons mis en place l’expérience utilisateur dans ma société.

Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs, par Anthony T.

De nombreux menus sont à l’heure actuelle activés au survol de la souris. Mais est-ce une bonne pratique et que nous apporteraient des alternatives ? Le rédacteur de UX Movement nous donne son opinion.

Sortez-vous la tête des grilles, par Molly E. Holzschlag.

Une intéressante métaphore urbaine de Molly E. Holzschlag qui permet de comprendre pourquoi la plupart des designs CSS actuels reposent encore largement sur une organisation de la page sous forme de grille et de mesurer tout le chemin qui nous sépare encore de designs créatifs complètement libérés de toutes nos vieilles conceptions.

8 raisons de ne pas s’inscrire sur un site, par Anthony T.

Quels sont les erreurs à soigneusement éviter lorsqu’on propose un formulaire d’inscription sur son site web ? Cet article propose 8 éléments auxquels il faut rester attentif pour ne pas faire fuir les utilisateurs.

Comment bien placer des labels dans leur zone de texte, par Anthony T.

Il existe plusieurs manières de disposer les labels sur les formulaires. En général, les designers web les placent soit au‑dessus, soit à gauche des zones de texte. Jusqu’à récemment, personne ne pensait à les insérer à l’intérieur. Mais avant d’opter pour cette méthode, quelques points sont à connaître.

Désacraliser les tests d’utilisabilité, par Dana Chisnell.

Un test d’utilisabilité, c’est quoi ? Voici un retour sur le sujet, ainsi que les étapes importantes à suivre pour le mener à bien.

Ecrans tactiles : mort aux mythes, par Steven Hoober.

Les écrans tactiles nous entourent depuis plusieurs dizaines d’années, c’est même pour beaucoup le principal moyen d’interaction avec notre téléphone, mais leur fonctionnement reste mystérieux. Steven Hoober nous explique tout ça en profondeur.

Formulaires : une méthode de validation qui a de l’avenir, par Ryan Seddon.

La validation des formulaires a toujours été une affaire délicate dès les débuts du web. D’abord, il y a eu les rapports d’erreurs de la validation côté serveur. Ensuite, on a évolué vers la validation côté client pour vérifier les résultats en ligne. Aujourd’hui, HTML et CSS3 nous fournissent des types de champs, des attributs et des pseudo-classes qui permettent de déléguer le travail de validation côté client aux navigateurs, voyons donc comment les utiliser.

Formulaires HTML5 : prenez la clé des champs, par Inayaili de León.

Inayaili de León (alias Yaili) fait le point sur les techniques de mise au point de formulaires avec HTML5.

L’étude de l’expérience utilisateur : et en français, ça donne quoi ?, par David Sherwin.

Parler d’expérience utilisateur avec des clients, c’est bien, utiliser des termes qu’ils comprennent, c’est mieux. Voici donc un aide-mémoire détaillé expliquant le déroulement et l’intérêt de chaque technique d’étude de l’expérience utilisateur.

Mettre en place l’expérience utilisateur : une étude de cas, par Simon White .

Quand de vieilles habitudes sont bien installées, il n’est pas facile d’appliquer de nouvelles méthodes : chaque étape d’un processus devient une nouveauté pour les parties prenantes. Certaines personnes aiment la nouveauté, d’autres non. Mais tout le monde doit embarquer dans le même bateau pour qu’une nouvelle approche de travail fonctionne.

Voici une analyse de comment nous avons mis en place l’expérience utilisateur dans ma société.

Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs, par Anthony T.

De nombreux menus sont à l’heure actuelle activés au survol de la souris. Mais est-ce une bonne pratique et que nous apporteraient des alternatives ? Le rédacteur de UX Movement nous donne son opinion.

Votre application me fait grossir, par Kathy Sierra.

Un regard sur la psychologie de l’utilisateur face à des interfaces mal conçues.

Conception responsive : obtenir une validation sans maquettes, par Matt Griffin.

Matt Griffin revient sur la conception d’un site web …dans un navigateur web.

Tests de contenu, par Angela Colter.

Angela Colter montre comment intégrer une évaluation du contenu aux processus de tests d’expérience utilisateur.

En route pour des composants HTML réutilisables, par Niels Matthijs.

On parle beaucoup des méthodologies telles qu’OOCSS, SMACSS et BEM. Niels présente ici sa vision des choses : des composants HTML réutilisables, indépendants de leur présentation, en prenant un exemple concret et omniprésent, l’article de journal.

Formulaires HTML5 : prenez la clé des champs, par Inayaili de León.

Inayaili de León (alias Yaili) fait le point sur les techniques de mise au point de formulaires avec HTML5.

HTML5 et l’avenir du web, par Tim Wright.

Tout le monde en parle ! personne n’en veut ! tout le monde le réclame ! HTML5 arrive, pour le pire, et espérons-le pour le meilleur.

Sémantique HTML et architecture côté client, par Nicolas Gallagher.

Voici quelques réflexions, quelques histoires et idées que j’aime bien et sur lesquelles je travaille depuis un an. Pour le HTML, cela recouvre la sémantique, les composants et différentes approches de l’architecture côté client (en front-end), mais je parle aussi des systèmes de nommage des classes, ainsi que de la compression HTTP.

En route pour des composants HTML réutilisables, par Niels Matthijs.

On parle beaucoup des méthodologies telles qu’OOCSS, SMACSS et BEM. Niels présente ici sa vision des choses : des composants HTML réutilisables, indépendants de leur présentation, en prenant un exemple concret et omniprésent, l’article de journal.

Inline-block est-il un substitut aux floats ?, par Steven Bradley.

Les dispositions d’éléments avec les CSS sont souvent délicates ; cet article permet de faire le point sur les meilleurs choix à effectuer entre les éléments flottants (floats) et les blocs en ligne (inline-blocks).

Principes à connaître pour améliorer vos feuilles de styles, par Hugo Giraudel.

Hugo Giraudel propose de faire le point en 10 étapes sur les bonnes pratiques pour améliorer sa connaissance et son usage des CSS.

Accessibilité des applications internet riches, par WebAIM.

Présentation de techniques pour rendre les applications Internet accessibles.

Introduction à l’accessibilité de JavaScript, par James Edwards.

Il fut un temps où l’accessibilité de JavaScript signifiait simplement assurer une dégradation élégante lorsque JavaScript n’était pas disponible. Mais, avec la percée d’Ajax et des Applications Internet Riches (RIA), JavaScript n’est plus seulement utilisé pour améliorer l’utilisabilité à la marge, il constitue désormais la base des applications web. De nos jours, parler de l’accessibilité de JavaScript c’est s’assurer que le code JavaScript est accessible en lui-même.

Javascript non-intrusif, chapitre 1 : le grand nettoyage !, par Christian Heilmann.

Et si vous utilisiez aussi Javascript tout en restant accessible ?

Javascript non-intrusif, chapitre 2 : comment retrouver les éléments que l’on veut manipuler, par Christian Heilmann.

Commencez donc par découvrir les outils qui vont vous permettre de vous déplacer dans vos documents, de les modifier et d’accéder à ce que vous cherchez.

Javascript non-intrusif, chapitre 3 : créer du contenu et le détruire, par Christian Heilmann.

Et maintenant voyons un peu comment manipuler nos documents.

Javascript non-intrusif, chapitre 4 : l’appel des scripts de la forêt, par Christian Heilmann.

Mais au fait comment fait-on pour séparer concrètement notre code Javascript du balisage et de ces règles d’affichage ?

Javascript non-intrusif, chapitre 5 : un exemple de formulaire amélioré en Javascript, par Christian Heilmann.

Pour finir, voyons maintenant comment tout ce que nous avons pu apprendre jusqu’à présent s’articule dans un exemple concret : la validation d’un formulaire en ligne avec un Javascript non-intrusif.

L’amélioration progressive est toujours importante, par Jake Archibald.

À l’heure des applications web et de l’omniprésence de JavaScript, Jake Archibald nous rappelle de continuer à utiliser une démarche d’amélioration progressive.

Séparer le comportement de la structure, par Peter-Paul Koch.

Réconciliez-vous avec JavaScript en lui appliquant la même rigueur de raisonnement qu’avec XHTML et CSS.

Un peu de classe : l’héritage en Javascript, par Mark Dalgleish.

Les fonctions orientées objet de Javascript, telles que les constructeurs et les chaines de prototypes sont probablement les concepts les plus incompris de ce langage. Revenons sur leur fonctionnement.

Écrire du JavaScript véloce et à faible empreinte mémoire, par Addy Osmani.

Les moteurs JavaScript tels que V8 (Chrome, NodeJs) sont spécifiquement conçus pour une exécution rapide des applications JavaScript les plus complexes. En tant que développeur, si vous êtes soucieux de la consommation de mémoire et des performances, il est important que vous connaissiez les mécanismes mis en œuvre dans les moteurs JavaScript des navigateurs de vos utilisateurs.

De l’audit de contenu aux idées de design : : Comment un audit de contenu facilite le processus de décision et influence la stratégie de design, par Christopher Detzi.

Fenêtres sur le Web, par Karen McGrane.

Quels sont les mécanismes à éviter ou à mettre en place pour faciliter un accès homogène aux mêmes données, quel que soit le périphérique ou le moment choisis ? Lisez cet article de Karen McGrane pour en savoir plus !

La discipline de la stratégie du contenu : Kristina Halvorson, par Kristina Halvorson.

Nous, les personnes qui faisons des sites web, parlons depuis quinze ans d’expérience utilisateur, d’architecture de l’information, de systèmes de gestion de contenu, de programmation, de métadonnées, de design visuel, de recherche utilisateur et de toutes les autres disciplines qui permettent à nos utilisateurs de trouver et de consommer du contenu.

Mais bizarrement, nous ne parlons jamais de l’essentiel : le contenu lui-même.

La modélisation de contenu, une compétence maîtresse , par Rachel Lovinger.

Dans « Tinker, Tailor, Content Strategist », paru conjointement [sur le site original, NdT], je vous ai interrogé sur les compétences phares de la stratégie de contenu. Il n’est que justice que je partage l’une de mes préférées avec vous.

Accessibilité : un regard sur la résolution et la taille des écrans, par Mert Tol.

L’auteur, Mert Tol, examine l’influence sur l’accessiblité des réglages choisis par les (ou imposés aux) utilisateurs quant à la résolution et à la taille de leur écran.

Comment j’ai expliqué REST à ma femme, par Ryan Tomayko.

Non ce n’est pas un truc de robot, mais une traduction un peu inhabituelle pour Pompage qui devrait quand même vous permettre de découvrir, de manière assez inattendue, l’architecture sous-jacente du web et l’importance de certains de ses éléments clés que vous utilisez peut-être tous les jours sans le savoir.

HTML5 et l’avenir du web, par Tim Wright.

Tout le monde en parle ! personne n’en veut ! tout le monde le réclame ! HTML5 arrive, pour le pire, et espérons-le pour le meilleur.

Inline-block est-il un substitut aux floats ?, par Steven Bradley.

Les dispositions d’éléments avec les CSS sont souvent délicates ; cet article permet de faire le point sur les meilleurs choix à effectuer entre les éléments flottants (floats) et les blocs en ligne (inline-blocks).

La checklist d’accessibilité que je m’étais juré de ne pas rédiger, par Aaron Cannon.

Même s’il n’est pas possible de garantir à 100% l’accessibilité d’un site à travers une checklist, on peut au moins limiter les dégâts.

La cryptographie et le Web : hachage, salage et autres recettes, par Lyle Mullican.

L’un des outils de sécurité les plus puissants à disposition des développeurs web est la cryptographie. Comme tout artisan qui se respecte, ils se doivent de savoir quel type de cryptographie convient à quel contexte. Voici donc les trois techniques cryptographiques les plus pertinentes pour les applications web et leurs cas d’utilisation.

L’amélioration progressive est toujours importante, par Jake Archibald.

À l’heure des applications web et de l’omniprésence de JavaScript, Jake Archibald nous rappelle de continuer à utiliser une démarche d’amélioration progressive.

Sémantique HTML et architecture côté client, par Nicolas Gallagher.

Voici quelques réflexions, quelques histoires et idées que j’aime bien et sur lesquelles je travaille depuis un an. Pour le HTML, cela recouvre la sémantique, les composants et différentes approches de l’architecture côté client (en front-end), mais je parle aussi des systèmes de nommage des classes, ainsi que de la compression HTTP.

Un peu de classe : l’héritage en Javascript, par Mark Dalgleish.

Les fonctions orientées objet de Javascript, telles que les constructeurs et les chaines de prototypes sont probablement les concepts les plus incompris de ce langage. Revenons sur leur fonctionnement.

8 façons simples d’améliorer la typographie dans vos designs, par Antonio Carusone.

Le support des navigateurs web nous le montre : la typographie est la grande oubliée du design web. Cependant, soigner la typographie, c’est aider le visiteur, et l’inciter à rester sur le site qu’il consulte.

Antonio Carusone nous livre ici quelques astuces pour rendre vos sites plus lisibles.

De la vraie typographie pour le Web, par Tim Brown.

Maintenant que les navigateurs supportent l’inclusion de fontes dans les feuilles de style, et que des licences permettent d’utiliser ces jeux de caractères, il est temps de dépasser toute l’excitation autour des caractères du web pour réfléchir de façon pragmatique à la façon d’utiliser de véritables polices dans nos projets web.

Dimensionner ses fontes avec rem, par Jonathan Snook.

Finis le manque de flexibilité des pixels, ou les maux de crâne à calculer des font-size relatives au parent : Voici une introduction à REM, une nouvelle unité introduite par CSS 3.

Pour une typographie qui a du sens, par Tim Brown.

Les échelles modulaires sont des séquences de chiffres liés entre eux de façon logique et arithmétique. Tim Brown nous explique en quoi leur usage peut aider le designer web à faire des choix cohérents et harmonieux pour structurer ses pages.

99,9% des sites web sont obsolètes, par Jeffrey Zeldman.

La grande majorité des sites actuels sont mal construits, obsolètes, et condamnés à disparaître. Une entrée en matière provocante au livre de Jeffrey Zeldman sur les standards web.

Changez-vous la vie avec XHTML, par J. David Eisenberg.

Si vous voulez que votre site fonctionne correctement dans les navigateurs et les appareils non-traditionnels d’aujourd’hui, et qu’il continue à bien fonctionner dans ceux de demain, ça ne serait peut-être pas une mauvaise idée de créer vos nouveaux sites en XHTML, et convertir les anciens dès que votre planning le permettra.

Clarence le poney, par Al Sparber.

La raison pour laquelle vous devriez passer à CSS, à travers l’histoire de Clarence le poney.

Comment bien placer des labels dans leur zone de texte, par Anthony T.

Il existe plusieurs manières de disposer les labels sur les formulaires. En général, les designers web les placent soit au‑dessus, soit à gauche des zones de texte. Jusqu’à récemment, personne ne pensait à les insérer à l’intérieur. Mais avant d’opter pour cette méthode, quelques points sont à connaître.

Comment vous assurer que vos emails HTML s’affichent correctement et arrivent à bon port ?, par David Greiner.

Suite à la sortie d’Outlook 2007, David Greiner revoit ses consignes sur les bonnes pratiques du design d’emails HTML et en profite pour donner quelques conseils qui peuvent vous assurer d’être bien reçus par vos lecteurs.

Conception responsive : obtenir une validation sans maquettes, par Matt Griffin.

Matt Griffin revient sur la conception d’un site web …dans un navigateur web.

Concevoir un design sans la couleur, par Mark Boulton.

Cet article est le premier d’une série publiée sur le blog du designer Mark Boulton. Mark propose ici de démarrer un design sans aucune couleur.

Contraste et sens, par Andy Rutledge.

Le contraste est l’élément fondamental du design, le premier à créer du sens.

De la vraie typographie pour le Web, par Tim Brown.

Maintenant que les navigateurs supportent l’inclusion de fontes dans les feuilles de style, et que des licences permettent d’utiliser ces jeux de caractères, il est temps de dépasser toute l’excitation autour des caractères du web pour réfléchir de façon pragmatique à la façon d’utiliser de véritables polices dans nos projets web.

Design de poche : Porter votre site web au petit écran, par Elika Etemad et Jorunn D. Newth.

Comment adapter son site web à un petit, très petit écran.

Designer par accident, par Frances Berriman.

Êtes‑vous un développeur ou un designer ? Cette question doit parler à beaucoup d’entre nous et Frances Berriman nous donne son avis sur la question.

Donnez votre avis sur le futur de HTML, par Molly E. Holzschlag.

HTML change... Et VOUS pouvez être partie prenante du processus. Lisez, puis réagissez !

Déclarations XHTML, par Patrick Griffiths.

Un aperçu des obligations qui s’imposent aux développeurs en matière de déclaration de documents XHTML : choix du doctype et du jeu de caractères.

Emails HTML - Dompter la bête, par David Greiner.

Au delà de la gageure que représente la conception d’un email HTML consultable dans un maximum de clients de courrier électronique, quelques recommandations de David Greiner qui vous permettront tout de même de mieux faire passer votre message auprès d’un plus grand nombre de destinataires.

Formulaires HTML5 : prenez la clé des champs, par Inayaili de León.

Inayaili de León (alias Yaili) fait le point sur les techniques de mise au point de formulaires avec HTML5.

Gros, rigide, trapu ? gagnez en souplesse !, par Joe Clark.

Utiliser les feuilles de styles pour faire des mises en pages zoomables, c’est plus ou moins exactement ce que les développeurs de navigateurs pour PDA doivent faire pour afficher sur un petit écran des pages larges utilisant le multicolonnage.

HTML5 et l’avenir du web, par Tim Wright.

Tout le monde en parle ! personne n’en veut ! tout le monde le réclame ! HTML5 arrive, pour le pire, et espérons-le pour le meilleur.

Iconologic et les standards, par Aaron Boodman.

Reproduction d’un mémo pour la société qui emploie l’auteur, expliquant les avantages du web design selon les standards Web.

Introduction au positionnement CSS, par Noah Stokes.

Retour sur les bases du positionnement CSS, et explications sur les objectifs et fonctionnements des valeurs de la propriété position.

La grille infinie, par Chris Armstrong.

Les systèmes de grilles sont des composants majeurs du design graphique, mais elles ont toujours été conçues pour des canevas aux dimensions fixes. Jusqu’à présent.

La propriété border-image en CSS3, par Estelle Weyl.

La propriété border-image est apparue en CSS3 mais encore peu utilisée. Explications, syntaxes, exemples, et comment contourner les inévitables bugs navigateurs.

Le DOCTYPE qu’il vous faut, par Jeffrey Zeldman.

Vos pages web ont un air bizarre malgré la présence d’un DOCTYPE ? Découvrez pourquoi, et trouvez votre bonheur dans une liste de DOCTYPEs corrects.

Le tao du design Web, par John Allsopp.

Nouveau media, vieux rituels ? Le Taoïsme pour aborder le Web d’une autre manière.

Les déclarations « Doctype » et les en-têtes « Content-type » : Doctype Declarations and Content-Type Headers, par Tommy Olsson.

Créer des documents valides c’est bien. Comprendre la signification de la déclaration Doctype et de l’en-tête Content-Type qu’ils contiennent, ainsi que leurs implications pour l’affichage de vos documents, est encore mieux. C’est pour le moins le message que souhaite faire passer cet article de Tommy Olsson qui vous permettra désormais de servir votre XHTML en toute connaissance de cause.

Mon site Web est standard ! Et le vôtre ?, par Karl Dubost.

Quelques bonnes raisons et des outils pour ceux qui veulent commencer à développer avec les standards. Une bonne piqûre de rappel pour les autres !

Navigateurs indulgents : cap danger !, par J. David Eisenberg.

Les navigateurs indulgents ont favorisé l’émergence d’un monde d’illettrés du HTML structurel en dissimulant le besoin de structure dont le Web a besoin alors qu’il se dirige vers le XHTML et le XML.

Où suis-je ?, par Derek Powazek.

Trois règles simples pour une meilleure navigation dans les sites web.

Partir du bon pied avec les standards, par Steve Smith.

Dans de nombreuses situations encore, passer aux standards web est souvent perçu comme l’apprentissage difficile d’une nouvelle manière de marcher. Alors pour partir du bon pied avec les standards, n’hésitez donc pas à lire ces suggestions de Steve Smith qui vous permettront de commencer à les utiliser ou à les faire accepter dans la conception de tous vos sites web.

Penser mobile d’abord, par Luke Wroblewski.

La plupart du temps, la version mobile d’un site ou d’une application web est conçue après la version classique. Voici trois bonnes raisons de commencer par la version mobile.

Penser mobile d’abord aide pour les décisions critiques, par Luke Wroblewski.

Dans la continuité de l’article Penser mobile d’abord, Luke Wroblewski nous explique les bénéfices d’une conception orientée vers les mobiles.

Pour une typographie qui a du sens, par Tim Brown.

Les échelles modulaires sont des séquences de chiffres liés entre eux de façon logique et arithmétique. Tim Brown nous explique en quoi leur usage peut aider le designer web à faire des choix cohérents et harmonieux pour structurer ses pages.

Refondre aux standards des sites de taille industrielle, par le WaSP.

Une interview de Dan Cederholm, webdesigner ayant mené la refonte aux standards de 2 grands magazines web américains.

Sortez-vous la tête des grilles, par Molly E. Holzschlag.

Une intéressante métaphore urbaine de Molly E. Holzschlag qui permet de comprendre pourquoi la plupart des designs CSS actuels reposent encore largement sur une organisation de la page sous forme de grille et de mesurer tout le chemin qui nous sépare encore de designs créatifs complètement libérés de toutes nos vieilles conceptions.

Tables Vs. CSS - Un combat à mort, par Sergio Villarreal.

Soit une maquette graphique X. Soit deux techniques de montage : tableaux, et CSS. Laquelle des deux sera la plus efficace et rapide pour reproduire X ?
Sergio Vilarreal ramasse les copies et distribue les bons points.

Une terminologie de la conception web, par Holly Bergevin et John Gallant.

Un décryptage du jargon de la création web.

Vous aimez l’accessibilité ? Les moteurs de recherche aussi !, par Andy Hagans.

Un article simple de Andy Hagans qui explique pourquoi et comment le développement de pages web accessibles peut aussi facilement vous aider à améliorer le référencement d’un site par les moteurs de recherche.

Concevoir des e-mails réactifs : Pour commencer, par Campaign Monitor.

Si vous lisez régulièrement vos e-mails sur un smartphone, vous savez sans doute que c’est une expérience qui peut virer au cauchemar. Telle newsletter, qui s’affiche pourtant très bien dans votre boîte de réception habituelle, peut devenir absolument illisible quand elle est réduite à un petit écran. Parmi les problèmes les plus fréquents, citons les polices trop petites, les colonnes trop étroites et les mises en page brisées.

Concevoir des e-mails réactifs : Cibler des terminaux avec les media queries, par Campaign Monitor.

Tous les terminaux dits mobiles ne sont pas des iPhones, voyons donc comment ajuster nos requêtes de média et nos styles pour s’adapter au maximum d’appareils.

Concevoir des e-mails réactifs : Coder des e-mails pour les mobiles, par Campaign Monitor.

Lorsque les concepteurs de sites parlent de feuilles de style pour les mobiles, ils ne parlent pas de feuilles de styles totalement distinctes, mais des trucs sympas qui apparaissent entre les accolades des requêtes de média.

Concevoir des e-mails réactifs : Gabarits réactifs, par Campaign Monitor.

Il est généralement recommandé de choisir un gabarit à une seule colonne quand on veut que ses e-mails soient optimisés pour mobile, mais il existe une technique élégante pour créer des gabarits réactifs à deux colonnes sans devoir écrire des kilomètres de CSS.

Concevoir des e-mails réactifs : Optimiser les images pour le mobile, par Campaign Monitor.

La surface d’écran disponible étant limitée sur les terminaux mobiles, nous devons être prudent quand il s’agit d’ajouter des images aux e-mails HTML. Voici diverses techniques pour adapter les images aux différentes situations.

Concevoir des e-mails réactifs : Optimiser vos formulaires de souscription, par Campaign Monitor.

Optimiser vos campagnes e-mail pour mobiles ne se limite pas à s’assurer que votre newsletter peut être lue sur de petits écrans. Après tout, à quoi sert de diffuser des campagnes optimisées pour les mobiles si les utilisateurs de mobile ne peuvent même pas s’y abonner ?

Concevoir des e-mails réactifs : Techniques de design, par Campaign Monitor.

Tout comme les nombreux concepteurs de sites qui ont une approche orientée design dans leurs projets, nous allons, dans ce guide, parler de l’aspect visuel des newsletters optimisées pour le mobile, avant de plonger les mains dans le code. Cela devrait vous aider à prendre les bonnes décisions la prochaine fois que vous planifierez une newsletter, et vous faciliter la compréhension des techniques dont nous allons discuter ensuite.

Concevoir des e-mails réactifs : Étude de cas - Twitter, par Campaign Monitor.

Après la théorie, la pratique. L’exemple utilisé est un e-mail envoyé à des millions de personnes chaque jour (rien que ça).

Ecrans tactiles : mort aux mythes, par Steven Hoober.

Les écrans tactiles nous entourent depuis plusieurs dizaines d’années, c’est même pour beaucoup le principal moyen d’interaction avec notre téléphone, mais leur fonctionnement reste mystérieux. Steven Hoober nous explique tout ça en profondeur.

La grille infinie, par Chris Armstrong.

Les systèmes de grilles sont des composants majeurs du design graphique, mais elles ont toujours été conçues pour des canevas aux dimensions fixes. Jusqu’à présent.

Le Web sur mobile et au-delà, par Dominique Hazaël-Massieux.

On me dévisageait en me lançant des regards moqueurs en 2005 lorsque le W3C a lancé son Initiative pour le Web mobile afin de prôner l’importance du Web pour le monde mobile. C’est désormais moi qui me balade avec le sourire, par exemple lors de l’édition 2013 du Mobile World Congress (MWC) de Barcelone, un des événements majeurs concernant les appareils et réseaux mobiles.

Les pixels, voilà l’ennemi !, par Dave Rupert.

Les terminaux offrent des écrans de plus en plus sophistiqués, qui poussent les concepteurs de sites à proposer des images à haute définition. Dans cette course au pixel effrénée, comment garder à l’esprit les contraintes des utilisateurs ?

Conception responsive : obtenir une validation sans maquettes, par Matt Griffin.

Matt Griffin revient sur la conception d’un site web …dans un navigateur web.

En route pour des composants HTML réutilisables, par Niels Matthijs.

On parle beaucoup des méthodologies telles qu’OOCSS, SMACSS et BEM. Niels présente ici sa vision des choses : des composants HTML réutilisables, indépendants de leur présentation, en prenant un exemple concret et omniprésent, l’article de journal.

Tests de contenu, par Angela Colter.

Angela Colter montre comment intégrer une évaluation du contenu aux processus de tests d’expérience utilisateur.

Tous les articles par thème

Accessibilité

Architecture de l’information

CSS

Design

Ergonomie

Gestion de projet

HTML

Intégration

JavaScript

stratégie de contenu

Technique

Typographie

Web design

Web Mobile

Workflow

Trier les articles par :