Today, users are consuming on-line content on an ever increasing range of devices.  The relatively new discipline of “responsive design” has a lot to offer publishers.  By designing a series of flexible grids, content can be dynamically formatted to automatically work on the widest range of screen sizes from the largest desktop displays through to the smallest mobile handsets. 

Developing sites in this way, although initially more time consuming, creates a future proof platform for publishers that far outweighs the cost of developing different solutions for each family of devices.

The challenges

The proliferation of different devices is a problem that confronts all web site owners.  Where once we could safely assume a minimum screen size, browser type and hardware, there are now literally thousands of possible combinations.

This introduces some tricky challenges in presenting web content in an accessible and interesting way across devices that may have completely different: -

• Screen sizes and resolutions
• User interfaces – touch screen/”rollerball”/keyboard
• Functionality – GPS location, compass, cameras etc.

What does this mean for publishers?

For content publishers, screen size is the most important element to be tackled. Users simply won’t engage unless we can provide a great reading environment regardless of device.

The iPad is reasonably straightforward.  It’s a great device for browsing and because of the large screen size, if you design sensibly, there is no reason why you shouldn’t direct users to your normal desktop site.

The rise of the smartphone has resulted in an exponential growth in mobile traffic. Social media has had a huge impact too, with more than half of all Facebook and Twitter activity now happening via mobile devices. With the majority of posts containing  links, this is driving increasing amounts of mobile traffic back to content sites.

To add further to the problem, there are a new generation of mid-size devices being launched. The new Kindle fire has a 7 inch screen, 33% smaller than the iPad but significantly bigger than even the largest smartphones.  How will we serve content to these users? Do we treat these devices as a small iPad or a large smartphone?

Until relatively recently, to serve all these users successfully, we would have needed to build custom solutions for each device format.  For publishers, whose main priority is delivering content to users in the most appropriate format, then responsive design may well hold the answer.

What is responsive design?

Luckily, the proliferation of portable devices has brought with it a new breed of browsers that are smarter than their legacy desktop cousins.  These HTML5 enabled browsers can dynamically check the screen resolution and adjust the layout to suit.

For small changes, these changes are quite gradual, resizing fonts and images to create the best reading experience.

Larger variations in screen size produce step changes by adding or removing columns to reduce the site width. We’re only using 2 columns here but reduce the width far enough and you’ll see that it eventually gives up resizing the elements and reduces the site to a one column design, perfect for mobile.

It does this by “stacking” the design elements into a predetermined list. It also changes to a more mobile friendly navigation unit suitable for use on touch screen or Blackberry devices.

A lot has been written about responsive design, if you want to find out more about the technical details then this e-book is well worth downloading.

Alternatively if you’d like the layman’s explanation, check out this great video from our partners at Squiz

Creating responsive sites

The good news is that if you already have a site built on a reasonably up to date content management system (CMS) then you can probably redevelop the front end to use responsive templates.

This works best if the site is relatively simple in design as in the new grid layout, the elements will need to “stack” elegantly and consistently.  This route also has the advantage of not having to migrate any content and allows you to continue with your existing editorial systems and processes.

The one potential downside is that more complex pages might need a major overhaul, especially for mobile screen sizes.

Building from scratch

If you don’t currently have a site, or are considering a full redevelopment anyway, there is even better news.

By building the site using responsive techniques from the outset, you will be able to minimise complexity and leapfrog the previous generation of legacy web/mobile/tablet solutions.

Start simple

The key to developing a responsive site is to start simple. By definition, you are forced to design with mobile and touch screen devices in mind from the outset.  This results in simpler, more elegant designs that are device agnostic and  ”touch friendly” from the start.

The big benefit for content rich sites is that text and images are relatively straightforward to deal with. Fonts and image sizes can be scaled proportionally to work well on all screen resolutions.  Video, if handled correctly, can be set to play natively within the device interface, removing any issues of screen resolution completely.

Add more functionality later

Once the issue of screen resolution is addressed, thought can be given to the different device interfaces.  For example, gesture support can be added to allow touch enabled device users to swipe through image galleries.  If you are using a touch screen device you can see this in action on the slider in the next section.

More complex functionality might require more effort. Complicated forms could require a little more thought and location based functionality would need an element of device specific development.

The holy grail?

That might be going a little far!  Responsive design still has it’s limitations and if you want to build custom functionality that has deep integration to the device capabilities then your best route is probably still to build an app.

However, for publishers who want to access to the widest range of users, across multiple devices, with the least amount of effort, we think that responsive design is a great place to start.

It’s certainly more cost effective than maintaining multiple website versions (or apps) and it makes it simple for editorial to publish once to many devices.

The users get a great experience regardless of the resolution of the device they are using and, unlike an app, the content is social. Links can be shared, and read by the recipient, regardless of  device.

If you’re still not convinced, don’t just take our word for it, take a look at these examples: -

(Note: If you’re using a touch screen device, try swiping through the images above)

Update – Jump suite is now responsive!

One of the factors that deters people from taking the responsive route is the time and cost of the initial planning and design.  That’s why we’re happy to announce that from today, responsive design is now an option on our Jump Suite web platform.

Just as with the “off the peg” Jump suite module, we’ve already been through the thought process and built a working template that will fulfil the needs of most content publishers.

We’ll have more details and a full demo site up and running soon but in the meantime, if you’d like to find out more about how we could help you transition your existing site or build a new one, please contact us.

Jump Suite Responsive design