6 secrets of creating the best responsive content

The ramifications of the brave new world of responsive web design (RWD) go past grids and scalability. Sites aiming to work on screens big and small must feature carefully selected images, effective text and sensible layout hierarchies. Content strategy is even more vital, and must be part of the earliest wireframing stages.

Whitespace has become vital for manoeuvring space, often leading to designs that are simplified, vibrant, and practical. Buttons and links have changed for the better too, as microscopic menus and CTAs are abolished in favour of large objects that are easy to spot and click. But what about the actual content?

01. Reimagine images

Visually appealing, striking and scalable, large JPEGs are widespread. Aside from hitting mobile users with hundreds of kilobytes of jazzy pixels, consider how your image will appear in 28in widescreen compared with an early iPhone. If it relies on fine details or faint nuances to make sense, it's no good.

Choose images that jump out at every size. Use the same principles as when designing a logotype; find an idea that works from billboards to pencils.

02. Glares galore

Light is key when targeting a wide audience: images must stand out in bright daylight as well as in office environments. The implications go beyond saturation and hues. The key factor to high clarity is contrast to see images in varying lights and from different angles: a big ask. Images must adhere to brand guidelines, render on small screens in direct light and be subtle enough for larger lower-lit monitors. Discuss potential issues with those picking images, and tweak photos as needed.

03. Too long; didn't read

One benefit of RWD is the increased need for concise copy. Typically, text reflows as boxes and columns narrow, and short text blocks with ample whitespace make for easy changes between layouts. Your copy must fight distractions of work, social media, overflowing inboxes and general boredom. Typical visitors spend little time on each site (see Jakob Nielsen's research). Be concise and clear; tantalise, hint and hook.

04. Hide or show

Consider what to show and hide for low resolutions. Dropping non-critical text and images can mean quicker, slicker browsing. Users are happy scrolling, but on small screens it makes missing content easier. The once-crucial fold is less important, but hierarchy still matters. Keep important features near the top, lose redundant elements when scaling down and remember smart copy and imagery can spark curiosity while using up very little space.

Conversion-critical sites must prioritise calls to action and key messages. Long pages should feature whitespace, and pointers to content below the fold.

05. Design for the future

It's vital to retain all content and functionality, and maintain access to all website sections, regardless of the device accessing it - if not, the navigation or structure is probably flawed. Sometimes certain areas are likely to be of minimal (or no) interest to visitors on mobile devices. Behaviour analyses can help identify key user journeys to be prioritised.

But established behaviour patterns are likely to change. Always provide enable the visitor to navigate and act as they want, and then draw conclusions.

06. Don't leave the content hanging

Dazzling, inspiring content is challenging to write; making mobile web users engage with it is still tougher, so give it time. Agency work rarely permits long planning, so the case for content must be made early on. Show your clients the effects by using numbers to highlight what your creative involvement has done for others in terms of conversions as well as traffic.

Effective content demands commitment, but results in a website that stands out for everyone, everywhere, regardless of their device.

Words: Erik Boman

Erik Boman is a copywriter and designer at Obergine.

This article originally appeared in net magazine issue 247.

Liked this? Read these!

How responsive is your content? Excite us in the comments!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.