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. →
Des colonnes fixes et ajustées en largeur avec CSS et jQuery
Smart Columns with CSS & jQuery est un tutoriel qui explique comment créer des colonnes dont le nombre s’ajuste à de la taille de la fenêtre disponible sans laisser de blancs disgracieux quand la largeur disponible n’est pas un multiple de la largeur d’une colonne. Hum, le mieux c’est encore de voir l’exemple et de s’amuser à changer les dimensions du viewport. Etonnant, non ?
Connaitre la taille du « viewport » en Javascript
Get viewport size (width and height) with javascript — Parce qu’il est parfois utile de connaitre la largeur et la hauteur disponible dans la fenêtre du navigateur.
Du sur-mesure avec Pixus
Créé par Jam Zhang, Pixus 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é. →
Un planet pour jQuery
Juste un petit mot pour vous signaler l’ouverture de Planet jQuery sur lequel j’ai inscris les flux RSS relatifs aux tags jquery qui apparaissent sur js 4 design et css 4 design.
Sélectionner les éléments par leur classe avec getElementsByClassName
Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id
ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML. →