This past weekend I traveled to Duke University to attend the Annual Lilly Foundation sponsored consultation on website design and development. It was the fourth year I had been asked to participate but the first year I had been asked to be a presenter at the event. My topic: Responsive Web Design…
In past years we had heard from luminaries such as Krista Tippett and Avinash Kashuik, and like the bridge between the two of them, the crowd for this event is filled with all manner of inventive content provider and tech geek. I like to think I fall somewhere in between as I can track code and Shakespeare with an equal sense of wonder. But alas…
Because I’m a complete geek for this stuff, I had a blast diving into the world of percentage based fluid grids and CSS3 Media Queries. Along the way, I popped open my trusty “web stuff” Evernote notebook and in no time had quite a list of resources going which I have gathered for you here.
The parallels between writing music (or rather writing down music) and website coding are many. Both can present a beautiful veneer that shroud beautiful constructs. You’re lucky if you can both revel in the beauty of listening to Bach as well as understand the economy, structure, and innovation present in his counterpoint. Website code can be like this too. If you’re lucky. One line of code can completely change the function and usability of a site, just look at the code for making flexible images come to life.
Responsive Web Design Resources
So here are the resources I gathered for my presentation on Responsive Design at Duke. I fully realize that these may be outdated in a short time, but hey WTH!
For the very latest check out #RWD on Twitter. Also, this page rocks! It has a lot more resources beyond what is offered here.
EXAMPLES of Responsive Web Design
Brands
- Boston Globe (click here for a good article on the development of this site)
- Starbucks
- Microsoft
- Disney
- Sony
- Barack Obama
Other
BOOKS
FOR PURCHASE
- Responsive Web Design by Ethan Marcotte
- Mobile First by Luke Wroblewski
- Responsive Web Design with HTML5 and CSS3 by Ben Frain
FREE PDF BOOKS
- Delivering Web to Mobile by Mark Power
- Responsive Web Design by Tim Davison
TOOLS
ADOBE
VIEWERS
- http://www.studiopress.com/responsive (Responsive Design Tester)
- http://quirktools.com/screenfly (Another Responsive Design Tester)
- http://resizemybrowser.com (Resizes your browser window with the click of a button)
- http://ipadpeek.com (What your site looks like on an iPad, iPhone 4 or iPhone 5)
WORDPRESS
DRUPAL
OTHER
- http://caniuse.com – Very helpful website concerning how supported new CSS3, HTML5 and Java features are in various browsers.
GRIDS
Frameworks & Boilerplates
- Skeleton
- 320 and Up
- Foundation
- Bootstrap
- Golden Grid System
- Goldilocks Approach
- Tiny Fluid Grid
- Many many more…
Other
- Fluid Grid Calculator
- Article on the use of Grid Systems in Web Design
FLEXIBLE IMAGES
- Responsive Image Gallery with Thumbnail Carousel
- A List Apart: Flexible (Fluid) Images
- Rundown of Handling Flexible Media
CSS3 MEDIA QUERIES
- Introduction to Responsive Web Design – 4 Videos
- Smashing Magazine Guidelines
- How to Turn any Site into a Responsive Site – Vandelay Design
- Create a Responsive Web Design with Media Queries – Line25.com
BLOGS
- Responsive News
- R/GA This is Responsive
- Google Endorses Responsive Design[/learn_more]
About Haddon Kime
Haddon is a web developer, a filmmaker, a social media manager and a composer/sound designer. His passion is to work alongside creative and innovative minds in telling great stories. He holds a degree in writing music for films from Boston's Berklee College of Music, and is an experienced web designer/developer and social media manager. Haddon is a proud husband and father and currently lives in Atlanta, after having been lucky enough to spend most of his life in Tucson, Boston, and NYC. Learn more at www.haddonkime.com
