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:

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.

Screenshots of ESPN mobile and desktop variations

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:

Google Trends: Responsive Design

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

Creating a site to have a responsive, fluid layout can be a lot of work. Luckily there are a few responsive CSS frameworks that do a lot of the heavy lifting. CSS frameworks are libraries that package CSS and JavaScript components for commonly used UI components and interactions such as grids, buttons, or carousels.

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, then 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):

Nav component in Foundation

Bootstrap's default navigation component (as of version 2.0.4):

Nav component in Bootstrap

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.

Starting from scratch is more time consuming and requires more testing to ensure each page in the new version renders exactly as the existing version. However, depending on your site implementation, modifying your existing code base to remove your existing grid system and UI components and replace with corresponding Foundation ones may be equally as time consuming. If you chose to upgrade, you will also need to make sure that you remove any existing HTML markup, CSS or JavaScript that is no longer necessary because it’s been duplicated by Foundation. If any of this code is left behind, it can be lead to orphaned code that adds to the weight of the site, but is no longer needed.

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.

Coming up...

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.

Need help with your next responsive design project? We make new digital experiences possible with end-to-end capabilities that include strategy, usability, design, development, and analytics. Get in touch to learn more.