• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

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

Hoy te cuento las ventajas de diseñar una web "mobile first". ¿Qué significa diseñar primero para móvil? ¿Por qué es importante? ¿Cómo hacerlo? Todo bien clarito ;-)

20/12/2018 Por Ramón Deja un comentario

https://roptex.com/podcast/podcast44.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

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.

Hoy te voy a contar:

  • ¿Qué es el diseño Mobile First?
    • 1. Diseño web responsive
    • 2. “Avance progresivo” y “Degradación elegante”
  • ¿Por qué el principio «Mobile First» es tan importante en el diseño de productos?
    • 1. El uso de Internet móvil superó el uso de escritorio en 2016.
    • 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.
  • ¿Cómo practicar la regla “Mobile First” en el diseño web?
  • No te olvides de esto

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

No te olvides de esto

Tengo un newsletter.

Cada 15 días comparto 4 recursos interesantes y una historia motivadora.

Los que están apuntados están muy contentos.

Quizás mientan, no lo sé.

El caso es que en breve será de pago.

Apúntate mientras sea gratis en www.pampua.es/regalo

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!

Quizá te interese:

La importancia de una web en el proceso de ventas
Cómo mejorar en los resultados de SEO local
Análisis web de lacoix.com

Publicado en: Podcast Etiquetado como: diseño, diseñoweb, mobilefirst, web

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!