As you may know, in 2024, designing a website for responsiveness — meaning, it scales down and looks great on any device — is an absolute requirement.
Everyone is on their phones. Take a look at your analytics and you’ll find exactly what percentage is on a mobile phone versus a desktop or tablet.
Because there is such a large audience navigating websites on their mobile phones, we have got to design for mobile like it’s just as important as a desktop view.
So how can you ensure your website looks great on mobile as well?
Today, I’m going to share some responsive design tips to keep in mind.
1. Utilize Responsive Layouts
Now, I know it may seem like a redundant point, but it’s super important to think about mobile as you are first designing your website prior to building online.
During this design phase, you’ll want to constantly ask yourself, “How will this look on mobile?”
If it cannot translate well enough, you may be doing too much.
With mobile responsive design, we often see that you take the desktop content, from left to right, and stack it on top of each other.
Something like this:
Now, you can totally switch the content on mobile so that the image showed first, then the text — either works fine.
But the key here is understanding how your desktop layout will be translated to mobile, and if you can envision how the content will “stack”.
I’ve seen it before on some websites where they have some very complex design features on desktop, and then you go to mobile and all of it is just hidden.
To me, this is a lazy tactic and ignores the mobile audience — if your desktop design is too complicated to be translated to mobile, then simplify it.
Your mobile site should not look vastly different from your site on desktop — and this starts with designing your layouts with purpose.
2. Design with touch in mind
Imagine yourself browsing a website on your phone….what are you using to click and navigate?
More than likely a single finger.
When you approach your mobile design, you should always think about the user and how they’re navigating your site.
Because it’s so often just a single finger, you need to ensure your clickable elements are not too small.
Not only is this just helpful for usability, but it’s also important for accessibility.
If you make buttons or links too small and difficult to target with. your finger, users will easily have a problem trying to navigate.
According to the WCAG 2.1 criteria, any clickable element should be no smaller than 44×44 pixels.
In addition to making sure elements are large enough, you’ll want to allow enough space between elements so any two buttons or similar are able to be clicked individually without problems.
If you crowd your elements too close together, you’ll find tapping it with just a finger tip becomes a real challenge.
3. Keep your navigation simple
One of the most important, if not the most, aspects of your mobile website design is the navigation.
How will a user view the menu? Where will you put it?
There is a reason why majority of websites you visit have a “hamburger” menu icon in the top right — those three horizontal lines that look like this: ☰.
Upon clicking it, that hamburger menu icon opens up the site navigation menu.
Now, going back to point 2 — always make sure your hamburger icon is large enough to click with your finger. If it’s too small, then a user can’t navigate – and they’ll leave faster than they came in.
Beyond that, you’ll want to keep your site navigation simple and easy to understand. Users are coming to your website because they were looking for something specific, and your navigation menu should allow them to quickly and easily lead them there.
I know speaking from personal experience, there are countless times I visit a website on my phone just to find the contact information of a business — and I know I’m not alone. So always be sure that your contact page or information is easily found on your mobile site.
Your mobile navigation menu doesn’t have to be boring, either — here’s what the AWD mobile navigation looks like:
Surely it’s nothing spectacular — but adding the logo and some social icons add an extra sense of “branded” feeling that is engaging.
Now, we’ve really just touched the tip of the iceberg today with mobile design, but I strongly believe that paying strong attention to just these three tactics, will help your mobile website design improve dramatically.
Remember — users come first, and ignoring your mobile site is likely ignoring a large part of your audience.
Thanks for reading,
