Responsive design is one of the greatest advancements in web design over the last 10 years. Never in my career have I seen a web advancement so widely adopted through all sectors of business in such a short time. Responsive design went from a cool, new idea for usability on different sized screens to nearly a design requirement in a matter of no time.
While responsive design evolved from the smartphone and mobile-device boom, it’s more than getting a page to render properly on each device. Specific elements on a page are important as well, which we learned the hard way. So in today’s post I’m going to touch on some tips for keeping your desktop designs simple, clean and actionable for a better user experience on different sized screens.
First, what is mobile responsive design?
At first, responsive design was just about fitting all elements from a desktop onto screens of various sizes, all the way down to a tiny 320-pixel viewport. It took the place of dedicated mobile sites by adding in design elements that allow a page to respond to screen size, device, and browser used. While this was a fun (and challenging) game we designers played, we eventually realized our flaws — specifically those that made the process time-consuming for us and ineffective for the end user. Why? The answer lies in this simple statement:
Almost always, the best design for mobile use is one that is simple, clean and actionable.
Hiding the candy
In the beginning, I thought I would be doing my customers a disservice by removing or simplifying elements for mobile screen resolutions. Turns out, by doing just that I would be helping them immensely. That’s because when it comes to mobile design, less really is more. The way you interact with a website on a smartphone is just different from how you would do so on a larger screen with a mouse.
With that in mind, here are some common website elements you should consider simplifying or altogether removing for mobile:
1. Full navigation in the header
Why do you feel it's important to have your entire navigation header on your mobile site? It takes up a lot of real estate. My advice: get rid of it and replace is with a much simpler hamburger navigation. I personally think more desktop versions of sites should consider this as well, but that’s a discussion for another blog post.
When simplifying your header navigation, you need to make sure all your important links are still accessible via the mobile version of the menu as well as in your footer navigation. It would be counterintuitive to simplify navigation just to have links fail or direct you to the wrong place.
2. Sliders
I find that sliders should be used sparingly (if at all), so I would highly consider removing them from your site. When it comes to mobile functionality, the control schemes for most sliders are extremely clunky on a smartphone. Additionally, the content inside of slider elements becomes more difficult to read on mobile.
A simple solution would be to remove the slider and replace it with a clear call to action, directing the user to conduct whatever the most desired action from the slider was.
3. Fixed or locked bottom and side elements
These types of elements are usually CTAs that are locked onto your screen even as you scroll up or down. Typically, they're large and clunky and prompt visitors to fill out a form or chat with a sales rep. My suggestion: toast ‘em. They’re another element taking up valuable screen real estate on mobile devices, and they often lead to higher mobile bounce rates and a poor user experience.
An easy solution would be to transform the locked element into a smaller CTA that lives at the top of your mobile pages and prompts the same engagement. The main difference is that the element is no longer locked and moving with you as you move down the page.
Responsive design for mobile is a win-win
If you haven’t yet bought in to responsive design, think about it this way: Mobile functionality and the usability of your website is now more important than ever with the new Google Algorithm update. By investing in responsive design for your site, you no longer have to maintain a desktop and mobile site for your company. You will also save your team a boatload of time, allowing them to focus on other important aspects of your business.
Here are just a couple of reasons why responsive design is a win-win for both you and your visitors:
- Less time to code, resulting in shorter timelines and lower budgets
- Less time to test design and functionality
- More actionable and usable site for mobile users
Tag(s):
Demand Generation
