El diseño receptivo es nuestra mejor solución actual para el fenómeno de la web ubicua. Personas de todo el mundo están accediendo a Internet en innumerables dispositivos increíblemente variables y las páginas de respuesta proporcionan una manera fácil y funcional de explicar estas diferencias.
Hoy vamos a dar un paso atrás de las discusiones sobre las consultas de los medios y la jerga técnica y nos centraremos en los aspectos centrales de cómo las técnicas de respuesta afectan su proceso de diseño. ¿Qué puntos principales necesita tener en cuenta al abordar un proyecto de diseño web sensible? Sigue leyendo para averiguarlo.
El diseño es más que CSS
Últimamente se ha discutido mucho sobre las técnicas involucradas en el diseño responsivo desde un punto de vista técnico: consultas de medios, anchos basados en porcentajes, etc. Sin embargo, una vez que domine los trucos CSS para implementar un diseño responsivo, enfrentará una gran cantidad Obstáculo más grande: el diseño actual.
"Es lo suficientemente difícil para lograr un diseño profesional cuando te preocupas por un solo formato, ¿cuánto más difícil será para un diseño sensible?"Suena como una tarea desalentadora, ¿no? Se propone crear una experiencia coherente y coherente que se vea perfecta en casi todos los tamaños de pantalla. Es lo suficientemente difícil como para lograr un diseño profesional cuando te preocupas por un solo formato, ¿cuánto más difícil será para un diseño sensible?
Esta es una razón clave para que muchos diseñadores adopten el diseño receptivo como una práctica predeterminada. La objeción más frecuente que escucho tanto de los diseñadores como de sus clientes es que el diseño con capacidad de respuesta parece una empresa que requiere bastante tiempo. Los diseñadores se ven obligados a intentar justificar una subida de precios o comer horas en nombre de producir un trabajo de calidad.
Afortunadamente, desde un punto de vista de CSS, los proyectos como Skeleton realmente reducen el compromiso de tiempo de codificación. Sin embargo, eso no significa que esté descolgado, como diseñador, aún tendrá que concentrarse en crear una experiencia sólida para cada usuario, y eso significa pensar seriamente cómo cambia el proceso de diseño a la luz de esta nueva metodología. . Echemos un vistazo a algunas de las consideraciones principales que debe tener en cuenta.
Photoshop no lo cortará
Con un diseño receptivo, diseñar en el navegador ya no es una moda, es una necesidad. Definitivamente, puede especificar algunas ideas en Photoshop sobre cómo el sitio debería tener un ancho diferente, y hacerlo podría proporcionar resultados finales más ricos, pero la verdad es que Photoshop no puede replicar el tipo de efecto dinámico que es indicativo de sensible. diseño.
"Diseñar en el navegador ya no es una moda, es una necesidad".Cuando se habla de un diseño único que evoluciona con el tamaño de la ventana del navegador, la mejor manera de planearlo es patear los neumáticos y verlo en acción en el navegador.
No vea esto como un comentario de Photoshop, no es necesario y no debe abandonar el uso de imágenes, texturas, etc. que se hayan creado en Photoshop, Fireworks u otro software de gráficos. Sin embargo, es probable que la mejor manera de lograrlos sea mediante una implementación rápida de los navegadores en lugar de las miniaturas estáticas.
Tenga en cuenta que sus maquetas aún pueden ser productos de baja fidelidad, ya sea que desee comenzar con una estructura alámbrica básica o un diseño de apariencia bastante terminada, todo depende de usted. La clave aquí es que tiene algo en vivo que le permite probar las distintas evoluciones para que pueda resolver los problemas a medida que surjan, en lugar de perder horas valiosas en una idea fundamentalmente defectuosa.
Dramáticamente diferente
A veces, reducir un diseño es tan simple como hacer que los elementos de varias columnas se conviertan en una sola columna apilada. Si su diseño está dividido en pequeños trozos, este puede ser el camino a seguir.
Sin embargo, recuerde que dispositivos dramáticamente diferentes pueden requerir diseños dramáticamente diferentes. A menudo es el caso que una solución realmente mejor se puede entregar a través de un cambio considerable en la forma en que funciona la página. Para ver a qué me refiero, considere el diseño de El Sendero del Cacao a continuación.
Como puede ver, las versiones grandes y pequeñas del diseño difieren bastante. La clave aquí es que aún se ven como dos versiones del mismo sitio, lo que significa que la consistencia de la marca se ha mantenido en el punto. El diseñador simplemente decidió que la versión móvil funcionaba mejor con un estilo visual considerablemente menor que la versión completa.
Tenga en cuenta que "diferente" no siempre significa un desmonte completo y completo. Tu versión móvil no tiene que ser aburrida y predecible. El punto aquí no es quitar todo, sino considerar críticamente todos los tamaños de clave diferentes a los que está apuntando y cómo puede mejorar la experiencia para cada uno repensando los fundamentos del diseño.
¿Qué es absolutamente esencial?
Uno de los componentes principales de la transición de su diseño a través de varias fases es apuntar a los componentes absolutamente vitales del diseño y darles la más alta prioridad.
Como vimos en el ejemplo anterior, definitivamente no siempre va a ser el caso de que su versión para dispositivos móviles contenga todo lo que su diseño de escritorio de tamaño completo. El truco entonces es considerar todo lo que usted y su cliente planean incluir y crear una jerarquía de importancia para que pueda recortar lo innecesario para las versiones más pequeñas.
Vemos este principio en funcionamiento en el sitio de Stephen Carver a continuación.
Observe cómo el diseño no solo se ha rediseñado sino que también se ha recortado para la versión móvil. Parte del contenido se vio como esencial, mientras que otro contenido es más "agradable de tener" cuando hay suficiente espacio de pantalla disponible.
El ejemplo más obvio de esto está en el área de navegación.Observe cómo la versión más grande del diseño contiene pequeños subencabezados para cada elemento de navegación. Esto ayuda al usuario a comprender mejor el esquema de navegación. En la versión pequeña, sin embargo, se han eliminado para ahorrar espacio.
Al analizar su diseño en busca de elementos esenciales, la experimentación es la clave. Intente eliminar varios componentes para juzgar si la usabilidad sufre o no. Tenga en cuenta que estas decisiones deben tomarse en cada intervalo, no solo en el más pequeño y el más grande.
Tocar? Hacer clic
Otro punto importante para recordar a medida que el diseño se escala es que el estado actual de la computación se divide en dos categorías diferentes: dispositivos de entrada basados en el tacto y aquellos que usan un cursor. Por supuesto, la suposición segura (por ahora) es que los tamaños más grandes de las ventanas del navegador tienden a corresponder a las computadoras de escritorio o portátiles, mientras que los tamaños más pequeños de las ventanas del navegador generalmente indican una interfaz táctil.
Estas son bestias significativamente diferentes y harás bien en recordar que, al estructurar tus diseños porque la dirección que este conocimiento te da puede ser un poco contradictorio.
Por ejemplo, aunque tendemos a pensar en el sitio móvil como una versión reducida del sitio de escritorio, a menudo los elementos aumentan de tamaño debido a la diferencia entre tocar y hacer clic. Un elemento de navegación que parece perfectamente accesible con un mouse y un cursor puede ser casi imposible de apuntar con precisión con el dispositivo de entrada grande y crudo que es el dedo índice humano.
Lo importante para recordar aquí es probar como loco. Es demasiado fácil diseñar en un escritorio y luego cambiar el tamaño de la ventana del navegador para echar un vistazo a esa versión móvil. Esto simplemente no te dice la historia completa. Debe tener en sus manos el diseño en un tamaño más pequeño antes de considerarlo bueno.
Todo está en el medio
Una cosa crucialmente importante para tener en cuenta en cuanto al diseño sensible es que se trata de algo más que tamaños de pantalla: se trata de tamaños de ventanas de navegador. El hecho de que alguien tenga un MacBook de 13 pulgadas no significa que la ventana del navegador tenga ese tamaño. A menudo es el caso que los usuarios abren y usan las ventanas del navegador en mucho menos que la pantalla completa.
La conclusión aquí es que no está descolgado después de probar algunos tamaños de ventana predefinidos. Cambie el tamaño de la ventana del navegador y observe cómo responde el diseño en cada pequeño paso. El argumento estándar es que los usuarios que no son diseñadores nunca realizan esta acción, y eso es correcto, pero usarán las ventanas de su navegador en una variedad infinita de tamaños impredecibles y la belleza del diseño sensible es que puede asegurarse de que su diseño se verá bastante fácil Perfecto en todos ellos.
Considere ir a la primera ruta móvil
En última instancia, la forma en que planifique sus diseños sensibles depende de usted. Sin embargo, hay muchos argumentos sólidos para unirte a la multitud de móviles.
Comenzar con la versión móvil ayuda a garantizar que no esté simplemente entregando una versión de su diseño original a sus usuarios móviles. También asegura que realmente pienses en los detalles de cada pequeña parte del contenido.
Anteriormente indicamos que necesita analizar su diseño y apuntar a los elementos absolutamente esenciales, este es un proceso mucho más fácil si en realidad comienza solo con lo esencial. Con esta técnica puede agregar proactivamente a su diseño a medida que aumenta el tamaño de la página en lugar de recortar a medida que disminuye el tamaño de la página. Esto sigue el concepto de mejora progresiva, que comienza con una base funcional sólida y ofrece mejoras cuando es posible.
Otro beneficio de los dispositivos móviles es que a menudo puede evitar la carga de elementos innecesarios en dispositivos más pequeños que no los usarán. Los proyectos como 320 y Up están diseñados para ayudarlo a minimizar los recursos cargados por la versión pequeña de su diseño.
Conclusión
El objetivo de este artículo fue hacer que dejes de pensar en la parte del back-end del diseño sensible lo suficiente como para considerar las ramificaciones de esta técnica en lo que ve el usuario. Mucho más importante que la sintaxis de consulta de medios es el resultado final de cómo su diseño evoluciona desde un punto de vista visual y funcional para satisfacer las necesidades del usuario.
Recuerde que debe progresar activamente su diseño en el navegador, no solo en una aplicación de diseño estático. También debe establecer una jerarquía concreta de los elementos más importantes en el diseño para asegurarse de que las piezas del rompecabezas estén presentes y funcionen perfectamente para cada tamaño de ventana. Finalmente, recuerde que el diseño web móvil es mucho más que una página web de escritorio reducida. Considere tomar una primera ruta móvil para ayudar a garantizar que todos los usuarios reciban una experiencia sólida.
Créditos de la imagen: Claudia Regina