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 ?
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.
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.
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.
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é.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 !
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.
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.
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 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.
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.
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.
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.
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.
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 : on personnalise et on organise les boîtes CSS, à renfort d’id, de class, de span... La page reçoit une solide structure.
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 !
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 !
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 ?
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é !
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.
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.
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.
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.
À 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 !
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.
Carrie Bickner soutient que l’application des normes contribue à rendre les sites plus accessibles, tout en permettant aux bibliothèques de gagner du temps et de l’argent.
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.
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 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.
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.
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.
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.