Need a plan to create a winning marketing strategy, fast? Get started today.

Explore our Digital Experience Management Toolkit

Responsive website design example

Author's avatar By Dave Chaffey 14 Nov, 2012
Essential Essential topic

Oxfam Ireland's new responsive design

With the dramatic increase in mobile site users all businesses are experiencing, there has been a lot of discussion of responsive design as an approach.

Responsive design gives the option to deliver a great experience for smartphone, tablet and desktop users without the need for creating a separate mobile optimised site or apps. So it can be a cost-effective solution.

If you want to learn more about the approach I recommend this primer on responsive design approach shared with me by Dan Croxen John.

Examples are often the best way to understand the potential of an approach, so in this post I focus on a single example which shows the benefits of the approach.

Oxfam Ireland responsive design example

I saw this Oxfam Ireland example mentioned in the excellent LinkedIn Web Managers Group and thought it was  an interesting example of a responsive design that was worth sharing.

It was shared by Keith McManus, Digital Communications Manager at Oxfam Ireland who was sharing the approach and asking for feedback. I thought it was a good example to include since I know many Smart Insights members work with charities and not-for-profit organisations, but it’s of wider interest too.

I’ll let the screengrabs do the talking. It's worth viewing the site adjusting your browser to see how promotional banners and Oxfam gifts are removed/added as the viewport changes. A little more on the tech approach to follow….

 


The site was created on the Drupal Open Source content management system popular with many charities by Ireland-based design agency Annertech.

Keith explained to the web managers group commented on the in-house approach:

"The creative and front-end design was carried out in-house, by a team of two. Designing in a responsive way did take quite a bit of additional time (putting it crudely, we essentially designed 4 different websites based on different widths).

Now that it’s live however, it’s business as usual from a website/content management point of view. All new content automatically displays appropriately on different devices, so well worth the investment".

I captured the screengrab examples using the excellent free Web Developer Toolbar from Chris Pederick. I use it on Chrome, it’s available for Firefox too and is useful for onpage SEO also.

What do you think of this example? What are your experiences of responsive design? Do you think it’s useful in a range of situations, e.g. retail, travel and financial services sites or only for some like non-transactional sites or blogs?

Author's avatar

By Dave Chaffey

Digital strategist Dr Dave Chaffey is co-founder and Content Director of online marketing training platform and publisher Smart Insights. Dave is editor of the 100+ templates, ebooks and courses in the digital marketing resource library created by our team of 25+ digital marketing experts. Our resources are used by our Premium members in more than 100 countries to Plan, Manage and Optimize their digital marketing. Free members can access our free sample templates here. Dave is a keynote speaker, trainer and consultant who is author of 5 bestselling books on digital marketing including Digital Marketing Excellence and Digital Marketing: Strategy, Implementation and Practice. My personal site, DaveChaffey.com, lists my latest Digital marketing and E-commerce books and support materials including a digital marketing glossary. In 2004 he was recognised by the Chartered Institute of Marketing as one of 50 marketing ‘gurus’ worldwide who have helped shape the future of marketing. Please connect on LinkedIn to receive updates or ask me a question.

This blog post has been tagged with:

Responsive Web Design (RWD)

Recommended Blog Posts