¿Qué es Mobile First Design?

¿Qué es Mobile First Design?

Diseño para dispositivos móviles: una guía sencilla de todo lo que
necesita saber. Por ejemplo, si un diseñador de dispositivos
móviles
primero se sienta a crear un prototipo o esbozar un
diseño de sitio web, no comenzaría a esbozar un diseño de escritorio.

| www.GustavoGuardadoRoa.com |

Costa Rica (506) 8322-2771 - seoanddesign @ gmail.com


sitios en la web facebook costa ricatwitter costa ricapinterest costa ricalinkedin costa ricayoutube costa ricamix sitios en la web costa ricatumblr sitios en la web costa ricainstagram sitios en la web costa ricagoogle my business sitios en la web costa rica

marketing digital

 

¿Qué es la primera estrategia móvil?

La frase "estrategia para dispositivos móviles primero" se refiere a un enfoque para desarrollar sitios web en el que se da prioridad a la versión del sitio web habilitada para dispositivos móviles sobre su versión de escritorio.

¿Qué es un diseñador móvil?

Como diseñador de dispositivos móviles, desarrolla aplicaciones para usar en dispositivos móviles como una tableta o un teléfono celular. Puede optar por especializarse en una plataforma como Android o iOS, o diseñar aplicaciones para que funcionen en múltiples plataformas.

¿Cómo afecta el diseño de los sitios web a un enfoque móvil primero?

El enfoque de dispositivos móviles primero conduce orgánicamente a un diseño que se centra más en el contenido y, por lo tanto, en el usuario. El corazón del sitio es el contenido, para eso están los usuarios. Sin embargo, una advertencia es que los usuarios de dispositivos móviles a veces requieren contenido diferente al de los usuarios de escritorio.

¿Por qué es importante el diseño móvil?

Mobile-first garantiza que ofrezca la experiencia de usuario (UX) correcta en la pantalla correcta. Con un espacio tan limitado disponible en la pantalla de un teléfono móvil, el diseño tiene mucho más sentido para la UX. Los diseñadores deben priorizar los elementos del sitio web que son más importantes para crear una base sólida desde la que trabajar.

¿Bootstrap mobile es lo primero?

Bootstrap · El framework front-end receptivo y de respuesta móvil más popular del mundo. Bootstrap es el marco de trabajo HTML, CSS y JS más popular para desarrollar proyectos receptivos y móviles en la web.

Dos mil millones de personas, el 51% de la población mundial, acceden a Internet solo desde sus teléfonos inteligentes . Para 2025, se espera que ese número aumente al 72,5%. Por lo tanto, si no está diseñando para dispositivos móviles, usted y sus usuarios están en problemas. Es por eso que el diseño de dispositivos móviles primero es una gran estrategia para emplear en todos los productos digitales: sitios web, aplicaciones, software o cualquier otra cosa.

Entremos en:

  • Definición de diseño móvil primero
  • ¿Por qué es importante el diseño de dispositivos móviles primero?
  • La conexión entre el diseño móvil primero y la accesibilidad
  • Mejores prácticas de diseño para dispositivos móviles, más ejemplos

¿Qué es el diseño de dispositivos móviles primero?

El diseño móvil primero es una filosofía de diseño que tiene como objetivo crear mejores experiencias para los usuarios iniciando el proceso de diseño desde la pantalla más pequeña: el móvil. Primero, diseñar y crear prototipos de sus sitios web para dispositivos móviles lo ayuda a garantizar que la experiencia de sus usuarios sea perfecta en cualquier dispositivo.

Por ejemplo, si un diseñador de dispositivos móviles primero se sienta a crear un prototipo o esbozar un diseño de sitio web, no comenzaría a esbozar un diseño de escritorio. En cambio, esbozarían cómo se vería en el móvil y luego pasarían a pantallas cada vez más grandes.

El concepto de diseño de dispositivos móviles primero se destacó por primera vez en 2010 cuando Eric Schmidt, entonces director ejecutivo de Google, anunció en una conferencia que la empresa se centraría más en los usuarios de dispositivos móviles en sus prácticas de diseño.

El dijo:

“Lo que es realmente importante en este momento es lograr la arquitectura móvil correcta. En última instancia, los dispositivos móviles serán la forma en que proporcione la mayoría de sus servicios. Como me gusta decirlo, la respuesta siempre debe ser móvil primero. Siempre debes poner tu mejor equipo y tu mejor aplicación en tu aplicación móvil ".

El razonamiento detrás de esto es simple: el diseño móvil es más limitado. Después de todo, está diseñando para una pantalla más pequeña y solo puede colocar una cantidad determinada de elementos en ella. Eso significa que usted elige solo lo más importante, lo que sus usuarios más necesitan, mientras ignora todo lo demás.

A medida que amplía su diseño, puede proporcionarles otros elementos, pero sabe exactamente lo que necesita poner en primer plano.

¿Por qué es importante el diseño de dispositivos móviles primero?

Es una cuestión de números: se proyecta que habrá más de 3.500 millones de usuarios móviles en 2020, según Statista . Eso significa que la mayoría de las personas utilizan sus teléfonos para encontrar el contenido que necesitan. Existe una gran necesidad de sitios web optimizados para dispositivos móviles, por lo que es su trabajo proporcionarlos a sus usuarios.

Y un buen consejo si está atento al tráfico: el algoritmo de Google favorece los sitios web optimizados para dispositivos móviles.

De Google :

“Obtener respuestas buenas y relevantes cuando realiza una búsqueda no debería depender del dispositivo que esté utilizando. Debería obtener la mejor respuesta posible, ya sea que esté en un teléfono, computadora de escritorio o tableta. […] Empezamos a utilizar la compatibilidad con dispositivos móviles como una señal de clasificación en las búsquedas móviles. […] Comenzaremos a implementar una actualización de los resultados de búsqueda para dispositivos móviles que aumenta el efecto de la señal de clasificación para ayudar a nuestros usuarios a encontrar aún más páginas que sean relevantes y optimizadas para dispositivos móviles ".

Eso significa que al proporcionar una buena experiencia de usuario en dispositivos móviles, aumenta su visibilidad, sin mencionar potencialmente sus tasas de conversión.

Y si hablamos de experiencia, el diseño de dispositivos móviles ofrece una gran cantidad de oportunidades de accesibilidad. Vamos a discutir.

La conexión entre el diseño móvil primero y la accesibilidad

A continuación, se muestran algunas formas en las que el diseño móvil primero y el diseño accesible se superponen:

  • Compatible con pantallas pequeñas. El diseño de dispositivos móviles primero lo impulsa a hacer que sus productos digitales sean más legibles en pantallas más pequeñas y, por lo tanto, más accesibles para las personas que podrían tener dificultades para ver. Y cuando sus diseños ayuden a personas con visión limitada, también ayudarán a todos los demás. Esto es clásico, "La marea creciente eleva todos los barcos".
  • Jerarquía de información. Como veremos más adelante, los dispositivos móviles primero significan contenido primero. Eso significa, poner sus activos de contenido más importantes (es decir, los que quieren sus usuarios) tan pronto como sea posible en su página. Esto también hace que su contenido sea accesible para cualquier persona con discapacidades cognitivas.

Tres consejos para un buen diseño de dispositivos móviles

Consejo # 1: Primero los dispositivos móviles = Primero el contenido

Cuando se trata del diseño de dispositivos móviles primero, debe recordar una cosa: el contenido es clave.

Debe brindarles a sus usuarios todo el contenido que buscan, y solo eso. Cualquier otra cosa podría desordenar y distraer la experiencia de sus usuarios.

Después de todo, diseñar para dispositivos móviles conlleva una gran limitación en el tamaño de la pantalla. Eso significa que debe echar un vistazo a todo su contenido y presentarlo en una jerarquía visual dependiendo de la importancia que tenga para su usuario.

Solo entonces podrás encajar los elementos más importantes.

Echemos un vistazo a un ejemplo del sitio web móvil de Chicago Tribune, uno de los primeros periódicos en implementar el diseño de dispositivos móviles primero. 

¿Qué notas sobre este sitio web? Unas pocas cosas:

  • El nombre del periódico en la parte superior. Esto es clave en la jerarquía visual. Permite a los usuarios saber dónde se encuentran y los orienta hacia el sitio web y el contenido del Chicago Tribune. El logotipo y el nombre de su marca probablemente siempre irán encima de cualquier diseño móvil que cree.
  • Los usuarios ven las noticias de inmediato. The Tribune apuesta por el contenido primero. La mayoría de los usuarios no visitan su sitio web para consultar la página de información o la política de privacidad. Quieren leer las noticias, así que el periódico se las da.
  • Botones de navegación de fácil acceso. El sitio web de Tribune almacena cualquier contenido extraño (o menos importante) en el menú de hamburguesas en la parte superior. De esa manera, si hay algo que el usuario desea ver que no se ofrece de inmediato, puede encontrarlo fácilmente allí. Hay una advertencia a esto, pero profundizaremos más en esto en el siguiente consejo.

En última instancia, este es un gran ejemplo de cómo conocer la jerarquía visual de su sitio web y usarla para crear un excelente diseño para dispositivos móviles.

Consejo # 2: facilite la navegación

Condense sus elementos secundarios en botones de navegación de fácil acceso. Un método probado y verdadero para hacer esto es usar un menú de hamburguesas.

Los menús de hamburguesa son formas reconocibles para que su usuario obtenga acceso a elementos secundarios. Si aún no tiene uno en la página, es probable que sus usuarios sepan que deben ir al menú de hamburguesas para encontrar lo que están buscando.

Sin embargo, esto viene con una trampa: baja participación.

Según un estudio de la firma de investigación de diseño de usuarios Nielsen / Norman Group, los botones de navegación ocultos, como los menús de hamburguesa, reducen la visibilidad del contenido en un 21%.

No solo eso, sino que también aumenta el tiempo que se tarda en utilizar la navegación en un promedio de dos segundos.

Desafortunadamente, ofrecer todos los enlaces posibles a la vez es inviable. Afortunadamente, existe una manera de obtener lo mejor de ambos mundos.

Joe Toscano, consultor de diseño de experiencias, recomienda utilizar la navegación combinada.

Toscano escribe,

“La navegación combinada permite al usuario ver las opciones que más necesita y hace que el resto sea accesible en un menú de hamburguesas o algo similar. […] El contenido del sitio está tan bien diseñado que no necesito botones de navegación. Puedo desplazarme por la página y llegar a donde quiero con mucha facilidad. 

Un gran ejemplo proviene de la página móvil de Apple donde, en lugar de implementar un menú de hamburguesas que oculta las opciones, Apple utiliza la navegación combinada para presentar los enlaces más importantes ("Comprar" y TV ") como botones".

Si no puede encontrar lo que está buscando, siempre puede ir al botón de navegación en la parte superior para ver más opciones.

Consejo # 3: BESO (Mantenlo simple, estúpido)

Un buen diseño móvil es simple.

Nunca querrá sobrecargar a sus usuarios con elementos superfluos como anuncios, ventanas emergentes y otro contenido que no quieren ver, pero especialmente no en dispositivos móviles. Limite su espacio visual limitado a incluir solo las cosas para las que están en la página.

Un buen ejemplo de esto proviene del sitio web de Ramit Sethi, IWillTeachYouToBeRich.com. En las publicaciones de su blog, los lectores ocasionalmente recibirán llamadas a la acción en contexto como esta:

El cuadro amarillo incluye una llamada a la acción clara que tiene sentido con el resto del artículo. También es discreto y agrega aún más valor para el usuario.

Ten en cuenta al usuario

Al final, lo más importante que debe recordar al abordar el diseño de dispositivos móviles primero es que lo está haciendo para su usuario, y solo para su usuario.

Si no agrega valor a su experiencia, probablemente pueda dejarlo en el piso de la sala de despiece.

Gustavo Guardado Roa

Te ofrecezco desarrollar tu proyecto web de forma profesional.
Tengo a tu disposición diversas opciones atractivas.

 

Publicar un comentario

Nota: Los Campos marcados con un * son obligatorios.

Nombre:

Apellidos:

E-mail:

Comentario:

"Asegurate de colocar la dirección de tu correo electrónico, de lo contrario, no podremos evacuar tus preguntas, consultas o saber quién comenta"

blank space




Bueno, te preguntarás ¿Quién es la persona que te brinda estos consejos técnicos?, pues es quien te ha estado enviando contenidos de SEO, SEM, SMO, Web and Graphic Design. Sí, esta es mi foto y mi nombre es Gustavo Guardado Roa y soy tu anfitrión en el recorrido de este sitio en la web, mi idea es asistirte en el proceso de hacer tu página web y del como tener un ingreso con el buen uso del marketing en la internet y las mejores aplicaciones.

gustavo guardado roa
Gustavo Guardado Roa
Consultor Marketing Digital y SEO
Leer mas

posicionamiento web en costa rica
chatbot costa rica
Chatbot Costa Rica

posicionamiento web en costa rica
Inscríbete a nuestro Boletín Electrónico
Recibí consejos GRATIS sobre las
últimas noticias de Marketing Digital.

posicionamiento web en costa rica
¿Qué es SEO?

que es seo
Bajar PDF- -> SEO vs PPC

posicionamiento web en costa rica WhatsApp SEO Costa Rica

posicionamiento web en costa rica

seo costo
Presios SEO

Permitínos mejorar tus
resultados de marketing en línea.
Hemos aumentado el tráfico,
los clientes potenciales y
las ventas de compañías en
turismo, bienes raíces, medicina.
Además, para cientos de pequeñas
empresas locales como dentistas,
veterinarios, fontaneros, dermatólogos, etc.

posicionamiento web en costa rica

Posicionamiento internacional a través de SEO

Compartí este
artículo por Whatsapp

posicionamiento web en costa rica

SEO Costa Rica MAPA


posicionamiento web en costa rica

trafico-organico-y-como-aumentarlo-thumbnail.png
Tráfico Orgánico
¿Qué es y cómo aumentarlo?


posicionamiento web en costa rica

¿Cómo optimizar los fragmentos destacados de Google?

¿Cómo optimizar los
fragmentos destacados de Google?


posicionamiento web en costa rica

¿Qué es una etiqueta canónica y por qué importa en SEO?
¿Qué es una etiqueta canónica
y por qué importa en SEO?


posicionamiento web en costa rica

¿Cómo optimizar contenido para fragmentos destacados?

¿Cómo optimizar contenido
para fragmentos destacados?


posicionamiento web en costa rica

Cómo planificar contenido SEO, escribirlo y llevarlo a posición 1

Cómo planificar contenido SEO,
escribirlo y llevarlo a posición 1


posicionamiento web en costa rica

¿Cuál es el propósito de una meta descripción optimizada?

¿Cuál es el propósito de una
meta descripción optimizada?


posicionamiento web en costa rica

¿Cómo ayuda SEO a tu negocio a crecer?
¿Cómo ayuda...

posicionamiento web en costa rica

Como hacer marketing online en tiempos de incertidumbre
¿Como hacer marketing online
en tiempos de incertidumbre?


posicionamiento web en costa rica

¿Cómo funciona el SEO con un presupuesto de PYME?

¿Cómo funciona el SEO
con un presupuesto de PYME?


posicionamiento web en costa rica

¿Cómo desarrollar el mejor presupuesto de marketing SEO?

¿Cómo desarrollar el mejor
presupuesto de marketing SEO?


posicionamiento web en costa rica

Crear estrategia SEO con presupuesto reducido 

Crear estrategia SEO
con presupuesto reducido


posicionamiento web en costa rica

Consejos de publicaciones óptimas para blog SEO

Consejos de publicaciones
óptimas blog SEO


posicionamiento web en costa rica

¿Cómo generar tráfico masivo a su sitio web?

¿Cómo generar tráfico
masivo a su sitio web?


posicionamiento web en costa rica

 Diseño web receptivo y móvil primero

Diseño web receptivo
y móvil primero


posicionamiento web en costa rica

¿Qué es Mobile First Design?

¿Qué es Mobile First Design?


posicionamiento web en costa rica