Design Best Practices for the Mobile Web



http://www.onextrapixel.com/2012/01/02/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 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 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?

Etiquetado:, , , , , , ,

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en sus fotografías, debe expresar emociones, provocar reacciones y despertar pasiones..” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

URieLaRtE

hay que ser libre para ser uno mismo

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.668 seguidores

%d personas les gusta esto: