El diseño receptivo (también conocido como diseño 'adaptativo'), donde la misma página web presenta la mejor versión de dos o más diseños hechos a mano según el ancho del navegador, es la opción más sólida para la mayoría de los sitios web. Para ver por qué, es útil ver todas las opciones disponibles para los diseñadores web:
Diseños fijos
Un ancho de página fijo, donde el ancho del contenido es el mismo independientemente del ancho del navegador, ofrece una apariencia uniforme en todos los dispositivos y puede requerir menos codificación, pensamiento y mantenimiento que los diseños más flexibles.
Algunos sienten que los diseños de ancho fijo son reliquias de una época pasada, donde las personas ansiaban la perfección de píxeles y la apariencia uniforme en todos los navegadores. Andy Clarke, autor de Hardboiled Web Design, siente que esta forma de pensar está muerta:
"En el pasado, era una práctica estándar luchar duro para crear un sitio web que se viera y funcionara igual en todos los navegadores, sin importar sus capacidades. Hacer esto significaba comprometerse y evitar el uso de tecnologías que no son compatibles con todos los navegadores".
¿Es esto duro?
No te engañes, dulces mejillas. Esta no es la forma de evolucionar nuestro oficio o construir una mejor web. Este tipo de pensamiento antiguo nos detiene. Nos obliga a poner excusas para no hacer lo que sabemos que es lo correcto. Lo peor que podemos hacer nosotros, como custodios actuales de la web, es permitir que cualquier cosa limite lo que es posible ".
- Andy Clarke, Diseño Web Hardboiled, p6 [Edición PDF disponible aquí ]
Mientras que algunos ven diseños fijos como la altura de la pereza, los diseños de ancho fijo aún son elegidos por equipos de diseño muy inteligentes sobre diseños fluidos o adaptativos. Apple, por ejemplo, actualmente sirve el mismo diseño para iMacs que para iPads y iPhones. ¿Por qué la empresa responsable de llevar la navegación web móvil a las masas no optimiza su sitio web para dispositivos móviles?
Porque no cree que sea necesario.
En lugar de adaptar su sitio web para pantallas pequeñas, Apple creó hardware y software para manejar cómodamente sitios web amplios en esas pantallas. Apple cree que una experiencia 'optimizada para dispositivos móviles' se entrega mejor en una aplicación nativa, no en una ventana del navegador. Es por eso que ofrece la aplicación Apple Store en lugar de servir una tienda web optimizada para dispositivos móviles. Y es por eso que alienta a los editores a ofrecer aplicaciones de revistas sobre sitios web personalizados. La filosofía de diseño web actual de Apple es clara: un diseño para gobernarlos funciona bien. Para todo lo demás, hay una aplicación para eso.
Solo por esta razón, algunos argumentan que los diseños fijos siguen siendo tan relevantes como siempre; dirían que los diseños fluidos y adaptativos son solo vacíos mientras esperamos que el software del navegador móvil mejore, y que HTML y JavaScript evolucionen y tienten a los desarrolladores lejos de las tiendas de aplicaciones aisladas.
En mi opinión, sin embargo, pinch-tap-drag-scroll para desplazarse por la Web durante un período de tiempo prolongado en un dispositivo móvil no es muy divertido, incluso en un iPhone. Si cree que la mejor experiencia web es la que hace que leer, publicar e interactuar con sitios web sea un placer en lugar de una tarea rutinaria, independientemente del dispositivo que esté utilizando, debe admitir en algún momento que sirve contenido personalizado para cada uno El visitante vale la pena considerar.
Diseños fluidos
Los diseños fluidos, donde el ancho de la página fluye para llenar la pantalla (a menudo hasta un ancho máximo impuesto), prometen una mejor experiencia en diferentes plataformas al entregar contenido en un ancho más adecuado para la ventana gráfica.
En la práctica, los diseños de fluidos causan más problemas de los que resuelven, como señaló Cameron Moll en este comentario:
"... los diseños fluidos resuelven todos los problemas de diseño de la misma manera que las computadoras dejan las oficinas sin papel, es decir, no lo hacen"
- Cameron Moll, "¿Deberían todos los sitios ser fluidos?", Septiembre de 2006
Cuando adoptas un diseño fluido, renuncias al control de tu diseño y aceptas que el texto se reenvolverá, las imágenes volverán a fluir, las longitudes de las líneas variarán de manera impredecible, el texto, las imágenes y los elementos de navegación pueden aplastarse en anchos pequeños, y las columnas saltarán y flotarán. alrededor solo para fastidiarte.
Un diseño fluido, algunos podrían decir, también es una opción perezosa. Es el enfoque de escopeta para el diseño web adaptativo. En lugar de proporcionar una experiencia personalizada con tres o cuatro diseños de ancho fijo cuidadosamente considerados, está ofreciendo una experiencia impredecible con la esperanza de que pueda funcionar en pantallas grandes y pequeñas y, con suerte, tapar todos los huecos que no ha considerado completamente entre.
Esto no hace que los diseños fluidos sean inútiles. Hay maneras de hacer que funcionen. El blog 456 Berea St , por ejemplo, adopta un diseño fluido hasta un ancho determinado, después de lo cual usa uno fijo para cualquier cosa más grande. Y en anchos realmente pequeños, la barra lateral se despliega para usar una sola columna que facilita la lectura en pantallas pequeñas. Pero esto ya no es un diseño fluido. Es algo mejor Es un diseño receptivo .
Diseños receptivos
Un diseño 'receptivo' o 'adaptativo', donde la misma página web presenta una versión de dos o más diseños diseñados según el ancho del navegador del visitante, es una parte clave de la mejora progresiva, cuyo objetivo es hacer que un sitio web se vea mejor Puede para cada visitante.
Elegir adoptar un diseño adaptativo es 'excelente servicio al cliente', en palabras de Aaron Gustafson, el autor de Adaptive Web Design. Si diseñamos bien nuestros sitios, dice, a los visitantes se les debe presentar una experiencia perfectamente diseñada sin darse cuenta de que estamos haciendo un escándalo:
"Como diseñadores y desarrolladores web, debemos esforzarnos por ser tan buenos en nuestro trabajo como ese camarero atento y discreto, pero no es una tarea sencilla. Así como un camarero no tiene idea de si un cliente que entra por la puerta requerirá frecuentes recargas o pocas, no tenemos forma de conocer las necesidades de un usuario en particular cuando llegan a nuestro sitio. En cambio, debemos elevarnos para satisfacer esas necesidades. Si somos realmente buenos, podemos hacerlo sin que nuestros clientes se den cuenta de que estamos haciendo consideraciones especiales para ellos. Afortunadamente, con el enfoque centrado en el contenido y el usuario de la mejora progresiva (a diferencia del enfoque del navegador más reciente de degradación elegante), esto es fácil de lograr ".
- Aaron Gustafson, Adaptive Web Design, p12 [Edición en PDF disponible aquí ]
La comprensión de que nuestro trabajo como diseñadores web es adaptarnos a nuestros visitantes y no obligarlos a adaptarse a nosotros, como Apple podría hacernos creer, es un desarrollo bastante reciente en diseño web. Es, en mi opinión, una especie de renacimiento: hemos terminado de elegir los buenos hábitos de años de diseño de impresión. Ahora debemos desechar los grilletes impuestos al trabajar dentro de un espacio predefinido en la página impresa.
Donde una vez tratamos el navegador como un lienzo fijo, ahora estamos aceptando que no existe ningún lienzo definido, y esto se está volviendo cada vez más claro a partir de la gran combinación de tamaños de pantalla que sin duda comienza a ver en las estadísticas de sus visitantes . En lugar de tratar cada nuevo dispositivo como un "tamaño de página" único para apuntar (y luego tener que reunir tropas cuando sale un nuevo dispositivo) podemos seguir más convenciones a prueba de futuro.
Podemos pensar en términos de bandas: 'grande', 'mediano' y 'pequeño', en lugar de pensar en teléfonos y tabletas específicos, luego diseñar sitios para que se vean lo mejor posible en esas bandas. Cualesquiera que sean los nuevos dispositivos que salgan, encajarán en una banda u otra y, incluso si están justo en el límite entre dos bandas, aún tenemos más control sobre la experiencia que si hubiéramos usado un dispositivo fijo o fluido diseño.
En Diseño web receptivo, Ethan Marcotte ofrece esta llamada a las armas:
"Necesitamos dejarlo ir.
En lugar de crear diseños desconectados, cada uno adaptado a un dispositivo o navegador en particular, deberíamos tratarlos como facetas de la misma experiencia. En otras palabras, podemos crear sitios que no solo sean más flexibles, sino que se puedan adaptar a los medios que los representan.
En resumen, necesitamos practicar
un diseño web receptivo. Podemos adoptar la flexibilidad inherente a la web, sin renunciar al control que requerimos como diseñadores. Todo mediante la incorporación de tecnologías basadas en estándares en nuestro trabajo, y haciendo un ligero cambio en nuestra filosofía hacia el diseño en línea ".
- Ethan Marcotte, Responsive Web Design, p8 [Edición en PDF disponible aquí ]
¿Pero qué bandas usas? Ethan Marcotte recomienda los siguientes tres en Diseño web receptivo. (Para aprender lo que hacen y comprender las advertencias, puede que le interese tomar el libro ) .
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
También hay una variedad de marcos CSS diseñados para ayudar a construir sitios web adaptables, incluido el Marco menor de Joni Korpi .
En lugar de utilizar puntos de interrupción arbitrarios, quizás sea mejor dejar que el diseño de su sitio dicte las bandas. Reduzca el ancho de pantalla de su navegador y, cuando su diseño se rompa, ese ancho debería ser uno de sus "puntos de interrupción". Siga reduciendo el ancho y agregando puntos de interrupción con consultas de medios CSS hasta que su diseño se vea bien en todos los anchos. De esa manera, su diseño se verá bien en todos los dispositivos en lugar de solo en el puñado de tamaños de pantalla en los que ha intentado encasillarlo. Si usa Chrome, al activar Herramientas de desarrollador (Ver> Desarrollador> Herramientas de desarrollador) y reducir el ancho de su navegador, obtendrá una lectura útil del ancho actual en la esquina superior derecha que puede usar para determinar dónde deberían estar sus puntos de interrupción.
Otro enfoque popular a considerar es el diseño receptivo Mobile First , donde su hoja de estilo principal maneja los estilos para los dispositivos más pequeños, y las consultas de medios tratan con anchos de pantalla más grandes, en lugar de al revés. Esto puede resultar en un rendimiento más rápido en dispositivos móviles, particularmente si usa muchas imágenes de fondo CSS. (Construiría los puntos de interrupción de la misma manera: simplemente comience con el ancho de su navegador al mínimo y trabaje hacia arriba. Y no olvide probar en tantos dispositivos reales como pueda tener en sus manos, considere visitar un Dispositivo Abierto Laboratorio )
En resumen, cuando se hace bien, el diseño adaptativo es una alegría para la vista y la experiencia tanto como diseñador web como usuario de un jardín comunitario. Tome el sitio de la firma japonesa Information Architects , por ejemplo:
En un iPhone
En un iPad
En un iMac
Tal como predijo Aaron Gustafson, ni siquiera sabe que está siendo atendido hasta que vea los diseños en la misma página.
La experiencia difícilmente podría ser más placentera en cada caso; no tiene que pensar o interactuar con la página para comenzar a leer el contenido, pasar el tiempo preguntándose por qué se ve extraño en su pantalla, o acercarse para ver los elementos de navegación antes de poder tocarlos, porque alguien ya resolvió esos problemas por tú. Y que es por eso que el diseño de respuesta casi siempre triunfa sobre otras opciones.
Un diseño fluido es el más fácil de crear y mantener. Luego, también puede usar una hoja de estilo móvil para "solucionar" cualquier problema que pueda surgir en dispositivos muy pequeños.
fuente
Yo usaría dos hojas de estilo.
Una que sea flexible para adaptarse a la mayoría de los usuarios habituales de PC de escritorio.
Otro para móviles.
fuente
El mejor enfoque recomendado actualmente es utilizar lo que se ha denominado "diseño web receptivo", en el que necesita satisfacer varios dispositivos y tamaños / resoluciones de pantalla con un solo enfoque.
En http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and- se puede encontrar un gran artículo que describe cómo, qué y por qué del diseño web receptivo. recursos /
fuente
Depende de cuánto influya el estilo en su diseño. Hay muchos factores, requisitos del cliente, contenido de terceros que limitarán la flexibilidad en términos de tamaño.
Si puede construir un sitio que se vea bien y sea altamente utilizable para todos sus usuarios que se adapte a cualquier tamaño, entonces increíble, ¡hágalo!
La siguiente opción es tener un estilo con un ancho mínimo dictado por ciertos elementos, como el menú vertical, la ayuda a la navegación o similares, y cambiar el tamaño de la columna de contenido principal para llenar el espacio disponible restante. Aún así, no siempre es fácil dependiendo de ciertos contenidos (anuncios de banner, widgets, video, etc.).
Lo que la mayoría de los sitios terminan con es un diseño de denominador común de ancho fijo. Tenga en cuenta que NO dije el mínimo común denominador . Si observa las estadísticas, ya sean propias o de w3schools , notará que el 85.1% de las personas tienen pantallas de más de 1024 píxeles de ancho y el 98.9% de las personas tienen al menos 1024 píxeles de ancho. Piense en la facilidad de implementar un diseño de 1024 píxeles de ancho y el esfuerzo necesario para que un 1.1% más de personas no necesiten desplazarse horizontalmente y verá por qué esta es una opción extremadamente común para sitios web diseñados.
Por supuesto, considere su audiencia, puede que no coincida con los visitantes de w3schools. También puede alienar a propósito a más visitantes si no satisfacen sus necesidades. Stuck In Customs se diseñó de manera extremadamente amplia porque el objetivo son las personas interesadas en los gráficos y las fotografías que trabajan principalmente con pantallas grandes. También hace que la experiencia sea mucho más audaz para ellos.
fuente