Si vous ne trouvez pas ici votre bonheur, essayez aussi les articles traduits ailleurs. Si vous n'y trouvez toujours pas votre bonheur, proposez-nous un sujet de traduction !
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.
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.
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.
Appliquez des images cliquables à vos listes de liens, en les laissant à l’arrière-plan.
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 !
Suite du feuilleton des feuilles de style : principe d’un fichier
CSS, premiers pas pour définir l’aspect du corps de la page.
Suite du feuilleton des feuilles de style : petite parenthèse, il
faut vérifier nos pages pour qu’elles soient valides !
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.
Suite du feuilleton des feuilles de style : comment faire pour les tableaux ?
Suite du feuilleton des feuilles de style : comment faire pour les formulaires ?
Suite du feuilleton des feuilles de style : selon les navigateurs, les interprétations peuvent varier. Comment tout prévoir ?
Suite et fin du feuilleton des feuilles de style : les perspectives d’avenir.
Suite du feuilleton des feuilles de style : on applique du style au
texte, en manipulant polices, interlignage, titres...
Suite du feuilleton des feuilles de style : réflexions supplémentaires sur la forme du texte, pour avoir la meilleure lisibilité possible.
Suite du feuilleton des feuilles de style : mise en place des listes, ordonnées ou non, avec puces ou avec images.
Suite du feuilleton des feuilles de style : les ancres et les liens hypertextes, leurs différents états et leurs différents aspects.
Suite du feuilleton des feuilles de style : la notion-clé de positionnement relatif ou absolu, avec les boîtes CSS.
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.
Suite du feuilleton des feuilles de style : mise en place définitive de la page, en trois colonnes.
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.
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).
Retour sur les bases du positionnement CSS, et explications sur les objectifs et fonctionnements des valeurs de la propriété position
.
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.
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.
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 !
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.
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.
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.
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.
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.
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.
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.
Le contraste est l’élément fondamental du design, le premier à créer du sens.
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 !
C’est un article au titre comme nous les aimons chez Pompage... Il se passe de commentaires !
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.
Comment utiliser les ems (presque) aussi facilement que les pixels pour définir des tailles de police redimensionnables dans tous les navigateurs.
Pourquoi créer une version ’facile à imprimer’ d’une page, quand il suffit de définir un autre style pour l’original ? Quelques conseils sur le dressage des feuilles de styles imprimantes.
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.
Et si vous utilisiez aussi Javascript tout en restant accessible ?
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.
Mais au fait comment fait-on pour séparer concrètement notre code Javascript du balisage et de ces règles d’affichage ?
Avec quelques outils et un rien de CSS, créez facilement des versions imprimables qui vous ressemblent !
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.
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.
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 ?
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.
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.
Découvrir, comprendre, et styler les listes de définition en HTML
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.
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 !
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é.
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.
À 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 !
Réconciliez-vous avec JavaScript en lui appliquant la même rigueur de raisonnement qu’avec XHTML et CSS.
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.
Quelques indications pratiques pour abandonner progressivement les tableaux au profit de CSS.
Angela Colter montre comment intégrer une évaluation du contenu aux processus de tests d’expérience utilisateur.
Optimisez vos feuilles de styles avec ces astuces pour des CSS plus légères et efficaces.
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écoder les spécifications du W3C est une tâche moins difficile qu’il n’y paraît. Apprenez à parler le langage ’Spec’, en quelques étapes simples.
Comment adapter son site web à un petit, très petit écran.
Et maintenant voyons un peu comment manipuler nos documents.
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.
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.
Ajoutez des rollovers et élargissez les zones sensibles de vos menus à onglets en CSS basés sur la technique des Portes Coulissantes.
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.
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.
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.
Taille, lisibilité, contraste : quelques recommandations pour éviter que votre texte soit illisible.
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é !
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.
La raison pour laquelle vous devriez passer à CSS, à travers l’histoire de Clarence le poney.
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.
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.
Ê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.
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.
HTML change... Et VOUS pouvez être partie prenante du processus. Lisez, puis réagissez !
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.
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.
Ou comment rendre un site utilisable par tous et agréable pour la plupart.
Un test d’utilisabilité, c’est quoi ? Voici un retour sur le sujet, ainsi que les étapes importantes à suivre pour le mener à bien.
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.
Avec la mort des navigateurs de 4ème génération, cet article est plus ou moins obsolète aujourd’hui. Nous le conservons pour son intérêt historique : le début du mouvement pour exiger des fabricants de navigateurs qu’il fassent enfin des produits conformes aux standards.
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.
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.
Reproduction d’un mémo pour la société qui emploie l’auteur, expliquant les avantages du web design selon les standards Web.
Alan Herrell déconstruit les nouvelles lois américaines sur l’accessibilité et leurs implications pour les web designers où qu’ils se trouvent.
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.
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.
Nouveau media, vieux rituels ? Le Taoïsme pour aborder le Web d’une autre manière.
Une technique simple pour obtenir avec CSS des colonnes qui semblent de hauteur égale, indépendamment de leur contenu.
Une explication détaillée du processus et des décisions prises pour monter un des designs du CSS Zen Garden.
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 !
Trois règles simples pour une meilleure navigation dans les sites web.
Hugo Giraudel propose de faire le point en 10 étapes sur les bonnes pratiques pour améliorer sa connaissance et son usage des CSS.
Une interview de Dan Cederholm, webdesigner ayant mené la refonte aux standards de 2 grands magazines web américains.
Un article de Christian Heilmann en deux parties qui traite des raisons qui font que certains produits web n’arrivent pas à être accessibles.
La suite de l’article de Christian Heilmann sur les raisons qui font que certains produits n’arrivent pas à être accessibles.
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.
Un décryptage du jargon de la création web.
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.
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.
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.
© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site