The exodus to responsive design isn’t a new phenomenon.
Since the mobile growth exploded into the scene quicker than anyone would have predicted, website’s responsiveness is no longer a choice, but a necessity.
And it comes as a no surprise that site owners are working hard to provide a quality user experience on a multitude of devices such as smartphones, smart TVs, desktop computers, gaming consoles and even watches.
We know that Google openly endorsed mobile-friendly design and intentionally awards responsive sites with better rankings.
But it’s not just that. Web users are more likely to visit your sites if you provide high-quality experience across all devices. It is practically essential your website is designed to support traffic from different devices with a multitude of screen sizes.
If you choose not to make your site responsive, your traffic and sales will drop off the radar.
Website’s Responsiveness Is In The Design
To develop a fully responsive website, the focus should be on the design.
The following are five of the most basic design elements that can have a significant impact on the responsiveness of your website.
1) Thoughtful reduction makes sites cleaner
Reduction at its simplest means removing whatever is not needed.
The statement might sound extremely aggressive, but an important aspect of mobile-firm development is to focus on content and features that are most useful to the user and do away with anything that is extraneous.
Even for larger screens, more doesn’t always mean better.
Having two buttons, for example, can create confusion. If you could replace the two buttons with just one button, this move would make your site easier on the eye and even easier to use for mobile and PC users alike.
A good idea here is to follow Maeda’s famous quote; when in doubt, just remove. This is because it is clear what elements must be present in a design.
Keep what is important, question everything else, and discard anything that you can’t find a reason to keep.
2) Content prioritisation by device makes reading easier
The first option most people consider when trying to work content onto smaller screens is to shift from multiple columns to single columns.
This is excellent at boosting responsiveness. Single column content is a lot easier to scan on mobile devices. The larger screens of PCs, meanwhile, allow for multi-columns without compromising on user experience.
However, shifting between layout approaches alone is not enough to make your website as responsive as you may desire. You need to also prioritise content accordingly to satisfy users.
Take article teasers for example. On a PC, the teasers are presented with the following information;
- Editorial image
- A photo of the author
- Title of the piece
- The author’s name
- The date of publication.
But on the smaller smartphone screen, even if you arrange this information into single columns, you may still find that space feels cramped out.
What you can do under such circumstances is to sacrifice the content that is not critical to the presentation of the content.
For instance, the editorial images can be removed without taking anything away from the articles.
3) Scalable navigation is the answer to large, deep menus
Keeping in mind that responsiveness is all about making user experiences great across devices, you should also work on your navigation to help users find resources more quickly.
That’s why it even helps to forget about consistency for a moment and just focus on making things simple.
With navigation, it matters less if usage steps are consistent across devices. The real issue is whether users can see the steps they need to take to access the resources they are looking for.
How quickly can they see these steps?
How many steps do they have to take before getting to the destination?
These are the factors that matter most.
That said, don’t completely throw consistency out of the window. It is still vital that you maintain some semblance of consistency across devices.
A few ways to achieve this include using the same visual characteristics of \buttons (font, color, position), maintaining labeling, and even maintaining links as much as possible.
But, feel free to use different functionality if that would work better on that specific device.
For example, a fly-out menu that is hovered over with a mouse works exceptionally well on PC. But on touch-screen devices, such a menu would fall apart. Therefore, using a different menu functionality is recommended.
4) A few adjustments to your images can do you a world of good!
Load speeds are a major element of responsive design. This often places design between a rock and a hard place when dealing with images.
No one likes washed down and poor quality images. But, those crisp, high-quality images can also be hefty.
So, what can you do?
Unfortunately, the solution involves making sacrifices in terms of both quality and quantity.
As important as quality images are, you need to find a balance between rich visual and overall page performance to make your mobile pages truly responsive.
Two ways to approach this are;
- When designing, consider each web page’s visuals and, once again, be aggressive in letting go of whatever is not needed.
Just by removing a carousel with four images and choosing to go with one static image, you can reduce your image file size by up to 75%.
5) Often overlooked, typography is also critical to website responsiveness
Font size is so obvious to web design that many developers overlook it when working on website responsiveness.
But when given serious thought, typography has the power to transform large web pages into smaller ones without losing any features or functionalities.
Some of the factors to consider when selecting a type form include;
- Typefaces with thin letterforms are great when used on large screens, but become hard to read on smaller screens.
- The wider the text column is, the more line-height (vertical height of each line) is needed to improve readability.
- Always start at 16pt body type whether you’re working on a large screen or a small screen. However, feel free to explore other options.
- Headings must stand out as headings. Even a simple heading should be at least 1.6 times as large as the text it supports.
- Maintain a reasonable contrast throughout the site. Start by choosing readable text vs background colors then also choose universal colors for links so that users don’t feel lost.
That’s just the beginning
Many other design fixes can help improve a website’s responsiveness and simplifies mobile advertising. But if you can work on reduction, content prioritisation, navigation, images, and typography, that would be a good start.