Designing better mobile websites is less about trying to innovate and more about trying to give people what they expect. Our understanding of how people interact with websites and mobile devices took some time to learn, and that learning now defines our expectations of how a website should work.
While it might sound like I’m advocating for the design of boring cookie-cutter websites right out of the starting gate, that’s really not the conclusion I want you to make. My point is that we have a choice—we can either follow established systems of web design and UX patterns that are familiar to people, or intentionally deviate from them. Both options are fine, as long as your choice is based on the client’s needs and the creative brief.
If websites were ice cream, it doesn’t matter if you’re designing the next plain vanilla, maple walnut or honey lavender—your site should work on a smartphone, and every other device. This article explores some of the things I have learned about designing for the web. I promise there will be some actually useful takeaways at the end that can help you evaluate the effectiveness of your design, or perhaps reframe how you think about designing for the web. Skip ahead if you’re short on time.
Some initial words of advice
Designing mobile websites is designing for everything everywhere, all at once. Unless you’re designing a mobile app intended only for mobile phones, you have to design for big screens too. Whether you want to take a mobile-first design approach, start with the big screen, or bounce back and forth between designing for all sizes at once is up to you. But eventually you’ll need to make sure your design works decently everywhere. Remember that responsive design is every size design.
I’d also like to urge you to take a responsive approach to web design, as compared to an adaptive one. Every visitor will have an experience that fluidly fills their display perfectly like water filling a container, rather than picking from a handful of locked sizes.
There are general ranges of resolution to guide you that line up with major categories of devices (phones, tablets, and monitors), but too much variation and overlap exists for these crossover points to work 100 percent of the time. A bit of flexibility in defining the breakpoints can really help with finicky situations, like where a line of text runs too long, certain elements get too close together, or don’t look right anymore. Consider a device-agnostic approach to choosing breakpoints and break when the content needs to, not just at the predetermined points you guessed you’d use at the beginning of development.
I experience a certain calm relief when handed a creative brief that includes words like, simple, straightforward, clear navigation, and minimal. If you’ve ever tried to design something with zero constraints, and complete freedom to do whatever your imagination can dream up, you may have noticed it’s a total nightmare. Following widely accepted design patterns is a great place to start. It will give your web design strong bones so it doesn’t collapse into a pile of jelly.
Lastly, ensuring that you are presenting the client’s message clearly, and that it hits the target audience should be your top priorities. That means design is secondary to your content, or at most, equally important. Any more and we are slipping into art territory. Remember, content comes first.
Actually helpful things to consider
From here on, we’re going to tackle specific aspects of a site such as navigation, use of images, and whether or not to use the font Papyrus (spoiler alert, the answer is still never).
1. Navigation
Main menu should be intuitive, a.k.a. boring
One of the most widely adopted design patterns for a website header is to put the logo in the top left and the most important page links along the top-middle to top-right of the page. This is a timeless, foolproof approach to designing navigation that will surprise no one. Then, on smaller displays where you can’t effectively fit all the most important top-level pages, collapse the whole navigation to our trusty friend the hamburger button. Some designers like to keep the menu hidden by default, even on big screens, but this always feels like a wasted opportunity. Displaying a few choice page links along the top provides an X-ray view of the types of content visitors can find on the site.
Hamburger menu should have a clear ‘close’ button
Just as the site menu should easily open with a tap of the hamburger button, it should be easy to close with a tap of the close button. Ideally styled as a familiar ‘x’ symbol or the word close, in precisely the same position that held the menu button, so visitors can open and close the menu repeatedly without needing to reposition their thumb.
Hamburger menu accordions should work
If the site is small enough, the opened menu may have room on mobile to display all the top-level pages in one column at a large font size.
If, on the other hand, the site has many sub- and sub-sub-pages, the accordion list is likely the way to go. Make sure there’s a clear indication that subpages exist and that interaction options are intuitive. At Manoverboard we’ve adopted an approach whereby tapping a top-level page with subpages once will reveal its child pages. From there, the visitor can either click the top-level page again to go directly to it or click a child page to go there instead.
Pay extra attention to how tall the menu is going to get in the worst-case scenario. If all of the accordion items expand at the same time, can the visitor still scroll through the full list without it getting cut off? Locking vertical scrolling while a menu is open can be a nice touch, but it’s only acceptable if you also ensure that all the links are accessible. That often means the menu itself will still have to be scrollable even if you’ve disabled scrolling the full page.
Sticky menu, or no sticky menu?
Making the site’s main menu sticky is a great way to keep its navigation close at hand, albeit at the expense of taking up some screen real estate. You can make a sticky menu permanently locked to the top edge of the website, or you can make it slide off the top of the screen as visitors scroll down, and then have it slide back in as soon as they scroll back up by a few pixels. This is a good compromise that keeps the menu close at hand but doesn’t block the visitor’s view until they’ve implied they want it by backtracking.
Subpage navigation ideas / where am I?
Once a visitor is one layer deep in the site’s page hierarchy, it can quickly become difficult for them to understand where they are in relation to other pages. You can provide supplementary context and cross navigation on the page in a few ways:
Breadcrumbs
If the site has two or three (hopefully not more) levels of page hierarchy, seriously consider a breadcrumb trail to avoid the site becoming a navigational nightmare. At a glance, visitors can see the page hierarchy that led them to where they are, and those who linked here directly from another website can quickly get their bearings.
Eyebrows
You could add eyebrow text above top-level page headings (h1 tags), indicating the parent page of the current section. Just mind your HTML semantics. This is not as thorough as a full breadcrumb trail but still nice, like breadcrumbs light.
Collapsible section menus
Collapsible section menus are another great tool to help people cross-navigate between sibling pages. Yes, visitors could go to the main menu to find what they want, but that feels like lazy design. Think of instances where it’s likely that a visitor will want to see every page in a section in sequence or when trying to compare related pages of information. Check out this great mobile example from UNCSA.
Back buttons and adjacent page links
Adding simple text links to subpages with labels such as “Back to Section,” or “Next Page” can significantly speed up browsing. How and where to place these links depends on the project, but the end of the main page content will often work given this is a likely point at which someone will need to go elsewhere.
2. Search
If you can fit it in the budget, do it
It’s bad form to use search as a band-aid for poorly planned site navigation. But implementing an on-site search function can save visitors a lot of time and headache locating something specific, especially when they’re in a hurry or aren’t in a “browsy” mood. You can’t go wrong with a magnifying glass icon to represent the search feature and the top right corner is your best bet for placement. If the search field is hidden by default, it’s a nice touch to “focus” on the search field automatically when visitors click the menu button.
3. Images
Very wide banner images
Everyone loves a giant banner image that spans a big monitor. But often, those gloriously wide image aspect ratios don’t translate well to mobile devices. You can, of course, create multiple custom crops of images at different aspect ratios for various purposes, but designers, developers, and clients are probably not interested in taking on that burden. Not to mention that a well-shot photograph taken with the intent of looking optimal at a 4:1 wide ratio is likely not going to look as good when it’s cropped to 4:3, 1:1, or a portrait aspect ratio instead.
Faces
Faces in photos are another tricky situation. Consider how photos will get cropped when clients use image containers for faces. If flexible cropping is part of your design, provide your clients with a safe area guide so that they don’t come back asking why everyone in the back row of their team’s group photo is partially decapitated.
Text in images
Avoid baking text into images at all costs. Words or parts of words tend to get cropped in strange ways making the message unreadable, and the alt-text rarely gets filled out correctly. If the website needs to feature branded graphics that include text, consider locking down the proportions of that part of your design and provide a safe zone guide to the designer (if it’s not also you) so you can ensure text won’t be cut off, as noted in my advice on images.
4. Consider your whitespace
Can you really have too much whitespace? (yes.)
Vertical
We love our whitespace here at Manoverboard and use lots of it when possible, but occasionally there is such a thing as too much. In particular, when converting an airy desktop design down to mobile size, those glorious 150 pixels of vertical space between blocks of content become a goofy and jarring disruption of the scrolling experience on your site. As screen size and font size shrink, make sure your whitespace is reduced so your design still looks great, and effectively uses the screen real estate available.
Horizontal
Another place I see room for improvement is mobile-sized card layouts. Often the padding in—and margin around—the cards don’t adjust, eating up a surprising amount of horizontal space. Consider collapsing your left and right margins entirely to let the cards touch the sides of the screen (and lose the rounded corners). As long as you still have some vertical distinction between cards, such as a stroke or colour change, you probably won’t mind the change.
Can you have too little? (also yes.)
On the flip side, it’s easy to rush through styling and get overzealous with tightening everything on the page because it feels like you’re trying to view a poster through a keyhole. If the site doesn’t look like a dense legal contract on the big screen, it shouldn’t on a smaller one either. Keep the vibe consistent across devices as much as possible, and make sure it stays legible.
5. Font Sizes
Heading hierarchy
When you design the type scale of a site and plan out the sizes of your various text elements, consider how it will adapt to a smaller screen. Large screens give you a huge amount of flexibility. Our current Manoverboard site features font sizes ranging roughly from 16px to 160px, which is rad, but it’s impossible to fit the name Manoverboard on a single line on mobile if you set it to 160px. When testing out heading sizes, make sure your dummy text contains smarty text (i.e. some humongous, grown-up vocabulary words like incomprehensibility). If there is a team page, make sure individuals’ names read well and don’t break mid-name.
Body copy
The rules of good typography don’t go out the window with a small “page size.” They are more critical than ever here, so keep it legible and comfortable to read. How does one keep it legible and comfortable, you ask? Apply good typographic principles. For something more concrete, check out this post with tips for improving legibility in printed materials (which unsurprisingly is also applicable to type on the web, and anywhere that text is meant to be read).
Eyebrows and other small text
If you’ve taken the approach of reducing the root font size of your site to accelerate the mobile styling phase of development, small text is at risk of becoming too small. For example, the perfect size on a desktop may also be the same size on a mobile device, but if the font sizes are all reduced proportionally, the extra small copy might shrink beyond what’s reasonable.
Conclusion
Designing better mobile sites starts with understanding how visitors have evolved to interact with the web using various devices. If we develop sites that depart from these expectations, we can create friction between visitors and the information they seek. There is no need to sacrifice design for usability. Designing sites that work on all devices can be elegant, engaging, and straightforward.
Photo Credits:
Gingerbread by Oriol Portell
Everything, Everywhere All at Once
SpongeBob SquarePants*