Pour ce nouveau numéro du petit journal du web, je vous ai préparé une brassée de liens en provenance de ma veille dont vous pouvez suivre la progression sur mon compte Diigo. Des générateurs visuels pour HTML5 et CSS3 ou les Microdatas ; des outils pour vous aider dans votre travail d’intégrateur front-end ; des conseils pour mieux gérer les alignements dans vos créas ; des méthodes pour centrer un bloc ; ajout d’une miniature pour les catégories WordPress ; une police de caractère tout en CSS et du jQuery pour un scrolling intelligent. →
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. →
Cookie Notice : l’extension WordPress qui informe vos visiteurs sur les Cookies
Vous avez sans doute remarqué la prolifération des bandeaux informant l’utilisateur que le site qu’il visite utilise des Cookies. C’est le résultat de la simple application de la directive européenne dite « paquet télécom ». Elle précise que les éditeurs de sites web doivent informer les internautes (et que ces derniers doivent donner leur consentement) quant au dépôt de « traceurs » sur leur disque dur. La solution prend souvent la forme d’un bloc situé en haut ou en bas de la page. Souvent jugé intrusif, voire hypocrite, je n’ai malgré tout pas résisté à l’envie d’ajouter ce bandeau à mon blog, ne serait-ce que pour rappeler aux visiteurs que même un modeste site comme le mien peut tracer ses visiteurs à l’insu de leur plein gré. →
Le tour du web en 80 8 liens
Vous trouverez dans cette nouvelle édition du petit journal du web des liens concernant : des vidéos en plein écran, des stratégies pour faire des sites responsive, des backgrounds dans vos <tr>
, un peu de gossip sur Dribbble, des formulaires sur mesure pour WordPress, les limites de la gratuité sur le net, le passage d’After Effects à CSS3 et le point médian pour finir. →
a3 Lazy Load : chargement des images à volée pour WordPress
Comme le rappelle l’article Des pages web de plus de 2 mo, à qui la faute ? les images représentent en moyenne 56 des requêtes et 62% du poids total d’une page web. Et ces chiffres sont en augmentation constante. Pour améliorer les performances de votre site, outre un système de cache et d’optimisation des fichiers HTML, CSS et Javascript, il est important de penser à différer l’affichage des images jusqu’à ce qu’elles sautent aux yeux de l’utilisateur.
→
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 : →
WP Super Cache et Autoptimize — Optimiser les performances de WordPress
La mise en cache et la minification des fichiers HTML, CSS et Javascript sont deux solutions permettant d’optimiser les performances de son site WordPress à moindre frais. Il suffit en effet d’installer deux extensions, d’effectuer quelques réglages, et l’affaire est dans le sac. Découvrez WP Super Cache et Autoptimize, les deux extensions que j’ai choisies pour transformer mon canasson préféré en cheval de course. →
Admin Bar Tools — Le tableau de bord du développeur WordPress
Admin Bar Tools est une extension créée par Grégory Viguier. Elle est destinée aux développeurs WordPress à qui elle permettra de visualiser de nombreux paramètres depuis la barre d’administration, tant du côté « Admin » que « Visiteur ». Dans le premier cas, l’onglet affiche le nombre de requêtes, le temps qu’il a fallu pour générer la page et la mémoire consommée par PHP (sans oublier la liste des Hooks disponibles). →
Selectize.js — donner du peps à vos éléments select avec jQuery
Selectize — Dans la lignée de Chosen, Select2, and Tags Input, Selectize est une surcouche Javascript développée par @brianreavis avec jQuery pour moderniser l’élément HTML select
dans l’optique d’améliorer l’expérience utilisateur dont cet élément a bien besoin. Selectize sera en tout cas bien pratique pour la gestion des tags, des listes de contacts, la sélection des pays, etc. Le tout pour un poids modique de 7kb (gzipped).