Responsive web design is all the rage right now and is becoming the new standard in web design practice. With the growing number of mobile devices accessing the web, it only makes sense to design websites that respond to any screen size elegantly. This ensures that the user experience is optimized on all devices. It also saves clients from spending a heap more money having individual sites built for specific devices.
Here is a roundup of some great resources to get your feet wet in responsive design.
Understanding the Elements of Responsive Web Design
In this post, author Jason Gross thoroughly covers the topic of responsive design. He does a great job of articulating all of the intricacies of the practice from flexible grids, to flexible images and the use of media queries in your stylesheet. This is a great place to start if you are new to these concepts.
Link: http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/
CSS Media Queries & Using Available Space
This article is a little more advanced, but the ideas that Chris Coyer delivers are pure gold. He explains how will CSS3 media queries you can add and remove content and images as your viewport expands and contracts. Very cool stuff.
Link: http://css-tricks.com/css-media-queries/
Working With Media Queries
Nathan Staines does a great job in this article of breaking down the concepts and practice of responsive design. The article is full of visual examples and code snippets. Worth the read for a quick introduction.
Link: http://nathanstaines.com/articles/working-with-media-queries/
How To Approach A Responsive Design
This is an in-depth article from the real world of design. Tito Bottitta goes into the process of redesigning the Boston Globe’s website using responsive design. The article breaks down what tools they chose to use, their process and thinking behind their decisions. A fascinating read that will stretch your thinking.
Link: http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Responsive Web Design
In his seminal article, the father of responsive design, Ethan Marcotte thuroghly explains the ideas and concepts behind responsive design. This article is a must read for anyone who is venturing into this territory.
Link: http://www.alistapart.com/articles/responsive-web-design/
Responsive Design In The Corporate World
This case study by Brent Walbolt of 352 Media Group goes through a another real world example of how responsive design is implemented. The article goes through all the nitty gritty details including code examples and how they handled complex navigation problems.
Link: http://www.webdesignerdepot.com/2012/01/responsive-design-in-the-corporate-world/
Wireframing For Responsive Design
Wireframing is an important part of the design process, especially when it comes to complex projects with a lot of moving parts and content. Add in the complexities of responsive design and you have a real challenge on your hands. This article by Leigh Howells on the influential Boagworld nails down some key insights on how to approach wireframing for responsive design.
Link: http://boagworld.com/design/wireframing-for-responsive-design/
Conclusion
In an industry that is in constant change. It’s vital to stay ahead of the curve. By the looks of it, responsive design is a solution that will be around for many years to come. It’s well worth taking the time to learn and master this technique.
Subscribe
Like this article? Why not get the latest articles from the Malleck Design Blog sent directly to your RSS reader or Email! It's easy. Just subscribe below:
Pingback: 6.5 Tangible Business Benefits Of Responsive Design | Malleck Design Blog