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.


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


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.


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?

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa, volver a empezar!

Tagged with: , , , , , , ,
Publicado en
10:00 am to 05:00 pm | Mon-Fri
+5411 4954.0022 / +54 911 6259.7231
Gabriel Catalano

enero 2012
« dic   feb »

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 6.177 seguidores

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito


el mundo del marketing se activa para ti


fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion


Vinod833's Blog

This site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog


La realidad alterna

Poesías, relatos, diario de sueños


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



Comunicación & Marketing

De Lilian Lanzieri


Dirección estratégica para la vida

Silvia Altamirano

and The Infamous Spider

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 site

Matt on Not-WordPress

Stuff and things.


Noticias de Tecnologia.

T a l e n t o   e n   E x p a n s i ó n

Gestión de personas para las organizaciones líderes de la Era del Conocimiento

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

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

Little Grey Box

Travel & Intuitive Living

déborah rueda

Un sitio más pero diferente sobre marketing digital

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, stat ups, emprendedores

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


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 su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria


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


Ensalada de Manjares


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

Únete a otros 6.177 seguidores

A %d blogueros les gusta esto: