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!
