RWD Podcast Episode 7: Responsive Strategy

Listen to episode

In this weeks podcast I talk about a few different options you have when approaching a responsive design on your existing site.  

The usual story is that you’ve got an existing site and it’s getting a little bit tired. It was probably redesigned or built more than two years ago and it’s looking a little tired.

The chances are that your mobile analytics are starting to show an increase in mobile and tablet traffic and you want to provide a better experience for users… which of course leads to more conversions for you (plus you get to have some fun with RWD, amiright?)

Jeremy already covered this in his climbing mount responsive, and Brad Frost also covered it this week with his article on responsive design strategy.

The Retrofit

Ben Callahan has spoken about this in a past RWD Summit and his team at SparkBox created this awesome retrofitting tool.

Retrofitting your existing website seems like the simple solution, in fact I showed you how to retrofit the Amazon Webservice Blog in 17 minutes.

On the outside it looks quick to do but in reality really large sites have a tonne of legacy – images, tables, embeds, strange inconsistent content structure. – if you’re quoting for something like this make sure you take a good look at the content.

Chances are that this site is a few years old too. Does the content still even make sense?

Web moves fast, don’t leave this with a band aid in the darkages.

These days when we talk about RWD it’s not just being squishy, it’s more. The retrofit approach doesn’t deliver the more.

Element by element

The next approach is to retrofit section by section. Element by element.

• Make each component responsive within a fixed grid
• Update the content: once you update the component you should also look at updating the content to reflect a more mobile future.
• Once all the components are finished  add the flexy grid and breakpoints.

You could do a similar approach and go page by page (home page/landing), but I think this provides too much of a break in the flow for a user. If they land on a nice responsive homepage or landing page then move to a fixed desktop screen it looks like something went wrong.

Mmmmm bop

Go with a mobile site. M.  Yes, you heard me.

BBC News, Guardian, they are doing this and they’re all pretty awesome.

By creating a separate mobile site you can start work on a mobile first approach. It requires far less buy in from the management because they’ve all heard of mobile sites before and won’t be threatened by all these young folk shouting about responsive design from the rooftops.

This can be a cheaper approach because it doesn’t have to necessarily impact on your current site, especially if you’re site is bringing in all the money. This also allows you to slowly move content across bit by bit, tackling one hard problem at a time rather than in one lot.

Unfortunately it does require redirections based on UA sniffing which nobody likes to do. You also have a temporary issue where there’s a lack of content parity across all pages on your site, and that horrible experience of redirecting users from links that have been shared with them (depending which device they open the link on)

Mobile First (best)

start a fresh with everything and start building it up from a tube of content onto a giagantor 4k+ monitor (and bigger).

Nothing is easy about this approach:

• Takes longer
• Costs more
• Cultural changes
• Workflow implications

You do get ALL the benefits though.

• Super fast, performance orientated. 
• Will work forever. 
• Provides a strong foundation for any change.

Conclusion

Those are the options. Which is best? Who knows? You’re business, what fits best for you. your team, your budget, you organisation.