Archives des tags : Fluide

Pas encore de description pour le tag Fluide. Suggérez à l'administrateur du site de d'y remédier.

Notes de lecture : « Responsive Design Patterns »

Quelques années après avoir sorti Responsive Web DesignEthan Marcotte déroule sa pensée concernant la conception web avec Responsive Design Patterns. Il ne s’agit plus de penser la page web, mais de l’imaginer comme autant de modules apparaissant lorsqu’on en a besoin. La conception web monolithique doit laisser la place à une conception modulaire. La place de chaque élément devra être soigneusement pesée en fonction de son intérêt selon le contexte de l’utilisateur. Est-il face à un grand écran avec une souris ou est-il en train de marcher en regardant son smartphone ?

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 940.css «version fixe» lorsque le .container est réglé sur 940px. Ceci permet de caler les blocs sur la grille fixe placée en background et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée.

Notes de lecture : « Responsive Web Design »

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Blueberry : un diaporama « responsive »

Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage.