Mobile First: Diseñando la Web para el futuro

En un momento en el que nadie duda de la eficacia y ventajas que aporta el diseño web responsive, es el momento de plantearse la metodología de trabajo con esta nueva forma de diseñar. ¿Cual es la resolución que manda? ¿Escritorio primero? ¿Resoluciones pequeñas? El mobile first se asienta como la metodología de trabajo lógica en diseño web. Empieza por lo pequeño. Entonces comienza a crecer…

Este es el segundo artículo de la serie “Tendencias de Diseño Web con WordPress”. Puedes leer el resto de los artículos y ver la conferencia aquí.

¿De qué forma mejora trabajar en mobile first frente a la forma tradicional de diseño web?

Tres razones. La primera, tienes una concepción global de todo el conjunto y el contenido desde el comienzo. Puedes (y debes) crear una jerarquía del contenido según la importancia y ubicación (y si debe o no estar presente en las resoluciones menores)

La segunda, mejora el rendimiento en las resoluciones inferiores. Antes teníamos todas las clases CSS que se aplicaban a la versión por defecto (que era la de escritorio) y mediante media queries íbamos sobreescribiendo las reglas de escritorio para los dispositivos móviles. Esto daba lugar a que en tu smartphone se aplicaran las reglas establecidas para el diseño de escritorio y después sobre escribíamos las indicadas para una resolución menor que 600px (por ejemplo)

diseño web futuro

Esto no es nada óptimo. el dispositivo de menor resolución está siendo sobrecargado con más reglas de las necesarias, además de descargar las imágenes o elementos que eran exclusivos para versión escritorio (aunque estos no se aplicasen). Un ejemplo: En versión desktop el diseño tenía una imagen de fondo de 200kb. Cuando la resolución es menor de 600px ya no queremos dicho fondo. Aunque tengamos un display:none sobreescribimos dicha regla con un fondo de color plano, la imagen se sigue descargando.

En mobile first no. Se diseña y trabaja en una web más eficiente. Vamos de menos, de lo esencial a la mayor resolución. Cambiamos en menor que 600px por mayor que 600px. Los que van a tener un diseño web con reglas de CSS sobreescrito son los dispositivos de mayor resolución (presumiendo que su conexión a Internet y procesadores serán mejores)

La tercera: estas diseñando para el futuro. Olvídate de las resoluciones estándar del iphone y del ipad. Diseña según el contenido y establece los saltos y media queries que sean necesarios para una correcta experiencia de usuario con esos contenidos, los menús, las imagenes, los sidebars… ¿Está tu web preparada para mostrarse en un frigorífico? ¿En una luna de coche? ¿En una tostadora? ¿En el futuro modelo de smartphone de apple? Como no conocemos dichas resoluciones, haz ahora un diseño web adaptable y preparado para el futuro, y cuando llegue estarás seguro que todo funciona perfectamente.

Diseño Mobile First en WordPress.

WordPress trabaja con un archivo principal de CSS, que es el style.css y está localizado en el directorio raíz del tema o plantilla que estás utilizando. Hay muchas más opciones. Hay plantillas WordPress que tienen varios css, otras que utilizan algún framework tipo Bootstrap y tienen hojas de estilos según para qué cosas.

Independientemente de como trabajes y de cómo esté estructurada la plantilla, cuando diseñemos en WordPress tendremos que trabajar el archivo style.css. Ahí es donde aparece la magia. Pasamos de diseñar con las max-width (menor que o máximo ancho) a min-width (mayor que o mínimo ancho).

código diseño mobile first

De forma muy esquemática, un diseño web con WordPress y mobile first tendrá una estructura parecida a esta:

/* Artículos en versión movil, con un padding superior moderado */

article {
	padding-top: 30px;
	}

/* Los mismos artículos en una versión movil o tablet, con un padding superior amplio */

@media (min-width: 600px) {
	article {
		padding-top: 50px;
	}
}

/* Los mismos artículos en una versión escritorio, con un padding superior muy generoso */

@media (min-width: 1200px) {
	article {
		padding-top: 90px;
	}
}

Internet Explorer y diseño responsive.

Siento decírtelo, pero las versiones antiguas de Internet Explorer no tienen soporte para media queries. Vaya, que no leen todo lo que pongas dentro de las mismas. Esto con el diseño web responsive antes del mobile first era un problema menor, pues, como bien sabes la primera resolución que definimos era la de escritorio. Aunque también teníamos que solucionar la compatibilidad con HTML5

Ahora la cosa cambia, con mobile first recuerda que trabajamos desde el principio con el diseño de menor resolución, y las media queries van haciendo “crecer” o “engordar” nuestro diseño, por decirlo de una forma rápida. Por tanto, ¿adivinas que mostrará Internet Explorer 7 u 8 de nuestro diseño? Correcto, la versión de menor resolución, o la móvil.

Tenemos dos formas de solucionarlo. La primera de ellas consiste en crear un condicional que cargue una hoja de estilos complementarias (podemos llamarla ie.css) que sólo aplicará dichos estilos cuando el navegador sea Internet Explorer en versión inferior a 9.

Esto está bien, pero es algo laborioso, pues debes copiar todos aquellos elementos que están en tus mediaquieries, seleccionar aquellos que quieres que se apliquen y testar con IE. Si editas tu diseño web o cambias alguna línea sobre las clases que afectan a la versión escritorio, sabes que debes cambiar también el archivo ie.css. Un poco laborioso, ¿no crees?

Internet explorer responsive

Segunda opción, y la recomendada.Trabajar igualmente con un condicional que carga un script que interpreta estas clases dentro del media queries o breakpoints haciéndolas entendibles para Internet Explorer en sus versiones antiguas. Lo insertamos en la cabecera de nuestro diseño web, o en el archivo header.php de la plantillas WordPress que estemos creando y listo.

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/respond.min.js" type="text/javascript"></script>
<![endif]-->

La librería en cuestión se llama respond.js. Ahí alguna que otra alternativa para realizar la misma tarea. Esta es la que nosotros solemos utilizar cuando queremos dar soporte a los navegadores antiguos para un diseño web mobile first. De hecho está en la mayoría de temas WordPress con los que trabajamos.

Conclusiones: Mobile First, más alto, más rápido, más fuerte…

Es una evolución lógica. Después de descubrir y experimentar con el diseño web responsive, tocaba reflexionar y repensar la forma y procesos de trabajo, como diseñamos y como mejorar dichos procesos. De cara al usuario final, “solo” supondrá unas décimas de velocidad (en algunos casos segundos) en la carga de la web. Pero esto es mejorar la experiencia de usuario: hacer llegar antes el contenido que cubra sus necesidades de los visitantes.

Pero sin duda, la innovación que trae el mobile first a los diseñadores y maquetadores web radica en los procesos de trabajo e ideación, donde el contenido pasa a tener un lugar prioritario, y donde al diseñar, primero para la resolución mínima viable, se nos obliga a hacer un esfuerzo de categorizar y ordenar la información según qué importancia tenga. Fundamental.

En su nueva versión, frameworks como Bootstrap ya ha incorporado esta metodología. Foundation también trabaja con esta nueva forma de entender el diseño web responsive. Parece claro hacia donde sopla el viento… Y tu, ¿trabajas con Mobile First?

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

16 Comentarios en “Mobile First: Diseñando la Web para el futuro

  1. Jose Joaquín Rodríguez

    Hola,

    Escuché tu charla en la WordCamp sobre esto, y me pareció super interesante. Tenemos datos en algunos sectores donde seguramente en 1 año, las visitas desde móviles superen a cualquier otro dispositivo (redes sociales como Facebook o Tuenti tienen desde hace años, más tráfico desde móvil que sobremesa).

    ¿Te quería preguntar, si conoces algún tema que esté maquetado con este tipo de iniciativas?

    1. Saludos Jose Joaquín,

      Revisando la cola de comentarios me he percatado que tenía este comentario pendiente. Mil disculpas!!
      Gracias por comentar y asistir a la WordCamp, espero vernos también este año.

      En cuanto a temas maquetados en mobile first, he participado en dos hasta ahora, uno para wordpress.com y otro para los usuarios con hosting propio (wordpress.org). Son Carmela y Neilmink.

      Un saludo y gracias por comentar 🙂

  2. dashaft

    Tu artículo me ha gustado pero no lo comparto del todo. Es cierto lo que dices de que óptimamente para los recursos que necesita una web si que es mejor hacer una ejercicio de primero lo que menos y luego lo que más, pero creo que es hacer el trabajo dos veces, si hablamos de diseñar creo que es importante primero la aplicación más visual y compleja a la que te tengas que enfrentar y luego pensar las más livianas. Ahora, si nos centramos sólo en maquetar si que encuentro bien que de entrada pensemos en lo más básico y luego hacia más para optimizar los recursos. Eso si, tu web en una nevera… ahí te has pasado XDXD de aquí a que eso sea el pan de cada día creo que usaremos HTML7 y habremos rediseñado nuestra web como unas 4 veces jajjaajajajaj
    Te adjunto la antítesis de tu artículo de mi blog

    Saludos!

    1. Saludos Xavi.

      Gracias por comentar!
      Antes de nada y por alusión el tema del frigorífico con acceso a Internet: Está puesto efectivamente como ejemplo tremendista…pero siento desilusionarte! Samsung y LG lo llevan ya varios años comercializando, así que bienvenido al futuro! (o más bien al presente). Te dejo los enlaces por si le quieres dar un vistazo. Eso sí, no te recomiendo que los compres, por ese precio, mejor un frigorífico normal y le pegas una tablet en la puerta 🙂

      http://www.lg.com/us/refrigerators/lg-LFX31995ST-french-3-door-refrigerator

      En cuanto a lo importante, mobile first, el problema es que seguimos pensando, como indicas en el comentario, que es hacer el trabajo dos veces. Ese es el error. Pensamos que hay que hacer una versión para x dispositivo y otra para x dispositivo con pantalla más grande. No funciona así. El único ejercicio que hay que hacer es diseñar con independencia del dispositivo. Olvídate de ellos.

      Nos debe dar igual desde donde acceda el usurio. Los límites ya no están tan claros. Es imposible saber por resolución cuando el usurio está en movil o en el escritorio. Mira este ejemplo:

      -Ordenador de sobremesa con pantalla de 15 pulgadas tipo administración pública, resolución: 1.024 x 780 píxeles
      -Iphone 5S en horizontal 1.136 x 640 píxeles

      Vaya, el mundo al revés. ¿Que hacemos aquí?

      Diseñar en torno al contenido. No queda otra. E ir escalando dicho diseño a medida que vamos creciendo. ¿Y por qué empezar desde la más pequeña? Muy facil. En este espectro tán difuso de resoluciones, la tendencia es que van a desaparecer como puedes ver, las resoluciones intermedias que marcan que estemos en un dispositivo u otro. Es más también desaparece el límite máximo (ancho del nuevo Ipad con pantalla retina 2.048px, y ni te digo los últimos televisores que ya están en el mercado). ¿Que nos queda para empezar a trabajar?

      Efectivamente, solo un elemento: 1px, la resolución mínima. por debajo no existe nada y por encima ya no tenemos saltos intermedios ni resoluciones máximas. Los saltos los ponemos nosotros. Es cierto que es más trabajo, pero todo es acostumbrarse, una vez lo hagas varias veces le tomas el truco 😉

      Además de esto, los beneficios comentados: mejor interpretación del CSS para navegadores, escalable con menos overwrites, el diseño te obligas a priorizar entre los elementos más importantes y los menos, etc…

      Te dejo varios artículos que son muy buenos sobre el tema. Un saludo y muchas gracias de nuevo por comentar, el debate es interesantísimo y caben en él muchas opiniones!

      http://webdesign.tutsplus.com/articles/a-readability-first-approach-to-media-queries-and-layout–cms-19419
      http://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/

      PD: el antispam me ha marcado tu comentario como spam por el enlace incluido, he tenido que re-crear tu comentario manualmente. Un saludo Xavi, un placer!

  3. Hola Ricardo, el mejor artículo que he visto sobre el tema en español, ¡felicidades! Estoy con mi tercer proyecto “mobile first” y hay que reconocer que es algo más complicado al desarrollar pero las ventajas son potentes e innegables. Me llama la atención lo rápido que se popularizó el diseño responsive, pero no ha pasado igual con el “mobile first”. Supongo que si no se comprueba el peso de la web en desktop y mobile, es fácil pensar que con el responsive ya está todo hecho. También, porque se puede convertir una web normal a responsive con unas pocas mediaquerys, pero para convertirla a “mobile first” hay que rediseñarla por completo.
    Al haberlo aprendido por mi cuenta, y he cometido errores de todos los colores, es cierto que hay que cambiar algo en la forma de pensar para diseñar un layout de esta manera, por esto entiendo que a muchos les dé pereza el cambio. A ver si me decido a compartir todos mis errores, y pongo mi granito para que nos vayamos animando a crear más proyectos de este modo. Un saludo!

    1. Hola Eduardo, un honor viniendo de tí. Muchas gracias!

      Efectivamente pensamos igual. EL responsive caló rápido, y a día de hoy es de obligado cumplimiento. Con mobile first no ha pasado lo mismo. Quizá sea por lo tangible de uno e intangible de otro (si podemos hablar de tangibilidad en la web 🙂 ). Me explico a ver si opinas igual: el responsive es fácilmente comprobable por el usuario final. Presenta una mejora cuya evidencia percibe el usuario desde su dispositivo. Es visual (tangible).

      Mobile First va bajo el capó. Presenta igualmente una mejora evidente (tiempos de carga, menor uso de recursos para procesar el CSS, etc…) pero estos beneficios no son tangibles a ojos de usuario medio. Que opinas? Puede ser esta la causa?

      Pero si es cierto que en cuanto a adaptación de diseños no responsives, es más trabajo hacerlo por mobile first: hay que reescribir prácticamente todo el CSS.

      Muchas gracias por tu comentario Eduardo, se agradece 🙂 Un saludo!

  4. Luis

    Hola Ricardo te tengo una consulta. Si tengo un diseño para mobiles con 4 divs:
    div1
    div2
    div3
    div4
    y al verlo en la versión desktop el div4 tiene que estar antes del div2. ¿Esto debería solucionarlo con Jquery o hay forma de hacerlo solo con CSS?

    1. Hola Luis, gracais por comentar.

      Lo puedes hacer por CSS, usando la propiedad display: table-header-group para el que quieres que vaya arriba en responsive, table-row-group para los del medio y table-footer-group para el último div. En la mediaquerie de desktop, cambias la propiedad display y lo reordenas a tu gusto. Se mostrará los header arriba, row en medio y footer abajo. Es genial.

      Necesitarás un contenedor para agrupar esos 4 divs con display: table; para que sirva 🙂

      Un saludo y gracias

  5. Exequiel

    Ricardo, muy buen artículo. Creo que la filosofía de mobile first es la mejor forma de hacer sitios responsive. A mi me suele pasar que diseño algo para las resoluciones mayores y cuando lo quiero hacer responsive tengo que hacer malabares con el contenido porque no había pensado bien como iba a quedar en el movil, por eso creo que aparte de hacer los media queries al revés también creo que es importante empezar desde el diseño de los dispositivos móviles porque nos obligan a pensar en como queremos mostrar el contenido.

    Un saludo

    PD: En la URL tienen puesto “mobile firts”, quizás les convenga cambiarlo por el tema del SEO.

    1. Saludos Exequiel, totalmente correcto lo que comentas, más que un procedimiento técnico es una nueva metodología de diseño 🙂
      Es cierto lo de la url, pero para cuando me dí cuenta ya teníamos varios enlaces externos a este artículo y no queremos perderlos jeje

  6. Raúl

    Hola Ricardo, muy buen artículo sobre todo para los que estamos empezando.

    Me surge una duda con “Mobile first”, el concepto CREO que lo tengo claro pero… Imagina que empiezo el desarrollo de una web desde cero, ya sea en .Net o PHP y decido empezar el diseño (partiendo de PSDs) desde un dispositivo móvil hasta PC mediante las medias queries. En el caso de Responsive Design voy ocultando los elementos que no quiero que aparezcan, que como dices aquí van sobreescribiendo y aunque no se muestren los elementos los carga, pero en el caso de Mobile first ¿como hago para ir mostrando los nuevos elementos que van apareciendo a medida que aumenta la resolución del dispositivo?

    Disculpa mi ignorancia, puede que esté preguntando una tontería.

    Muchas gracias de antemano

    Un saludo

    1. Saludos Raúl, gracias por comentar.

      Lo que cambia en CSS con mobile first es la forma con la que se construyen las media queries, y pasamos de usar los max-width (resolución menor que..) a los min-width (resolución mayor que…)

      Un saludo!

  7. Jaime

    Hola Ricardo, mucho se habla del CSS pero ¿y que hay sobre el HTML, osea el body de la plantilla? Mira el ejemplo: si yo tengo un slider que se muestra en pantallas anchas basta con que le ponga un display:none usando los medias queries y un tamaño menor a 400px por ejemplo y lo oculto en moviles, pero entiendo que a pesar que no se muestra el slider igual afecta la carga.

    Entonces ¿como hago para poner una imagen primero en el HTML para moviles y el slider luego para monitores anchos sin usar el display:none? ¿existe alguna condición o regla CSS para no mostrar algo en pantallas chicas que no se display:none o visibilty:hidden?

    Gracias por tu respuesta!

    1. Hola Jaime, gracias por comentar.

      Efectivamente, con display: none; y similares logramos ocultar elementos, pero aunque no se muestren, se siguen cargando y afecta a la velocidad y carga de la web.

      Si queremos modificar el HTML, o tenemos dos versiones distintas o empezamos a trabajar con nuevas etiquetas donde es el navegador quien selecciona el mejor contenido dependiendo de la resolución del cliente. Un ejemplo lo puedes ver en esta presentación sobre la carga de imágenes en responsive y según que resolución.

      Espero que te sirva!
      Saludos 🙂

      1. Jaime

        Gracias Ricardo por responder, pero para ser mas puntual, lo que queria saber es como ocultar DIVs que aparecen en resoluciones grandes en las resoluciones pequeñas y que además no afecte la velocidad de carga. ¿Existe algún metodo?

        Lei que se puede hacer una web para movil y otra para desktop pero ya está comprobado que no es bueno para el SEO, por eso nació la web responsive.

        1. Exacto Jaime,

          ahora mismo no hay una solución eficiente para cambiar un div según que resolución.
          Hacer dos versiones de la misma web creo que solo está justificado en casos muy concretos. Por lo que te queda ocultarlo o buscar alguna solución más compleja, por JS o similar y que puedas cambiar dicho HTML según la resolución del cliente. Pero ahora mismo no hay una solución accesible para esto.

          Un saludo!

Deja un comentario

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