the 10 unbreakable rules for mobile website design
Today, it’s “mobile-first.”
First post in a Hungry Monster series: Know great mobile design when you see it.
Reading Time: 5 minutes, 20 seconds
The design of your mobile website is hugely important today. 63% of people in the US search the web first and foremost on their phones or other mobile devices. Worldwide, 60% of people use mobile as their main way to browse the web, and 40% don’t use a desktop at all.
In this post we explain the essentials of mobile website design. They are the standards that inform every piece of Hungry Monster content.
For you, the website owner or manager, this is critical information.
Got a plan for new content or design? It should be held to these standards. Is your website more than a year or two old? Use these to go over it with a fine tooth comb.
This isn’t about the future.
It’s where your users are now. .
Jump to:
The mobile website screen is not just smaller but much more varied than ever before. Think of the difference between mini and standard tablets, between an iPhone 12 and an iPhone SE. Not to mention wearables, like a watch.
But it’s not simply size that affects design. Mobile devices, especially your phone, are often used in a hurry. You are dashing off a quick answer to a text, checking for takeout places in an unfamiliar neighborhood, checking out that specialist your doctor just gave you.
Mobile is not typically your go-to for deep-dive research or productive work. That’s more likely done seated at your desktop. (Personally, I do most of my writing on my iPhone X, using Siri, leaving the desktop for final polish. But I’m pretty sure that’s not common.)
Mobile apps, as compared to informational or brochure sites, call for yet more changes in the way we use our website. In apps, the main event is the back-and-forth of user interaction...quickly, on a tiny screen.
All of this puts a premium on ease-of-use, on readability, and especially on content. There is limited time and space to engage with your users. The mobile designer needs to squeeze the most out of every millimeter of space and every second of use.
Whatever your message, whatever the information you need to communicate, whatever the action you need from your user, that needs to be first, at the top of the screen.
Doing this well makes for a simplified design, with few frills, and strategic calls to action… one action per screen.
Shortcuts and timesavers are critical on mobile. For the most part, content should be more than one touch away. Navigation menus may be two but not three touches deep.
Time and date should be entered using visual calendars. Forms must be short, to the point, and as much as possible prefilled. (XXX has written an entire post on forms on a mobile device)
The landing target for buttons and other links on the mobile site is much less specific than on a desktop. A finger touch, even a stylus, cannot have the accuracy of a mouse pointer.
In the event, hopefully rare, that buttons or links are adjacent, they need plenty of air space.
Sliders are a quick and accurate way to make choices or designate quantity or price. Amazon’s Buy It Now screen is an example.
Gestures, such as swipe or squeeze, can nicely accommodate a mobile site if designed well. But a caution here, because gestures violate a proven principle of good user experience: they are often invisible.
If a list item can be deleted by swiping left, great, very easy, as long as you know that in advance. If not, stick to gestures that are by now widely known. Or spell it out (again the Amazon example).
It also means that your most important content needs to display upfront, right away.
The thumb landing zone varies with various size mobile devices.
Text that looks stylish on a desktop can become impossible on a smaller screen.
A gray scale font color at a small 10 point size, say, might seem cool to the desktop-oriented or print designer. Forget this on a mobile screen.
Anything under 11 points is probably not readable, and we prefer 12 to 14 points, depending on screen size.
Most grayscale font colors will not provide enough contrast on a mobile screen. Stay with sharply contrasting color. An interesting exercise is a review of the World Wide Web Consortium (W3C) accessibility guidelines for website contrast.
Fonts should be simple and readable. Apple defaults to San Francisco font on its iOS mobile operating system, while Google Android uses Roboto, both very simple sans serif fonts.
Screens generally, and mobile screens in particular, are moving to incredibly high resolution. A Sony model currently supports 4K resolution, four times the resolution of HD. Your website design must be future-proof, so take this seriously as a sign of what’s to come.
Moreover, smaller screens cram more pixels into their display space, making a much denser image.
The takeaway: images of moderate quality on a desktop can look downright shoddy on a phone or tablet, and worse, can be pixelated.
Keep in mind that 94% of people that use phones use them in portrait mode. But your desktop, given today’s monitors, militate towards landscape. While there are images that can be cropped or otherwise scaled, some will simply not lend them selves to both aspect ratios.
This is true for embedded YouTube and other videos. Yes they look better in landscape, and yes, your phone can handle it. But most people don’t use phones and video that way.
It’s easy and natural to call a phone number on a mobile website. So phone numbers, rather than email addresses or forms, might take prominence on a mobile site.
The ability to speak input, as well as Siri, and upload photos from the photo app can also save time
If your website has a significant presence globally, then to look up the site may need to reflect that. For example, presently a clean minimalist look is popular in the US and other countries, and certainly works well with mobile screens. But a more dense, more contrasty look is popular in other countries. Your design needs to take this into account.
What it is, what is isn’t…
Many websites today depend on the technology called “Responsive Design.” Technically called Responsive Web Design (RWD), this allows developers to create a single website, which automatically adapts to any device, of any size.
By “adapt”, Responsive web sites mean that the mobile site and desktop have exactly the same text, images, HTML, CSS, metadata, and other elements. As much as possible programmatically, content is adapted to a portrait screen and images may scale to some extent.
This seems like the Rosetta Stone of Mobile Web Site design, and in certain ways it is.
The good
Responsive Design appears to be widely favored. It is built in to do-it-yourself platforms like Wix and SquareSpace as is true with the widely-used WordPress. Responsive sites have made mobile site development and maintenance more accurate, and are “recommended” by Google.
Not only is the RWD site easier on your team, avoiding the need to edit two, three or more separate website versions, but conforms to one of Google‘s main mobile standards.
…and the asterisk
But the technology is not magic. It has its limitations and in any case depends on the skills of designers and coders.
For all its advantages, and there are many, Responsive sites do not guarantee mobile usability, only that mobile and desktop offer the same content and features. You, as the web owner, as well as designers and developers still need to keep a sharp eye out on…well, the experience of human beings that will be using your site. Do that and Google will be fine with it.
Other mobile development options
Finally, as a note, RWD compares to other options for constructing a mobile site, namely Adaptive Design and the use of a separate mobile site with a special URL prefix, called an “m.dot” URL..
Responsive design is central right now on the mobile website landscape. That’s a good thing and you should know about it. But don’t take your eye off the ball.
Contact us for more on creating the top quality content for mobile websites.
Please see Our Work page for samples of responsive web design.
Why do I need a mobile friendly website?
A solid majority of searches (63%) and nearly half of all internet browsing happens on a phone, tablet or other mobile device. There are large areas of the world in which mobile browsing is the only way most people access the web.
The mobile web experience is different. You may need directions while in your car or on foot, you might be looking for a place to eat in an unfamiliar neighborhood, you need to text or email while on the go.
Do Google or other search engines favor mobile websites?
As of March, 2021, Google will be using your mobile website, not your desktop computer, to assign a rank to your listing on search, a system called “mobile-first indexing,” Google is clearly marking out for us the central importance of mobile websites now and into the future.
What makes a good mobile site?
A good mobile site should have all the important content and functionality of its counterpart that displays on your desktop PC.
It needs to do this on a much smaller screen, using a slower internet connection, and very often in a short, hurried situation.
Examples:
Simple layout
Minimum of user touches and input
High resolution and correctly scaled images
Larger touch spots like buttons or links are some examples.
How to design a website for both mobile and desktop?
The three major approaches to constructing a website for both mobile and desktop are
Responsive Design
Adaptive Design
Use of a separately coded site with a mobile URL (called an “m.dot” URL).
What is Responsive Design?
Responsive Design, or Responsive Web Design (RWD) aims to create a single website which adapts to any device, large or small, on which it is displays. It does this without action by the user, such as using a separate URL. RWD has become the most common method of building and maintaining a website for all devices.
How do I make my website Responsive?
Websites need to be designed as Responsive from the ground up. Platforms such as Wix, SquareSpace and WordPress have built-in features that create a Responsive web site automatically, while other apps specialize in designing for multiple devices.