Alsacreations.com - Actualités - Archives (septembre 2016)
Les dernières actualités d'Alsacreations.com
“Responsive Design Patterns” est la traduction française d’un ouvrage publié originellement en 2015 chez A Book Apart.
L’auteur, Ethan Marcotte, est mondialement reconnu pour être l’inventeur du terme de “Responsive Webdesign” et l’écrivain du livre éponyme en 2010.
Son second opus dans le web Responsive témoigne d’un tournant dans nos techniques d’intégration : nous raisonnons de moins en moins en “pages web” et de plus en plus en composants modulaires tels que des navigations, des paginations, des boutons de formulaires, etc. Alors comment rendre ces composants responsive et réutilisables ?
Sommaire
- Du plus petit au plus grand
- Navigation
- Images et vidéos
- Publicité responsive
- Concevoir la grille infinie
- Ressources
Les plus
Après une introduction vantant les mérites de la méthodogolie “Mobile First”, quatre thèmes principaux sont traités dans le détail : le menu de navigation, les images responsive, la publicité et les grilles de mise en forme.
Le choix de ces composants est pour le moins judicieux, d’autant que l’auteur les traite dans un souci constant de l’amélioration progressive et de l’accessibilité.
Le tout avec justesse dans les détails techniques et les approches. On y trouve toutes les spécifications et technologies actuellement employées en production : scrset et <picture> pour les images responsive, des navigations fonctionnant sans JavaScript, AJAX pour l’ajout de publicités, … Personnellement, j’ai beaucoup apprécié son code JavaScript de navigation responsive.
Les moins
Sa méthode de grille de mise en page, censée remplacer les frameworks trop complexes tels que Bootstrap, est vraiment trop alambiquée et laborieuse même si le principe de base est bien pensé. Les colonnes sont en float, leurs marges et largeurs en pourcentage.
Jusque là rien d’alarmant, mais l’obsession de l’auteur à se baser systématiquement sur des ratios pour le calcul de ses valeurs conduit à se confronter à des width: 47.602739726027397260 pour caser deux blocs flottants l’un à côté de l’autre, ou encore des margin-right: 3.043968432919954904. Chiffres véridiques.
Par ailleurs, et de manière générale, on reste un peu sur sa faim et on regrette rapidement un choix aussi restreint de cas concrets. On aurait bien aimé rencontrer toute une panoplie de composants responsive tels que les fenêtres modales, les slideshows ou autres formulaires. D’autant plus lorsque l’un des composants traités (la publicité par exemple) ne nous concerne pas plus que ça.
Bref, comme souvent dans ce genre de livres volontairement concis : c’est très vite lu, très intéressant et pertinent… et assez superficiel pour nous forcer à aller piocher ailleurs si l’on souhaitte véritablement approfondir l’un ou l’autre des sujets traités.
Depuis quelques jours, les vidéos des conférences KiwiParty 2016 sont désormais en ligne, hébergées sur le site Viméo.
Vous pouvez y accéder via l'URL suivante :
https://vimeo.com/search/sort:latest?q=kiwiparty
Sur les 12 conférences de la journée, dix vidéos sont disponibles, partageables et téléchargeables :
- Florens Verschelde - CSS Selector Wars : Un Nouvel Espoir ?
- Aurélien Sesmat - L’identité Visuelle Sur Le Web, Penser Au-delà Du Print
- Gaël Poupard - Workflow Moderne Cherche Graphiste à L’ancienne
- Morgane Hervé - Les Codes Reviewztraminer
- Sébastien Lejeune - L’e-mail Dans Toutes Ses Formes
- Frédéric Kayser - HTTPS Partout, Chiche !
- Christophe Porteneuve - Git Protips
- M4dz - Intégration et Webapps : ProTips
- Vincent De Oliveira - 10 Astuces Svg Qui Vont Vous Sauver La Vie
Bonne séance de rattrapage... et à l'année prochaine ?
Dans la jungle (de plus en plus dense) des systèmes de grilles de mise en forme basés sur CSS3 Flexbox, un nouveau venu est en train de poindre le bout de son nez : Grillade.
Comme son nom le laisse vaguement comprendre, Grillade est un outil de grille CSS, c'est à dire une méthode pour aligner et disposer très rapidement des éléments HTML au sein d'un gabarit de page web. Si le concept vous est étranger, je vous invite à relire cet excellent article de Simon sur les Grilles de mise en page.
Né avec le micro-framework KNACSS, développé chez Alsacréations, Grillade s'émancipe et devient utilisable de manière autonome sans aucune dépendance.
Il est important de préciser que l'outil est actuellement en version beta, sujet à améliorations, et qu'il est prévu de l'intégrer à KNACSS v6, dès qu'il aura été suffisamment éprouvé.
L'objectif avoué de Grillade est de demeurer le plus léger possible (7 Ko, très loin des grilles complexes de frameworks que l'on ne nommera pas)… tout en proposant l'ensemble des fonctionnalités attendues d'une grille :
- responsive webdesign,
- possibilité de préciser le nombre de colonnes,
- modifier la taille de gouttière,
- appliquer des offsets (pull, push),
- réordonner les éléments voire inverser toute la grille,
- dimensionner individuellement chaque enfant,
- réaliser ses propres grilles à l'aide de mixins Sass.
N'hésitez pas à le tester, à le pousser dans ses derniers retranchements et à nous faire tous les retours et critiques constructives pour améliorer cet outil, en commentaire de cette actualité par exemple.
Le lien officiel et la documentation : http://grillade.knacss.com
Le bac à sable sur CodePen : http://codepen.io/raphaelgoetter/pen/EyvbqA?editors=1100
