css 4 design est un blog sur l'intégration web HTML, CSS et Javascript sans oublier le graphisme et l'ergonomie. Du webdesign, en somme
Depuis que j’ai redonné une seconde vie à ce blog qui vient de fêter neuf années d’existence, j’essaie d’optimiser les performances web en jouant sur un maximum de leviers. J’ai d’abord opté pour un système de cache ; j’ai ensuite cherché à diminuer le nombre de requêtes et à compresser les fichiers HTML, CSS et Javascript. Pour les … →
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 … →
Cet article répond à la question existentielle suivante : comment faire un lien depuis le template home.php qui affiche ma page d’accueil personnalisée vers une autre « rubrique » du site chargée d’afficher les articles dans l’ordre antéchronologique. En gros, l’idée est de créer une section qui fera office d’archive pour le site ou encore d’afficher les articles comme s’il s’agissait d’un … →
Optimiser les performances web front-end, c’est bien, mais il est temps de passer à la partie back-end. Et oui, c’est peut-être le moment de penser à alléger votre base de données des informations inutiles et/ou obsolètes qui s’accumulent avec le temps. Pour cela, il existe des extensions WordPress qui rendent de nombreux services en faisant l’impasse sur le lancement … →
L’outil Plume est certainement un des outils emblématiques d’Illustrator. Ce n’est pas le plus simple à maîtriser, mais avec un peu d’habitude, d’astuce et d’espièglerie on parvient généralement à s’en sortir. Une fois qu’on a pris le coup de main, les courbes de Bézier sont un vrai plaisir. Toutefois, s’il y a … →
Les images sont aux performances web ce qu’un match de foot au stade de Gerland est à la circulation : un goulot d’étranglement. Avec Javascript, les images sont en effet un tue-l’amour pour la bande passante. En attendant de servir des tailles d’images adaptées aux périphériques, on peut commencer par optimiser le … →
Le 20 juin 2006, j’enregistrais le nom de domaine css4design.com avec l’envie d’écrire des articles sur les différentes manières de faire des mises en page web avec les feuilles de style CSS tout en mettant l’accent sur les problèmes de compatibilités entre navigateurs. Le temps a passé et ce qui était encore nouveau … →
Suite à une requête de @GizMecano concernant le manque de coloration syntaxique sur les bouts de code présents dans mes articles, j’ai installé le script Prism.js dont le thème Coy colle particulièrement avec ma charte graphique. Prism, c’est cool à condition d’avoir envie d’ajouter à la main le type de langage utilisé sur chaque balise <code> à colorer … →
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 … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?
Comme le rappelle l’article Des pages web de plus de 2 mo, à qui la faute ? les images représentent en moyenne 56 requêtes et 62% du poids total d’une page web, en moyenne. Et ces chiffres sont en augmentation constante. Pour améliorer les performances de votre site, outre un système de … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?
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 … Voulez-vous en savoir plus ?