Wednesday 3 September 2014

Design Best Practices for the Mobile Web

http://www.imobilesitedesigns.com/pricing/
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 discovering 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 wind 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.

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 exactly 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.

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 might 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.

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 design that is flexible -- and at best, responsive -- will not allow unavailable, 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 likewise 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 perhaps as just visual helpers.

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 fantastic 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.

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!

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 like excessive vertical scrolling, to increase usability, and still not sacrifice other mobile considerations.
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?

No comments:

Post a Comment

Note: only a member of this blog may post a comment.