Design Best Practices for the Mobile Web

Design Best Practices for the Mobile Web

Mobile web interfaces take a different sort of design practice, whether they are for mobile websites or native mobile applications. With a different sort of device, and a more noticeably different screen size, we as designers must consider a new set of best practices for design.

Design Best Practices for the Mobile Web

Any web designer may be noticing the close in the gap between web designer and mobile websites designer. Before, many designers chose to be within that niche, but as the mobile web grows, we web designers don’t really have a choice to do mobile design or not! It is often a requirement for most projects, and in years to come that fact will be even more so.

In this article we’ll look over the basic best practices for designing for the mobile web, and the major differences in designing for the “traditional web” (via desktops/laptops and all other bigger screens).

Limited and Big Navigation

Navigation is the number one thing all web designers and developers need to focus on. Without good, usable navigation, our users may get confused, not be able to find what they need or want, and will end up leaving our sites, never to return!

We know this though, that fact has been paraded throughout all of the previous generations of the web. Just as it’s important to plan and design effective navigation for a regular website, so is it important to do the same for a mobile interface.

Oobrang Pinoy
Obrang Pinoy

If you’re going for a creative look, feel free to keep it creative. Just like with traditional web design, creative navigation should still be usable, meaning the user should be able to understand how to use it right away, and be able to use it easily!

For mobile website versions, there are a few best practices for navigation to keep in mind:

  • Keep buttons large with extra padding and spacing. Many mobile devices are touchscreen and bigger buttons mean easier clicking.
  • Keep navigation simple. Don’t flood a navigation bar with several options; instead choose five or less, and create sub-navigation if necessary. This not only gives more room to make navigation larger for touchscreens, but also simplifies navigating for those who may have other forms of input (like tiny arrows on a tiny keyboard!).
  • Vertical navigation is far more of a trend, and easier on many mobile input devices. If using any sort of horizontal navigation, keep it extra minimal.
  • User the “button style” design over standard text links for the navigation.

Shorter Elements (Vertical Space)

A smaller screen means saving space in a practical way. Since horizontal scrolling is not even possible on many mobile browsers, let alone not user friendly in the slightest for everything else that does support it, you should create flexible designs that prevent horizontal scrolling at all costs. With horizontal scrolling out of the question, our main way of viewing content now turns to vertical scrolling.

Goldline
Goldline

Nobody wants to scroll indefinitely to get to one piece of content. Super long pages are just not an option with mobile design, and on top of that, the more there is on a page (a super long page), the more there is to download on a device that may not be able to handle large pages that well. Because of this, it’s essential to keep vertical scrolling to a minimum, with a variety of techniques:

  • Break longer content into sections and various pages if needed.
  • Use things like accordions to break content up, and let the user shorten and expand as needed.
  • The smaller the screen gets, shorten unessential elements. Take for example my portfolio design, KaylaKnight.com, as the browser size gets thinner, I switch to a background with a shorter middle section, which would just take up unnecessary space on a smaller screen.
  • Use vertical navigation that leads to more sub-navigation. Narrow down to what the user is navigating to through different, shorter screens.

Responsive Design

When it comes to mobile design, responsive web design often comes to mind. Have a layout that is fully flexible while implementing other practices that help out mobile users or otherwise, such as saving on bandwidth and file sizes for lesser devices, changing image sizes, and having alternatives for certain features (like video) that may not be supported by all devices.

Owltastic
Owltastic

While full responsive design takes time and while there are countless practices that come along with it, when it comes to mobile design, designs should be at least partially responsive. In the very least, layouts should be flexible. Think of how iPad users can switch in an instant to horizontal and vertical view; think about how the majority of all other mobile devices can now do that too. (Actually, even my standard-size laptop can do it with the press of a button on the side!)

Beyond how many users can switch orientations in an instant, creating a flexible — and at best, responsive — design will allow for the huge range of mobile devices available, and screen sizes available. With flexible design, you may have to design a few interfaces for various screen sizes (think of the huge difference in design layout when it goes from iPhone to a 2-inch feature phone), but for the most part the design should transform per screen size itself.

Building a responsive web design from the get go will help prevent the need for endless pixel-perfect mobile designs.

Helpful Icons

One major trend for mobile design that can also be considered a great design practice is the use of icons. This is especially helpful for primary navigation, but icons can also be of great use for other types of links, or even as just visual helpers.

Iowa State Fair
Iowa State Fair

As with native mobile applications, icons are a standard part of the interface. Recreating this on a mobile website can create consistency, as well as a more user-friendly interface. Icons are much easier to click on then small text links, and the visual aspect can mean navigation that takes less thought, which is great for mobile sites that must use a lot of sub-navigation to keep an interface simple.

Limited Images Within Content

For incredibly small screens, some images should be cut out entirely. Anything that would drastically increase vertical scrolling can be an issue, and even more so for slower mobile devices where simply downloading excess images is enough of a problem. For mobile design, keep the use of images small, and only use when needed.

Vonage
Vonage

Surely, this can be a tricky thing to implement. Perhaps unneeded images within content can have a certain class, and can therefore be hidden if a screen reaches a size small enough. As for download times, the only solution really is to create responsive images that have a smaller file size and detect via JavaScript. There are many solutions that can be researched, but perhaps the best way to limit images where needed is to carefully consider when images are in excess no matter what screen size the content is being viewed on.

Don’t Be Afraid of Whitespace

Just like with design on a standard size screen, whitespace is needed in mobile design as well. In fact, it might be needed more as screen sizes get smaller and navigation may get harder to deal with. Without whitespace, on a smaller screen content could be more difficult to read, and anything smooshed together isn’t a good idea!

Creative Carlos
Creative Carlos

Yet, it can be an initial instinct for every designer that the smaller the screen gets, the more space-efficient we should be. Keep in mind that with a proper and well planned out interface design, whitespace can be used to increase usability, and still not sacrifice other mobile considerations, like excessive vertical scrolling.

Conclusion

While many of our basic design principles may remain the same, when it comes to designing for smaller devices, and possibly less capable devices as well, we must consider a whole new set of best design practices. The interface of a mobile website design should be drastically different than that of a standard size design, and it can take a whole new learning curve to learn what works best for smaller screens.

What additional tips to you have for creating mobile interfaces? What are some differences, and are there any design practices that should remain the same no matter what device?

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

    • AtomTubeCruncher,
    • January 3, 2012
    / Reply

    Personally, I just don’t agree with the responsive movement and the “mobile first” attitude. Minimalism is nice, but if you have to design all sites starting from 300px wide and a 20KB page limit, things get way too boring and limiting. Bear in mind that limiting =/= challenging. Too many perfectly desktop designs have to be abandoned for the mobile world. IMO, sibling sites and native apps are where it’s all at. Mobile apps will run smoother anyway, and sibling sites can focus entirely on just the mobile context. A mobile context is going to change the way you should approach both design and information architecture, things that can’t always be dually compatible for big and tiny screen sizes through the magic of CSS transitions and media queries (the latter of which alienate anyone using a browser who cannot recognize them).

    Make a rubber design that looks like this http://image.cssbased.com/images/pv.webmd.com.jpg on a 1680px wide screen and then like this http://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/miscellaneous/WebMD_mobile/01_android_landing.jpg on an iPhone. Ain’t gonna happen. Responsive and/or rubber web design is good and well, especially if the design is super minimal to begin with, but it’s also a bit of a fad.

  1. / Reply

    This site is really very good and also very much convenient to use. Its also very user friendly.

  2. / Reply

    such a good job kayla your typography is too good!

  3. / Reply

    Wow! This article is like a manual. Excellent!

  4. / Reply

    Very useful article, thanks has read with pleasure. p/s I apologize for bad English

  5. / Reply

    Thanks Kayla. Am sure a lot of people benefited from this useful article.

  6. / Reply

    A very nice post. I am also associated with Mobile web design, Web Design Rugby, SEO West Midlands industry. Thanks for writing this brilliant post and I have just subscribed to the same with a view of more such good posts you will be publishing over the coming days.

  7. / Reply

    Great tips.

    Also, do you think it’s still necessary to add a “go to dekstop site” link in the footer? What is the click through rate on these?

  8. / Reply

    Thanks Kayla, you’ve outlined a number of excellent tips as pertain to mobile web development. It’s tough to get it right when designing for so many different devices, but you’re laying some good foundation here!

  9. / Reply

    Hey great article! I like that navigation is number one. A clear, precise nav layout is always important but on mobile it is super important. Mobile users are even more picky and don’t have a lot of time. They want easy navigation.

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.