Quelques années après avoir sorti Responsive Web Design, Ethan 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 ? →
Archives des tags : RWD
Module CSS3 Flexbox : Flex for Fantasy
La mise en page des sites web en colonnes est passée par les affres de l’élément HTML <table>
qui a laissé la place à la propriété CSS float
, en passant très brièvement par display:table
. Aujourd’hui, C’est au tour du module CSS Flexbox de faire parler de lui en permettant pratiquement tout ce que l’on peut imaginer en terme de mise en page fluide et flexible. Voici un florilège de ressources en français et en anglais pour découvrir ce module et apprendre à l’utiliser. Au menu, près de 30 liens pour se faire la main. →
Le tour du web en 80 8 liens
Vous trouverez dans cette nouvelle édition du petit journal du web des liens concernant : des vidéos en plein écran, des stratégies pour faire des sites responsive, des backgrounds dans vos <tr>
, un peu de gossip sur Dribbble, des formulaires sur mesure pour WordPress, les limites de la gratuité sur le net, le passage d’After Effects à CSS3 et le point médian pour finir. →
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 / Droppable sont installés. Nécessite également jQuery Touch Punch pour fonctionner sur les périphériques Touch. →