The Bible #3 has come. #smbook (Pris avec instagram)
Design is artfully realized communication.
Animated sprite using CSS3 animations
Clever use of new CSS3 capacities to replace animated GIFs or PNGs (not made by me).
Générez vos Media Queries facilement
Focus aujourd’hui sur ce nouvel outil tout frais créé par l’équipe de Erskine Design. Ce dernier vous permet de générer très facilement vos feuilles de styles responsive en ligne, via une interface très bien pensée. Indiquez vos différents breakpoints ainsi que les caractéristiques de vos grilles à chacun de ceux-ci, puis exportez le tout en .css .less .scss, avec en prime un Javascript pour assurer la compatibilité, ainsi que des PNG à utiliser sur Photoshop. Brillant !
Acko — Prouesse en CSS3
Très belle réalisation. A visiter avec Chrome ou Safari tant qu’à faire..! Plus d’explications sur son blog.
Léonard de Vinci : “La simplicité est la sophistication suprème”.
Principes fondateurs d’Apple : empathie, convergence et incarnation (1973)
Think big. Start small. Grow fast.
Filtres en CSS3
Un moyen simple et efficace de filtrer rapidement une liste rien qu’en CSS3. Pratique, même si ça ne remplace pas un vrai filtre en PHP bien sûr.
Fluid, responsive et full
La plupart des sites web ont un design dit “fixe” : la norme actuelle pencherait plutôt pour une largeur de 960px (pour une taille d’écran moyenne de 1024px de large) grâce notamment à des Grids CSS. Au delà, le site est centré et l’arrière plan se répète, et en deçà il est aligné à gauche et la fenêtre se munit de scrollbar. Classique ! Mais ce n’est pas le seul format qui existe.
Petit mémo pour se retrouver parmi les autres formats de sites web que l’on voit de plus en plus aujourd’hui…
Fluid
Design dont les dimensions sont souvent exprimées en pourcentage et qui peut donc nativement s’adapter à différentes tailles d’écran. Assez peu répandu car assez contraignant : quasiment tous les éléments doivent pouvoir s’adapter, ce qui n’est pas toujours le cas pour certains photos ou éléments esthétiques. L’administration de Mailchimp utilise plutôt bien ce procédé.
Responsive
Le plus à la mode en ce moment, ce type de design s’appuie sur les Media Queries pour replacer (ou modifier, masquer, ajouter, etc.) les éléments en fonction d’intervalles de taille de l’écran ; par exemple en 4 intervalles : moins de 480px, puis entre 480px et 720px, puis entre 720px et 960px, et enfin plus de 960px. Nécessite le support du navigateur ou l’utilisation de fallback en JS tels que Adapt.js. Voir une bonne sélection de responsive design.. Des frameworks sont déjà là pour mâcher le travail.
A ne pas confondre avec le fait de designer un site pour différents supports (par exemple bureau, tablettes et mobile) ! Concrètement, sur un site en responsive, vous pouvez simplement re-dimensionner la fenêtre de votre navigateur pour voir la différence.
Full
Ce genre de design, souvent utilisé pour les sites de type “application”, occupe entièrement la fenêtre quelle que soit sa taille. Ne convient donc pas à tous type de site. Google Maps est certainement le service web en full-size le plus connu.
La plupart de ces formats nécessitent une réflexion plus poussée avant de commencer à plancher sur un design, attention donc à ne pas se lancer dans quelque chose d’irréalisable !
