Welcome to the first in a series of posts on Responsive Web Design from Usability Matters!
Responsive web design is becoming a popular practice for creating websites, and we are certainly seeing a rise in clients who come to us with the word responsive on their lips! Google recommends responsive web design as an industry best practice, and while lots of progress has been made since Ethan Marcotte’s seminal article in May 2010, the world of responsive design can feel like the Wild West of the Web! At Usability Matters we have been diving head first into this exciting approach. This post is an introduction to some of the key concepts around Responsive Web Design as well as a summary of ideas shared by thought leaders from around the web.
What is Responsive Web Design?
Is Responsive Web Design (RWD) Right for My Project?
While there are many potential benefits to the RWD approach, there are also some considerations. A responsive project usually takes longer and costs more upfront than building a non-responsive website. Maintenance can also be more costly due to development updates being more involved. If the experience you are trying to build relies on accessing the device’s hardware, a platform native approach may be optimal. HTML5 brings some exciting developments in this regard (for example geo-location), however the technology is still evolving. Finally, e-commerce experiences may be better served by mobile specific browsing and shopping cart platforms.
A Word About Breakpoints
One key shift in thinking that we’re exploring at Usability Matters is the move away from device specific breakpoints. Device fragmentation means that it really is not productive to think about breakpoints in terms of device sizes – rather, breakpoints can be determined based on what works best for the content layout. When you resize the browser and something starts to look off in your prototype – Voila! Breakpoint! Another concept is that of tweakpoints – the places where you implement minor changes such as padding between elements, without the need for an entire layout change.
Embracing RWD and Acknowledging Limits
What an exciting time to work on a RWD project! We are figuring out new ways of approaching design for the web across multiple devices. There are many things yet to be solved, and many unknowns. Developers are exploring new ways to implement flexible media like videos and imagery. Smashing Magazine recently did a round up of the current state of RWD that provides a great snapshot of where we’re at.
Acknowledging the Awesome RWD Community
This blog post would not have been possible without the amazing work by some brilliant minds on the web. Notably Brad Frost has done invaluable work with This is Responsive – a go to resource for all things RWD. His SXSW talk on RWD is available here and is a really informative and entertaining hour long session, highly recommended. Below you will find a condensed bibliography of some of our favourite links and resources.
- The Mobile Book – Smashing Magazine
- This is Responsive – Brad Frost
- Responsive Web Design – Ethan Marcotte
- Responsive Web Design – Smashing Magazine
- What the Heck is Responsive Web Design – John Polacek
We will be taking a look at RWD process and workflow. Stay tuned!