Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

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 ?

Métiers du web — Je suis « enveloppeur web » moi monsieur ;)

Nous disposons de nombreux vocables pour désigner les métiers de l’internet qui tournent autour de la création de sites web : intégrateur web, intégrateur HTML & CSS, développeur web, webdesigner, designer web, etc. Pour affiner la définition de mon profil de poste, j’ai décidé de créer le métier d’enveloppeur web en piochant dans les différentes familles disponibles sur Le portail des métiers de l’internet correspondants aux domaines que je pratique régulièrement ou que j’ai eu l’occasion d’explorer. D’une manière générale, je trouve que les intitulés de poste sont réducteurs, mais en piochant dans plusieurs disciplines, il est possible de s’approcher de la réalité du terrain.

Auditez votre site web avec Browser Size de Google

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.

Du sur-mesure avec Pixus

Créé par Jam ZhangPixus est un petit soft qui ne manque pas d’Air. Il superpose à l’écran un très joli cadre en transparence pour mesurer tout ce qui s’y trouve grâce à des poignées à faire glisser de part et d’autre de l’élément cible. J’aime beaucoup le déplacement du cadre à l’aide des flèches du clavier et le fait que le cadre reste superposé à la fenêtre y compris pendant le défilement, ce qui est pratique pour vérifier les alignements des blocs sur la page.

Afficher / masquer votre grille de base avec jQuery

Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le `background` de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour WordPress que vous adapterez sans peine à votre CMS préféré.

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière, Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML.

Le code CSS et Javascript au milieu du HTML c’est pas bien !

Cet article est une « craduction »(1) de l’excellent article Why Inline CSS And JavaScript Code Is Such A Bad Thing dans lequel Robert Nyman explique pourquoi il est bon de séparer la structure HTML, la présentation CSS et l’interactivité Javascript dans le processus de conception d’un site web. Chaque partie devrait faire l’objet d’un fichier distinct où l’intrusion des deux autres devrait être limitée au strict minimum. Yalla, en avant les jeunes ! Lire la suite de Le code CSS et Javascript au milieu du HTML c’est pas bien !

Ressources Javascript pour intégrateurs web front-end

Si les fondations du design web sont constituées de HTML et de CSS, il faut reconnaitre qu’il est de plus en plus difficile de se passer de Javascript et des frameworks comme jQuery. C’est pourquoi je propose aux webdesigners et aux intégrateurs web un lien Javascript chaque jour (ou presque). Mon choix se portera plus particulièrement sur les développements préservant la séparation de la forme et du fond (oui ça veut dire non-intrusif) dans la droite ligne des bonnes pratiques HTML et CSS.