11 tutoriels sur le Responsive Design

Au fil de mes promenades 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".

11 tutoriels sur le Responsive Design

1. Créer une Timeline verticale avec Bootstrap

http://blog.templatemonster.com/2014/04/23/tutorial-build-vertical-timeline-archives-page-using-bootstrap/
Petit tutoriel sans difficultés pour créer une timeline verticale du plus bel effet.

2. Créer un slideshow avec effet Parallaxe

https://www.udemy.com/learn-responsive-web-development-from-scratch/
Dans ce tutoriel facile à suivre, vous allez acquérir les compétences nécessaire à la création de diaporamas avec effet Parallaxe.

3. Construire un site Responsive basique avec CSS

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 fausses liées au Responsive Design. De manière très simple, il explique les règles et et les lignes directrices à suivre lors de la conception d'un site.

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 utile 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/
Ce tutoriel vous explique comment 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

http://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

http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
Mettre en oeuvre le "Responsive Design" sur des images images est toujours 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.

8. Créer des cadres fluides avec HTML5 et CSS3

http://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

http://www.creativebloq.com/css3/handling-typography-responsive-design-4122794
Ce tutoriel traite de 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, Stepahanie 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 pixélisées au moment de l'ajustement de la taille.

11. Tableaux HTML, les différentes approches

http://www.web-eau.net/blog/entry/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.

11 tutoriels sur le Responsive Design

Conclusion

Ce type de liste pourrait être sans fin car il y a aujourd'hui énormément de tutoriels disponibles qui vous 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 pouvez avoir besoin. J'ai hâte de lire vos commentaires à ce sujet et de voir vos réalisations.


Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.