Un tutoriel sur la manière de bâtir un menu RWD
À lire : mise en œuvre moderne et efficace pour du RWD en 2023
Une alternative payante et multi-plateformes à https://responsively.app/
Diverses astuces pour optimiser l'affichage de ce qui est inclus par iframe.
Un outil à installer sur Mac, Linux ou Windows pour tester un site avec plein de device différents, avec scroll synchronisé
Une alternative à Superfish, un peu plus récente, accessible, et RWD
Un menu déroulant accessible pour le RWD
Pour télécharger et installer MJML en temps qu'application complète
Bootstrap contient ce qu'il faut pour afficher des iframes RWD
Un code HTML qui permet d'afficher une vue RWD « artistique » d'un site web.
Flex et Grid ont été conçues dans un monde où le RWD était déjà la norme. Ils permettent donc de ne pas faire systématiquement appel aux mediaqueries !
Rendre un tableau accessible et responsive !
Une manière de rendre un tableau RWD en CSS en lui mettant un ascenseur horizontal et une ombre pour manifester qu'il reste du contenu à voir d'un côté ou de l'autre.
Comment afficher une image avec une taille maximum, et qui s'adapte à la largeur de l'écran.
Des thèmes Wordpress adaptés aux mobiles et libres.
Il faut bâtir ses points de rupture RWD en fonction du design et non en fonction de la résolution supposée des périphériques.
Bonnes pratiques de la mise en place d'une barre de navigation en bas de l'écran.
Et voici comment rendre une iframe responsive (il faut du JS !)
Pièges à éviter quand on veut faire des images pour le RWD
De l'art de concevoir une mise en page typographique s'adaptant aux différents supports en RWD
Amis graphistes, un autre article sur la taille de la typo et sa gestion dans un contexte RWD
WordPress vient d'annoncer une conformance aux normes d'accessibilité WCAG 2.0 niveau AA. C'est bien !
Et du coup, on peut trouver des thèmes accessibles et RWD
Des principes généraux pour réussir à faire des templates d'emails responsives. Même sous Outlook ou Gmail.
Un nouveau format d'image qui pourrait à lui seul résoudre tous les problèmes du RWD (par chargement partiel selon la résolution nécessaire).
Une étude de quelques plugins et javascript pour faire des slideshow responsives et réagissant au touch des mobiles
Un template OnePage RWD gratuit.
De très nombreux temples HTML5+CSS pour commencer un site.
Un peu de théorie sur la balise et son usage pour le Responsive Web Design
Même les logos peuvent être responsives (varier selon la largeur de l'écran)
Framework d'une grille CSS responsive et mobile first
Pour tester les caractéristiques de son device
Vous souhaitez comprendre la différence entre différentes méthode de design de site s'adaptant ou non à la largeur de l'écran ?
Un template HTML5 mobile first à télécharger
Une template d'email Responsive Web Design hyper simple
Pour en revenir à la question initiale, faut-il faire du responsive Web design systématiquement ? La réponse est clairement non.
A clean responsive grid with a typographic baseline you say?
Responsable uses the power of less and sass to bring you a perfect responsive framework.
Le blog des développeurs web de la BBC : partage d'expérience sur le Responsive Web Design
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs qui essaient de nous faire croire qu’il suffit aujourd’hui, pour optimiser un site pour mobile, d’ajouter 2 Media Queries pour l’iPhone et l’iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d’être parfaite et en constante évolution. Beaucoup de choses sont aujourd’hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine.
Une méthode avec text-align: justify pour faire une galerie de photos (ou un menu étalé sur toute la largeur).
Pas complétement convaincu, mais à explorer.
La problématique du responsive est bien plus complexe que ce qu'on peut lire sur certains blogs qui essaient de nous faire croire qu'il suffit aujourd'hui, pour optimiser un site pour mobile, d'ajouter 2 Media Queries pour l'iPhone et l'iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d'être parfaite et en constante évolution. Beaucoup de choses sont aujourd'hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine.
Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool.
Cardinal is a small, “mobile first” CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.
Un slider (pour faire des slideshow) responsive
Une technique pas trop prise de tête pour avoir 2 tailles d'images selon que c'est mobile ou normal.
A set of small, responsive CSS modules that you can use in every web project.
Use media queries... don't use media queries... whatever. Cycle2 doesn't care; it's the honeybadger of slideshows plugins. Most of the demos on this site use fluid slideshow designs where the slideshow size adjusts as the window is resized. This is accompolished by a simple style rule like this: .cycle-slideshow { width: 45% }. Your slideshows can be fixed-width or fluid-width, or they can adapt to media query breakpoints. You decide!
Un favelet pour tester le RWD de son site
Les light box, c'est bien pour voir l'image en plus grand. Sauf que sur les mobile, ce n'est pas assez grand !
Une solution avec les media queries