El diseño web adaptable se ha convertido en un término general para hacer que su sitio web funcione bien a baja resolución.
Los teléfonos inteligentes revolucionaron la web móvil, y las tabletas están lanzando otra llave en los engranajes con su creciente popularidad. Teniendo todo en cuenta, un sitio web de hoy podría tener experiencia en un teléfono inteligente de baja resolución, una tableta de resolución media o una computadora de escritorio o portátil de alta resolución. Cuando se arrojan pantallas retina a la mezcla, la cantidad de posibles tamaños de pantalla es vertiginosa. Idealmente, su sitio web se verá y funcionará correctamente en todo lo anterior, en cualquier resolución.
El diseño web receptivo en sí mismo es el proceso de hacer que un sitio web funcione en pantallas muy pequeñas, pantallas muy grandes y en cualquier resolución intermedia.
En los últimos años, la industria ha desarrollado colectivamente una lista restringida de mejores prácticas comunes. Muchas de estas prácticas se centran en la adaptación de sitios web destinados a alta resolución hasta tamaños más bajos. Otros comienzan en el móvil y trabajan en las vistas más grandes, optimizando según sea necesario. Todas estas prácticas generalmente se pueden categorizar como diseños responsivos o adaptables.
Los diseños receptivos generalmente funcionan mejor que los diseños adaptativos, pero en algunos casos (aplicaciones web complejas, por ejemplo) un enfoque adaptativo podría servir mejor a los usuarios. De cualquier manera, el objetivo es hacer que su sitio web siempre se vea mejor en la resolución deseada.
La mayoría de las personas eligen usar consultas de medios para hacer esto, como son sólidos como una roca a menos que necesites soporte para IE8 o inferior. Para aquellos de nosotros que todavía tenemos una audiencia en IE6-8 sin embargo, Scott Jehl ha creado un Polyfill de JavaScript llamado Respond.js eso hará que las cosas funcionen.
Antes, muchos diseñadores web tenían una comunicación mínima con los desarrolladores hasta la entrega. Ahora, sin embargo, los diseñadores y desarrolladores deben trabajar juntos a través del proceso de diseño y desarrollo para que todo funcione sin problemas. Desde el análisis del usuario hasta lo que se puede reorganizar o no al cambiar los viewports: los diseñadores y los desarrolladores están más cerca que nunca, sino la misma persona. Si busca inspiración en cuanto a los diseños receptivos o adaptables, Preguntas de los medios es una galería popular de diseño web que muestra cuatro ventanas gráficas de un sitio web.
Cuando la idea del diseño web receptivo comenzó a ganar terreno, las técnicas de adaptación dominaron por un tiempo. Es más fácil hacer la transición al diseño y desarrollo de estos diseños, aunque requieren más trabajo que sus conterparts receptivos. Esta es también la ruta que muchas personas toman cuando adaptan un sitio web existente para que sea amigable para dispositivos móviles. Debido a la naturaleza de los diseños adaptativos, dan mucho más control sobre el diseño del sitio web. Solo tiene que diseñar para ventanas gráficas específicas, y los navegadores solo muestran la más alta que cabe en su ancho. Estos diseños son los que se "ajustan" al ajustar a medida que cambia el tamaño de la ventana de su navegador. De hecho, si cambias el tamaño de tu ventana para que sea más pequeña que 1024 píxeles, verás este cambio repentino del que estoy hablando a medida que el diseño de este sitio web se ajusta para enfocarse en una ventana gráfica de resolución media.
Al diseñar para un enfoque de desarrollo adaptativo, el trabajo es bastante fácil. Antes de que el diseño web receptivo se convirtiera en algo, simplemente diseñó un diseño y luego lo desarrolló. Ahora, diseñarás para múltiples ventanas gráficas y las desarrollarás. En general, es más fácil comenzar en portales de baja resolución y subir de nivel. Si comienzas con viewports de alta resolución y bajas, las cosas podrían terminar un poco ... compactas. Y cuando llegas al móvil, abarrotado.
La cantidad de ventanas gráficas que diseñes depende exclusivamente de ti y del desarrollador, elabora un plan de batalla basado en tus usuarios. Si el análisis del sitio actual muestra a los usuarios en su mayoría utilizando ventanas de baja y media resolución, planifíquelas. Desea al menos tres: uno para viewports de baja resolución (teléfonos inteligentes), viewports de resolución media (tabletas) y uno para viewports de alta resolución (computadoras de escritorio y portátiles). Idealmente, la planificación para seis es el estándar, con un diseño de alta y baja resolución para cada una de las tres ventanas enumeradas anteriormente. Sin embargo, tener demasiados más que eso hará que el desarrollo y el mantenimiento sean demasiado difíciles de manejar, así que tenga cuidado.
Desarrollar un diseño adaptativo también es bastante simple. Asumir que has trabajado con el diseñador (o eres el diseñador) desde el principio es como desarrollar un sitio web tradicional. Comenzará desarrollando el sitio en una ventana de baja resolución móvil. Una vez que lo hayas hecho, utilizaremos las consultas de los medios para expandir el diseño de las vistas de mayor resolución. A continuación, se muestran las consultas de medios de vistas de baja, media y alta resolución:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Aquí es de donde viene el "chasquido" en el enfoque adaptativo. Debido a que estamos apuntando a múltiples resoluciones comunes de ventana gráfica, pasar de una a la otra al cambiar el tamaño de la ventana puede hacer que el diseño salte. Como mencioné anteriormente, el diseño y desarrollo adaptativo solo es muy útil para la actualización o para aplicaciones web complejas. Diseñar y desarrollar muchos diseños para viewports independientes es mucho más complicado si no es necesario.
A partir de hoy, el diseño y desarrollo receptivos es el enfoque de facto para su uso. Si bien ofrece menos control sobre el diseño en comparación con un enfoque adaptativo, es mucho menos trabajo de implementar y mantener, ya que técnicamente solo tiene un diseño. También es más personalizado para el sitio web, y este es el punto de venta clave. Podrá hacer sus propios puntos de interrupción en función de cuándo su diseño se rompe o no se ve como se esperaba.
Los diseños receptivos también incluyen diseños fluidos. Antes de que el diseño web receptivo se hiciera popular, los sistemas de fluidos eran populares: diseños que usaban porcentajes para los anchos. Si bien ciertamente funcionaron bien en la mayoría de los casos, eso fue antes de que tuviéramos teléfonos inteligentes y tabletas. Ahora, la mayoría de los diseños fluidos se complementan con consultas de medios a resoluciones muy bajas y muy altas. De lo contrario, podría terminar con diseños muy compactos o inmensamente grandes.
Si bien tiene una guía muy simple a seguir con diseño adaptativo, el diseño receptivo no es tan claro. Existe un debate acalorado que el diseño en el navegador es la mejor manera de hacerlo, diseñando y desarrollando al mismo tiempo. Puesto que esencialmente va a tener en cuenta todos los puntos de vista al diseñar, hay más trabajo involucrado en el lado del diseño. Idealmente, queremos tener en mente las ventanas gráficas, pero no diseñar para ninguna en particular. Si es posible, intente encontrarse en un término medio; Concéntrese en las vistas de resolución media, teniendo en cuenta que el diseño tendrá que ajustarse para resoluciones cada vez más altas.
Es extremadamente importante utilizar los análisis de usuarios existentes si los tiene. Si su sitio ya cuenta con análisis que demuestran que su audiencia lee principalmente desde viewports de baja resolución, diseñe con un enfoque en esos. Apunte a su audiencia , incluso si eso significa ignorar algunas de las mejores prácticas que existen. Al final, su sitio web les estará sirviendo, no las personas que agregan estas 'mejores' prácticas.
Una vez que se completa la fase de diseño, el desarrollo es donde comienza la verdadera diversión. Como se mencionó anteriormente, si tiene datos analíticos de su audiencia típica, comience allí. Una vez que haya desarrollado su diseño, usará las consultas de los medios para hacerlo receptivo. Sin embargo, en lugar de definir ventanas definidas, en su lugar, cambiará el tamaño manualmente de su navegador hasta que se rompa el diseño. Cuando eso suceda, ese es el ancho de su punto de interrupción: agregue una consulta de medios para arreglar el corte en el diseño y continúe con el cambio de tamaño. Idealmente, lo hará desde un dispositivo de alta resolución para que pueda ver todas las vistas. Una vez que se asegure de tener soporte para viewports de baja y alta resolución, pase a las pruebas.
En raras ocasiones, puede encontrar un sitio web que utiliza una solución personalizada, como {$lang_domain} . En términos generales, la mayoría de la web recae en los grupos receptivos o adaptables como se describe anteriormente, pero a veces las personas se vuelven creativas y crean su propia solución. {$lang_domain} lo hace comenzando con los puntos de corte estándar bajo, medio y alto, y luego complementando según sea necesario entre cuando se rompe el diseño. Además de eso, el diseño también es de naturaleza fluida hasta una resolución máxima establecida. Con esto en mente, ¡sé creativo y construye algo que rompa la norma!
Desafortunadamente, realmente no existe una buena solución para el navegador que pruebe estos diseños todavía. La mejor forma de realizar pruebas es hacerlo de forma manual: cargar la página en su teléfono, tableta, computadora portátil y todo lo demás. También puede usar un spoofer de ventana gráfica en su navegador si es compatible con dicha extensión. Ripple Emulator es una extensión que uso en Chrome para probar algunos viewports de baja resolución. Si bien es cierto que es incómodo probar manualmente en los dispositivos, ofrece una impresión más precisa de la funcionalidad que tiene su sitio. La interfaz de usuario que se ve bien en un emulador, en realidad puede funcionar bastante mal en un dispositivo real.
Tan extenso como es este artículo, esto es simplemente una introducción al tema de los tipos de diseño. Existe una gran cantidad de información sobre los métodos de diseño web receptivos no incluidos en este artículo; No se explica aquí la optimización de los elementos y la tipografía de la interfaz de usuario, las imágenes y medios receptivos, las proporciones de píxeles de los dispositivos y mucho más. Sin embargo, hay muchas fuentes para tal conocimiento, en formas mucho más densas de información. Desde que surgió la idea del diseño web receptivo, hemos contribuido a una gran cantidad de conocimiento sobre el tema. Espero que al explicar la diferencia entre los tipos de diseño aquí, puedas manejar mejor la idea de una web receptiva ... sin perderte por el agujero del conejo.
La comunidad está constantemente creando nuevas técnicas y construyendo soluciones creativas a problemas que recién estamos empezando a encontrar. Entonces, si bien existe una gran cantidad de información disponible sobre diseño web receptivo, es un concepto aún en su infancia. Si bien las mejores prácticas y casos de uso común son fáciles de cumplir, siempre se recomienda ser creativo y pavimentar su propia solución. Si tiene alguna sugerencia o sugerencia para aquellos de nosotros que acaba de entrar, o ampliar nuestro conocimiento de diseño web y desarrollo receptivo, ¡inicie una discusión a continuación!
Imagen / miniatura destacada, usos imagen receptiva a través de Shutterstock.