Studies have shown that mobile devices account for half of all web traffic globally. This statistic might indicate that the responsive version of a website is equally as important as its main desktop version, but there are other statistics that prove that responsive design can have a greater effect on your users’ experience and your site’s success…
- 57% of consumers stated that they are not likely to recommend a business of their mobile website is poorly designed
- Google and other search engines may eliminate a webpage from rankings on a mobile SERP if the page is not mobile-friendly
- The bounce rate on smartphones is 37%, while tablets average 28%
- 82% of customers have used their mobile phones while purchasing decision in-store
- 40% of consumers will go to a competitor if after a bad mobile experience.
When your site is professionally designed and developed for all devices, you are guaranteeing the best possible UI/UX (user interface/user experience) for your users while also increasing your chances of conversions and sales. Here are a few simple yet effective ways to improve your responsive design.
One key element of responsive design is your menu(s). Menus are often spread out on large and medium devices (desktop computers, laptops, large tablets), either horizontally across the top of the header or vertically down the right or left side of the screen. This approach is effective on larger devices, as it can complement the site’s design while promoting the important pages to the user and making them accessible.
However, if this approach is continued on smaller devices, it can result in a complicated and potentially frustrating experience for the user. The menu might overlap over other important content, or the length of the menu may require unnecessary scrolling before the user can reach the content they were looking for.
Instead, opt for a responsive menu. A responsive menu consolidates the list of links into a drop down that users can access by clicking a hamburger button (or other label/button that is recognizable). This takes up significantly less space, eliminating senseless scrolling and allowing the site’s header, hero image, or initial content be seen immediately. When your user can access your menu in a convenient, intuitive way without the menu intruding on the content they’re seeking, their experience is much more pleasant and they’re more likely to continue using your site.
Consistent margins and paddings.
Two other important elements that can make or break your responsive design are your margins and paddings. If you’re unfamiliar with these two terms or what the difference between the two is, here’s a quick breakdown:
Imagine that each element or row of content on your webpage is boxed in by a border. The space outside of the border is the margin, and this space separates that element from the outside edges of the webpage or from elements above or below it. The inside space that separates the border from the content itself is the padding.
While the content and elements of your website might not actually have borders (though they certainly can depending on the design), both the margin and padding play vital roles in the layout and UX of your website on all devices. If your content is too close to the edges of your site on large devices, it may appear to be overwhelming and discourage users from reading it. Contrarily, if your content has too much space around it, especially on smaller devices, it can make the content difficult to read or may result in excessive scrolling.
Another common way margins and paddings effect responsive design is with visual content. You might have two or three photos in a row on your website, but if the margins and paddings aren’t adjusted for smaller devices, the images might appear too large, too small, or may stack in an odd way that lessens the quality of the site’s design.
Keeping a close eye on your margins and paddings and how they affect your design on all devices will ensure that your site looks and performs its best for all users no matter what device they’re using.
Comfortable content sizes.
The space around your content is important, but the readability of that content matters just as much. You’ve written content for your website that is informative, authoritative, and meant to encourage conversions, so of course you want your users to read it, right?
One of the most effective ways to ensure your content is readable on all devices is by checking and setting your font size. Your body text should be around 16px—this is an ideal size for text to be readable on a smartphone or small device when held at a natural distance from the users eyes. (Secondary text such as labels and captions can be a bit smaller, around 14px, but this is reserved only for text that is not considered a part of your body text and/or is less important.)
Another way to make your content readable is to deliver your text in bite-sized pieces. A paragraph may look short and concise when it’s spread across your laptop screen, but a smartphone it might become a tedious wall of text. Review your content on a small device and break up long sections into smaller, more readable paragraphs. This allows your reader to either skim through each section to find exactly what they’re looking for, or to read your page in full without feeling overwhelmed or exhausted by lengthy copy.
We prioritize responsive design.
When we design and develop a website, we design it for all devices and ensure that each element responds beautifully. When a website operates seamlessly on all devices, we know that each visitor will have an exceptional user experience and our clients will be more than satisfied with their conversion rates.
Are you satisfied with the way your website responds and performs on all devices? We’d love to discuss how we can make these improvements on your site and what other adjustments we can make to take your responsive website to the next level.