Responsive web design adapts the content and display of information for the device it is viewed on. Using media queries the size of the screen can be determined, and the appropriate css styles can be served. A phone displays the content intended for a user on-the-go, a tablet gets a nice clean page, and the desktop/laptop gets the full monty.
There is a surprising amount of resistance to this method, especially from “traditional” web shops, as well as this “mobile first” Media Director who maintains it is too hard for the average developer, and a better method is to build separate sites for each targeted platform.
The first thing to do to see if responsive design is an option for your site redesign, is to determine your audience. If you are redesigning an existing site, you should have the visitor data to see where and how people are using the existing site. In our case, the majority of visitors are using up-to-date desktop browsers. A small group are using tablets-iOS and Android, as well as mobile phones. While these last two groups are currently a small percentage, we anticipate more mobile and tablet users in the future, and we want to encourage them. The best way to do that is to have a good site experience ready for them.
Another thing we knew about our audience was that they were also facing decisions around responsive design. Our strategy, experience, and results will be useful in helping them decide how to proceed.
We determined that three breakpoints would be perfect for our site: mobile phone, tablet and desktop. While some advocate designing for mobile first, we decided to lead with a tablet design first and enhance for desktop, and reduce for mobile. This meant doing away with the Flash content from our old site and creating a clean, modern and simple layout with a “tablet page aesthetic”. We wanted the content to be the focus and for it to be comfortable to read – larger type sizes and increased leading (line-spacing) as in tablet reading apps and ebooks.
If we had a large mobile phone audience, we might have considered a different approach – mobile first with tablet and desktop enhancements. Given the straight-forwardness of our content, there really is no need for a separate mobile phone site and the hassle of maintaining content in two versions of the site.
Given the clean and simple design, we found it relatively easy to implement responsive design techniques. Check out the new site on your phone, tablet and desktop or simply resize the browser window on your desktop to see the site adapt – www.mcbru.com.