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