Introducción al diseño web receptivo: pseudoelementos, consultas de medios y más

Hoy en día, su sitio web será visitado por una amplia variedad de dispositivos: computadoras de escritorio con monitores grandes, computadoras portátiles medianas, tabletas, teléfonos inteligentes y más.

Para lograr una experiencia de usuario óptima como ingeniero front-end, su sitio debe ajustar su diseño en respuesta a estos diversos dispositivos (es decir, a sus distintas resoluciones y dimensiones de pantalla). El proceso de responder a la forma del dispositivo del usuario se conoce como (lo adivinó) diseño web receptivo (RWD).

¿Por qué vale la pena dedicar tiempo a estudiar ejemplos de diseño web receptivo y cambiar su enfoque a RWD? Algunos diseñadores web, por ejemplo, hacen que el trabajo de su vida sea garantizar una experiencia de usuario estable en todos los navegadores, a menudo dedicando días enteros a resolver pequeños problemas con Internet Explorer.

Este es un enfoque tonto.

Mashable llamó a 2013 el año del diseño web receptivo. ¿Por qué? Más del 30% de su tráfico proviene de dispositivos móviles. Proyectan que este número podría llegar al 50% a finales de año. En la web en general, el 17,4 % del tráfico web provino de teléfonos inteligentes en 2013. Al mismo tiempo, el uso de Internet Explorer, por ejemplo, representa solo el 12 % de todo el tráfico del navegador , un 4 % menos que en esta época el año pasado (según a W3Schools). Si está optimizando para un navegador específico, en lugar de la población mundial de teléfonos inteligentes, se está perdiendo el bosque por los árboles. Y, en algunos casos, esto puede significar la diferencia entre el éxito y el fracaso: el diseño receptivo tiene implicaciones para las tasas de conversión, el SEO, las tasas de rebote y más.

El enfoque del diseño web receptivo

Lo que comúnmente se pasa por alto sobre RWD es que no se trata solo de ajustar la apariencia de sus páginas web; en cambio, el enfoque debe estar en adaptar lógicamente su sitio para su uso en diferentes dispositivos. Por ejemplo: usar el mouse no brinda la misma experiencia de usuario que, digamos, la pantalla táctil. ¿No estás de acuerdo? Sus diseños adaptables para dispositivos móviles y para computadoras de escritorio deben reflejar estas diferencias.

Al mismo tiempo, no desea estar reescribiendo completamente su sitio para cada una de las decenas de tamaños de pantalla diferentes en los que se puede ver; este enfoque es simplemente inviable. En cambio, la solución es implementar elementos de diseño flexibles que respondan y que usen el mismo código HTML para ajustarse al tamaño de la pantalla del usuario.

Desde un punto de vista técnico, la solución radica en este tutorial de diseño receptivo: usar consultas de medios CSS, pseudoelementos, diseños de cuadrícula de conjuntos flexibles y otras herramientas para ajustarse dinámicamente a una resolución dada.

Consultas de medios en diseño receptivo

Los tipos de medios aparecieron por primera vez en HTML4 y CSS2.1, lo que permitió la colocación de CSS separados para pantalla e impresión. De esta manera, fue posible establecer estilos separados para la visualización de la computadora de una página con respecto a su impresión.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

o

 @media screen { * { background: silver } }

En CSS3, puede definir estilos según el ancho de la página. Como el ancho de la página se correlaciona con el tamaño del dispositivo del usuario, esta capacidad le permite definir diferentes diseños para diferentes dispositivos. Nota: las consultas de medios son compatibles con todos los navegadores principales.

Esta definición es posible mediante la configuración de propiedades básicas: max-width de device-width , orientation y color . También son posibles otras definiciones; pero en este caso, las cosas más importantes a tener en cuenta son la resolución mínima (ancho) y la configuración de orientación (horizontal frente a vertical).

El siguiente ejemplo de CSS receptivo muestra el procedimiento para iniciar un determinado archivo CSS con respecto al ancho de la página. Por ejemplo, si 480 px es la resolución máxima de la pantalla del dispositivo actual, se aplicarán los estilos definidos en main_1.css.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

También podemos definir diferentes estilos dentro de la misma hoja de estilo CSS de modo que solo se utilicen si se cumplen ciertas restricciones. Por ejemplo, esta parte de nuestro CSS receptivo solo se usaría si el dispositivo actual tuviera un ancho superior a 480 px:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“Zoom inteligente”

Los navegadores móviles utilizan el llamado "zoom inteligente" para proporcionar a los usuarios una experiencia de lectura 'superior'. Básicamente, el zoom inteligente se usa para reducir proporcionalmente el tamaño de la página. Esto puede manifestarse de dos maneras: (1) zoom iniciado por el usuario (por ejemplo, tocar dos veces en la pantalla de un iPhone para acercar el sitio web actual) y (2) mostrar inicialmente una versión ampliada de una página web en carga.

Dado que solo podemos usar consultas de medios receptivos para resolver cualquiera de los problemas a los que podría apuntar el zoom inteligente, a menudo es deseable (o incluso necesario) deshabilitar el zoom y garantizar que el contenido de su página siempre llene el navegador:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Al establecer initial-scale en 1, controlamos el nivel de zoom de la página inicial (es decir, la cantidad de zoom al cargar la página). Si ha diseñado su página web para que responda, entonces su diseño fluido y dinámico debe llenar la pantalla del teléfono inteligente de una manera inteligente sin necesidad de ningún zoom inicial.

Además, podemos deshabilitar el zoom por completo con user-scalable=false .

Anchos de página

Supongamos que está buscando proporcionar tres diseños de página receptivos diferentes: uno para computadoras de escritorio, uno para tabletas (o computadoras portátiles) y otro para teléfonos inteligentes. ¿A qué dimensiones de página debe apuntar como límites (p. ej., 480 px)?

Desafortunadamente, no hay un estándar definido para los anchos de página a los que apuntar, pero a menudo se usan los siguientes valores de respuesta de ejemplo:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Sin embargo, existen varias definiciones de ancho diferentes. Por ejemplo, 320 y más tiene cinco incrementos predeterminados de consulta de medios CSS3: 480, 600, 768, 992 y 1382 px. Junto con el ejemplo dado en este tutorial de desarrollo web receptivo, podría enumerar al menos otros diez enfoques.

Con cualquiera de estos conjuntos razonables de incrementos, puede dirigirse a la mayoría de los dispositivos. En la práctica, por lo general no hay necesidad de manejar por separado todos los ejemplos de anchos de página antes mencionados; siete resoluciones diferentes probablemente sean una exageración. En mi experiencia, 320 px, 768 px y 1200 px son los más utilizados; estos tres valores deberían ser suficientes para orientar la publicidad a teléfonos inteligentes, tabletas/computadoras portátiles y computadoras de escritorio, respectivamente.

Psuedo-Elementos

Sobre la base de sus consultas de medios receptivos del ejemplo anterior, es posible que también desee mostrar u ocultar cierta información programáticamente según el tamaño del dispositivo del usuario. Afortunadamente, esto también se puede lograr con CSS puro como se describe en el tutorial a continuación.

Para empezar, ocultar algunos elementos ( display: none; ) puede ser una gran solución cuando se trata de reducir la cantidad de elementos en pantalla para el diseño de un teléfono inteligente, donde casi siempre hay espacio insuficiente.

Pero más allá de eso, también puede ser creativo con pseudo-elementos CSS (selectores), por ejemplo, :before y :after . Nota: una vez más, los pseudoelementos son compatibles con todos los principales navegadores.

Los pseudoelementos se utilizan para aplicar estilos específicos a partes específicas de un elemento HTML o para seleccionar un determinado subconjunto de elementos. Por ejemplo, el pseudoelemento :first-line le permite definir estilos únicamente en la primera línea de un determinado selector (p. ej., p:first-line se aplicará a la primera línea de todas las p s). De manera similar, el pseudo-elemento a:visited le permitirá definir estilos en todos los a con enlaces previamente visitados por el usuario. Claramente, estos pueden ser útiles.

Aquí hay un ejemplo de diseño receptivo simple en el que creamos tres diseños diferentes para un botón de inicio de sesión, uno para computadora de escritorio, tableta y teléfono inteligente. En el smartphone tendremos un icono solitario, mientras que la tablet tendrá el mismo icono acompañado de “Nombre de usuario”. Finalmente, para el escritorio, también agregaremos un breve mensaje instructivo ("Inserte su nombre de usuario").

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Usando solo los pseudo-elementos :before y :after , logramos lo siguiente:

Para obtener más información sobre la magia de los pseudoelementos, Chris Coyier tiene un buen artículo sobre CSS-Tricks.

Entonces, ¿por dónde debo empezar?

En este tutorial, hemos establecido algunos de los componentes básicos para el diseño web receptivo (es decir, consultas de medios y pseudoelementos) y hemos presentado algunos ejemplos de cada uno. ¿A dónde vamos desde aquí?

El primer paso que debe tomar es organizar todos los elementos de su página web en varios tamaños de pantalla.

Eche un vistazo a la versión de escritorio del diseño presentado anteriormente. En este caso, el contenido de la izquierda (el rectángulo verde) podría servir como una especie de menú principal. Pero cuando se utilizan dispositivos con una resolución más baja (p. ej., una tableta o un teléfono inteligente), puede tener sentido que este menú principal se muestre en todo su ancho. Con consultas de medios, podría implementar este comportamiento de la siguiente manera:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Desafortunadamente, este enfoque básico a menudo es insuficiente a medida que su front-end se complica. Como la organización del contenido de un sitio a menudo difiere significativamente entre las versiones móvil y de escritorio, la experiencia del usuario finalmente depende del uso no solo de CSS receptivo, sino también de HTML y JavaScript.

Al determinar diseños receptivos para diferentes dispositivos, varios elementos clave son importantes. A diferencia de las versiones de escritorio donde tenemos suficiente espacio para el contenido, el desarrollo de teléfonos inteligentes es más exigente. Más que nunca, es necesario agrupar contenidos específicos y definir jerárquicamente la importancia de las partes individuales.

Los diversos usos de su contenido también son importantes. Por ejemplo, cuando su usuario tiene un mouse, puede colocar el cursor sobre ciertos elementos para obtener más información, por lo que usted (como desarrollador web) puede dejar que se recopile cierta información de esta manera, pero este no será el caso cuando su usuario está en un teléfono inteligente.

Además, si deja botones en su sitio que luego aparecen en los teléfonos inteligentes más pequeños que un dedo típico, creará incertidumbre en el uso y la sensación de su sitio. Tenga en cuenta que en la imagen de arriba, la vista web estándar (a la izquierda) hace que algunos elementos sean completamente inutilizables cuando se ven en un dispositivo más pequeño.

Tal comportamiento también aumentará las posibilidades de que su usuario cometa un error, lo que ralentizará su experiencia. En la práctica, esto puede manifestarse como una disminución de las visitas a la página, menos ventas y menos compromiso general.

Otros elementos de diseño responsivo

Al usar consultas de medios, se debe tener en cuenta el comportamiento de todos los elementos de la página, no solo aquellos a los que se dirige, especialmente cuando se usan cuadrículas fluidas, en cuyo caso (a diferencia de las dimensiones fijas) la página se llenará por completo en cualquier momento. momento, aumentando y disminuyendo el tamaño del contenido proporcionalmente. Dado que los anchos se establecen en porcentajes, los elementos gráficos (es decir, las imágenes) pueden distorsionarse y destrozarse con un diseño tan fluido. Para las imágenes, una solución es la siguiente:

 img { max-width: 100% }

Otros elementos deben tratarse de manera similar. Por ejemplo, una gran solución para íconos en RWD es usar IconFonts.

Algunas palabras sobre los sistemas de rejilla fluida

Cuando discutimos el proceso de adaptación completa del diseño, a menudo nos fijamos en la experiencia de visualización óptima (desde la perspectiva del usuario). Dicha discusión debe incluir el máximo uso facilitado, la importancia de los elementos (basada en las regiones de página visibles), la lectura facilitada y la navegación intuitiva. Entre estas categorías, uno de los componentes más importantes es el ajuste de ancho de contenido . Por ejemplo, los llamados sistemas de cuadrícula fluida tienen elementos fijos, es decir, elementos basados ​​en anchos relativos como porcentajes de la página total. De esta forma, todos los elementos del sistema de diseño web responsivo se ajustan automáticamente al tamaño de la página.

Aunque estos sistemas de rejilla fluida están estrechamente relacionados con lo que hemos estado discutiendo aquí, en realidad son una entidad completamente separada que requeriría un tutorial adicional para discutir en detalle. Por lo tanto, solo mencionaré algunos marcos principales que admiten dicho comportamiento: Bootstrap, Unsemantic y Brackets.

Conclusión

Hasta hace poco, la optimización de sitios web era un término reservado exclusivamente para la personalización de la funcionalidad basada en diferentes navegadores web. Junto con la lucha inevitable con los diferentes estándares de navegador que enfrentamos hoy en día, este término ahora también supone la adaptación a dispositivos y tamaños de pantalla con un diseño web receptivo. Para tener éxito en la web moderna, su sitio debe saber no solo quién lo está viendo, sino también cómo .