Quelques années après avoir sorti Responsive Web Design, Ethan Marcotte déroule sa pensée concernant la conception web avec Responsive Design Patterns. Il ne s’agit plus de penser la page web, mais de l’imaginer comme autant de modules apparaissant lorsqu’on en a besoin. La conception web monolithique doit laisser la place à une conception modulaire. La place de chaque élément devra être soigneusement pesée en fonction de son intérêt selon le contexte de l’utilisateur. Est-il face à un grand écran avec une souris ou est-il en train de marcher en regardant son smartphone ? →
Archives de la catégorie : Conception de site web
38 outils en ligne pour vérifier l’accessibilité de votre site web
L’accessibilité des sites web est un enjeu majeur pour proposer des contenus ou des interactions — non pas pour un nombre réduits de personne — mais au contraire, pour le plus grand nombre. Pour paraphraser une publicité célèbre en son temps : ce qui est bon pour un lecteur en situation de handicap, est bon aussi pour un lecteur en situation de pleine possession de ses moyens. Pour cela, voici une compilation d’outils en ligne, en ligne de commande ou de logiciels pour tester la conformité de votre site web au regard des différents tests proposés : Section 508, WCAG 2.0, ADA, OAC, ISO PDF/UA, niveaux de lecture, contraste, etc. →
Design tactile : le « taca taca tile » du Smartphone
Les smartphones, les tablettes et les phablettes ont envahit notre quotidien. L’étude des interactions tactiles n’en est qu’à ses débuts, et la manière de tenir ces écrans et d’interagir avec eux détermine en grande partie l’ergonomie des contenus. Les mains et les pouces ont une réalité physique que l’on ne peut ignorer, tout comme le poids et l’encombrement d’une tablette. Il faut donc « faire avec » et trouver le moyen de proposer aux utilisateurs un contenu non seulement consultable proprement (la moindre des choses), mais qui tire de surcroît partie des possibilités tactiles de nos appareils « intelligents ». →
« We want Flex, Flex for fantasy »
J’ai eu le plaisir de recevoir dernièrement le livre « CSS 3 Flexbox, Plongez dans les CSS modernes » publié chez Eyrolles. Un ouvrage entier sur une seule propriété ? Et oui, Raphaël Goetter a choisi de consacrer près de 130 pages (en couleurs, s’il vous plait) à une seule propriété CSS, à savoir, Flexbox. Il faut dire qu’il y a matière, car les specs sont complexes et les possibilités infinies (et au-delà) ! →
Sass et Compass : Scout, Prepros ou ligne de commande ?
CSS évolue mais pas assez vite semble-t-il aux yeux de certains, ce qui explique l’apparition des préprocesseurs comme Less ou Sass qui ont ajouté les variables, les sélecteurs imbriqués, les calculs, etc. Sass et Compass sont des gemmes Ruby qui s’utilisent habituellement en ligne de commande. Toutefois, il existe des logiciels permettant de compiler des fichiers Sass et Compass en CSS. Ces logiciels peuvent être utiles, dans un premier temps, pour aplanir la courbe d’apprentissage : Scout pour sa simplicité rassurante et Prepros pour la richesse de ses options (en plus de sa capacité à compiler une foultitude d’autres langages). Je terminerai bien évidemment avec l’utilisation de la ligne de commande, bien plus efficace sur le moyen et long terme (même si on utilise Windows 8.1). →
Faut-il sauver le soldat CSS ?
Le monde des CSS est agité par des questions existentielles. Dernier débat à la mode : on reproche à CSS de ne pas être un langage de programmation. Ce qui gêne dans CSS ? Une broutille ! Principalement le « C » de cascade et le « S » de stylesheet, reste le style. Il est vrai que la cascade est un mécanisme puissant qui peut poser des problèmes de prédictibilité sur les styles d’un éléments donné. Pas facile, en effet, de prédire le destin d’un élément situé en bout de chaine une fois qu’il est sous la cascade. Voici un résumé du débat en question. →
tota11y : visualisez l’accessibilité de votre site web
Il est parfois difficile de s’assurer que son site se comporte correctement vis-à-vis des technologies d’assistance dont peuvent se servir les visiteurs en situation de handicap pour parcourir le web. Ces technologies peuvent revêtir diverses formes : aides logicielles (lecteurs d’écran, loupes) ou matérielles (souris, claviers, micros, trackballs, plage Braille, etc.). Pour faciliter la tâche de l’intégrateur front-end, l’équipe de développement de la Khan Academy a décidé de lancer tota11y. →
Quels sont les facteurs qui influent sur le temps de chargement de votre site ?
J’ai abordé il y a peu la notion de performance web sous l’angle du poids des pages et temps de chargement des différentes ressources (images, scripts, CSS, etc.). Si vous souhaitez allez plus loin dans l’analyse de la qualité de votre site, les solutions ne manquent pas. Vous utilisez probablement des outils intégrés à votre navigateur comme Firebug ou YSlow, mais laissez-moi vous présenter le service en ligne DareBoost qui analysera la qualité et les performances de votre site web en moins de 15 s.
→
Module CSS3 Flexbox : Flex for Fantasy
La mise en page des sites web en colonnes est passée par les affres de l’élément HTML <table>
qui a laissé la place à la propriété CSS float
, en passant très brièvement par display:table
. Aujourd’hui, C’est au tour du module CSS Flexbox de faire parler de lui en permettant pratiquement tout ce que l’on peut imaginer en terme de mise en page fluide et flexible. Voici un florilège de ressources en français et en anglais pour découvrir ce module et apprendre à l’utiliser. Au menu, près de 30 liens pour se faire la main. →
Des pages web de plus de 2 Mo, à qui la faute ?
On aurait pu croire que 2015 serait l’année de la performance web, mais on s’est trompé. Le poids moyen d’une page web a augmenté de 7,5% en 5 mois pour dépasser les 2 Mo. C’est en tout cas ce que nous rapporte Craig Buckler dans l’article 2Mb Web Pages: Who’s to Blame? qui cite le rapport publié dernièrement par http archive. Ce dernier a rassemblé les chiffres de près de 500 000 pages, et les nouvelles ne sont pas très bonnes : →