Conception de site web

Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)

Le design dans le navigateur est une technique de Webdesign qui fait l’impasse sur la maquette Photoshop. Derrière ce concept se trouve l’idée selon laquelle dans « Webdesign » il y a d’abord « Web » : pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ? Surtout quand la prise en charge progressive de CSS3 par les navigateurs récents autorise des effets graphiques qui nécessitaient autrefois de nombreuses images et un marquage HTML surnuméraire… →

Métiers du web

200+ garçons à suivre sur Twitter

Après la liste des webdesigners anglo-saxons et celles des 100+ des filles à suivre sur Twitter je vous propose la liste des 100 mecs pas toujours très beaux ni très musclés et pas toujours très malins à suivre sur Twitter (featured @bibalabib) des 200+ garçons à suivre sur Twitter : des développeurs Web, des intégrateurs HTML & CSS, des spécialistes jQuery, des poètes sur WordPress, des graphistes, des blogueurs amateurs ou professionnels, des bruns, des blonds, des roux, des tatoués (j’imagine), petits, grands, sympas, mariés, célibataires, etc. A suivre sans modération parce qu’ils le valent bien ! →

Blog professionnel

Quel tarif pour un thème WordPress ?

C’est une question récurrente : mais combien coûte un thème WordPress ? A cette question simple, je voudrais apporter quelques éléments de réflexion, vu qu’une réponse toute faite ne saurait être juste. Pour commencer, je trouve qu’il règne une certaine hypocrisie sur la formation des prix dans le Webdesign. Il semble normal — lorsqu’on achète une voiture ou une machine à laver — de donner des indices sur le budget que l’on est prêt à consacrer. Dans le Web Design (et sans doute dans les prestations de services en général), la question du budget semble taboue. J’ai même parfois l’impression que les clients potentiels ne se posent pas la question, comme si l’on vendait du vent ; pourtant, livrer un site Web correspondant aux besoins du client n’est pas une mince affaire et demande beaucoup de travail, y compris en utilisant un CMS comme WordPress. →

Google & Référencement

Référencement de sites Web — Chassez le naturel, il revient au SEO !

Mon dernier article sur le référencement et le positionnement sur les moteurs de recherche commence à dater un peu. Pour raffraichir un peu les tags SEO et référencement internet voici une idée toute simple pour ratisser plus large au niveau des requêtes qui permettront aux internautes de tomber sur votre blog. Loin d’être un guide sur le référencement, cette astuce s’adresse aux blogueurs désirant optimiser leur positionnement sur Google en restant concentrés sur ce qu’ils savent faire le mieux : la rédaction web ! Grâce aux options proposées par Google, il est possible de faire l’impasse sur l’étude de marché pour le choix des mots-clés. Et, cerise sur le gâteau, il s’agit de référencement gratuit 😉 →

HTML & CSS

Frameworks CSS — Blueprint vs 960 Grid System

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code. →

Design & Graphisme

Webdesign — Après le contenu, le contraste est roi !

Le contraste est la différence que l’oeil perçoit entre des couleurs qui sont à proximité les unes des autres. Le contraste est un élément indispensable pour rendre un site accessible au plus grand nombre. Le contraste ne se limite pas à l’utilisation du noir et blanc. Il est possible d’utiliser toute la gamme des couleurs disponibles à condition d’être vigilant sur les combinaisons des couleurs que l’on choisit. Pour cela, il existe un certain nombre d’outils pour convertir les couleurs de la page en niveaux de gris ou choisir des palettes de couleur en tenant compte des pathologies de la vision, par exemple. →

Design & Graphisme

15 « Photoshop-like » en ligne testés et commentés

Photoshop est encore un logiciel incontournable pour l’édition d’image. Mais il est parfois agaçant de sacrifier sa mémoire vive pour effectuer des modifications triviales sur des images (redimensionnement, recadrage, corrections chromatiques, ajouter du texte) ou faire des opérations plus complexes (détourage, remplacement de fond, etc). A côté des économies de RAM, il peut être utile de proposer à ses clients une application en ligne pour modifier les images avant publication ; si WordPress propose des outils pour recadrer, pivoter ou redimensionner les visuels depuis la version 2.9, on est encore loin de faire ce qu’on veut avec ses cheveux ! C’est pourquoi, je vous ai concocté une liste composée d’une bonne dizaine d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix. →

HTML & CSS

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels. →

Conception de site web

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure». →

Gestion de site web

Ecrire pour Google : des mots-clés au clickrank

L’analyse des mots-clés en provenance de Google en dit autant sur les intentions des internautes que sur le contenu de votre site ! Et ceci dans un double mouvement qui se renforce : plus votre contenu colle à la formulation des demandes des internautes, plus ces derniers auront des occasions de vous lire. C’est bête comme choux, mais pas si facile à réaliser 😉 Ce billet est la réécriture de la deuxième partie du (trop long) article intitulé Mesure d’audience : des mots-clefs au ClickRank il y a plus de 3 ans. Non seulement il n’a pas trop vieillit, mais certaines hypothèses (relation entre les résultats de recherche et les statistiques puisées dans Google Analytics) ont trouvé depuis des éléments de confirmation avec le Google Bounce Factor, notamment. →