IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
Responsive Web Design: Beyond the Breakpoints
1. Responsive Web Design: Beyond the Breakpoints
Making responsive web designs that work for ‘anyone anywhere’ is a goal rather than a real
prospect. We can only aim high and hope to cater for as many as possible, and the task is often both
challenging and frustrating. But the constraints have brought with them, or made necessary, some
trends that are quite positive for usability and flexibility.
For example, 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.
Neat – but what about the actual content?
The ramifications of this brave new world of design reach farther than grids and scalability. Content
strategy is more crucial than ever, and must be part of the earliest stages of wireframing. Websites
that aim to work on screens both big and small need to feature carefully selected images, effective
texts, and sensible layout hierarchies.
Here are some content-specific areas that require thought, preparation, and testing:
Images re-imagined
Visually appealing, striking and scalable, large JPEGs are widespread in every sense. Aside from the
possible issues of hitting mobile users with hundreds of kilobytes of jazzy pixels, consider how your
image of choice will appear on 28-inch widescreen compared to an early iPhone. If the image relies
on fine details or faint nuances to make sense, it’s no good.
This is readily countered with a measure of work: Simply choose images that jump out at every size.
Employ the same principles as when designing a logotype, and find an idea that works from
billboards down to pencils.
Glares galore
Light has also become an important factor when targeting a wide and varied audience. Images must
stand out in bright daylight as well as in office environments, and that requires imagery that is
immediate and clear.
The implications go beyond saturation and hues: The key factor to high clarity is contrast, as this
affects how well we can make out images in varying lights and from different angles.
This is a tall order. Pictures meant to work everywhere must adhere to brand guidelines, pop on
smalls screens in direct light, but not come across as a storm of colours on larger monitors. The
remedy is to discuss potential issues with those who pick the images and tweak photographs when
necessary.
Fighting the TL;DR syndrome
2. One benefit– or straightjacket, depending on whom you ask – of RWD (Responsive Web Design) is
the increased need for tight copy. Typically, text reflows when boxes and columns grow narrower,
and short texts surrounded by ample whitespace make for easy changes between layouts.
Conversely, wordy and keyword-packed descriptions are the kryptonite of effective transitions.
Added to this is the small amount of time typical visitors spend on websites. Today’s web users are a
hurried crowd and want the gist of messages now. Consequently, shrewd organisations revise their
copy to be as efficient as possible. Be to-the-point, tantalise, hint and hook.
Think of texts as competitors, fighting distractions such as work, social media, overflowing inboxes,
sudden noises and general boredom. This has always been the case; mobile devices have only made
the situation worse.
Also, tread carefully around vague terms such as ‘solution’. If you can, point to the possible benefits
of your service or product. Examples: ‘We increase your conversions, kick-start your social media
presence, and bring more people to your website.’
Hide or show
Consider what to show and which elements to hide for small resolutions. Dropping non-critical texts
and images can make for much quicker and slicker browsing. Current users are reported not to mind
scrolling, but scrolling on small screens still makes it easier to miss content.
While the once-crucial fold is held as less important – not to mention harder to define – these days,
there is still the matter of hierarchy. Keep important features near the top of the page, lose
redundant elements when scaling down, and keep in mind that smart copy and imagery can spark
curiosity while using up very little space.
Conversion-critical websites should take care to ensure that CTAs (calls-to-action) and key messages
are prioritised. Crucially, any long page should feature whitespace as well as clear pointers to
content below the fold.
Design for the future
This is not to be confused with removing access to any part of the website. I’m a strong believer in
retaining all content and functionality, no excuses or exceptions. If a section is cumbersome to use
or outright unavailable, the navigation – or perhaps the overall structure – is probably flawed.
Some might argue that certain areas are likely to be of minimal (or no) interest to visitors using
mobile devices, and that behaviour analyses can point to key user journeys that should be
prioritized. This is correct, and useful when scopes and budgets limit what can be done – otherwise,
everything should be available and easy to use, regardless of what device is used to access the
website.
The reason is straightforward: More and more people use mobile devices. What was been true for
behaviour patterns might be wrong tomorrow. Always give the visitor the opportunity to navigate
and act as she or he wants, and then draw conclusions.
Don’t leave the content hanging
3. In short, while the technical constraints of RWD in themselves are a case for simplicity, they’re also
an argument for looking closely at bland images and longwinded copy. Much can easily be updated –
and should be so, to be more effective for an increasingly diverse group of users.
Now that unique, helpful and entertaining texts are recognized for their worth, it’s critical to make
certain they get read. Dazzling and inspiring pieces are challenging to write; making mobile web
users take part of them is even tougher. Creating and perfecting them must be allowed to take time.
Likewise, images should be picked based on their appearance on large widescreens down to
thumbnail size. This too can take more effort than expected. Obviously, this is the case for all
websites whether or not they’re responsive, as most devices shrink pictures down one way or
another.
Agency work rarely allows for long planning, so the case for content must be made early in the
process. Explain – or better yet, show – clients the effects to underline your point. Instead of
suggesting that your taste in images and words is superior, use numbers to highlight what your
creative involvement has done for others in terms of conversions and traffic.
Effective content demands hard work, but the end result is a website that truly stands out for
(almost) everyone, everywhere.