Diseño, Tutoriales | 1 de abril de 2015

Mobile first vs Desktop first

Cuando el mundo la web comenzó a masificarse, todos los sitios web se diseñaban directa y únicamente para  ser vistos desde computadoras ya que ese era el único medio viable para acceder a internet.

En ese entonces las pantallas eran de 800 x 600 o de 1024 x 768 pixeles, pero con el paso del tiempo y los avances de la tecnología, nuevos dispositivos con acceso a internet fueron apareciendo y eventualmente introdujeron un sinfín de tamaños de pantalla diferentes.

Como respuesta a este auge de la tecnología móvil, la primera reacción de la industria fue la creación de versiones móviles de cada sitio, pero ello traía consigo una importante complicación, ya no era solo un sitio, sino 2 los que había que mantener.

Para hacer frente a este cambio de una forma más efectiva es que nace el responsive web design, que es un enfoque aplicado al diseño web que permite que un mismo sitio web se adapte al tamaño de la ventana desde donde se está mostrando, y así se pueda ver perfectamente bien desde cualquier dispositivo.

Inicialmente el flujo de trabajo para hacer sitios web responsive era crear los estilos CSS necesarios para que el sitio funcionara perfectamente bien en un monitor de escritorio, y luego añadir los estilos que hicieran falta para hacerlo adaptarse a pantallas más pequeñas.

Con este enfoque los diseñadores web comenzaron a notar que cuando los sitios eran complejos en pantallas grandes a veces se hacía difícil y tedioso hacerlos adaptables a pantallas más pequeñas. Y debido a que las versiones móviles son habitualmente más simples que las versiones de escritorio, varios diseñadores comenzaron a recomendar que el proceso comenzara con el desarrollo de la versión móvil y hacer que el diseño se adapte a medida que la pantalla es más grande.

Mobile first

El mobile first (o versión móvil primero) es el enfoque en el diseño y desarrollo de sitios web orientado a comenzar con la información y características más importantes para las versiones móviles, para luego añadir más a medida que el la pantalla se hace más grande en tablets, laptops y escritorio.

Veamos un ejemplo real:

See the Pen GgLNLm by Francisco Aguilera G. (@FranciscoAMK) on CodePen.9272

En este ejemplo creamos un menú usando la lógica del mobile first, en donde creamos primero la versión móvil y en el caso de que la página se muestre en una ventana de ancho igual o superior a los 768 pixeles, entonces se usará la versión de escritorio.

Prueba achicando la ventana para ver el efecto o pincha el link que dice “Edit on Codepen” para abrirlo en otra pestaña aparte.

Desktop first

El desktop first (escritorio primero), es como se realizaros los primeros sitios web responsive, en donde primero se desarrolla la versión de escritorio, y luego, ésta se adapta para mostrar el sitio web correctamente en pantallas más pequeñas.

Observemos el mismo ejemplo aplicando el enfoque del desktop first:

See the Pen Desktop first by Francisco Aguilera G. (@FranciscoAMK) on CodePen.9272

Puedes ver como en este caso primero se crean los estilos que aplican a pantallas grandes y solo cuando la ventana es menor a los 768 pixeles, el diseño se adapta.

¿Notaste que la diferencia principal en ambos ejemplos está en el media query?

Cuando queremos aplicar estilos a una pantallas que es igual o más grande que una medida en particular, por ejemplo 768 pixeles, usamos @media (min-width: 768px), pero si queremos aplicar estilos cuando la pantalla es igual o más pequeña que esa medida, entonces usamos @media (max-width: 768px).

¿Cuál es el mejor enfoque?

Realmente no hay un mejor o un peor enfoque, el mobile first y el desktop first son igual de funcionales, por lo que dejaría la elección de una o la otra forma de trabajar a tu propia audiencia.

Trabajar con mobile first, significa que el sitio web está originalmente optimizado para los dispositivos móviles y que la versión de escritorio es solo una adaptación de la versión móvil y lo mismo se aplica, aunque a la inversa, cuando pensamos en desktop first. Por eso, creo que lo mejor para decidir es considerar desde qué dispositivos tu sitio es visto.

Revisa tus analytics y descubre cuáles son las circunstancias en las cuales la gente ve tu sitio, y si aún no tienes analytics, puedes ponerte en los pies de tus usuarios y tratar de proyectar en qué condiciones la gente llegará.

Mobile first vs desktop  firstEn mi caso, cerca de un 85% de las visitas del último mes llegaron desde computadoras, por lo tanto, la versión que mayor impacto tendrá en mi público es la de escritorio, por eso comienzo mi diseño con esta versión y la adapto para dispositivos móviles.

El mobile first se ha vuelto una tendencia últimamente, y como toda tendencia, hay gente que lo ama y gente que lo odia, por eso me gustaría invitarte a no caer en ninguno de estos grupos y tratar de usarlo cuando más te convenga, tratando siempre, de validar tu decisión sobre datos reales, como los de analytics.

Un enfoque más adaptable

Ya sea que decidas trabajar con el enfoque de escritorio o móvil primero, lo mejor que puedo recomendarte es pensar de manera adaptable desde el comienzo.

Con esto me refiero a que si, por ejemplo, vas a tener el contenido del sitio dentro de una caja de 1200 pixeles de ancho en pantallas grandes, en lugar de asignarle esta medida específica, deberías definirla de una forma que sea adaptable independientemente del tamaño de la pantalla. Algo más o menos así:

Con esto te aseguras de que el contenedor se mostrará en la medida que tú quieres al presentarse en pantallas grandes, pero se ajustará al 90% del ancho en pantallas más pequeñas.

De este modo hemos creado un contenedor responsive sin siquiera haber creado un media query.

Ya tendremos tiempo de profundizar en este tema en otro tutorial, pero por ahora creo que ya captaste la idea 😉


Contenidos como el que hemos visto hoy y muchos más van a formar parte de la versión 2.0 de mi curso Diseño web: HTML y CSS desde cero, inscríbete en la lista de lanzamiento para enviarte un par de clases de adelanto (cuando estén listas) y darte un descuento el día del lanzamiento.

Un abrazo,
@FranciscoAMK

También te podría interesar:

El tras bambalinas de un rediseño

Esta semana el nuevo diseño de este sitio por fin ha visto la luz, y eso me tiene tremendamente entusiasmado. Ha sido un proceso casi completamente público (me he guardado solo las partes aburridas), y puedes ver a continuación una compilación de los artículos y tutoriales resultantes de este proceso: Cómo crear una cabecera fija […]

Seguir leyendo...

Diseñando mi currículum vitae

En este segundo episodio de «Diseñando con Francisco» quiero compartir contigo el proceso de diseño de mi propio currículum vitae. Espero que de alguna forma esto te resulte útil y sea una invitación a diseñar tu propio currículum vitae. Un abrazo, @FranciscoAMK

Seguir leyendo...

Mejorando la experiencia de administración

Cuando desarrollamos un sitio web para un cliente, es muy probable que quien se encargue de actualizar y publicar contenidos sea él mismo. Si este es su primer sitio (o al menos el primero autoadministrable) de seguro no ha tenido experiencias previas utilizando WordPress u otro CMS, por lo tanto como profesionales que somos, lo menos […]

Seguir leyendo...

Hay una opinión

  1. Hola Francisco, interesante el artículo introductorio. Me nacen las ganas de aportar que el tema de Mobile First no sólo trata de adaptaciones técnicas – y aunque lo mencionas, a mi parecer no queda muy claro – se trata también de adaptación en la mentalidad del diseñador. Es decir, antes nos enfocabamos desde el inicio en pantallas grandes, en las que ibamos poniendo cosas para llenar espacios, porque podíamos hacerlo, muchas veces sin verdadera utilidad dentro del diseño.

    Enfocarse en el mobile first, es adaptarse a lo que tenemos disponible, al enfocarse en dispositivos pequeños, nuesto raciocinio por si solo, empezará a darse cuenta de que es lo más importante, de que debe ir primero y que no es tan necesario que vaya. Y esto se va adaptando a medida que disponemos de más recursos, tamaño de dispositivo, conexión de internet, tiempo del usuario, entre otros. Saludos!

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 7.787 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.