Today’s websites must meet a diverse mix of screen sizes. Users might access your site via a laptop, a smartphone or a tablet. Figuring out how to meet the needs of all the different types of visitors isn’t easy. There are many things you must consider for pages to look aesthetically pleasing on all device types. Designing websites for mobile requires attention to detail.
According to the Pew Research Center, 37% of Americans access the internet via smartphones. One reason is the lack of high-speed internet at home, but more citizens are ditching bulkier computers for their pocket-sized phones.
Whether your site needs a refresh or you’re starting from scratch, taking a mobile-first approach is smart business. Here are seven things to keep in mind while designing websites for mobile devices.
1. Embrace Hamburger Menus
You may have heard people complain about hamburger menus. They work best on mobile devices because they don’t take up a lot of screen space or run tabs several lines down the page.
There are many creative ways of utilizing hamburger menus, such as turning the word “menu” into an expandable feature. You can also mix up the colors used to indicate where the interactive link appears. A hamburger menu can appear in the upper left, upper right or center top of the page. Place it where it makes the most sense for your design’s aesthetics.
2. Narrow the Sales Funnel
When people land on a given page on your site, do they immediately realize the next step to take? Think about the goal for the user and remove anything not moving the consumer that way. Ideally, each page will have the main CTA button, and all the content points the visitor toward the action. A user-friendly site is one where the visitor doesn’t have to think about the next step. The design makes movement through the pages instinctive.
Mobile screens are small. The fewer choices there are, the easier it is for the person to see the next move to take. Designing websites for mobile requires thinking through the user experience (UX) and removing unneeded components. Cut any clutter on the page. If there’s a button people never click on, you don’t need that element, or it needs changing.
3. Consider Usage
Think about the way people interact with their smartphones and tablets. Where do they hold their hands, and what fingers do they use to navigate? You might move a CTA to the bottom of the screen. You could make the button slightly larger so someone can easily tap it with a thumb. When designing websites for mobile, take a device in hand and test out different options. You won’t figure out what works best until you use the site yourself on a smaller screen.
Ask others to try out your website as well. You know the design because you created it. You need feedback from people who’ve never seen the layout before to see if it is effortless to navigate.
4. Reduce Load Times
Google looked at the impact of reducing page load times and how it increased conversions. Keep in mind when designing websites for mobile that people may have slower connectivity. Drag can impact page speed more than on a Wi-Fi or hard-wired connection. Compress images and remove any elements causing a slowdown, such as JavaScript.
5. Create a Homepage Breadcrumb
People might navigate to a page on your website and need to return to the homepage. Make the process simple for site visitors. Designing websites for mobile means adding a logo that links to home in the upper left corner. For example, iPhone users need to scroll back up to utilize their device’s built-in back feature. If you make the process simpler, you improve UX. Make the logo fixed, so it follows the user down the page as they scroll.
6. Use and Test Site Search
Because designing websites for mobile means a condensed menu, add a search feature. You must also test your site search and ensure results are highly relevant. You may also want to limit the number of returns for mobile users. Don’t make them scroll through endless choices to get to the area they want.
7. Pay Attention to Font Sizes
Your typefaces should adapt to different screen sizes. Responsive text becomes a bit larger on a mobile device, so the copy is still readable. The only way to make sure users can see things clearly is to pull out the smallest screen you own and test your site.
One key to designing websites for mobile is utilizing sites such as BrowserShots.org or Browserling.com. Test how the pages look on different browsers and screens. View your website from every type of screen possible and fix any concerns. Examining your site from different perspectives prevents others from having issues that might drive them away.
Get Creative
If you run into problems when designing websites for mobile devices, look at creative ways of fixing them. Can you reduce image sizes even more? What coding snippets might solve the obstacle? Talk to other web developers about how they make sites more mobile-friendly. Invest in an app allowing users to access your shopping area without running into typical troubles of shopping via a smartphone.
Keep in mind mobile devices change a little every year. What works today might not function correctly tomorrow. Keep tweaking your site, testing and improving it to keep up with new trends and discoveries.
About The Author
Cooper Adwin is the Assistant Editor of Designerly Magazine. With several years of experience as a social media manager for a design company, Cooper particularly enjoys focusing on social and design news and topics that help brands create a seamless social media presence. Outside of Designerly, you can find Cooper playing D&D with friends or curled up with his cat and a good book.