Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de  80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

• Intégration HTML & CSS des maquettes Photoshop au pixel près
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Quelques notes — Prévoir un supplément pour rendre un site compatible avec IE6 ?

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages.

L’intégrateur web en milieu naturel

Selon les entreprises, en dehors de sa responsabilité évidente relative au bon affichage du site sur l’ensemble des navigateurs, il gère les «oublis» en matière de référencement et d’optimisation «SEO» pour les moteurs de recherche (pléonasme !) en remplissant les balises alt ou certains attributs title. Il peut même aller jusqu’à améliorer la densité des mots-clés présents dans les titres des articles. C’est dire son implication dans la réussite de l’entreprise.

Par ailleurs, sa passion du web et son goût pour l’accessibilité lui permettent de rendre votre site web accessible au plus grand nombre. Avec un peu d’expérience, votre intégrateur web pourra facilement devenir un chef de projet web capable de faire travailler ensemble graphistes et développeurs web.

Enfin, et c’est le plus important, l’intégrateur web, en fonction des composés HTML & CSS qu’il emploi et des bonnes pratiques qu’il observe lors de l’intégration des différents fichier Javascript, a une responsabilité importante en ce qui concerne la maintenance du site dont il intègre les pages. D’après mon expérience, la plupart de l’argent mal dépensé par les entreprises sur le web est lié à une mauvaise conception des pages et à une architecture de site défaillante. N’attendez plus et mettez donc un intégrateur web qualifié dans votre moteur !

Mais qui est donc l’intégrateur web ?

Les définitions concernant l’intégration web insistent souvent sur la découpe et l’intégration de la maquette réalisée par le graphiste. On parle souvent de «montage» de page web, terme qui nous vient du fin fond du monde de l’imprimé et de la PAO…

Définition globale du métier d’intégrateur web

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou sonores : maquette détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il crée le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page et peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript. Source : Définir le métier intégrateur web.

L’intégrateur est avant tout un spécialiste des langages HTML et CSS. Produire des pages web consiste à taper du code dans un éditeur texte, à en tester le rendu dans les navigateurs web présents sur le marché et à s’arranger pour que la page web affichée corresponde au brief ou à la maquette.

Dans cette définition, je n’ai pas voulu enfermer l’intégrateur dans le rôle du méchant découpeur de .psd qui monte des pages à la chaine. D’une part, il peut très bien produire une page web (voire même tout un site) directement dans le navigateur d’après un simple croquis, comme j’ai pu le démontrer dans l’article Conception dans le navigateur avec HTML5 & CSS3, et d’autre part, lorsqu’elle existe, cette phase d’exécution pure n’est que la partie émergée de l’iceberg des compétences de «l’inté».

Les profils de l’intégrateur web

Selon le secteur d’activité, la taille de l’entreprise, et la définition de poste, le curseur initialement situé au centre des compétences premières de l’intégrateur web («découpe» de fichiers Photoshop et «montage» des pages)  se déplace sur une ligne qui va de l’intégrateur-graphiste à l’intégrateur-développeur :

• A gauche du curseur, nous avons le web designer capable de concevoir une charte graphique, de la mettre en œuvre à l’échelle d’un site web, de réaliser le montage HTML & CSS des pages. Ce web designer possède avant tout une forte culture graphique.
• Un peu plus vers la droite, le web designer peut également intervenir sur les développements côté client avec Javascript ou côté serveur avec PHP. Variante : le Web designer utilise un CMS comme WordPress pour l’assister dans cette tâche. Celui-ci possède plutôt une culture technique. C’est souvent un ancien webmaster qui a l’habitude de Photoshop.
• Au centre, nous trouvons notre intégrateur dont le rôle consiste à découper une maquette fournie (généralement) au format Photoshop et de la transmuter en page web à l’aide de HTML & CSS.
• Un peu plus loin vers la droite, nous avons le webmaster chargé initialement de l’intégration des contenus et qui fait naturellement l’intégration HTML & CSS des pages web qu’il ajoute au site. Il intervient également souvent sur la partie PHP.
• A droite du curseur, nous avons un développeur PHP dont le sens esthétique ou le goût pour la lisibilité lui permettra d’habiller ses développements PHP avec HTML & CSS3. Généralement adepte de The Gimp, il pourra reprendre le logo du client et placer des éléments graphiques dans sa composition.

→ Lire Je suis « enveloppeur web » moi monsieur et Intégrateur web + graphiste = intégraphiste !

En bref

Les compétences de base de l’intégrateur sont multiples, et ce d’autant plus que ce dernier peut porter plusieurs casquettes allant du graphiste au développeur web. Toute fiche «métier» devrait tenir compte de la spécificité de ce métier qui peut en cacher plusieurs autres ! A ce sujet, je recherche des témoignages d’intégrateurs web sous forme d’un ou deux paragraphes : brève description du travail effectué et place dans le flux de production de l’entreprise, et tout autre élément que vous jugerez nécessaire. Vous pouvez me faire parvenir votre témoignage dans les commentaires ou à l’adresse infographiste[at]gmail[dot]com Merci d’avance o/

Articles sur le même sujet

• Définir le métier « intégrateur web » ou « intégratrice web »
• Quelques notes sur la balise h1 avec HTML5
• 1000 ressources pour le développement web et WordPress
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Frameworks CSS + Reset CSS : design from scratch

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.

J’ai tendance à considérer ce brief comme un problème — au sens mathématique du terme. Chaque composante du brief est une partie de l’équation à résoudre pour passer au niveau supérieur en attendant d’avoir affaire au boss de fin de niveau ;-) Entre le brief et les propositions graphiques, le concept représente l’équation que les éléments du design devront résoudre. Il faudra ensuite concrêtiser ce concept par des pistes graphiques ou ou des Mood Boards (proposition d’univers graphique) que le client devra s’approprier et valider.

Les graphismes bousculent le planning

Les aspects visuels qui devraient éclore tout à la fin d’un long processus de réflexion bousculent souvent le planning et finissent par occuper le devant de la scène plus souvent qu’à leur tour. Il faut dire que la partie visuelle d’un projet est un des rares aspects d’un site web où le client pense avoir quelques compétences (qui n’a pas de couleurs préférées ?). Par ailleurs, cette partie graphique concrêtise le projet et le rend tangible : dans son for intérieur, le client paie pour le design. Malgré tout, il est important de ne pas s’enfermer dès le début dans une proposition graphique trop marquée. A cet égard, la mise en place de Mood Board ou «panneaux d’humeur» permettra au client de se concentrer sur le fond, sur ce qu’il veut communiquer, plutôt que de s’attarder sur les détails.

Creating a Mood Board

Une seule proposition graphique

On parle souvent de trois propositions : la première qui permettrait au graphiste de se faire plaisir, la deuxième censée correspondre aux besoins du client et la troisième servant de repoussoir au deux autres. Un graphiste peut-il concevoir plusieurs propositions graphiques sur un même sujet ? C’est possible, bien sûr, mais pas souhaitable. Il vaut mieux mettre le paquet sur une seule proposition et affuter ses arguments pour la défendre plutôt que se disperser. Prenons le temps de mieux cerner les besoins du client. Il arrive souvent que ses attentes (un site Web en Flash qui bouge) entrent en conflit avec ses besoins (optimiser la présence du site dans les moteurs de recherche, par exemple). Ce qui ne doit pas vous empêcher d’explorer plusieurs pistes graphiques : il n’y a rarement qu’un seul chemin permettant de résoudre une équation.

Pas de Wireframes

Avant, pendant ou après la phase des recherches créatives, les Wireframes permettent de mettre en lumière l’ergonomie, l’expérience utilisateur et la granularisation de l’information. On peut aussi à cette étape commencer à s’interroger sur la mise en place d’une taxonomie adaptée. Il existe de nombreux outils en ligne (ou hors-ligne) pour faciliter la création de Wire-Frames, même si un crayon et une feuille de papier suffisent largement. Faire des Wireframes peut s’avérer indispensable dans certains projets où les étapes de validation sont longues et/ou impliquent de nombreuses personnes et/ou services différents, mais en général, on peut aisément s’en passer.

The Right Way to Wireframe

Designez dans le navigateur !

A la place, je privilégie le travail dans le navigateur. Pourquoi perdre du temps à dessiner (encore !) une pseudo-maquette quand on peut faire avancer le projet en commençant par le marquage HTML ? Hérésie ? Bridage de créativité ? Que nenni : quand je vois le niveau de détail de certains Mockups, je me dit qu’il reste finalement peu de place pour l’équipe créative. Autant mettre en page le fil de fer directement dans navigateur.

(Innsidia Project - Photo by Hanne Linander)

Cette méthode offre l’avantage de ne pas apprendre un nouveau logiciel pour vos Wireframes. A la place, vous pourrez vous aider de l’un des nombreux frameworks CSS existants. Ils offrent toute la souplesse nécessaires pour ajouter, supprimer, modifier les blocs, qu’il s’agisse de leur taille ou de leur emplacement. Cerise sur le gâteau, lorsque le Mood Board et le Wireframes sont validés, il reste juste un peu de travail d’intégration à faire, et voilà !

Je vous laisse avec l’article Frameworks CSS + Mockup = Mockup CSS pour approfondir la création des Mockup ou Wireframes directement dans le navigateur grâce aux frameworks CSS et aux grilles de mise en pages.

Linkographie

• Mood Board — Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
• Le concept board webdesign — Que ce soit dans le cadre d’une avant vente ou au cours d’un projet, la présentation d’une maquette aux représentants de la marque ou de l’entreprise qui a commandé un site s’avère toujours délicate.
• Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ? — Travailler sur un sujet c’est surtout faire des choix, retenus eux aussi parce qu’on les estime meilleurs que les autres car plus adaptés au contexte du sujet. Un choix construit sur une analyse fine du sujet et de son contexte forge des certitudes.
• Frameworks CSS + Mockup = Mockup CSS – En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur procurent des avantages à l’équipe de développement et au client qui pourra manipuler la maquette à l’échelle 1:1.
• La Taxonomie pour éviter le cagibi de l’oubli — Le terme taxonomie (taxonomy en anglais) désigne une méthode de classification des informations dans une architecture évolutive. Le terme est couramment employé dans le cadre des systèmes de gestion de contenu (CMS).
• Wireframes : 4 styles pour 4 types d’outils — Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement
• Tools Une dizaine d’outils en ligne pour réaliser des Wireframes.
• Paper Prototyping — As interfaces become ever more complex and development schedules seem to get shorter and shorter, you may find it useful to give up your user-interface modeling software for awhile in favor of something simpler. All you need is paper, pens, scissors, and your imagination.
• 5 Reasons to Design with Mood Boards — If you’re a designer, the most dreaded thing a client can say is, “my wife really loves purple; so why can’t we make it purple?”
• Getting Moody — Mood boards, being a lot like they sound, are typically used to help establish a style, theme, expression, environment, atmosphere, or feeling. They often consist of found objects from magazine tear outs or digital imagery to fabric or color swatches, but really can be anything that inspires (like a favorite saying, or phrase, for example).
• Website Mood Boards a Successful Precursor to Visual Prototyping — One final note on our mood boards. This exercise gave us some incredible insight into the different designer’s styles and thought processes. As mentioned, each designer offered a brief explanation of their choices and by doing so, really enhanced our understanding of the designers skills and vision and ultimately the client’s understanding of the emotions and mood they were trying to create.
• Why Mood Boards Matter — Words fail miserably when trying to translate design concepts. What one person calls “edgy” another might see as chaotic.
• Moodboard Webdesign — I have to redesign 8 HTML pages and also showing 3 levels of content structures. So I have to analysis and study the current website to make a new proposal for the new website.
• www.moodshare.co — Selling ideas just got easier (version bêta sur pré-inscription)
• 40 Brilliant Examples of Sketched UI Wireframes and Mock-ups
• Moodboards – das Design vor dem Design

Articles sur le même sujet

• Frameworks CSS + Mockup = Mockup CSS
• Quelques notes — Programme de formation HTML & CSS
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Quelques notes sur la balise h1 avec HTML5

Vous l’attendiez, il est là, c’est le petit journal du web ! A la Une cette semaine : des ressources pour exploiter au mieux les propriétés CSS3, un dossier sur l’ARIA-nisation et la HTML5-nisation de WordPress, le point sur display: inline-block, un tutoriel conséquent sur Javascript, le bilinguisme et l’optimisation des performances dans WordPress (et tout un tas d’astuces très pratiques). Vous aurez aussi un modèle de cahier des charges et des informations pour partir du bon pied avec vos projets de sites Web. Deux nouvelles rubriques font timidement leur apparition dans cette revue de presse : La vie quotidienne du geek et Nostalgeek.

Breaking News!

Charité bien ordonnée commence par soi-même : voici la liste des billets que j’ai mis à jour dernièrement : 28 frameworks CSS et Le petit journal permanent de HTML5.

WordPress

Une actualité littéraire débordante avec la parution de deux livres sur notre CMS préféré.

Sites Web avec WordPress 3.0 — Cet ouvrage «100% pratique» paru aux Editions DUNOD est destiné à ceux qui souhaitent découvrir et maîtriser WordPress 3.0 sans perdre de temps. Il a été écrit par Simon Kern (Brin d’web et Alsacréations), concepteur et designer graphique & multimédia pour des des projets web et print. Il est également formateur sur Flash et WordPress. L’objectif principal du livre est de vous permettre de maitriser la création d’un thème WordPress 3.0 grâce à un concentré de pratiques saines et efficaces. Le livre est accompagné d’un CD-ROM et la table des matière et un aperçu du livre sont disponibles sur DivaBook.

WordPress 3 —  Cette seconde édition entièrement révisée couvre les nouveautés de la version 3. Les débutants pourront construire un blog et les lecteurs expérimentés approfondiront leurs connaissances techniques : conception de thèmes et d’extensions, mise en place d’un réseau de sites avec la fonctionnalité multisites intégrée. WordPress 3 est écrit par Xavier Borderie, Francis Chouquet et Amaury Balmer — Salut les gars o/

WordPressez, il en restera toujours quelques chose !

• Bilinguisme et WordPress : plugins et astuces — Présentation de Yannick Carrière-Guy composée de 51 slides sur l’internationalisation (i18n), la localisation (l10n) et les différentes techniques et plugins permettant d’avoir du contenu bilingue dans WordPress. Via On fait du web. Cf. l’article Un blog WordPress multilingue avec WPML Multilingual CMS.
• Optimisation WordPress : vitesse et performances — Le temps d’affichage d’une page page est un facteur important dans la perception de votre site par les internautes. Ce billet passe en revue les optimisations que l’on peut faire sur une installation WordPress pour gagner des secondes et des visiteurs. Au sommaire : les outils nécessaires pour benchmarker son blog, l’optimisation de la taille des fichiers CSS, les fichiers Javascript, les images, le serveur et le core de WordPress. Lire aussi Accélérer son site web avec Squid et Architecture pour un blog optimisé.
• 6 modèles de pages indispensables pour WordPress — Le thème par défaut de WordPress Twenty Ten comporte une floppée de templates différents, mais tous ne sont pas indispensables. Pour ma part, je les limite au maximum en commençant par index.php et en ajoutant les autres au fur et à mesure des besoins. Voici les six modèles les plus utilisés et les tutoriels associés : page d’erreur 404, page de liens, page sitemap ou plan du site, page d’archives par catégorie, page d’accueil sur-mesure et page de contact.
• Sécuriser son blog WordPress et lutter contre le spam — Ce manuel de combat est composé de 22 parties qui sont autant d’éléments à prendre en compte pour sécuriser son blog WordPress. La première qui me vient à l’esprit, c’est que ça n’arrive pas qu’aux autres :-( Pour le reste, faites confiance à ce spécialiste des blogs sous WordPress.
• Options de configuration de WordPress — Un billet de Grégoire qui nous donne de quoi nourrir notre fichier wp-config.php : définition de la lange, optimisation des performances, debug et développement, sécurité. Lire également Pimp your wp-config.php et le Codex.
• 10 useful new WordPress hacks — Encore des hacks (ou plutôt des fonctions PHP appliquées à l’API de WordPress) pour adapter le CMS à vos désirs : supprimer les liens automatiques dans les commentaires, notifier vos abonnés à chaque nouveau billet, mettre la date au format Twitter, afficher les miniatures dans le flux RSS, bloquer les requêtes extérieures, simplifier le mode debug, utiliser les Shortcodes dans les fichiers du thème, autoriser l’upload de fichiers avec des extensions exotiques, utiliser un Shortcode pour visualiser les documents au format PDF et détecter le navigateur utilisé pour ajouter une classe dans la balise `body`.
• BuddyPress, votre propre réseau social sous WordPress — BuddyPress est un plugin qui ajoute une couche de réseau social à votre blog. Ce tutoriel prend le temps d’expliquer la majorité des options disponibles pour nous permettre d’en profiter au mieux.

HTML(5), CSS(3), jQuery (Javascript)

• Le W3C n’est pas encore prêt à mettre en place HTML5 — J’apprends avec stupéfaction que les propos que je tenais sur HTML5 dans Quelques notes, beaucoup de liens (et un peu de mauvaise foi) sur HTML5 n’étaient pas totalement à côté de la plaque ! Philippe Le Hégaret — Un membre du W3C qui porte bien son nom — nous apprend que les spécifications de HTML5 sont encore à l’état de brouillon et qu’une mise en production serait prématurée en raison de l’instabilité du bouzin… Pour ma part, j’y vois le résultat des pressions exercées par un industriel comme Adobe, peu satisfait de voir que les parts de marché de Flash commencent déjà à s’émietter au profit de la balise <video>. Quand on parle de HTML5 dans les médias, il s’agit avant tout de gros sous, et pas de nos balises `article` ou `hgroup` : quand on parle «structure», ils entendent «facture» ^^
• Utiliser CSS3 aujourd’hui, outils et ressources — Des ressources pour se simplifier l’utilisation des effets CSS3.
• Sémantique HTML5 et ARIA pour WordPress — Dossier complet sur le passage à HTML5 d’un blog WordPress avec la prise en compte des rôles ARIA : Introduction et travail préparatoire, Les articles, HTML5 Forms et rôles ARIA, La mise en page sémantique.
• La rubrique HTML du manuel du savoir-faire à l’usage des geeks et des curieux — Les recherches d’un développeur sur les nouveautés HTML5 : Stockage local vs. Cookies, la balise Meter en HTML5, l’attribut autofocus, la géolocalisation, l’audio, l’attribut Placeholder, etc.
• La propriété CSS display: inline-block — Malgré son intérêt, cette propriété est sous-employée alors qu’elle peut s’avérer très utile pour les menus de navigation, les nuages de tags ou la gestion graphique des titre h1 — h6.
• Javascript Off — Michel Fortin navigue au quotidien en désactivant Javascript et ça lui va bien. Il nous relate son expérience.
• CSS3 Button Generator — Par le créateur de bxCarousel, cet outil permet de créer des boutons en CSS3 à l’aide d’une interface intuitive pour utiliser les propriétés relatives aux polices de caractère, à la boite, aux bordures, au background (y compris avec l’état survolé `:hover`)
• Dynamisez vos sites web avec Javascript ! — Ce tutoriel sur Javascript a été conçu de manière à ce qu’un minimum de connaissances en HTML soit nécessaire. Le cours est composé de deux parties et devrait aborder le DOM, les objets, Ajax, Mootools et HTML5 prochainement. Lecture complémentaire : jQuery : écrivez moins pour faire plus !
• Who Is Online –Conçu avec PHP, MySQL et jQuery, WIO affiche en temps réel le nombre de visiteurs qui parcours votre site Web. Voir la démonstration. Via Restez Connectés.

Métiers du Web

• Modèle de cahier des charges de site web — Envie de lancer un appel d’offre, mais vous ne savez pas par quoi commencer ? Damien Ravé nous offre un modèle de CDC au format .doc (qui s’ouvrira parfaitement avec OpenOffice.org) à compléter selon vos besoins. Rendez-vous à l’adressse cahier-des-charges-web.lepotlatch.org pour avoir la dernière version. Bref, de quoi éviter le cahier «décharge» ^__^
• La vie des intégrateurs, chapitre IV : Les specs ? Quels specs ? — Eric le Bihan nous parle avec humour du processus et des différents intervenants impliqués dans la création d’un site web : «réunion de kick-off et identification des ressources», «conception et wireframes», «création graphique et mise en couleur», «validation du client», «laissez les intégrateurs faire leur travail…», «on va débugger tout ça maintenant». Lecture complémentaire : Bien démarrer son projet avec le kick-off meeting.
• Bilan d’une recherche d’emploi — Sylvain Fix fait le bilan d’une recherche d’emploi qui lui a permis de prendre le temps d’étudier le marché de l’emploi dans le secteur du développement web : le secteur de l’informatique est en crise, le critère de la localisation géographique, que nous disent les entretiens d’embauche, les rémunérations.

Vie quotidienne du geek

• Flux RSS — Vous ne le savez peut-être pas, mais Google abandonne le support du tracking des changements survenus sur un site web. Grosso modo, Google Reader proposerait la création d’un flux RSS pour les sites qui en étaient dépourvus. Parmi les alternatives, Google himself nous propose d’utiliser page2rss.
• Photoshop CS3, Retouche photo — En attendant un retour un peu plus touffu, je vous conseille la lecture de ce livre sur les techniques des professionnels pour retoucher vos photos numériques de la perception de la lumière et des couleurs par l’oeil humain à la l’optimisation pour la diffusion à l’écran (Web) ou pour l’impression. Téléchargez gratuitement Les fichiers PDF optimisés pour le web (21 Mo) ou les fichiers PDF pour l’imprimeur (120 Mo) disponibles également par chapitres.
• 25 tutoriels Photoshop et Illustrator — Belle liste de tutoriels pour les plus graphistes d’entre vous avec des thèmes allant de la création d’une fille-oiseau (assez improbable mais les techniques mises en oeuvre valent le détour) à des effets de flammes de très bonne facture.
• Goo.gl a maintenant son site et des statistiques — Le service de réduction d’urls de Google lancé fin 2009 et utilisé en interne par Google dans FeedBurner, Maps ou Picasa devient accessible au public pour en faire le raccourcisseur le plus stable, le plus sécurisé et le plus rapide du web. Cerise sur le gâteau, Goo.gl propose des statistiques à la manière de bit.ly.
• YOU CANNOT COPYRIGHT A TWEET – La loi américaine sur le droit d’auteur ne semble pas protéger les tweets qui n’entrent pas dans son champs d’application. Que dit la loi française ?

NostalGeek (pour la route)

Déjà fini ?

Oui, jusqu’à la prochaine édition. En attendant, n’hésitez pas à me retrouver sur mon compte Twitter @br1o les bons tuyaux et de vous abonner au flux RSS du blog de l’intégrateur. Merci de votre attention.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web — WordPress, développement web, etc.
• Le petit journal du Web — 31 décembre 2010
• 23 listes pour Webdesigners
• Manifeste pour bouter IE 6 hors des blogs avec kickIE6.js

La question du jour est : faut-il absolument qu’un site web s’affiche de manière identique sur tous les navigateurs ? Les réponses divergent selon que l’on est du côté de la conception graphique ou du côté de l’intégration web. On peut toujours répondre «non» ! La réponse toute faite étant qu’un visiteur donné n’utilise qu’un navigateur à la fois. Ce n’est pas faux, mais ce même visiteur peut très bien utiliser Internet Explorer 6 sur son lieu de travail, Firefox à la maison,  Google Chrome chez un ami et Opera chez un autre ami…

Le graphisme, c’est de l’expérience utilisateur

L’expérience utilisateur au sens large, c’est-à-dire en prenant en compte les différents contextes de visite d’un utilisateur qui bouge (sans se  limiter à la session en cours, donc), peut être compromise. Comment faire confiance à un site qui change d’apparence comme de chemise ? Selon l’écart qu’il peut y avoir entre les différents affichages, le visiteur peut légitimement se demander s’il n’est pas victime d’une tentative de Phishing (même s’il est plus facile de refaire une page web à l’identique qu’avec des différences, on est bien d’accord).

Ça va sans dire mais mieux en le disant : si la confiance est un élément important dans votre communication, il vaut mieux que votre site s’affiche de manière identique sur les différentes combinaisons plate-forme-navigateurs présentes sur le marché. Et vous l’aurez sans doute deviné, si l’on veut que le site web présente une interface identique sur tous les navigateurs, les notions d’amélioration progressive et de dégradation gracieuse perdent toute leur substance.

FUD ? Je reconnais qu’avec cette histoire de confiance, la peur, l’incertitude et le doute se sont insinués dans votre esprit. Et ce n’est que le début car j’aborde maintenant un élément essentiel dans toute communication d’entreprise : l’identité graphique. Il s’agit de faire en sorte que les signes distinctifs d’une marque (société, produit, etc.) soient explicités, sublimés et fixés dans la charte graphique que les différents intervenants devront respecter quel que soit le domaine d’intervention : plaquette imprimée, site web, drapeau planté sur la lune, etc.

Adapter la charte graphique au web, pas le contraire !

Pour s’en sortir, il faut parfois s’affranchir de la charte graphique de l’entreprise si celle-ci n’est pas adapté au support web. On rencontre souvent, par exemple, des chartes qui prévoient le logo en bas à gauche de la page compte tenu du parcours de l’oeil sur l’imprimé. Ce sens de lecture en Z, n’est pas forcément optimisé pour le web sauf à limiter la hauteur de la page à la hauteur de l’écran disponible sans défilement. Ce n’est pas impossible mais ce n’est pas souhaitable non plus si l’on veut profiter à fond du support.

Qui ne m’audit, consent…

L’idée serait donc d’adapter la charte graphique de l’entreprise au support web dans un premier temps, puis de faire un audit pour connaitre les limites de cette charte graphique quand vient le temps de l’intégration pour connaitre le temps qu’il faut réserver à ceux qui interviennent le plus souvent en fin de chaine et qui paient les pots cassés, soit sur le temps de travail (travailler plus pour gagner plus ?) soit au détriment de la qualité du produit fini.

Après cet audit, il sera possible de revoir la charte graphique pour l’adapter aux contraintes du web soit en éliminant les coins arrondis et/ou les ombres portées par exemple, soit en mettant en place des stratégies techniques pour que ces coins arrondis et ses ombres portées puissent voir le jour dans de bonnes conditions. Reste aussi la possibilité de déterminer une politique de dégradation gracieuse et/ou d’amélioration progressive dès le départ. L’objectif est que l’équipe chargée de l’intégration ait connaissance de ces contraintes le plus tôt possible pour travailler avec la charte graphique et non pas contre.

Pour (éviter de) conclure

Bon évidemment cette démarche est réserver à celles et ceux qui veulent vraiment s’investir dans le web, pour les autres, il sera nécessaire d’expliquer à leurs prestataires qu’ils sont trop exigeants et qu’il faut apprendre à gérer les problèmes au lieu d’essayer de les éviter en amont !

PS : Les Quelques notes regroupent des débuts de billets restés longtemps sous forme de brouillons faute de matière suffisante que je partage en l’état :  l’humour peut côtoyer la mauvaise foi et l’exactitude peut se mélanger à l’approximation… Un joyeux b***** en fait, même si tout n’est pas à jeter !

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)
• Un site Web n’a pas forcément besoin de graphismes
• Quelques notes de lecture sur Le Graphisme au XXe siècle

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.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

24 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Safari — Chrome

    .test { [color: #000000; }

14. Tout sauf IE6 — 8

    :root *> .test { color: red  }

15. IE7

    *+html .test { color: red }

16. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

17. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

7. IE8

   .test { color: #0000FF\0; }

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• HTML5 et CSS pour l'intégrateur web
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ?

Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier cas, c’est encore différent selon que l’on utilise Windows XP, Vista ou Seven. Si vous êtes sous Linux, ma foi, vous devriez être capable de vous en sortir tout(e) seul(e), non ? ^_^v

Installer «Test Drive» (IE9 preview) sur Vista

Note du 16/03/2010 — Microsoft vient de lancer Test Drive pour mettre la version preview d’Internet Explorer 9 en téléchargement. Cette version propose de basculer vers les models de document de IE5, IE7 et IE8 (et bien sûr IE9 par défaut). Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 document mode affiche les pages comme le fait IE6 !

Machine Virtuelle avec Windows XP et IE6

Si comme moi vous utilisez Windows Vista, vous rencontrez peut-être des difficultés pour travailler avec IE6 dans de bonnes conditions. La virtualisation avec Virtual PC ou VirtualBox et l’image disque proposée gratuitement par Microsoft regroupe une version de Windows XP et Internet Explorer 6 et offre un environnement de travail opérationnel.

Une fois l’installation et le paramétrage de la connexion internet de Windows XP effectués, vous pouvez tester votre site sous IE6. Mais c’est très gourmand en ressources et la séance de test se transforme vite en cauchemar à moins d’avoir 4 go de ram et deux écrans (j’ai souvent Photoshop et/ou Illustrator ouverts sans compter les autres logiciels…).

Si votre configuration tient la route, cette solution présente l’avantage de vous permettre de tester votre site avec une vraie version d’IE6, Javascript et commentaires conditionnels en ordre de marche, ce qui n’est pas forcément le cas pour toutes les solutions présentées plus bas.

Quelques conseils pour l’installationde Virtual PC chez xuxu et Comment ça marche.

Logiciels pour tester votre site sous IE

A coté de la virtualisation, il existe des solutions logicielles pour tester son site avec plusieurs navigateurs :

• Si vous êtes sous Windows XP avec IE6, vous pouvez utiliser IE7_standalone pour tester sous IE7. Si vous avez déjà IE7, utilisez Multiple IE pour tester dans IE6 et les versions précédentes. Si vous êtes passé sous Vista, vous pouvez tester IE6 for Vista en version alpha. A noter qu’en désinstallant IE7 sur Windows XP, on retrouve une bonne vieille version d’IE6.
• Dans le même esprit, il existe Internet Explorer Collection qui contient pratiquement toutes les versions d’Internet Explorer : d’IE 1.0 à IE 8.0 ! (Merci à Deloo).
• Si vous utilisez IE8, vous pouvez basculer le moteur de rendu graphique et Javascript dans le mode IE7 ou encore le mode Quirks (IE5) déclenché par IE8 en l’absence de Doctype. Pour cela, rendez-vous dans les outils pour développeurs. Ces outils sont une tentative bienvenue de la part de Microsoft pour offrir des outils de débuggage comme Firebug pour Firefox. Plus d’information sur la prise en charges des CSS, Javascript et documentMode dans IE8.
• IE Tab est une extension Firefox qui utilise le moteur de rendu d’Internet Explorer (IE7 ?) dans un onglet Firefox. C’est surtout utile lorsqu’un site vous annonce qu’il n’est pas compatible avec votre navigateur préféré. Le rendu ressemble vaguement à IE7 mais avec des variantes, notamment en ce qui concerne les comportements Javascript.

IETester

Pas convaincu par les logiciels précédents ? Installez donc IETester qui vous permettra de tester votre site avec la majorité des versions d’Internet Explorer. Toujours en version Alpha, la v0.42 propose des options pour développeurs comme l »activation ou la désactivation du Javascript.

IETester est un peu instable, mais relativement confortable pour des séances courtes.

Tester votre site dans IE5.5, IE6, IE7, IE8 avec IETester. Cliquez pour agrandir l'image.

La communauté autour de IETester semble assez active et vous trouverez de  l’aide sur le forum.

Captures d’écran en ligne

Si les solutions précédentes ne vous conviennent pas, vous pouvez vous tournez vers les services en ligne pour obtenir des captures d’écran sous différentes combinaisons de navigateurs et de systèmes d’exploitation :

• BrowserShots — Pratiquement tous les navigateurs sur la plupart des systèmes d’exploitation,
• BrowsrCamp — Capture d’écran sous Mac OS X,
• Scapture — Capture d’écran sous Linux,
• Netrenderer — de IE5.5 à IE8,
• lynxview — Tester votre site sous Lynx (N’oubliez pas de créer le fichier delorie.htm à la racine de votre site pour que ça fonctionne),
• Browsera — Service payant permettant de tester l’ensemble d’un site (à partir de 29$/mois).
• browsercam — Un autre service payant pour tester sur plus de 400 combinaisons de navigateurs/OS  (à partir de 39.95$/mois pour 3 mois ou 19.95$ pour la journée)

Browser Sandbox

Browser Sandbox est un bac à sable pour navigateurs à mi-chemin entre les solutions logicielles et la virtualisation via une extension pour Firefox ou un plugin (.exe) pour Internet Explorer.

Le résultat s’affiche sous la forme d’une instance du navigateur que vous avez choisi parmi IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2; Apple Safari 4 et 3, Google Chrome ou encore Opera 9 et 10 pour finir.

A noter qu’à l’instar d’IETester, l’affichage des polices de caractère n’est pas identique au vrai IE6 et bénéficie plutôt du rendu de la version d’Internet Explorer installée sur votre système.

Browser Sandbox fonctionne bien malgré des plantages inopinés qui surviennent de temps à autre.

Affichage du site dans dans Internet Explorer 6 avec Browser Sandbox de Spoon. Cliquez pour agrandir l'image.

NetBook ou Portables

La solution qui a ma préférence, c’est le NetBook sous Windows XP et IE6. C’est presque trop beau pour être vrai : pour moins de 300€ on s’offre la même configuration que les moins bien lotis de nos visiteurs : faible résolution d’écran, petit processeur et navigateur obsolète… le rêve, je vous dis !

Depuis que j’ai eu l’occasion d’admirer mon blog dans la résolution moyenne de ces Netbook (1024 par 600), je fais en sorte d’avoir du texte à lire dans cette zone en dehors du logo et de la baseline.

Essayez, et vous serez surpris par le nombre de sites ou de blogs qui ne proposent rien à lire dans cette zone primordiale des 500 premiers pixels (oui, il faut retrancher quelques précieux pixels occupés par les barres d’adresse et d’outils de votre navigateur).

Des modèles comme le Asus EeePC 1005HA ou 1008HA, le Samsung N140 ou encore le HP Compaq Mini 311c sous Windows XP sont de bons candidats. Tout autre portable sous Windows XP fera bien entendu l’affaire.

Adobe Browserlab

Oui, mais voilà, vous voudriez également savoir à quoi ressemble votre site chez le Mac Addict qui ne jure que par Mac OS X. Dans ce cas-là Browserlab est fait pour vous. Non seulement il vous permettra de tester votre site sous Firefox et Safari pour Mac OS X, mais en prime vous aurez la possibilité de voir ce que ça donne dans IE6 et IE7 pour Windows de manière à la fois fluide et rapide.

L’affichage des capture est assez rapide et il est possible de comparer plusieurs versions.

Comparer son site : IE6 sous Windows et Safari 3.0 sous Mac OS X. Cliquez pour agrandir l'image.

Internet mobile

Avec des chiffres estimés à plusieurs millions d’utilisateurs, il est important de vérifier que son site web s’affiche correctement sur les petits écrans des périphériques mobiles.

Plus d’information sur MobiReady dans l’article Votre blog sur un téléphone portable, really ready ?

N’oubliez pas de proposer un menu skip links à vos visiteurs mobiles !

Testez votre site web dans plusieurs téléphones portables avec Mobi Ready. Cliquer pour agrandir l'image.

Pour conclure

Cet article fait rapidement le tour des solutions que j’ai eu l’occasion de tester de manière plus ou moins approfondie pour tester mes pages web avec IE6, sachant que j’utilise Vista au quotidien. Si dans votre environnement professionnel les pages web doivent s’afficher correctement partout, il vaut mieux utiliser de vraies machines sous Mac OS X, Windows Vista, XP, Linux, etc.

Il s’agit de la seule manière de pouvoir compter sur le moteur de rendu graphique et Javascript et des éventuels outils d’aide à l’intégration et au développement… Le débuggage d’une page web ne se réduit pas à recaler une barre latérale qui passe sous le contenu principal !

Par ailleurs, il est toujours très intéressant de voir le rendu de son site sous une autre configuration (taille d’écran et résolution différentes, autres polices de caractère  installées, etc). Ça calme !

Articles sur le même sujet

• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• «Test Drive» (IE9 preview) sur Vista
• HTML5 et CSS pour l'intégrateur web
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels

Avec Browser Size, Google Labs nous propose de découvrir la part de contenu visible dans la fenêtre des internautes selon des moyennes statistiques réalisées d’après les visites sur les sites de Google, c’est-à-dire un peu tout le monde ! On découvre ainsi que 99% des visiteurs ont une fenêtre d’environ 550 pixels de large pour 350 pixels de haut avec des chiffres qui chutent assez vite à mesure que la taille augmente : seulement 90% des visiteurs visualisent une surface de plus de 950 pixels par 500 pixels. Quand aux tailles supérieures à 1200 pixels de largeur, elles concernent moins de 50% des utilisateurs.

Qu’en penser ? Ce viewport n’est pas forcément lié à la résolution de l’écran. Il s’agit de la taille ajustée manuellement par l’utilisateur. On peut imaginer qu’il alloue une largeur pour tous les sites qu’il consulte ou qu’il ajuste cette largeur en fonction des informations qui apparaissent sur le site, en fonction de ses centres d’intérêt.

Quand le sage montre la lune, l’imbécile regarde le doigt…

Dans ce cas, les tailles données par Google ne voudrait pas dire grand chose. Difficile en effet de savoir qui de la poule ou de l’oeuf était là avant et vice-versa ! Je terminerais par un proverble chinois que j’affectionne particulièrement : Quand le sage montre la lune, l’imbécile regarde le doigt… J’exagère un peu et je tiens à modérer mon manque d’enthousiasme pour Browser Size : cet outil fait peu mais il le fait bien, et c’est déjà pas mal ^_^v

Articles sur le même sujet

• Google Chrome va changer ma vie d'internaute
• Google Chrome — une poignée pour redimensionner les textareas
• Ebauche de logo pour illustrer le concept de code source libre
• Schema.org — Microdata pour Google, Bing et Yahoo!
• L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Conditional-CSS est un programme écrit en php4 et php5 (au choix) qui permet d’utiliser des commentaires pour cibler une dizaine de navigateurs par leur nom et leur version, à la manière des commentaires conditionnels ciblant les différentes versions d’Internet Explorer.

Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :

/* Conditional-CSS example */
a.button_active, a.button_unactive {
    display: inline-block;
    [if lte Gecko 1.8] display: -moz-inline-stack;
    [if lte Konq 3.1] float: left;
    height: 30px;
    [if IE 5.0] margin-top: -1px;
    text-decoration: none;
    outline: none;
    [if IE] text-decoration: expression(hideFocus='true');
}

Voici les navigateurs pris en charge par le script :

• Internet Explorer
• Internet Explorer Mac
• Gecko (Firefox etc)
• Webkit (Safari etc)
• Opera
• Konqueror
• Safari Mobile (iPhone, iPod)
• IE Mobile
• PSP Web browser

Même si je ne suis pas fan de ce genre de technique — qui automatise d’une certaine manière les hacks CSS souvent décriés — force est de reconnaitre que l’auteur de c-css à fait du beau travail. Je garde l’adresse sous le tapis de souris : on ne sait jamais ;)

Articles sur le même sujet

• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Fonction PHP filemtime() pour cacher les fichiers CSS et JS
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Classes CSS générées par WordPress pour les images

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour être réutilisés sans devoir aller chercher les mêmes informations sur le serveur. C’est assez pratique car les fichiers en question ne sont téléchargés qu’une fois. Mais si vous modifiez ces fichiers après la mise en ligne, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache d’une façon ou d’une autre.

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• 100+ comptes Twitter pour webdesigner
• Feuille de style CSS conditionnelle avec Conditional CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards