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.

Ceebox — une lightbox spécialisée dans l’affichage des vidéos

Ceebox est un plugin jQuery totalement réécrit il y a peu pour afficher n’importe quel contenu dans une fenêtre modale ou non de type lightbox. Ceebox donne toute sa mesure lors de l’insertion de vidéos hébergées sur Google Video, Dailymotion ou Youtube.

Il est possible d’afficher une galerie mélangeant différents types de contenus, y compris via Ajax. Le plugin  nécessite SWFObject jQuery Plugin pour l’affichage des vidéos et s’active de différentes manières. Pour finir, les nombreux paramètres par défaut sont modifiables pour s’adapter à toutes les situations.

Grid — Gardez le contrôle sur votre design web

Les grilles de mise en page font partie de la boite à outils du web designer qu’il s’agisse pour lui de s’y soumettre ou de s’en écarter. Pour faciliter notre travail, Allan Jardine propose Grid, un bookmarklet qui prendra place dans la barre d’outils de votre navigateur préféré (ou pas car pour l’instant Google Chrome n’est pas totalement pris en charge). Plutôt qu’un long discours, voici une capture d’écran de Grid avec les valeurs de la grille que j’ai élaborée pour css 4 design.

Text Resizing With jQuery

Text Resizing width jQuery — Même s’il vaut mieux laisser les visiteurs se débrouiller avec les fonctionnalités intégrées à leur navigateur préféré, voici un script de plus pour modifier la taille du texte sur votre site web. Petit bonus avec le retour à la taille par défaut.

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é.