Cómo adoptar el enfoque correcto para el diseño web receptivo

Hice una encuesta en Twitter hace un tiempo y los resultados me sorprendieron.

No solo esperaba que los resultados fueran al revés, pensé que los dispositivos móviles primero obtendrían al menos el 80% de los votos .

Encuesta de Twitter que muestra que el 61,5% de las personas escribe primero en el escritorio, con 2.212 votos

En las respuestas, algunas personas explicaron por qué escriben primero en el escritorio. Los temas generales de esas razones:

  • Eso es todo lo que proporcionó el diseñador.
  • Así funcionaba su equipo
  • Aprendieron CSS escribiéndolo solo en el escritorio, por lo que esto parecía la progresión natural
  • Los clientes quieren ver la versión de escritorio

¿Qué es el móvil primero?

Mobile-first es cuando comenzamos escribiendo nuestro CSS para dispositivos móviles y luego usamos consultas de medios para agregar estilo para tamaños de pantalla más grandes .

En general, eso significa que las consultas de medios utilizan un min-width. Estamos usando consultas de medios para agregar o sobrescribir estilos para un punto de interrupción establecido y más grande, como este ejemplo:

.sales-points { padding: 3em 0; } @media (min-width: 600px) { .sales-points { display: flex; justify-content: space-between; } }

En ese ejemplo, para las pantallas pequeñas, simplemente aplicamos algo de relleno. Suponiendo que esta sección del sitio tiene elementos secundarios, convertimos esos elementos secundarios en columnas con un ancho mínimo de 600px.

Entonces, cuando la ventana gráfica sea 600pxmás grande, tendremos columnas. El resto del tiempo, las cosas se acumulan.

Como probablemente habrá adivinado, un enfoque de escritorio primero es al revés . Nuestro CSS está escrito para pantallas grandes y luego utilizamos consultas de medios para realizar cambios en tamaños más pequeños, generalmente utilizando max-widthconsultas de medios.

Por qué mobile-first es más fácil

Los sitios web responden naturalmente incluso antes de que escribamos una sola línea de CSS .

Si elimina el CSS de cualquier página de Internet, incluso de algún sitio creado para un tamaño de pantalla muy específico en 2001, ¡ahora tiene un sitio web receptivo y compatible con dispositivos móviles!

Los estilos de escritorio tienden a ser más complejos

Cuando diseñamos para el escritorio primero, agregamos anchos, columnas y movemos cosas. Estamos agregando complejidad. Estamos haciendo esto por una buena razón, ya que tenemos más bienes raíces con los que trabajar.

No solo queremos aprovechar eso para que las cosas se vean más interesantes, sino que si no hiciéramos las cosas más complejas en pantallas más grandes, las cosas no se verían muy bien . Incluso si tiene un sitio web muy simple, no desea que el texto se extienda de un lado a otro.

Mire cómo se vería un artículo aquí en FCC News si el texto fuera de un lado a otro.

Todos podemos estar de acuerdo en que nunca leerías algo así, ¿no? Literalmente tengo que mover mi cabeza un poco de izquierda a derecha para leer una línea completa en mi pantalla. Es terrible.

Los diseños móviles tienden a ser muy simples, por lo que es muy fácil comenzar allí

Para todas las personas que me respondieron diciendo que sus clientes preferían ver la versión de escritorio, o que sus diseñadores solo les dieron composiciones de escritorio, yo diría que aún es más fácil comenzar con los dispositivos móviles.

Para muchos sitios, una vez que haya configurado su tipografía, estará al 70% del camino. Cosas como:

  • font-family
  • font-size
  • font-weight
  • margin (en sus elementos de texto)

A continuación, puede ir y hacer algunos estilos de diseño muy básicos en sus elementos de diseño, como:

  • padding
  • background-color
  • color
  • y tal vez algunos ajustes con margin

En esa etapa, las cosas se verán bastante bien desde una perspectiva de diseño en pantallas pequeñas . Eso significa que, sin escribir una sola consulta de medios, tiene un sitio completamente funcional en el móvil.

Si se siente particularmente vago, o tiene un sitio muy simple, puede pegar un max-widthen su contenedor y terminar con todo y ¡ni siquiera tener que preocuparse por una consulta de medios en absoluto!

Sin embargo, la mayoría de las veces, queremos mejorar el juego en tamaños de pantalla más grandes, y es por eso que siento que el móvil primero es el camino a seguir. Es la progresión natural hacia arriba.

Comparación de dispositivos móviles primero con escritorio primero

A continuación se muestra un CodePen que tiene un diseño muy simple elaborado utilizando un enfoque de escritorio primero y móvil primero.

Si abre el lápiz y juega con el tamaño de la ventana gráfica, verá que el resultado final es exactamente el mismo.

Pero si el resultado final con cualquiera de los enfoques es exactamente el mismo, ¿por qué importa qué enfoque adopte?

El escritorio primero puede generar código redundante

En el lápiz anterior, el enfoque de escritorio primero utiliza el siguiente código:

/* desktop-first */ .desktop-first .sales-points { display: flex; justify-content: space-between; } .desktop-first .sales-point { width: 30%; } @media (max-width: 600px) { .desktop-first .sales-points { display: block; } .desktop-first .sales-point { width: 100%; } }

Como puede ver en CodePen, funciona perfectamente bien, pero hay un montón de código aquí que se vuelve redundante cuando usamos un enfoque de escritorio primero.

Observe cómo primero declaramos un display: flexsolo para devolverlo al valor predeterminado display: blocken la consulta de medios. Además, para nuestras columnas, cambiamos el widthy luego, una vez más, volvemos al valor predeterminado más adelante.

El enfoque de dispositivos móviles primero tiene un código mucho menos redundante. Debido a que no hubo estilo para el texto o los colores de fondo, ¡no hay estilo excepto para lo que necesito en mis consultas de medios!

/* mobile-first */ @media (min-width: 600px) { .mobile-first .sales-points { display: flex; justify-content: space-between; } .mobile-first .sales-point { width: 30%; } }

Volver a los valores predeterminados debería ser una señal de alerta

Me doy cuenta de que algunas cosas son más complejas que esto (y pronto llegaremos allí), pero la mayor parte de lo que me preocupa aquí es desde una perspectiva de diseño.

For the layout I created above, I didn't write one line of code for the mobile-first approach. I just relied on how the document was flowing from the start. In the desktop-first approach, I have to tackle both because I need to reset things back to their default state.

The fact that I'm resetting things like display and width to their default state, to me, is a red flag. It means I'm writing something that could have been avoided. That means I'm wasting my time.

Some things aren't so simple

Some components look completely different at different screen sizes, such as navigation menus. Other times, you have styles on mobile that need to be overwritten for desktop that end up being redundant.

In the below video, I run into that exact issue where I needed to move an element using position: absolute for smaller screens. Rather than have to position it, then reset the position back to the default at larger screen sizes, it seemed like a logical choice for a max-width media query.

If you hit play on the video, it should start right where I tackle this issue if you'd like to see it in action (17:41 just in case it doesn't start at the right spot).

So sometimes there are exceptions, and there is nothing wrong with that. My point here isn't that we should be robots who do things one way. There are times when different approaches make sense, but I do like to believe having a general rule of thumb helps.

So next time you are designing a site, even if you only have a desktop mock-up to go by, try starting mobile first. It doesn't take any more work at all, and in the long run I bet it'll save you a ton of redundant code. It's pretty simple too!

  1. Start with the typography
  2. Add in colors and padding
  3. Put anything layout related into a min-width media query

When you're done with your layout, not only will you have knocked out that desktop version that your client is dying to see, but you'll be 90% of the way there in your mobile one as well, without having even really thought about it.

Do you struggle with making things responsive?

Making websites responsive is a topic that a lot of people tell me they struggle with. To help, I've created a free course called Conquering Responsive Layouts. It's put together as a 21-day challenge in which we'll cover a topic a week, with each one adding onto what we already learned.

I realize that we're all busy with kids, family, work, and more, so each day will only be 10-30 minutes worth of lessons, with 2-3 lessons a week. In between you'll have small challenges to complete, working your way up to being comfortable making responsive layouts.

The course is launching on the 13th of April and because it's a 21-day course, the doors close on that day. Click here to sign up to start conquering responsive layouts!

Si está leyendo esto después del hecho, puede registrarse para la próxima vez que se lance, pero no se volverá a abrir hasta dentro de unos meses.