El diseño responsivo 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 está abordando ese problema de manera adecuada o no. Si está utilizando copiar y pegar para insertar los puntos de interrupción de su consulta de medios, es posible que su solución sea defectuosa.
Discutamos por qué existen las consultas de los medios y cómo podemos aprovecharlas para resolver realmente el dilema de la web ubicua. Hablemos sobre por qué debería dejar que su contenido determine los puntos de ruptura 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 los 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 responsivo? un término acuñado por Ethan Marcotte, es una manera fantástica de abordar un problema cada vez mayor para los diseñadores web.
Mientras todo el mundo hablaba sobre cómo funciona la web móvil. iba a superar al tradicional, la revolución que tuvo lugar fue mucho más drástica: la web se hizo omnipresente.¿Este problema? Es genial 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á limitado por las paredes que habíamos establecido previamente. He dicho esto antes pero vale la pena repetirlo. Mientras todo el mundo hablaba sobre cómo funciona la web móvil. iba a superar al tradicional, la revolución que tuvo lugar fue mucho más drástica: la web se hizo omnipresente.
En este momento, no accedemos a la web desde un solo punto. No renunciamos a nuestras computadoras portátiles en favor de los teléfonos inteligentes como expertos? predicho. En cambio, la web está en todas partes donde estamos. No solo está en nuestros teléfonos y computadoras, sino en nuestras tabletas, iPods, sistemas de juegos, televisiones e incluso en automóviles.
Esta tendencia solo continuará a medida que pase el tiempo. El diseño responsivo 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. Al usar consultas de medios, podemos presentar CSS específicos a cualquier número de tamaños diferentes de vistas y asegurarnos de que todos tengan la mejor experiencia posible.
El problema con el diseño responsivo
La sección anterior no es una perorata semihistórica destinada a ocupar espacio, es un aspecto importante de los objetivos que se pretende alcanzar con un diseño receptivo. 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 que puedo decir, "depende de cómo lo hagas". Esa es una afirmación confusa ¿no? El diseño receptivo es sencillo: use 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 un camino correcto e incorrecto?
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, ¿cuáles? ¿Puntos de quiebre? ¿Debo apuntar para CSS personalizado? La respuesta popular actual predeciblemente comienza con el mejor? Móvil? dispositivos alrededor: el iPhone y el iPad (avisos de los usuarios de Android). A partir de estos arquetipos establecemos los llamados "genéricos". Tamaños de smartphone y tablet. Luego avanzamos y abordamos computadoras portátiles y computadoras de escritorio pequeñas y, finalmente, pantallas grandes. Un conjunto estándar de consultas de medios, como esta de CSS-Tricks, generalmente tiene nueve o diez puntos de interrupción preestablecidos.
¿Qué sucede si nos centramos en las necesidades de un diseño específico en lugar de un caso de uso de dispositivo hipotético? ¿Qué pasa si construimos diseños que simplemente funcionaban en todas partes?Para ser justos, este sistema funciona hasta cierto punto. Todos hemos visto muchos sitios de gran capacidad de respuesta creados con un conjunto similar al de Coyier. Sin embargo, no puedo evitar pensar que esto repite de alguna manera el mismo error que cometimos al diseñar "sitios móviles". Hace unos pocos años. Todo el enfoque aquí está en el dispositivo que está viendo el sitio. Antes de que incluso construyamos el sitio, tenemos estos puntos de interrupción en mente.
Pero los dispositivos cambian. Ya hemos establecido que la web está conectada a casi todo con un interruptor de encendido, así que, ¿por qué volvemos a poner tanto énfasis en los tamaños de pantalla comunes actualmente? ¿Hay una mejor alternativa? ¿Qué sucede si nos centramos en las necesidades de un diseño específico en lugar de un caso de uso de dispositivo hipotético? ¿Qué pasa si construimos diseños que simplemente funcionaban en todas partes?
Diseño responsivo enfocado al contenido
Los problemas mencionados anteriormente con las consultas de los medios preestablecidos se me ocurrieron solo cuando cavé y realmente comencé a producir trabajo de respuesta por mi cuenta. En teoría, las sugerencias estándar son excelentes, 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 surgen problemas? ¿En el medio? (para el registro, ese proyecto es fantástico y cualquier problema de diseño ha sido abordado en gran medida). Las cosas se complican cuando el diseño tiene un tamaño que no tenías en cuenta y tienes que ir y remendar los agujeros después del hecho.
Digo esto como un ávido fanboy de Apple: deja de diseñar sitios web para el iPhone.
Mi pregunta es, ¿por qué no empezamos allí? En lugar de ir a un proyecto con un conjunto de dispositivos y, en consecuencia, consultas de medios, ¿por qué no dejamos que el diseño decida? Cada diseño de página web tiene un punto en el que 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 dar cuenta de ello, luego enjabonar, enjuagar y repetir hasta que se tengan en cuenta todos los puntos débiles.
Digo esto como un ávido fanboy de Apple: deja de diseñar sitios web para el iPhone. En cambio, diseñe un sitio web que mantenga su integridad, ya que el tamaño de su ventana gráfica se reduce a cualquier estado factible. Tenga en mente 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, así que haga los enlaces grandes), pero no ponga sus anteojeras y no vea la imagen más grande: su diseño. Debería verse bien en cualquier pantalla.
Un nuevo flujo de trabajo
Entonces, ¿cómo se ve un flujo de trabajo de diseño receptivo centrado en el contenido? Es más simple de lo que piensas. Obviamente, necesitas un punto de partida de algún tipo. Si quieres iniciar móvil y subir, genial. Si quieres empezar en grande y bajar, también genial. Personalmente, me resulta muy difícil profundizar en un diseño y hacerlo bien si estoy empezando 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 gran sitio de 1020 píxeles de ancho. Míralo en la pantalla más grande que puedas conseguir y asegúrate de que se vea bien. 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. Configure 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 la fealdad. Repita estos pasos hasta que esté satisfecho con el rango que ha contabilizado.
Pero ¿qué pasa con el 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, entonces cuando lo pongas en tu teléfono o tableta, se verá genial.
Solo diseño
Tenga en cuenta que esta discusión se refiere únicamente a las relaciones de diseño Absolutamente no te quedas sin la funcionalidad de prueba en diferentes navegadores y dispositivos. El diseño responsivo 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 los medios y el diseño receptivo nos brindan una herramienta increíblemente poderosa para explicar el hecho de que los sitios web están siendo vistos por todo tipo de pantallas y tamaños de vistas. Sin embargo, una vez que comenzamos a vincular nuestros diseños a un puñado de dispositivos, estamos de vuelta donde empezamos. Su objetivo debería ser construir un diseño que sea tan versátil que pueda manejar casi cualquier tamaño de ventana gráfica que se le lance.
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. Eche un vistazo a ese artículo para ver cómo un flujo de trabajo de diseño receptivo centrado en el contenido puede verse en la naturaleza.