Archives de la catégorie : Conception de site web

Cette rubrique est consacrée à la conception de site internet : e-commerce, Google et référencement, mesure d’audience, publicité et monétisation, intégration web, HTML & CSS, Javascript & PHP, Navigateurs web, métiers du web et rédaction web

Faut-il sauver le soldat CSS ?

Les styles en ligne, c'est de la marde

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

tota11y vérifie l'accessibilité de votre page 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 ? 

dareboost

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

Flexbox We Can Do It

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 ?

Graphique représentant le temps moyen de réponse par type de fichiers

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 :

Flexible Math — Convertir des pixels en pourcentages

flexible-math-rwd-featured

Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages.

Basehold.it — Afficher une ligne de base

Basehold.it permet d’afficher une ligne de base sur vos éléments html (balise html, body ou le container de votre contenu principal) pour faciliter le calage de votre grille verticale, la petite soeur de la grille horizontale, composée de colonnes. Pour l’utiliser, rien de plus simple : il suffit de faire un lien dans un appel de feuille de style, par exemple <link rel="stylesheet" href="http://basehold.it/24"> affichera une ligne de base d’une valeur de 24 pixels.

CSS Selectors — Visualiser les sélecteurs CSS de manière interactive

CSS Selectors — Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours.

Quel est le coeur de métier de l’intégrateur web ?

Cet article s’inspire d’un tweet de Sophie Drouvroy ‏@cyberbaloo_ qui pose une question apparemment toute simple : Pour vous un intégrateur web est censé savoir faire quoi techniquement ? L’intégrateur web devrait maitriser le couple HTML & CSS et connaitre suffisamment Photoshop pour découper les portions d’images. Il doit également pouvoir travailler au milieu d’un langage côté serveur comme PHP ou client comme Javascript. En effet, il arrive souvent que l’intégrateur intervienne sur des projets déjà en production.

Bazardez Photoshop et rapprochez-vous de votre navigateur

Le design dans le navigateur est une méthode de conception de plus en plus utilisée pour produire des sites web proches des besoins des utilisateurs. Pour ses détracteurs, cette méthode se limite à ne plus utiliser Photoshop au profit de HTML, CSS3 et Javascript. Le titre de l’article est volontairement provocateur car dans les faits, le design dans le navigateur n’interdit pas d’utiliser Photoshop ou Illustrator pour concevoir les pages. Il faut juste garder à l’esprit que ces logiciels pourraient — dans la plupart des cas — être délaissés au profit d’un simple crayon à papier pour faire un croquis qui sera directement transformé en page web sans passer par la case Photoshop. La suite de l’article est une traduction libre de Throw away Photoshop and be true to your medium de James Weiner (@jamesweiner) paru sur Government Digital Service (GDS).