Converting Your Website to Responsive Design – Part I
So – you’ve decided to create a mobile website to augment your existing website. In the early days of the mobile web, this often meant a separate site optimized specifically for mobile devices. However, depending on the requirements of your website a better approach may be to change the layout of your site to use Responsive Design.
This is part 1 of four part series, including:
- Part 2: converting your code to use Foundation framework.
- Part 3: becoming responsive.
- Part 4: development tips and tools.
Responsive Web Design is a technique of using fluid page layouts, flexible images and the CSS3 @media query mechanism to adapt a website to any browser or screen size. Responsive Web Design provides a solution to the problem of easily using the same code to display a single site on a smartphone, tablet, or desktop that accommodates the dimensions and form factor of each platform.
A responsive website is different than a separate mobile-only version. Separate mobile sites are often hosted on a separate domain (e.g. m.yoursite.com) and look entirely different from the existing website. A responsive website is not a separate code base for your site. A responsive website uses a single code base that adapts to the width of the screen, be it desktop browser, tablet, or mobile device.
A separate mobile is a good idea for a site like ESPN (here’s their mobile site), which has many types of features, contests, and sub-sites. However, ESPN’s standalone site Grantland uses responsive design instead of a separate mobile site. A responsive site is a better solution for Grantland since its main focus is the content: articles, columns, blog posts, videos, or podcasts.
If you’re at your desk, a quick way to see if a site is responsive is to try resizing your browser. Most responsive websites will automatically resize their layout to accommodate the width of your browser. Try it on this blog post!
Designer Ethan Marcotte is credited with coining the term “Responsive Design” in an excellent A List Apart blog post back in 2010 and recently it has been gaining mainstream attention. A quick look at Google Trends demonstrates its increased popularity in the past couple of years:
Responsive design isn’t just buzz; Google now recommends using responsive design to its web developers.
So how do you go from your standard site today to a responsive design tomorrow? We recently converted the OpenRoad website to a responsive layout and this is the story of our process. We hope it’s a useful starting point if you’re considering the responsive design option for your site.
Step 1 – Choose a Framework – doing the heavy work for you
Two of the most popular responsive frameworks are Twitter Bootstrap and Foundation. Twitter has open-sourced Bootstrap, a framework they use on Twitter. Foundation is similar responsive framework created by ZURB. Both frameworks are fully responsive, allowing developers to use well-documented and tested components that will work on a large variety of screens and devices.
Why we chose Foundation
For the OpenRoad website responsive conversion project, we chose Foundation as our framework because we found it easier to customize to adapt to our design. Foundation provides a baseline set of components, but they are not fully polished for a final site design style. It is up to you to override the base style with your own design.
Twitter Bootstrap is also a strong candidate as it provides a richer variety of components; however, we found its components to be more polished for a final site design. We found it ended up being more work to first disable the styles of the Bootstrap component, and then add our own, than to start with a simpler framework and work up from there.
For example, if you’re converting an existing site, we already have a design for horizontal navigation. Both Bootstrap and Foundation provide this component, however the default styles for the Foundation one is simple and plain, whereas the Bootstrap version is more polished. Foundation provides more control, Bootstrap does more work for you. Depending on your preference, you may want more control over the design (we did).
Foundation’s default navigation component (as of version 3.0.9):
Bootstrap’s default navigation component (as of version 2.0.4):
Styling the Foundation navigation component for your site requires overriding the simple border and blue links with your site’s design.
Whereas overriding the Bootstrap navigation component requires code to first disable dark background, alter the rounded corners and borders, and then add your site’s outlined style.
Step 2: Deciding on an Implementation Path – what to do with your existing code?
The next decision when converting a site to a framework is what to do with your existing site’s code. You can either start a new site from scratch using a blank template, creating a new version of the site, page by page. Or you can upgrade your existing site’s code base to use Foundation.
If you have a relatively small or simple site, and you have a source control (backup) repository in place, upgrading rather than starting from scratch may be the right approach for you.
To convert the WordPress-powered OpenRoad website, we opted to start from scratch, creating a new blank WordPress theme, and then adding the Foundation framework.
In the part II in the Converting Your Website to Use Responsive Design series, we’ll take a look at the process of converting your codebase to use Foundation.