La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

 
<?php 
    $more_strings = array( 
        "Read More...", 
        "Keep on Reading...", 
        "Wait! There's more...", 
        "Read the rest of the article..."
    );
?> 
<?php 
    the_content($more_strings[rand(0,count($more_strings))]); 
?> 

Liens intégration web

Organisation, compression, vos CSS vont adorer !

• cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
• Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
• dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
• Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
• Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
• pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
• drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — Création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter"> 
    <div> Left content goes here </div> 
    <div> Right content goes here </div> 
</div> 

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){ 
    $("#MySplitter").splitter(); 
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

• 390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

• Blueprint 0.8 (via Christian Montoya),
• récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
• Kit de survie du créatif oeuvrant dans les métiers du graphisme,
• Les coulisses d’un design par Douglas Bowman,
• Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

La France est un beau pays où le corporatisme parvient à se glisser un peu partout. Il ne se passe pas une semaine sans que les blogueurs soient remis plus ou moins gentiment « à leur place » par des journalistes qui sentent bien que leurs prérogatives sont menacées : la réécriture du code du travail amorcée depuis longtemps n’a fait l’objet d’une couverture médiatique qu’à partir du moment où les journalistes se sont aperçus qu’ils étaient des travailleurs comme les autres…

Journaliste, un métier à reconfigurer

Pour accompagner ce billet, je vous propose d’ouvrir un onglet à côté et d’écouter Gladiator, le duo entre Lord Kossity et Jacky pour pimenter le débat.

(Lord Kossity) Lord Kossity dans l’arène j’suis un warrior J’vais t’kill j’suis un barbare dans la guerilla.

Pour commencer, Lord Kossity attaque fort en allant voir ce qui se passe dans la tête d’une femme au foyer avec un billet intitulé Journaliste, un métier à reconfigurer. L’analyse est aussi claire qu’efficace : le différent entre blogueurs et journalistes tient en peu de mots : obsolescence des seconds face aux nouvelles technologies, sans compter que rien que cette expression ressemble déjà, pour la plupart d’entre nous, à une photo sépia…

En prime, Mimi nous propose une vidéo de l’intervention du journaliste Francis Pisani au CFJ (Centre de Formation des Journalistes) qui sonne comme le plaidoyer d’un homme d’une génération née bien avant l’invention du microprocesseur [...] pour un journalisme moderne résolument multimédia, face un parterre de jeunes aspirants journalistes qui semblent découvrir pour la plupart les flux RSS, les wikis, les digg, les del.icio.us etc.

FRANCIS PISANI AU CFJ par lucos

Professionnels vs amateurs

(Jacky) A ce qui paraît j’suis là pour un clash, une mise à l’amende. Dès la deuxième mesure j’te l’dis tu tiendras pas un round.

Jacky continue donc avec le billet de sandrine Szabo du blog profession-web qui arrive à l’instant dans mon lecteur de mail (le hasard fait bien les choses) et qui s’interpose dans le débat entre les professionnels (les journalistes) et les amateurs (les blogueurs). Il semblerait quand même que les blogueurs « amateurs » n’aient rien à envier à leurs hétérologues journalistes professionnels en terme de capacité d’analyse et de réactivité sur l’information et de dialogue avec les lecteurs ! Un comble, non ?

Journalisme vs blogging

Il faut remonter dans le temps pour trouver un texte qui, sans mettre tout le monde d’accord, permet d’aborder la question du journalisme vs blogging, sous un autre angle.

Cyril Fievet commente une décision de justice rendue en Californie en 2006 selon laquelle « toute publication régulière d’informations en ligne assimile son auteur à un journaliste, protégé — en Californie au moins — comme un journaliste professionnel ». De sorte que la pratique du journalisme ne résulte pas d’une logique sociologique ou économique et que « Les blogueurs qui pratiquent le journalisme sont des journalistes. Point final. »

5 siècles pour apprendre son métier…

C’est vrai qu’après 500 ans de diffusion d’informations up to bottom on comprend (ou pas) que les jeunes générations de journalistes peinent à se former par leurs propres moyens… Mais qui va donc informer les informateurs, hein ?

Bref, de toutes manières, si le débat a encore de l’avenir sur le fond, sur la forme, c’est déjà la fin, vu que j’imagine mal un journaliste ne pas tenir aussi un blog pour faire son travail sérieusement. Ne serait-ce pour soumettre ses idées à des lecteurs avertis avant publication pour éviter les approximations ou erreurs d’interprétations dont les journalistes sont friands ^__^v

Nous en revenons donc au refrain de Gladiator qui, je l’espère, vous aura accompagné tout au long de ce billet ;-)

(Jacky & Lord Kossity) Choisis un adversaire de ta portée ! Les gladiateurs sont dans l’arène et le combat est lancé. Qui de toi ou moi va l’emporter ? Jusqu’à la mort ça va saigner, un seul devra rester.

A méditer

La France compte l’une des « blogosphère » les plus dense et, au pays des lumières et de la révolution, l’heure est semble-t-il arrivée de tenter d’éditorialiser ce foisonnement, par nous même, d’analyser et de mettre en avant le meilleur des contributions « journalistiques » et spontanées. (six35.fr).

Note : Cet article date de 2008 mais il m’a semblé intéressant de le publier malgré tout, histoire de faire mentir celles et ceux qui prétendent que le web est une fuite en avant qui ne regarde jamais en arrière pour prendre le temps de la réflexion ^^

Articles sur le même sujet

• Vis ma vie d'intégrateur HTML
• Le prêt-à-bloguer bride-t-il la créativité ?
• Ma vie et mes avis numériques sur la blogosphère «people», le «web beuh zéro» avec parfois beaucoup de recul
• Sites de contenus vs sites commerciaux ?
• Les Editions Thélès à livre ouvert

Dans ce petit journal du web, je vous propose quelques liens qui ont retenu mon attention ces dernières semaines. Du côté de WordPress : optimisation de la base de données, des images, du cache, du nombre de requêtes dans les templates ; quelques diapositives issues du dernier WordCamp ; des explications sur le succès de WordPress face à ses concurrents ; un retour d’expérience sur la vente de thèmes WordPress ; et des fonctions utiles pour votre fichier functions.php. Du côté du développement web et du webdesign : une documentation interactive complète sur les API’s des langages du web (CSS, HTML, JavaScript, DOM & jQuery) ; un blog de qualité sur le développement web ; un tutoriel sur jQuery et un autre sur les fondamentaux de JavaScript ; et 18 outils gratuits pour faire des maquettes d’interface graphique. Et bien d’autres liens à garder sous la molette !

WordPress

• Optimiser la base de données – Avec le temps, les performances de WordPress baissent à causes des modifications qui affectent la base de données. Pour retrouver un WordPress frais comme un gardon, sortez les gants et préparez-vous à faire le ménage.
• Performances dans WordPress — Des conseils pour optimiser les images, l’inclusion des fichiers Javascript et CSS, la gestion du cache, le nombre de requêtes dans les templates, les appels aux API externes et le fichier .htaccess.
• Vendre des thèmes WordPress — Présentation de Francis Chouquet à l’occasion de WordCamp Paris sur son retour d’expérience concernant la vente de thèmes WordPress à travers le site Peaxl.com.
• Site de presse avec WordPress ? — Retours d’expériences de Lagazette.fr, un «gros» site qui tourne sous WordPress.
• Hegemony of WordPress – Si Drupal et Joomla! n’ont (presque) rien à envier à WordPress, comment expliquer l’hégémonie de WordPress lorsqu’il s’agit du choix d’un CMS ?
• 10 Must Have Hacks For WordPress – Voici 10 fonctions à copier-coller dans votre fichier functions.php pour obtenir : des boucles personnalisées, une liste de billets en relation avec d’autres en fonction des tags qu’ils partagent, afficher les billets populaires dans la sidebar, afficher des publicités dans le flux RSS, ajouter un fil d’Ariane pour guider vos visiteurs, afficher une sidebar selon l’article affiché, etc.
• Créer un thème de A à Z — Ce tutoriel écrit par @bbx est destiné aux graphistes et aux intégrateurs qui débutent dans WordPress. Néanmoins, une connaissance du HTML et des CSS est requise. Si vous le souhaitez, allez lire [son] autre tutoriel : CSS l’Art et la Science.

Développement web

• DocHub – Recherche instantanée dans la documentation des langages CSS, HTML, JavaScript, ainsi que du DOM et de jQuery. N’oubliez pas le compte Twitter @documenthub. Via @ThierryRoget du blog éclectique roget.biz.
• Friendly Bit – Le blog du développement qui vous écoute ! Des articles de qualité sur le développement web moderne et comment bien l’utiliser.
• jQfundamentals – Tutoriel complet sur jQuery (contenant de nombreux exemples d’illustration) écrit par Rebecca Murphey avec notamment les contributions de James Padolsey (@padolsey) et Paul Irish (@paul_irish) dont voici les 11 chapitres :
  1. Welcome,
  2. JavaScript Basics,
  3. jQuery Basics,
  4. jQuery Core,
  5. Events,
  6. Effects,
  7. Ajax,
  8. Plugins,
  9. Performance Best Practices,
  10. Code Organization,
  11. Custom Events.
• Syntaxe des classes JavaScript – Tutoriel pour les développeurs PHP qui se lancent dans un projet JavaScript dépassant le simple scripting. Par Jean-Pierre Vincent (@theystolemynick).
• jQuery.Buzz() — Restez à l’écoute de jQuery avec des ressources quotidiennes en provenance de sources diverses ete variées. Le site est parfois long à répondre ; suivre le compte Twitter @jquerybuzz ou s’abonner aux flux RSS du site est peut-être préférable.
• Maquettes d’interfaces graphiques – Liste commentée de 18 outils disponibles sur MacOS, Windows et Linux pour réaliser des maquettes d’interface graphique (mockup ou prototype de site web).

C’est cadeau (ou pas)

• SMACSS (Scalable and Modular Architecture for CSS) — Guide en ligne (gratuit) ou aux formats PDF, ePub et mobi (pour $15, soit 11.58 petits euros) de Jonathan Snook pour apprendre comment structurer ses CSS pour allier souplesse et maintenance à mesure que vos projets et vos équipes grandissent. Via t37.net.
• Design Professionalism – Le guide du designer pour reprendre le contrôle de votre métier. Qu’est-ce que le métier de webdesigner ? Comment s’y forme-t-on ? Que peut-on attendre de ce métier parfois fascinant et souvent ingrat ? Andy Rutledge répond à toutes nos interrogations existentielles.

C’est fini !

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 23 listes pour Webdesigners

Si vous avez hâte de voir à quoi ressemble WordPress 3.3 pour découvrir les nouveautés concoctées par l’équipe qui développe notre CMS préféré, voici ma petite craduction de l’article WordPress 3.3: The 11 Most Important New Features paru sur Mashable. Parmi les nombreuses améliorations apportées par cette nouvelle version, on peut noter les éléments suivants : redesign de la barre d’administration, nouveau menu A propos, nouvelle section d’aide, Tooltips, Media Uploader en HTML5, menus déroulants pour alléger WordPress.  Je vous invite à consulter l’article original qui présente notamment les captures d’écran sous la forme d’une galerie très pratique.

Pour ceux d’entre nous qui travaillent chaque jour avec WordPress, il est étonnant de constater à quel point ce système de gestion de contenus a évolué en quelques années pour passer du statut de simple outil de blog à un système de publication complet qui n’a rien a envier aux ténors du marché.

Aujourd’hui nous allons jeter un oeil sur les nouvelles fonctionnalités de WordPress 3.3 qui, après des mois de tests en version bêta, devrait sortir sous peu.

Comparées à la sortie de WordPress 3.0 qui avait introduit des fonctionnalités majeures — comme les Custom Post Types ou le mode multi-sites –, les améliorations proposées par cette version 3.3 pourront sembler moins révolutionnaires. Toutefois, dans les faits, cette nouvelle version va impacter les utilisateurs comme aucune autre auparavant.

En effet, la plupart des améliorations sont destinées à l’expérience utilisateur pour tous les utilisateurs, et pas seulement pour celles et ceux d’entre nous qui construisent des sites web. Nos clients verront eux aussi des changements dans leur façon d’utiliser WordPress.

Voici les changements principaux qui arrivent avec WordPress 3.3 :

Barre d’administration

Ce redesign de la barre d’administration apporte des améliorations pratiques et stratégiques grâce à la suppression de nombreux éléments ; ceux qui restent sont judicieusement placés. Le champs de recherche et le menu «Apparence» disparaissent, tandis que le menu utilisateur est déplacé sur le côté droit, à l’image de ce que fait Google.

L’utilisation d’une ombre plus sombre et plus intense rend cette barre d’administration plus présente.

Nouvelle barre d'administration dans WordPress 3.3

Menu «A propos»

L’icône «W» située en haut à gauche cache un nouveau menu composé de liens «A propos» de WordPress, comme : les crédits, la licence, la documentation et le forum. Ces liens étaient auparavant cachés dans le pied de page, et donc peu visible ( NDT : ou placés dans la blogroll par défaut).

Menu A propos dans WordPress 3.3

Section d’aide améliorée

Premièrement, le lien «Aide» n’est plus relégué dans un coin de l’administration. Il est désormais bien visible, au centre de la nouvelle barre d’administration.

Ensuite, ce lien recèle une section retructurée avec une navigation sous forme d’onglets utilisables par les développeurs pour documenter leurs plugins ou leurs thèmes.

Menu d'aide dans WordPress 3.3

Bulle d’information (Tooltips)

Ces nouveaux Tooltips pourront sembler légèrement agaçants pour de nombreux utilisateurs, mais pourront être très utiles à d’autres.

Ces bulles d’informations guiderontles utilisateurs à travers les nouvelles fonctions de WordPress. Vous en verrez quelques-unes pointer vers la barre d’administration immédiatement après la mise à jour de votre installation.

Comme pour la section d’aide, les développeurs pourront utiliser les bulles d’informations pour leurs propres tours d’horizons. Les développeurs de thèmes trouveront là un moyen de présenter rapidement les fonctionnalités de leurs produits, comme l’a fait le développeur Yoast pour son plugin Yoast WordPress SEO récemment mis à jour.

Tooltips dans WordPress 3.3

Media Uploader

Nous étions nombreux à attendre une mise à jour du «Media Uploader». Les nouveautés qui touchent ce module concernent principalement : l’ajout du Drag & Drop pour glisser-déposer des images ou des documents PDF directement de votre bureau dans WordPress ; et le remplacement de Flash par HTML5 et Silverlight, pour offrir une plus large compatibilité au niveau des plateformes.

Media Uploader HTML5 dans WordPress 3.3

Menus déroulants

Les nouveaux menus déroulants vous feront économiser de nombreux clics pour accéder aux sous-menus. Cela peut sembler sans conséquence, mais si vous utilisez WordPress pendant de longues périodes, vous avez certainement déjà remarqué que le tableau de bord peut vite se transformer en usine à clics !

Les menus déroulants permettent aussi d’améliorer l’expérience visuelle, surtout lorsque vous vous connectez au site d’un client qui contient une foule de menus déroulés par défaut. Désormais, seul le menu actif est déroulé avec ses sous-menus.

Menus déroulants dans WordPress 3.3

Autres améliorations notables dans WordPress 3.3

Maintenant que nous avons fait le tour des changements les plus visibles, voyons rapidement ce qu’il y a sous le capot pour les développeurs de sites.

• Maquette adaptable : il s’agit juste de poser les bases pour WordPress 3.4, mais dans cette version 3.3 le menu gauche disparait automatiquement sur les petits écrans.
• Liens permanents : au lieu de saisir `/%postname%/` WordPress 3.3 propose un menu déroulant. Plus important, les problèmes de performances sont résolus. Ce réglage est donc désormais utilisable sans problème de performances, même sur les sites composés d’un très grand nombres d’articles ou de pages.
• jQuery 1.7.1 et jQuery UI 1.8.16 : jQuery est mis à jour et toutes les fonctionnalités de jQuery UI sont disponibles et prêtes à être «enqueued» dans WordPress 3.3.
• API de l’éditeur : les développeurs de plugins peuvent maintenant personnaliser l’éditeur de WordPress, y compris au niveau des boutons de TinyMCE. Il est même possible d’ajouter des éditeurs additionnels.

Soyez à jour !

Comme toujours, il est recommandé de mettre vos  sites web à jour avec la dernière version de WordPress dès qu’elle est disponible. Gardez donc un oeil sur la sortie de WordPress 3.3 pour commencer à découvrir ses nouvelles fonctionnalités.

Traduit d’après l’article de Brian Casel (@CasJam sur Twitter), fondateur de CasJam Media. Article original en anglais paru sur Mashable.com sous le titre WordPress 3.3: The 11 Most Important New Features.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• WordPress de A à Z — F comme Functions.php
• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

• Principes du responsive design
  • Attachez vos ceintures
  • Responsive architecture
  • La voie à suivre
• La grille flexible
  • Composition flexible
  • Créer une grille flexible
  • Marges et espacement flexibles
• Les images flexibles
  • Retour aux (codes) sources
  • Images fluides
  • Mosaïque d’arrière-plan flexible
  • Apprenez à aimer overflow
  • Négociez votre contenu
  • Images et grilles flexibles, tenez-vous bien
• Les media queries
  • Cicatrisation douloureuse
  • Le problème en question
  • Traînasser vers plus de réactivité
  • Un robot plus « responsive »
  • Les media queries en action
  • Au sujet de la compatibilité
  • Pourquoi la flexibilité ?
• Passer au responsive, design
  • Une question de contexte
  • Mobile first
  • Vers un responsive workflow
  • Être « responsive » et responsable
  • L’amélioration progressive revisitée
  • Va et sois « responsive »

Acheter le livre

Responsive web design

• Auteur(s) : Ethan Marcotte
• Editeur : Eyrolles
• Nombre de pages : 160 pages   
• Date de parution : 15/09/2011

Articles sur le même sujet

• L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?
• Et si Photoshop permettait de tester des maquettes fluides ?
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)
• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?

Après HTML5 pour les web designers et CSS3 pour les web designers, le troisième opus de la collection A Book Apart Stratégie de contenu web écrit par Erin Kissane et préfacé par Muriel Vandermeulen est consacré à la nouvelle redécouverte du web : le contenu. Le pitch ? La création de contenu pour le web ne devrait pas s’effectuer sans une réflexion en amont sur 1) le profil du lectorat et 2) les compétences et la disponibilité de ses producteurs. Sans oublier que tout travail mérite salaire… En gros, il faut que les producteurs aient les moyens de s’adresser correctement aux consommateurs. Autrement dit : si on dit n’importe quoi à n’importe qui à n’importe quel prix, le résultat ne sera pas pas très efficace !

Après une première partie théorique d’une quarantaine de pages, l’auteure Erin Kissane nous entraine — enfin — dans la pratique. Mais attention, il s’agit d’une pratique assez théorique. En effet, l’auteur a préféré ratisser large au niveau des exemples plutôt que proposer un cas concret qui aurait fixé un peu mieux les idées. Du coup, je suis assez embarrassé pour vous donner un avis tranché. D’un côté, j’ai la bonne impression que cet ouvrage a ouvert mon horizon sur certains aspects liés aux différentes manières d’aborder la gestion des contenus. D’un autre côté, j’ai la mauvaise impression d’avoir lu un livre assez quelconque dont l’essence aurait pu tenir en une quarantaine de pages, préface comprise.

Toutefois, je ne regrette pas mon achat, car j’ai un troisième sentiment : je serais peut-être un jour content de retrouver ce livre dans ma bibliothèque en cas de besoin.

Le sommaire

• Introduction
• Principes fondamentaux
• L’art de la stratégie de contenu
• Outils et techniques
• En conclusion
• Piste bonus : par où commencer ?
• Ressources
• Index

Acheter le livre

• Erin KISSANE
• Collection A Book Apart
• juillet 2011

Articles sur le même sujet

• Webdesign, lisibilité, typographie et rédaction web
• Le petit journal du Web — Novembre 2010
• Votre blog professionnel à partir de 9,90€
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• Ecrire pour Google : des mots-clés au clickrank

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !

CSS3 Media Queries

• Media Queries : W3C Candidate Recommendation – La recommandation du W3C sur les Media Queries
• mediaqueri.es – Collection de site utilisant Media Queries
• Hardboiled CSS3 Media Queries – La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
• Progressive Enhancement with CSS Media Queries – Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
• Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
• CSS3 : les Media Queries – Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
• Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
• Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
• Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
• CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
• Responsive Design with CSS3 Media Queries – Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.

Grilles adaptatives

• Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
• columnal – A responsive CSS grid system helping desktop and mobile browsers play nicely together.
• Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs

Articles sur le même sujet

• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Générateur de coins arrondis avec border-radius
• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)

Le dernier Petit journal du web paru sur CSS & Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j’ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc.

• WordPress Basics — Actuellement en version 0.2.8.1, le Blank Theme Basics est accompagné du thème enfant Beyond Basics pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.
• Codecademy – Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via roget.biz
• CSS3 Rounded Image With jQuery – Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise <img>. Voir la démo.
• CDN Media Server — Boostez les performances de vos sites avec un « media server ».
• CSS : l’Art & la Science — Un parcours initiatique à l’intégration web rempli d’humour et de poésie, par bbxdesign.
• Menu déroulant pour mobile — Tutoriel complet sur la mise en place d’un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson old School ! Voir la démo.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• Générateur de coins arrondis avec border-radius
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Je viens de terminer le livre HTML5 — De la page web à l’application web écrit par Jean-Pierre Vincent et Jonathan Verrecchia, préfacé par Paul Irish et publié au éditions Dunod. Ce livre est destiné en premier lieu aux personnes qui utilisent déjà HTML comme les intégrateurs web, les développeurs front-end, etc. Bref, toutes celles et ceux qui utilisent le langage de balisage mis au point par Tim Berners-Lee au début des années 1990 dans le cadre de leur travail ou de leur loisir.

Après une introduction concernant le contexte dans lequel s’insère HTML5, l’ouvrage est composé de deux parties principales :

1. Le détail des balises composant HTML 5 en tant que successeur de HTML 4.01 (les balises) dont l’intégrateur HTML & CSS se sert pour construire ses pages web : du doctype à la validation des formulaires en passant par la nouvelle syntaxe retenue par le W3C, les anciennes balises HTML qui ont été conservées, les nouvelles balises ajoutées et celles qui ont changé de nature.
2. Les différentes API indépendantes qui feront le bonheur des développeurs front-end qui économiseront du temps et des lignes de codes en utilisant des modules tels que la géolocalisation, le web déconnecté, les websockets, le glissé-déposé, l’API file, etc. Bref, tout ce qu’il faut pour créer de véritables applications web.

Les lecteurs attentifs remarqueront que les balises <audio> et <video> ont été mises dans le deuxième chapitre alors que je les vois toujours comme de simples balises (même s’il est possible de mettre beaucoup de code Javascript pour gérer finement leur comportement) contrairement à <canvas>, qui est effectivement sans objet s’il elle n’est pas accompagnée de code Javascript.

J’ai beaucoup apprécié les explications détaillées concernant les rôles ARIA et les microdatas qui permettent d’améliorer l’accessiblité des documents web et d’enrichir les contenus avec des morceaux de sémantiques utiles lorsqu’il s’agit de faire comprendre aux moteurs de recherche la nature des éléments qu’ils indexent.

Les fiches pratiques en annexe permettront de rétrouver les différentes notions abordées dans le livre et serviront de pense-bête. A cet égard, il manque peut-être des renvois vers les pages où les différentes techniques sont détaillées dans l’ouvrage.

Si je devais résumer HTML5 — De la page web à l’application web en quelques mots, je dirais qu’il présente, sous une forme agréable à lire et de manière très concise, l’essentiel de ce qu’il faut savoir à propos de ce nouvel ensemble de technologie qu’est HTML5.

Informations pratiques

HTML5 : de la page web à l’application web

• Auteurs : Jean-Pierre Vincent et Jonathan Verrecchia
• Collection: InfoPro, Editeur : Dunod,
• Date de parution : 2011,
• Nombre de page : 256,
• Format : 175 x 250 mm,
• EAN13 : 9782100565283,
• Prix TTC : France 26,50 €

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Quelques notes — Programme de formation HTML & CSS
• WordPress 3.3 — 10 nouvelles fonctionnalités importantes
• WordPress de A à Z — F comme Functions.php
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

Vous avez aimé HTML5 Boilerplate ? Vous serez ravi d’apprendre qu’il existe un projet similaire qui vous servira de base de travail pour concevoir vos Emails ! HTML Email Boilerplate regroupe un ensemble de bonnes pratiques qui tient compte des différences de rendu entre les clients mails comme Outlook, Gmail, Hotmail, etc. Il est possible de partir du modèle proposé ou de se servir du bout de code qui manque à votre panoplie. Le site htmlemailboilerplate.com est basé sur HTML5 Boilerplate ; les codes proposés sont disponibles sous licence MIT.

Le webdesign à l’épreuve de l’emailing

Ne laissez pas du code tout pourri gâcher une dure journée de travail ! Regardez cette présentation Slideshare pour en savoir plus sur les clients mail présents sur le marché, le niveau de prise en charge des CSS par leurs moteurs de rendu, les bonnes pratiques de conception, etc.

Atelier Email — Powell/Masterson (#11NTCEmail)

Plus de présentations réalisées par The Engage Group

N’hésitez pas à parcourir le site Email Standards Project pour aller plus loin.

Articles sur le même sujet

• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Roots — Thème WordPress à base de HTML5 Boilerplate
• Toolbox — Thème WordPress HTML5 par Automattic
• HTML5 Boilerplate + Toolbox + Codex = WordPress Basics
• 9 thèmes WordPress HTML5 pour créateurs de thèmes