Diseño receptivo: por qué lo estás haciendo mal

El diseño receptivo no es una moda que surgió debido a una técnica CSS genial, es una respuesta a un problema. Siempre recuerde eso y pregúntese constantemente si realmente está abordando adecuadamente ese problema. Si está utilizando copiar y pegar para insertar sus puntos de interrupción de consulta de medios, su solución podría ser defectuosa.

Analicemos por qué existen las consultas de los medios y cómo podemos aprovecharlas para resolver realmente el dilema de la ubicua web. Hablemos sobre por qué debería permitir que su contenido determine los puntos de interrupción de un diseño, no los tamaños de pantalla hipotéticos.

Este artículo es parte de nuestra serie sobre "mirar más allá del diseño de escritorio", presentado en colaboración con Heart Internet VPS.

La idea detrás de las consultas de medios

Para comenzar este debate correctamente, es necesario discutir por qué las consultas de los medios se han vuelto tan populares de repente. La respuesta es, por supuesto, que "Diseño receptivo", un término acuñado por Ethan Marcotte, es una forma fantástica de abordar un problema cada vez mayor para los diseñadores web.

Mientras todos hablaban sin parar sobre cómo la “web móvil” iba a superar a la tradicional, la revolución que tuvo lugar fue mucho más drástica: la web se volvió omnipresente.

Este "problema" es excelente para el mundo en general, pero es un verdadero dolor de cabeza para nosotros. En la última década, la web mundial se ha transformado en algo nuevo. Ya no está atado por las paredes que habíamos establecido previamente. Lo he dicho antes pero vale la pena repetirlo. Mientras todos hablaban una y otra vez sobre cómo la "web móvil" iba a superar a la tradicional, la revolución que tuvo lugar fue mucho más drástica: la web se volvió omnipresente.

En este momento, no accedemos a la web desde un solo punto. No renunciamos a nuestras computadoras portátiles a favor de los teléfonos inteligentes como predijeron los "expertos". En cambio, la web está en todas partes donde estamos. No solo está en nuestros teléfonos y computadoras, está en nuestras tabletas, iPods, sistemas de juegos, televisores e incluso automóviles.

Esta tendencia solo continuará a medida que pase el tiempo. El diseño receptivo nos lleva más allá de una temporada de creación de sitios móviles separados y en una era en la que desarrollamos un sitio que evoluciona y se adapta al dispositivo en el que se está viendo. Usando consultas de medios, podemos presentar CSS específicos a cualquier cantidad de tamaños de ventana gráfica diferentes y asegurarnos de que todos tengan la mejor experiencia posible.

El problema con el diseño receptivo

La sección anterior no es un discurso semi-histórico destinado a llenar el espacio, es una mirada importante a los objetivos que el diseño receptivo debe lograr. La pregunta entonces es, ¿cumple con estos objetivos? ¿El diseño receptivo aborda adecuadamente el problema de la ubicuidad?

La respuesta es complicada, en el mejor de los casos puedo decir: "depende de cómo lo hagas". Esa es una declaración confusa, ¿no? El diseño receptivo es sencillo: utilice consultas de medios para ofrecer CSS personalizado a diferentes tamaños de ventana gráfica. Así es como todos lo abordan, ¿verdad? Entonces, ¿cómo puede haber una forma correcta e incorrecta?

La complejidad surge cuando comenzamos a discutir una parte crucial de esta técnica: ¿qué consultas de medios debo usar? O dicho de otra manera, ¿a qué "puntos de interrupción" debo apuntar para CSS personalizado? La respuesta popular actual previsiblemente comienza con los mejores dispositivos "móviles": el iPhone y el iPad (comentarios de usuarios enojados de Android). A partir de estos arquetipos establecemos los llamados tamaños de teléfonos inteligentes y tabletas "genéricos". Luego nos movemos hacia arriba y abordamos computadoras portátiles y computadoras de escritorio pequeñas y, finalmente, pantallas grandes. Un conjunto estándar de consultas de medios, como este de CSS-Tricks, generalmente tiene nueve o diez puntos de interrupción preestablecidos.

¿Qué sucede si nos enfocamos en las necesidades de un diseño específico en lugar de un caso de uso de un dispositivo hipotético? ¿Qué pasa si construimos diseños que simplemente funcionan en todas partes?

Para ser justos, este sistema funciona hasta cierto punto. Todos hemos visto muchos sitios geniales con capacidad de respuesta creados con un conjunto similar al anterior de Coyier. Sin embargo, no puedo evitar pensar que esto de alguna manera está repitiendo el mismo error que cometimos al diseñar "sitios móviles" hace unos años. Todo el enfoque aquí está en el dispositivo que ve el sitio. Incluso antes de construir el sitio, tenemos estos puntos de quiebre en mente.

Pero los dispositivos cambian. Ya hemos establecido que la web se está conectando a casi todo con un interruptor de encendido, entonces, ¿por qué una vez más estamos poniendo tanto énfasis en los tamaños de pantalla comunes actualmente? ¿Hay una mejor alternativa? ¿Qué sucede si nos enfocamos en las necesidades de un diseño específico en lugar de un caso de uso de un dispositivo hipotético? ¿Qué pasa si construimos diseños que simplemente funcionan en todas partes?

Diseño receptivo enfocado en contenido

Los problemas antes mencionados con las consultas de medios preestablecidos se me ocurrieron solo cuando comencé a trabajar y realmente comencé a producir trabajo receptivo por mi cuenta. En teoría, las sugerencias estándar son geniales, pero una vez que las aplique a un diseño complejo descubrirá que esos puntos de interrupción no siempre lo cubren. El problema, como descubrieron rápidamente los diseñadores del Boston Globe una vez que el sitio comenzó a funcionar, es que los problemas surgen "en el medio" (para el registro, ese proyecto es fantástico y cualquier problema de diseño se ha abordado en gran medida). Las cosas se complican cuando el diseño tiene un tamaño que no tenía en cuenta y tiene que entrar y reparar los agujeros después del hecho.

Lo digo como un ávido fanático de Apple: deja de diseñar sitios web para iPhone.

Mi pregunta es, ¿por qué no empezamos allí? En lugar de entrar en un proyecto con un conjunto de dispositivos y, en consecuencia, consultas de medios, en mente, ¿por qué no dejamos que el diseño decida? Cada diseño de página web tiene un punto donde el tamaño del navegador disminuye su integridad. Nuestro trabajo como diseñadores, a la luz del problema de la ubicuidad, debe ser encontrar ese tamaño y explicarlo, luego enjabonar, enjuagar y repetir hasta que se tengan en cuenta todos los puntos débiles.

Lo digo como un ávido fanático de Apple: deja de diseñar sitios web para iPhone. En cambio, diseñe un sitio web que mantenga su integridad ya que el tamaño de su ventana de visualización se reduce a cualquier estado factible. Tenga en cuenta los dispositivos específicos como guía para su diseño (por ejemplo: los dispositivos más pequeños tienden a estar basados ​​en el tacto, por lo que debe hacer que los enlaces sean grandes), pero no ponga las anteojeras y no vea la imagen más grande: que su diseño debería verse bien en cualquier pantalla.

Un nuevo flujo de trabajo

Entonces, ¿cómo es un flujo de trabajo de diseño receptivo centrado en el contenido? Es más simple de lo que piensas. Obviamente, necesita un punto de partida de algún tipo. Si quieres iniciar el móvil y subir, genial. Si quieres comenzar en grande y bajar, también genial. Personalmente, me resulta muy difícil profundizar en un diseño y hacerlo bien si estoy comenzando en el nivel móvil, pero hay muchos argumentos sólidos para hacerlo de esta manera.

Algo mágico sucede cuando sigues este flujo de trabajo.

Hipotéticamente, digamos que comenzó con un sitio grande de 1020 px de ancho. Compruébalo en la pantalla más grande que puedas tener y asegúrate de que se vea genial. Ahora arrastre la ventana y hágala más pequeña hasta que el diseño se vuelva feo. Ahí está tu primer punto de quiebre. Establezca una consulta de medios para ese punto y arregle todo lo que necesita abordar. Una vez que hayas terminado, toma esa ventana y encuentra el siguiente punto de fealdad. Repita estos pasos hasta que esté satisfecho con el rango que ha contabilizado.

¿Pero qué hay del iPad? ¿Qué pasa con el Kindle Fire o el último intento de Samsung de ser relevante? Algo mágico sucede cuando sigues este flujo de trabajo. Acaba de hacerlo para que el diseño se vea bien en casi cualquier tamaño. Si lo hiciste bien, cuando lo levantes en tu teléfono o tableta, se verá genial.

Solo diseño
Tenga en cuenta que esta discusión se refiere solo a las proporciones de diseño. No se saldrá de la funcionalidad de prueba en diferentes navegadores y dispositivos. El diseño receptivo no tiene en cuenta el hecho de que diferentes motores de navegador interpretan HTML, CSS y JavaScript de manera diferente.

Conclusión

En resumen, las consultas de medios y el diseño receptivo nos brindan una herramienta increíblemente poderosa para dar cuenta del hecho de que los sitios web están siendo vistos por todo tipo de pantallas y tamaños de ventanas. Sin embargo, una vez que comenzamos a vincular nuestros diseños a un puñado de dispositivos, volvemos a donde comenzamos. En cambio, su objetivo debería ser crear un diseño que sea tan versátil que pueda manejar casi cualquier tamaño de ventana gráfica.

Todo esto es bueno en teoría, pero ¿dónde está el ejemplo? El punto de partida de esta discusión provino de un reciente intento mío de construir una galería de imágenes receptiva. Consulte ese artículo para ver cómo podría verse en la naturaleza un flujo de trabajo de diseño receptivo centrado en el contenido.