Mobile first y patrones de diseño web

Mobile first y patrones de diseño web

¿Conoces mobile first y los patrones de maquetación más utilizados para el responsive web design?

Mobile first o mobile only cómo también se le conoce es una de las prácticas que utiliza un desarrollador web hoy en día, esta técnica es utilizada desde la llegada de los dispositivos móviles y la gran usabilidad que ofrecen desde entonces. Mobile first o por su nombre en español “primero móvil”es una técnica de responsive web design para crear nuestro sitio web empezando desde el diseño en celulares, esto por la gran demanda de sitios web consultados desde un dispositivo móvil.

Hoy en día un sitio web responsivo ya no es un lujo, ya no representa una opción sino una obligación y más pensando que la mayoría de sitios web son accedidos desde un dispositivo móvil, de lo contrario, nuestro sitio web se verá afectado con visualizaciones y mal posicionamiento SEO.

Comenzar un sitio web desde la vista para dispositivos móviles te ahorrará muchos dolores de cabeza ya que piensas mejor cómo mejorar la visibilidad de los elementos en tu página web cómo enlaces, botones, imágenes, textos, etc. A continuación te platico algunos patrones de diseños que son utilizados con mobile first para diseñar sitio o aplicaciones web de una manera eficiente con su responsive design.

Cómo las tecnologías web o el responsive design los patrones de diseño web también evoluciona tan rápido cómo ellos, estos están establecidos para diferentes dispositivos y tamaños, cualquiera de estos patrones se pueden aplicar de una manera combinada y utilizando flexbox.

Mostly fluid

En este patrón los elementos se van aplicando de manera vertical y ocupando solo un porciento de su ancho en vez del 100% a excepción de la vista en dispositivos móviles.

Layout shifter

En este patrón los elementos en vez de ordenarse en una cierta porción de la pantalla se colocan debajo de cada una y el contenido se desplaza según su ancho.

Colum drop

En este patrón se tienen los elementos de forma vertical pero a la hora de crecer el tamaño del dispositivo va arrojando el contenido y reposicionando en la línea en la que se quiera encontrar.

Cómo estos patrones existen muchos más, puedes conocer más de ellos en: patrones de diseño web adaptables.

Todos estos patrones pueden ser aplicados usando mobile first, espero que esta información te resulte útil y puedas utilizar mobile first con alguno de los patrones de diseño para tu próximo proyecto web, no olvides que todo esto contribuye a las buenas prácticas de responsive web design.

Share this post

Deja un comentario

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