Shapeshift — Grille dynamique Responsive « à la Pinterest »

Shapeshift — très largement inspiré par jQuery Masonry — est un plugin jQuery qui permet de réarranger dynamiquement une collection d’éléments dans une grille au sein d’un container parent. Un exemple de ce comportement existe sur le célèbre Pinterest. Possibilité de faire du Drag & Drop avec les éléments si jQuery UI Draggable …

940.css version fluide — Grille de mise en page en pourcentage

La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant d’utiliser la grille de …

Utilisez une grille de mise en page, il en restera toujours quelque chose

Contrairement à l’imprimé où le langage de description de page Postscript d’Adobe est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). Toutefois, des webdesigners talentueux ont mis en place des systèmes …

Grille verticale CSS

Tutoriel grille verticale en CSS par Smashing Magazine présente un tutoriel paru sur Smashing Magazine qui détaille pas à pas comment mettre en place une grille de mise en page verticale en CSS, du choix de la police de caractère à l’utilisation de la ponctuation. Vous y trouvez également l’utilisation du «nombre …

Tutoriel grille verticale en CSS par Smashing Magazine

95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans …

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau …

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après …

Grille de mise en page, « zoning » et gabarit avec Adobe InDesign

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts …

#WDFR — Imprimez votre grille pour dessiner vos croquis

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise …

#WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday

La dernière rencontre Twitter de la communauté du Webdesign francophone (WDFriday et #wdfr) était consacrée aux frameworks CSS. J’ai été surpris de voir à quel point ils semblent peu employés au regard des critiques dont il font l’objet. L’argument le plus valable que j’ai relevé est qu’un bon intégrateur Web n’a pas besoin de …