…there are more smartphone users worldwide than desktop and laptop users [but] the usability of mobile websites and applications is still well behind the usability of desktop websites.
Of course, not everyone wants a mobile website that is just good enough for Google. They want their visitors to have a positive experience when they land on their website, or one that they designed for a customer. So they adjust their designs accordingly.
Choose your approach
Most people associate mobile web with responsive web design because that has been the buzzword thrown around different blogs and presentations for some time now. However responsive web design isn’t the only strategy, and it isn’t always the best approach. The best choice is based on how you want your visitors to interact with the content on your site.Responsive web design
Using media queries to change the display of the site based on the screen size, this is a fluid approach to designing for multiple devices. You design once and rely on the CSS to scale the display based on the screen.Adaptive design
This approach relies on static pages designed for different breakpoints. When the screen size is detected, the appropriate layout is displayed. Here, you need to design different layouts to accommodate various screen sizes. Usually, six layouts are built for the more common widths: 320, 480, 760, 960, 1200, 1600.Native application
This is when you build an iOS, Android or Windows app designed to serve up your web content to mobile users.Understand how interactions work
You would be hard pressed to find a website these days that doesn’t offer some sort of user interaction. It could be a business website that collects information from prospective customers, an ecommerce site built for shopping, or a site that allows visitors to check-in to an event or location. In any event, the user is going to have to provide information, make selections and press buttons and you have to get into the mindset that things on a mobile device are different. For starters, focus on important features. This might require some rearranging on your part, or you may have to cut back on some of the elements you wanted to include. Not only will this help reduce clutter, but it will allow for larger buttons and other elements that larger fingers may have a hard time engaging with. When at all possible, reduce the need for users to enter text. They may have an onscreen keyboard to use but we all know that there is a high rate of error when using these and features like autocorrect or text predict can become quite frustrating. Also, understand that there is a good chance that a mobile visitor may be interrupted or lose their connection. The less they have to re-do if they time out, the less frustration they are going to feel.Help your visitors navigate easily
For SEO purposes, many designers have been trained over the years to incorporate complex navigation menus into their work so that the search engine spiders are able to index everything. Having everything accessible from the navigation menu also makes sure that your visitors are able to find what they are looking for. But for the mobile visitor, these overwhelming menus actually make navigation more difficult, and a properly created sitemap will send the search engine crawlers where you need them to go. Instead of long lists of menu items, keep the choices to no more than six so mobile visitors don’t have to try to scroll down to see everything while trying to keep a menu open. Also, eliminate the submenus. That little + sign that you expect users to click to expand the options is really hard to tap unless they are using a stylus. Apple’s UI Design Basics states that the average finger requires 44 pixels left to right and up and down. Design with that space in mind. The trend of the single page website is something to consider here as well. Designed with mobile visitors in mind, this technique allows the visitor to scroll through your site and find everything they need on one long page. This type of design forgets all about the fold since mobile users are comfortable swiping through content to find what they need.Don’t sacrifice your purpose
When thinking about your mobile visitors, you are asked to leave out quite a bit. But what you should never sacrifice is the reason you have a website in the first place. Make sure your branding remains consistent, if you need your logo to remain prominent then use the right amount of real estate to display it. If your site is heavy on content, make sure your mobile users have access to all of it. Hiding content from mobile displays essentially punishes visitors for not being on a full-screen. As web designers, we are used to trends in our industry. Every year there are lists that introduce us to the latest fads and methodologies that we should be paying attention to. Designing for the mobile user isn’t one of those. It is the reality of where our industry is going and they just keep adding more screen sizes for us to work with so there really is no one size fits all approach that you can take. You, your organization, your customers and any other stakeholders have to determine what is important and structure your sites around those elements. But think about what is important to your visitors because that is what counts. User experience should never be about what we think is best or what we want to see. We can’t force people into having a great experience when they visit our pages. Instead, we have to look at giving them what they want, in a way that is easy for them to access. So before we look for checklists or guides that tell us what a good user experience is, take the time to think about what we have to say and what our visitors want to hear. Featured image, mobile web image via Shutterstock.Ayrald Hubert
Ayrald Hubert is a Senior Analyst at Clutch responsible for research and analysis of New York based web design companies. Ayrald's academic background includes a Bachelor's Degree from Georgetown University in Washington D.C., USA.
Read Next
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne
15 Best New Fonts, August 2024
Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…
By Ben Moss