Cómo diseñar una web “mobile first”

Hoy vamos hablar de cómo diseñar una web “mobile first”, pero antes un poco de autobombo!!!:

Si te apuntas a mi lista de correo, además de recibir sólo contenido relevante del mundo del diseño web (por ejemplo si google cambia algo importante) te voy a regalar estos 4 ebooks de marketing digital:

• Convierte tu empresa en un imán para clientes
• Contenidos que enamoran
• Cómo elaborar un branding
• 10 consejos de email marketing

Apúntate ahora mismo en www.pampua.es/regalo Venga, dale al pause y entra en pampua.es/regalo que yo te espero aquí…

Pues nada, ahora que ya te has apuntado, vamos con el tema de la semana:

En el Mobile World Congress de 2010, Eric Schmidt, el CEO de Google, propuso que los diseñadores deben seguir la regla de “los dispositivos móviles primero” en el diseño de productos. ¿Qué significa diseñar primero para móvil? ¿Por qué es importante? ¿Cómo hacerlo? Contestaré estas 3 preguntas en el episodio de hoy.

¿Qué es el diseño Mobile First?

Para comprender mejor el concepto de diseño móvil primero, debes conocer primero estos 2 conceptos.

1. Diseño web responsive

El diseño web responsive es un método de diseño web que permite que la web se adapte a las pantallas de diferentes dispositivos de manera automática, mostrando el contenido de manera que la gente se sienta cómoda. Esto reduce en gran medida las operaciones de los usuarios, como la panorámica, el zoom y el desplazamiento al navegar por la web.

2. “Avance progresivo” y “Degradación elegante”

Estos dos conceptos se presentaron antes del diseño web responsive. Con el fin de hacer que la interfaz de la aplicación o la web sea razonable en diferentes dispositivos, los diseñadores proporcionan versiones personalizadas del producto para diferentes fines.

Avance progresivo significa que cuando diseñamos un producto, primero construimos una versión para el navegador más sencillo (como el de un teléfono móvil). Esta versión incluye las funciones y características más básicas. Después de eso, tendemos a la versión avanzada para una tableta o PC, que se crea agregando interacciones, efectos más complicados, etc. en la versión básica para una mejor experiencia de usuario.

“Degradación elegante”, por el contrario, inicia el diseño del producto desde un extremo avanzado como el escritorio y crea una versión con características completas al principio. Luego, los diseñadores hacen que el producto sea compatible con los móviles al cortar algunas funciones o contenidos.

El avance progresivo ha ganado la partida. Sí los diseñadores de webs inician un diseño de producto con su versión de escritorio, inevitablemente querrán aprovechar la mayoría de las ventajas de estos navegadores. Por ejemplo, el efecto de desplazamiento que soporta el cursor del mouse; Imágenes HD y gráficos complejos que pueden mostrarse normalmente solo cuando hay una conexión de internet de fibra o similar. De esta manera, los diseñadores se esforzarán por completar una versión de escritorio asombrosa y luego encontrarán que difícilmente se puede adaptar en un móvil a menos que renuncien a muchas de las ideas que se desarrollaron. Si es así, la versión final móvil será más bien como una idea de último minuto, un producto incompleto que se ha diluido.

Pero si tomamos el diseño móvil como punto de partida, bajo las restricciones como el ancho de banda, el tamaño de la pantalla, etc., los diseñadores aprovecharán los puntos clave de un producto, dirigiéndose hacia un producto minimalista y limpio con las características más importante. Cuando la plataforma se expande a una tableta o PC, los diseñadores pueden aprovechar las ventajas de las características de estos navegadores para fortalecer el producto paso a paso. Esta podría ser la razón principal por la cual la estrategia de avance progresivo se usa ampliamente.

Puedes preguntar, ¿por qué dedicas tanto tiempo a explicar estos dos conceptos? Pues la respuesta es que “el mobile first” es exactamente la regla del “avance progresivo”.

El Mobile First (Primero el móvil), como su nombre indica, significa que comenzamos el diseño del producto desde el extremo móvil, que tiene más restricciones, y luego ampliamos sus características para crear una versión para tableta o escritorio.

¿Por qué el principio “Mobile First” es tan importante en el diseño de productos?

Excepto por la victoria del avance progresivo contra la degradación elegante, como he mencionado antes, tenemos razones más tangibles para creer que el principio de la tecnología móvil es importante en el diseño del producto. Es decir, la explosión del uso móvil.

1. El uso de Internet móvil superó el uso de escritorio en 2016.

Actualmente se encuentran bastante igualados, en general, pero por sectores no tiene nada que ver. No es lo mismo si tienes un restaurante que si tienes un despacho de arquitectura. La visita a un restaurante es algo que requiere menos planificación y que se hace más por impulso, por lo que la gente va a buscar restaurantes por la zona en la que se encuentran desde sus móviles, pero si necesitan contratar a un arquitecto para que les construya una casa, probablemente quieran hacerlo tranquilamente, desde un ordenador, pudiendo observar los detalles de los trabajos que ha hecho en una pantalla más grande.

Deberías ir hoy mismo a Analytics y comprobar que dispositivo usan la mayoría de tus visitas para conectarse a tu web.

2. Las personas han pasado cada vez más tiempo en Internet desde los móviles.

3. A principios de 2012, las ventas de teléfonos inteligentes superaron las ventas de PC.

La explosión de los móviles está pidiendo a gritos a los diseñadores a prestar atención al diseño móvil y seguir la regla del “primero móvil” en el diseño web.

¿Cómo practicar la regla “Mobile First” en el diseño web?

La clave para elaborar un diseño mobile first es, de hecho, tener una mente minimalista y centrada en el contenido.

Creo que la mejor forma de explicarte este proceso es con un ejemplo. Así podemos ver como evoluciona el diseño desde un teléfono móvil hasta el final en un PC.

Vamos a hacer una web de reservas de hotel. Primero ordenamos el contenido del sitio por importancia:

• Nombre de la Web
• Hotel (hotel nacional, hotel extranjero, habitación por hora, hotel especial)
• Selector de tiempo (día de entrada, día de salida)
• Mi pedido
• Servicio al cliente
• Promoción y Publicidad.

Entonces conseguimos una versión final móvil como esta:

Los hoteles nacionales, extranjeros y los selectores de tiempo son el contenido más importante. Están ubicados en la parte más prominente de la interfaz.

Al agregar más funciones en la versión móvil y al ampliar el área de promoción y publicidad, obtenemos una versión de escritorio como esta:

De esta manera, se puede crear un producto para múltiples fines de una manera sencilla y eficiente en lugar de eliminar buenas funcionalidades para obtener una idea de último momento.

En resumen, el principio de “mobile first” tiene un papel importante en el diseño web. Por un lado, ayuda a ahorrar tiempo de diseño web y mejorará la productividad de los diseñadores. Por otro lado, obliga a los diseñadores a prestar más atención al contenido de la web, lo que ayuda a crear diseños limpios, prácticos y minimalistas que cargan más rápido y está demostrado que son los que mejor convierten.

Sin embargo, a medida que los teléfonos inteligentes se vuelven cada vez más grandes y más potentes, el navegador móvil puede dejar de considerarse como el “más sencillo” y terminar por igualarse al de escritorio en un futuro próximo, por lo que el concepto “mobile first” puede no ser un tema eterno. Pero por ahora, mi recomendación es clara: diseña primero la interfaz móvil.

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros WordPress Radio dirigido y presentado por el gran Joan Boluda y Joan Artés.

Todos las semanas emiten un episodio de 1 hora de duración aproximadamente hablando de temas muy interesantes para todos los que trabajamos con WordPress: optimización, caché, plugins, temas, dudas de oyentes, etc.

Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, etc.

Y esto ha sido todo por hoy, si ya conocías cómo diseñar una web para móviles y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, o por telegram o twitter como @pampua, o en facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene no habrá podcast (me tomo unas pequeñas vacaciones navideñas para disfrutar a tope de la familia) pero el jueves 3 de enero empezaremos el año con un tema muy interesante: Cómo elegir los colores para tu web.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos el año que viene, llueva, nieve o truene!