Revue de Web

Slick Page Transition — Effet de transition (fading) entre les pages d’un site

Slick Page Transition est un script jQuery (à placer dans votre fichier Javascript global.js ou fonctions.js, etc.) qui produit un effet de fading lorsqu’on passe d’une page à une autre. L’effet peut s’appliquer sur tout ou partie des liens il suffit de spécifier le sélecteur approprié. Il est conseillé de préciser la couleur de votre balise html pour qu’elle s’harmonise avec l’effet de transition. Voir la démonstration. →

Conception de site web

Le petit journal du web #2 — Coins arrondis ombrés, capture d’écran dans Chrome, CSS3 et autres liens

Je partage généralement mes bons liens depuis mon compte Twitter mais n’est pas une raison pour arrêter complètement les listes de liens : elles ont leurs détracteurs mais aussi leurs supporters, sans compter que ces simples listes peuvent devenir Le petit journal du web qui claque mieux ! Cette sélection de ressources illustrées vous permettra de : (ré)apprendre à faire des liens accessibles ; vous méfier des attaques XSS avec Markdown ; créer des boutons funky en full CSS3 ; voir une méthode pour faire des blocs avec des coins arrondis avec une seule image ; utiliser les sélecteurs avancés y compris avec IE6, mieux connaitres les nouveaux enjeux concernant le métier de rédacteur web, etc. →

CMS WordPress

WordPress — Menus «funky» avec wp_list_bookmarks()

WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog. →

Conception de site web

Guide stylistique — Exemple de charte graphique et éditoriale

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise. →

Traductions

7 conseils pour mélanger plusieurs fontes dans votre design web

La typographie peut devenir la partie la plus créative de votre design ou la plus frustrante. Travailler avec ne serait-ce qu’une police de caractère peut déjà devenir un défi insurmontable pour de nombreux webdesigners ; alors imaginez ceux qui utilisent jusqu’à sept fontes ou plus dans leur design ! Voici un résumé de l’article 7 Rules for Mixing Multiple Fonts in Good Web Design qui passe en revue les éléments à prendre en considération pour utiliser plusieurs polices de caractère dans votre site web. →

Design & Graphisme

Les mathématiques appliquées au webdesign

Mathematics is beautiful? et pourquoi pas Code is poetry pendant qu’on y est ! C’est pourtant vrai : les mathématiques pourront servir de tremplin à l’inspiration lorsque mettrez en route votre prochain design web. Comment ? Vous saurez tout en lisant l’excellent Applying Mathematics To Web Design paru chez Smashing Magazine où j’ai eu la surprise de voir mon article sur l’application du nombre d’or et la suite de Fibonacci dans le webdesign cité dans la partie Fibonacci Design o/ →