Logo HTML5 du W3C — Vers une redéfinition des métiers du web ?

Le W3C a demandé à l’agence OCUPOP de (re)penser l’identité graphique des technologies qui forment ce qu’on appelle généralement les standards du W3C. Ce vocable englobe toutes les technologies non-propriétaires développées et/ou adoubées par le Consortium. Ce dernier a surpris la communauté du développement web au sens large avec un nouveau logo censé englober les standards du web sous l’appellation «HTML 5».

Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)

Les processus à l’oeuvre lors de la création d’un site web sont généralement chargés d’affects. Tout semble compliqué alors qu’il ne s’agit souvent que de choses complexes que l’on peut facilement partitionner. Dans le meilleur des cas, la réflexion part d’un brief qui présente la société, le projet, la cible, les attentes, etc. à partir duquel l’équipe créative (ou votre cerveau droit si travaillez seul) doit proposer une ou plusieurs propositions graphiques qui, une fois affinées, donneront naissance à un site Web.

Un site Web n’a pas forcément besoin de graphismes

Dans Webdesigner est-il ? j’évoquais mon parcours Print où une grande partie de mon travail consistait à mettre en pages des publications périodiques. Dans Intégrateur web + graphiste = intégraphiste, j’ai émis l’idée saugrenue qu’un intégrateur Web pouvait avoir une sensibilité et des compétences artistiques lui permettant d’aborder la création d’un site Web avec un point de vue différent de celui du graphiste artistico-créatif ou de l’intégrateur technico-bourrin. L’intégraphiste peut être très exigeant sur les aspects purement graphiques d’un site Web, tout en acceptant facilement l’idée qu’un site n’a pas forcément besoin de graphismes (le «s» est important) pour fonctionner.

Le petit journal permanent de CSS3 — 100+ ressources pour commencer

Après mes petits journaux permanents consacrés à la typographie et à HTML5, voici un numéro spécial qui fait la part belle à CSS3. Ces nouvelles propriétés proposent des effets graphiques ou typographiques à votre page Web, mais pas seulement : CSS3, ce sont aussi des sélecteurs et des pseudo-classes qui vont nous faciliter l’intégration et nous permettre de repousser encore plus loin les frontières de l’univers et au-delà ! En attendant, voici des générateurs de code CSS3 en ligne classés par propriétés ; des ressources pour vérifier la compatibilité des navigateurs et quelques liens pour faire entrer dans le rang les plus récalcitrants ; des tutoriels et des exemples de tests et d’expérimentations diverses avec CSS3 qui devraient vous inspirer. Ce guide permanent sur CSS3 contient plus d’une centaine de liens, pour commencer.

Quelques notes de lecture sur Le Graphisme au XXe siècle

Le Graphisme au XXe siècle est la traduction française de Graphic Design (A Concise History) écrit par Richard Hollis et publié en 1994. Ce livre est une mine d’or pour pour qui veut connaitre l’histoire du Graphisme à travers les pays qui lui ont donné ses lettres de noblesse : le futurisme et l’Italie, la Russie soviétique, l’Allemagne, les Pays-Bas, la Suisse, la France, la Grande-Bretagne, les Etats-Unis, l’Europe du Nord. Il contient plus de 800 illustrations et le texte est très riche. Je lis généralement en prenant des notes pour plus tard ou en surlignant les passages qui me plaisent au Stabilo. Ce billet est la compilation des extraits qui ont plus particulièrement suscité mon intérêt. Ils ne suivent pas forcément l’ordre des pages et certains passages ont été remaniés afin de rester compréhensibles une fois sortis de leur contexte.

Près de 60 polices de caractère pour Google Font Directory

La typographie sur le Web monte en puissance. Google ajoute des fontes supplémentaires à son répertoire Google Font Directory qui compte désormais près de 60 typos prêtes à l’emploi grâce à Google Font API. Cette bonne nouvelle s’accompage de l’arrivée de Google Font Previewer for Chrome. Cette extension vous permettra de choisir votre typographie parmi les fontes disponibles et d’effectuer les réglages nécessaires (taille, style, graisse, ombré, casse, etc.). Reste à copier-coller le code fourni par Google Font Previewer pour rendre vos pages plus belles (ou pas) !

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière.

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

Aperçu instantané de Google, Webdesign et référencement naturel

La rédaction Web et le référencement naturel vont bien ensemble en raison du fonctionnement des moteurs de recherche qui indexent les textes depuis toujours. Il a fallu attendre 2001 pour les images en ce qui concerne Google, ce qui poussé les intégraphistes orientés SEO à mieux nommer leurs fichiers. Les visuels utilisés dans un article sont devenus un atout supplémentaire dans l’acquisition de trafic. Les textes et les images ont une incidence directe sur le référencement et le positionnement d’une page, mais ce n’est pas le cas du design, de l’apparence de cette page. Enfin, jusqu’à présent… La nouvelle fonction « Aperçus instantanés » (Instant Preview) de Google permet de prévisualiser la page de destination depuis les SERP’s, ce qui pourrait bien changer la face du Web et faire entrer le Webdesign dans une nouvelle dimension. Rien que ça.

Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie.