Le responsive webdesign (webdesign adaptatif en français) est bien plus qu’en tendance, c’est l’avenir du web dans bien des cas. Si vous ne vous êtes pas encore lancé dans cette aventure voici quelques ressources pour débuter.
Responsive Web Design de Ethan Marcotte
Merci A Book Apart pour l’image
L’ouvrage parfait si ce n’est indispensable pour débuter. 143 pages qui vous introduiront le sujet, puis vous aideront à débuter. Le tout dans un ton agréable et facile à lire. Si vous ne l’avez pas déjà, jetez-vous dessus, ça en faut vraiment la peine d’autant que le ebook ne coûte que 9$ et qu’il contient des vidéos qui permettent de mieux se rendre compte des résultats. Je préfère les livres papier en général mais dans ce cas on a une réelle valeur ajoutée.
Disponible directement chez A Book Apart →
Screenfly
Un moyen simple de tester les tailles d’écrans. Si l’on peut facilement redimensionner la fenêtre de son browser pour voir ce qu’il se passe en réduction, il est assez agréable de savoir quel sera le rendu sur telle ou telle taille d’écran. Le site propose pas mal de tailles différentes et a déjà enregistré les dimensions exactes des tablettes et smartphones les plus populaires: iPad, Samsung Galaxy, Motorola Xoom, iPhone, Google Nexus S et j’en passe.
Adaptive Images
On a beau prévoir une mise en page mobile, si l’utilisateur doit charger en 3G des images prévues à la base pour un grand écran d’ordinateur en WiFi, son expérience peut s’en trouver gâchée. Adaptive Images crée à la volée des images adaptées à la taille de l’écran qu’il range dans le cache. Cet petit script permet donc de servir des images aussi bien adaptées que votre design à la taille de l’écran de votre visiteur.
CSS Elastic Videos chez Web Designer Wall
Si l’on peut aisément avoir des images fluides dans notre design adaptatif, il en est autre chose pour les vidéos. En HTML5, la balise <video> est interprétée de la même manière que <img> cela ne pose donc pas de problèmes. En revanche, il faut bien avouer que Flash a encore le monopole en ce qui concerne les sites de vidéos (comme YouTube, Vimeo ou Dailymotion) et les intégrations dans les pages web se font aussi bien souvent en utilisant un lecteur Flash.
Ce tutoriel de chez WDW vous apporte toutes les solutions pour intégrer des vidéos dans votre site, qu’elles soient directement intégrées en HTML5 ou avec intégration Flash. La bonne nouvelle: pas de JavaScript ni d’ajout de code complexe: c’est tout en CSS! J’ai utilisé cette technique sur Tecchan si vous voulez tester le rendu.
Ma petite collection
Je tiens ma petite collection de ressources responsive bien au chaud dans un Pearltrees. N’hésitez pas à y jeter un œil et pourquoi pas à me rejoindre pour construire une boite à outils ultime!
Un dernier conseil
Lancez-vous, il n’y a qu’en mettant la main dans le cambouis que l’on apprend. Et si vous avez encore un peu d’appréhension, lisez Responsive Web Design de Ethan Marcotte, je vous parie que vous ne pourrez pas vous empêcher de vous y essayer avant même d’avoir fini le livre.
