Incorporate responsive design without rebuilding your website

In today's business world, companies tend to be skeptical when told they can obtain the benefits of responsive design without having to rebuild their website from scratch. While skeptics remain, the mobile industry has seen remarkable advances in responsive design technology. In order to understand where responsive design currently sits, it is important to know how it came to be and the steps it takes to make it work for customers of all sizes. 

Incorporate responsive design without rebuilding your website

Roughly one year ago, my team and I were working with a client who had us build a standalone mobile site. The client had success with the site and some in-store QR code programs. However, when we started planning and discussed the mobile roadmap things went awry. The client felt that adding any new features to their "stand-alone" mobile site was just digging a deeper maintenance hole for them because they now had to manage two separate sites (e.g., http://www.brand.com/ and m.brand.com).

The situation was not unique as we had seen this type of discussion being played out across the mobile website industry. Investment in mobile was being stifled and hampering brands' investments in mobile and a solution had to be found.

In order to solve the problem and meet the demands of the client, our team turned to responsive design. Responsive design held much more promise back then, and today has been proven to be an amazing solution for building websites that are beautifully rendered on not just desktops, but also on tablets and phones, all from one HTML source code base.

However, the key issue with responsive design was that it requires mobile experts to rebuild a client's desktop website from scratch -- something that is not realistic from a budget or resource standpoint for most clients.

In order to solve the problem and meet the demands of the client, our team turned to responsive design. In other words, we "responsify" a desktop website for mobile, without having to touch the original site. Here is a proven process to follow: 

  1. The mobile team sets up "re-flow" rules which define how each page or template on the client's site should behave responsively.

  2. The team inserts their proprietary Javascript library into the header of their site.

  3. Boom! Their site is now responsive!

Using this process allows brands to leverage the investment in their current desktop website and reap the benefits of responsive design without having to rebuild their website from the bottom up.

There is more to effective responsive design than just technology. Great responsive sites are delivered using a different design and development process to traditional websites. 

Below I have outlined some tips and best practices that can maximize the success of your customer's responsive site.

Think about "mobile first"

You'll have a better outcome if you start by thinking about your site through the lens of mobile, and then scale up. It works on multiple levels, but start by just taking the example of developing a "hero or promotional image." If you design a hero on desktop and scale it down to mobile, more often than not you'll find that copy will be unreadable. If you design first for mobile (with fonts sized correctly), then scale up, your fonts are just going to become more readable on desktop. Think "mobile first."

Break your site into modules or components

Think about each of your content areas, promo units and other functionality as modular blocks. This is helpful from a number of dimensions. It gives you a process to prioritize your site content for mobile and tablet.  When you look at the phone for example, it is usually a question of ordering content, elements, and modules down to a single column layout. By identifying each content block, you can then start to flag which of them should be first, second, third, etc. In addition you can look at things like the number of promotional areas and determine if you wish to suppress some of those on the smaller screens.

Collaborate, collaborate, collaborate

Often the best results for responsive projects come when designers sit right next to the developers for the project. The increased technical and design interaction really helps with responsive because:

  • Designers and developers are stuck in their ways -- you need to change the dynamic so they think about the site development different (i.e., mobile first).

  • The designers can collaborate directly with the developers to ensure that their layout will scale effectively across the different screen sizes.

  • The developers can confirm that their "re-flowed" layouts are allowing enough margins and balance so that the site aesthetic is upheld.

I hope that this article helped you glimpse a new perspective on responsive design and you are as excited as I am about the exciting new world of responsive websites.

Steen Andersson is vice president of 5th Finger, a Merkle Company.

On Twitter? Follow iMedia Connection at @iMediaTweet.

"A tablet PC with modern cell phone" image via Shutterstock.

 

Comments