(Co-authored by: Kurt Muller)

So, you’ve decided to go responsive, but what now? We’ve recently completed a responsive development project and have collated 10 tips from a design and development point of view, to guide you through the process. Here they are:

1. Agree On A Range Of Devices And Breakpoints

When designing responsively, you have to know the range of devices you are designing for so that you can work out your lowest common denominator and work from there. This includes mobile, tablet and desktop devices. Two years ago, we could all rely on the iPhone being the smartphone benchmark, but with Samsung, Nokia and HTC all upping their game this is no longer true, and let’s not forget BlackBerry which is considered a smartphone even though it has considerably less screen size than most other smartphones.

Your agreed range of devices will dictate which breakpoints you will design and develop for based on the different screen resolutions.

2. Have A Device Test Bank (Don’t Rely On Device Emulators)

Device emulators allow you to see what your site will look like across a broad range of device resolutions, but that’s all they do. They do not emulate the native functioning of the device and that’s why it’s extremely beneficial to have a bank of the agreed devices on hand. While some companies might consider this to be an unnecessary overhead, it’ll save you time and money in the long run.

3. Creative Elements From Mobile To Desktop

One of the biggest design challenges on a responsive website project is how to create a seamless look and feel from mobile to desktop. There are so many variables to consider when looking at elements like navigation, buttons and links and a bad user interface will damage the rest of the process going forward. You need to consider the user interaction and input across a variety of devices. For example, when looking at a user on a desktop using a mouse versus a user on a tablet/smartphone using touch based gestures, you know that hover states and button sizes need to be carefully considered.

4. Synergy Between The Designer And Developer

The relationship between your designer and developer should always be solid, but when you’re going responsive the workflow is radically different from a normal build. It is not a case of the designer creating the entire site and handing over to the developer - job done. An iterative approach is the only way to go with responsive design. Both designer and developer constantly need to adjust and adapt to work around issues they may encounter during the process.

5. Prototyping

While some developers might consider prototyping a waste of time, we’ve learnt first-hand that prototyping and testing up front  are vital to ensure that you’re on the right track, and to provide a base structure that you know works. A quick prototype for one page, tested across multiple devices will show you very quickly where you are going wrong and will save you buckets of time and stave off a few grey hairs further down the line.

6. SEO Considerations

If SEO is important to you, and going responsive is going to limit the volume of copy you have per page (and, as a result, the relevance of your content), you may want to consider dynamically serving different HTML on the same URL. If you go this route you should use the vary HTTP header to point different user agents in the right direction.

7. Content

Content is king, but the type of content you’ll be featuring on your website is an important consideration when designing responsively. You need to be very aware of the way different types of content display across devices, e.g. text, images and video and how these may need to adjust or resize depending on the device. If you’re planning on using a CMS and need to serve different size images per breakpoint, make sure the CMS caters for this as well.

8. Building For Older Browsers

Yes, we’re talking about Internet Explorer (sigh!). From a technical point of view, the base around building a responsive website is using CSS media queries, and older versions of IE do not support this. To get around this, we incorporate a JavaScript polyfill for IE6 up to IE8 called Respond.js.

9. Pay Attention To Load Time (Especially For Mobile Devices)

As a designer you need to be cognisant of image sizes (load time) and how they may impact your mobile users’ experience. This is one of the primary reasons for building responsive sites from mobile up. The mobile solution needs to be fast and lightweight – chances of the user sticking around while your huge images load and consume their valuable data are slim to none. Make sure all images and content are optimised for the specific device/screen resolution. In some cases, you may even decide to serve different content to different device/screen resolutions.

10. Final Testing

Is there such a thing as final testing? You should approach responsive testing as an iterative process. It goes a little something like this: test, test, test. Test some more, make some changes then test, test, test. Test just a little bit more, make more changes, test, test, test, and the when you’re finished testing, test some more (and make some more changes).

When it comes to any kind of development, allowing your team enough time to test is vital, but when putting a responsive development project plan together, triple your standard testing time and add some on after that. You can never test enough to ensure that your product is delivered as it should be.

We’d love to hear what you’ve learnt about responsive development. Tell us by leaving a comment.