Presentations:
Grid frameworks:
- A List Apart: Fluid Grids by Ethan Marcotte.
- Less Framework 4 – an “Adaptive CSS grid system”.
- Columnal – “A responsive CSS grid system helping desktop and mobile browsers play nicely together.
- The 1140 CSS Grid – “12 columns fluid down to mobile size screens”
- The Skeleton Theme – “A Beautiful Boilerplate for Responsive, Mobile-Friendly Development”.
- Foundation “the most advanced responsive front-end framework in the world.”
Responsive Images:
- Filament Group: Responsive Images: Experimenting with Context-Aware Image Sizing by Scott Jehl
- Adaptive Images – “Deliver small images to small devices”.
- ViewPortIndustries: Automatic Responsive Images In WordPress by Keir Whitaker
- Unstoppable Robot Ninja: Fluid Images by Ethan Marcotte
Responsive Video/Text/Slideshows:
- .net Magazine: Create fluid width Videos by Chris Coyier
- Fitvids.js – “a light-weight, easy-to-use jQuery plugin for fluid width video embeds”.
- WooThemes Flexslider – “an awesome, fully responsive jQuery slider plugin”.
- FitText – “a jQuery plugin for inflating web type”.
Retina/HiDPI screens:
- RetinaJS.com – “Retina graphics for your website. retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays”
Media Queries & Responsive Web Design in general:
- css3-mediaqueries.js – “a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries.”
- A List Apart: Responsive Web Design by Ethan Marcotte
- Smashing Magazine: Responsive Web Design Techniques, Tools and Design Strategies by Smashing Editorial
- Zomigi: Essential Considerations for Crafting Quality Media Queries by Zoe Mickley Gillenwater
- Palantir: Scalable Navigation Patterns in Responsive Web Design by Michael Mesker
- Design Shack: Sass and Media Queries: What You Can and Can’t Do by Joshua Johnson
Inspiration:
- Mediaqueri.es – a curated showcase of responsive websites. List of all sites featured.
Tools:
- Responsive.is – “display and present responsive web designs”
- icanhaz.responsiv.es – a tool for testing responsive web designs as you’re developing them
Books:
- Code Poet’s “WordPress Meets Responsive Design” – Learn how three WP pros use media queries and fluid images and grids to create responsive WordPress sites. (featuring Sara Cannon!)
- A Book Apart’s “Responsive Web Design” by Ethan Marcotte
If you have more resource that you think we should add to this list: let us know in the comments! cheers and happy responsive-ing! 🙂
Hi Sara,
Just wondering if you have written any articles related to breakpoints.
I am wanting to write a custom CSS framework, but wondering how many breakpoints to target. Please advise.
Hi Sara,
Very Nice illustration of responsive designing. You also share very good resources with us. I have to say thank you!
I specially like RetinaJS.com very much. Look forward to read your up coming blogs.
Regards,
Rick