Au fil de mes balades virtuelles, il m'arrive de dénicher des pétites concernant le responsive design qui ne cesse de progresser comme technique de web design. Et comme j'aime partager, vous profitez de mes trouvailles. Pour celles et ceux qui aiment les devoirs de vacances (et pour tous les autres), je vous propose de revisiter cette technique au travers d'une série de tutoriels qui balayent la plupart des situations que l'on peut rencontrer lors de la création d'un site web.
Que vous ayez envie de mettre en oeuvre ou par simple curiosité intellectuelle, n'hésitez pas à regarder comment les auteurs ont mis en pratique leur projet et les résultats obtenus. Ceci est d'autant plus bluffant qu'il y a à peine 3 ans, rien de ce que vous allez voir n'existait. Voici 11 tutoriels sur le Responsive Design.
1. Timeline verticale avec Bootstrap
Premier exemple avec une jolie timeline verticale du plus bel effet, réalisée avec Bootstrap.
2. Créer un slideshow Responsive
https://codepen.io/anna_blok/pen/eYYRbQY
Dans ce tutoriel facile à suivre, Anna Blok montre en détail la création d'un diaporama Responsive uniquement à base de CSS.
3. Construire un site Responsive basique
http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756
J'aime ce tutoriel car Jason Michael y démystifie certaines idées reçues liées au Responsive Design. De manière très simple, il explique les règles et les lignes directrices à suivre lors de la conception d'un site web.
4. Créer un Template Responsive Design
http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/
Ce tutoriel est vraiment très efficace pour développer ses compétences en matière de création de templates Responsive Design.
5. Créer une galerie de vignettes
http://designshack.net/articles/css/how-to-build-a-responsive-thumbnail-gallery/
En suivant ce tutoriel, vous serez capable de créer une galerie de vignettes qui soit Responsive Design sans utiliser les classiques media queries, pour une meilleure expérience utilisateur.
6. Le Responsive Design avec les Media Queries
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Vous trouverez dans ce tutoriel, toutes les informations nécessaires pour créer un site Responsive Design à base de HTML et de CSS3 media queries.
7. Focal Point: recadrage intelligent des images
https://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
Mettre en oeuvre le Responsive Design sur des images est une sorte de Graal pour les designers et les développeurs. Dans ce tutoriel, Joshua Johnson vous explique comment redimmensionner vos images quand le lecteur change et comment les images peuvent être recadrées pour préserver le point focal.
8. Créer des cadres fluides avec HTML5 et CSS3
https://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-3142768
Dans ce tutoriel, Ben Frain explique comment créer des cadres fluides en utilisant des proportions !
9. Rendre sa typographie Responsive Design
https://www.creativebloq.com/css3/handling-typography-responsive-design-4122794
Ce tutoriel aborde toutes les techniques que vous devez mettre en oeuvre pour rendre votre typographie Responsive et comment elle peut s'adapter aux différentes longueurs de phrase et largeurs d'écran.
10. Menu Retina Responsive Design
http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
Dans ce tutoriel, Stephanie Walter détaille la création d'un menu avec trois mises en page pour différents navigateurs. Elle nous explique comment les font icônes peuvent être utilisées afin que les icônes du menu ne soient pas pixelisées au moment de l'ajustement de la taille.
11. Tableaux HTML, les différentes approches
https://www.web-eau.net/blog/tableaux-responsive-quelles-approches-pour-quelles-solutions
Etat des lieux des différentes approches possibles pour rendre Responsive Design un tableau HTML. Différentes solutions pour différentes problématiques que je vous invite à (re)découvrir.
Conclusion
Ce type de liste pourrait être sans fin car il y a aujourd'hui énormément de tutoriels disponibles qui permettent d'obtenir à peu près tout ce que vous voulez en "Responsive Design". Pour réussir cette synthèse, j'ai compilé ce qui me semblait être les tutoriels les plus simples d'approche mais aussi les plus ingénieux. Vous avez en main les éléments et les outils qui vous permettront de comprendre comment fonctionne le "Responsive Design" et comment créer tout ce dont vous avez besoin. J'ai hâte de lire vos commentaires à ce sujet et de voir vos réalisations.
