A marketer’s guide to the ins and outs of responsive web design

The proliferation of tablets and smartphones over the last couple of years means that digital marketers now understand that they need to deliver content that looks great on a multitude of platforms and devices. One way of doing this is to adopt a responsive web design (RWD) approach.

Responsive Design

We’ve previously written a basic guide to responsive web design but in reality there are a number of different methods, each addressing different issues that can arise. It’s important to note that the seemingly simple decision to have a responsive website is not a silver bullet solution to optimizing your site for all devices. There is still much to consider.

This post is aimed at people like me – digital types with just enough technical knowledge to grasp the fundamentals. If you are a serious techie looking for tips, there are plenty of posts out there by people much more technologically astute than me. This post is aimed at helping digital marketers navigate the decisions that are made when choosing the right approach to deliver content on a variety of devices.

The first and possibly most important decision is choosing a responsive design approach rather than a dedicated mobile website. It’s almost certainly true that RWD will require a smaller investment than a separate mobile site but there are still those situations when a separate site is more appropriate. For example, if the mobile user has a completely different set of requirements, you might need to design a completely different user journey for the mobile experience. In this case responsive design won’t cut it. Even if the site structure and user journeys are comparable, there may be good reason to serve different applications or media to different devices and this is best handled server side. A server side solution will detect the device and/or browser and only send what is required. This might mean delivery of completely separate sites for desktop, tablet and mobile or if you use a CMS with advanced templating (like Sitecore for instance), delivery of separate versions of a particular page.

But let’s just assume that a responsive approach is right for you. What should be your next considerations? I’ll give a brief run down on the three main flavours of responsive design together with a few pros and cons.

Responsive Web Design

OK, let’s start with the basic approach. Responsive Web Design, first described by Ethan Marcote, allows the client (i.e. browser) to display content in different ways depending on environment parameters (usually width). The page uses CSS media queries to determine the pixel ratio of the browser and then uses different CSS style rules to adapt the layout. In order for this to work effectively, the page should be designed using a flexible grid layout. It should also deliver images at an appropriate size, using browser resizing or displaying different sized images at different resolutions. The concept of graceful degradation, used for many years to handle the varying capabilities of different desktop browsers, is used in RWD to ensure an elegant experience in smaller resolutions and less capable feature phones.

Sounds great, so what are the drawbacks?

The main problem is the extra work being asked of the browser. By forcing the browser to download extra code and images, using image resizing to reduce the size of large images to display on smaller browsers and increasing the number of requests to the server, you are potentially severely impacting the speed performance of your page. You can probably see how this conflicts with providing a great mobile experience. Downloading images at a resolution much bigger than they will be displayed is simply a waste. Over 3G it might be noticeably slow and a waste of data allowance.

Also some browsers (especially mobile) don’t handle image resizing well or at all so it can’t be considered a solution for all mobile devices. Not all applications and third-party plug-ins or widgets will be compatible with this approach. It’s possible to use scripts to allow the browser to optionally download heavier page components but that in turn increases the server requests. In addition more devices of various screen resolutions are being released all the time. So how many different screen sizes do you need to design for once you consider the new wave of small tablets, large smartphones and smart TVs? More variations require more layouts which compounds the speed problem.

Pros

  • Delivers content elegantly to multiple screen resolutions.
  • Removes the need for significant investment in separate mobile sites.

Cons

  • Can impact the performance of a site by increasing code and media assets downloaded and the number of server requests per page.
  • Hard to futureproof in the face of new and diverse sized devices being released.
  • Might not be compatible with essential applications or third party widgets.

Mobile First Responsive Design

If the reason you need a responsive design is to deliver a great mobile experience then it would make sense to develop an approach that makes this your primary concern. That is the basis of the mobile first approach.

Standard RWD usually starts with desktop and removes or simplifies elements for smaller browser resolutions. Mobile first flips this approach on its head and challenges the web designer to start from the simplest and most efficient design and build up for the larger browsers. Whereas standard web design and responsive web design uses graceful degradation, mobile first employs a progressive enhancement approach, adding layers of enhancement as required to provide an elegant and optimized experience to all browser types.

The basics for mobile first responsive design are the same as standard RWD; the page still uses media queries and style rules to detect the browser width and deliver an appropriate layout, but by forcing the design and content strategy to place the needs of the mobile user first, you really address and focus on core content and functionality. If it’s not truly essential, it doesn’t go in the page. What you end up with is a page stripped to its bare essentials that looks great on whatever sized browser it’s viewed on. It also frees up the designer to consider mobile technologies such as camera integration and geo-location in the first instance.

Sounds great, so what are the drawbacks?

It’s not as easy as it sounds to drop content and functionality. There is a lot of planning and compromise required. Anyone who has had to mediate the discussion between different departments about whose content should go where will know this. Imagine if you had to decide that certain content was removed entirely. Prepare yourself for lots of content strategy meetings and workshops. It also depends on what kind of site you are building. If a large and complex piece of functionality is vital to your site but not applicable to mobile this may not be the approach for you.

Pros

  • Forces page design to be stripped to the essential elements.
  • Creates a faster and more elegant mobile solution that also looks good in larger resolutions.

Cons

  • Requires lots and lots of planning
  • It may not be possible to simplify your site to the level required

Responsive Web Design with Server Side Components (RESS)

I’ve previously described how device specific sites or page templates can be achieved by using server side detection and delivering a site or page version most suited to that device. I’ve also highlighted that one of the major drawbacks to standard responsive web design is the fact that you require the browser to download images and other media in the largest size and resize in the browser for the layout used. One way of modifying the RWD to address this issue is to develop a server side approach only on certain elements of the page, such as images and video and let media queries and style rules handle the layout. This is known as RESS (a mix of responsive and server side – get it?) and it could be the perfect balance to provide futureproof, multi device content delivery for your website.

Sounds great, so what are the drawbacks?

Well, there aren’t any really. RESS is a perfect compromise when you want to deliver a great experience on multiple browsers but don’t need or want to invest in separate mobile sites. It does require a bit more investment than the standard RWD approach and it helps if you have a content management system like Sitecore that can automatically resize images and store cached versions of the different sizes until they need to be served.

Pros

  • Solves one of the major drawbacks of standard RWD.

Cons

  • Extra development work required compared with standard RWD.

Summary

So as the saying goes, there is more than one way to skin a cat. And as another saying goes, it’s different horses for different courses. Before I completely exhaust my list of clichés I’ll finish by saying there are many ways of addressing the issue of optimizing your web content for different devices and the route you decide to take will be shaped by the requirements of your users and your business. If you want to know more about responsive web design and how you can use it to your advantage, get in touch. If you’re in the mood for more technical details on RWD in its various guises you can have a look through the reading list below, some of which was used to inform this post.

Reading list

Responsive Web Design by Ethan Marcotte

Mobile First responsive web design by Brad Frost

CSS Media Query for Mobile is Fool’s Gold by Jason Grigsby

RESS: Responsive Design + Server Side Components by Luke Wroblewski

There is no mobile web - a presentation by Jeremy Keith (summarised by Luke Wroblewski)

Crap! It doesn’t look quite right – presentation by Lyza Gardner

0
0

0
0
0