Diseño web receptivo: ¿Descarga la misma cantidad de datos en cada dispositivo?

11

Quiero rediseñar mi blog y sitio web en WordPress para dar cabida a los crecientes usuarios de dispositivos móviles y tabletas.

También estoy escuchando sobre el diseño receptivo. Quiero saber si un diseño web receptivo descarga la misma cantidad de datos en la pantalla de una computadora y en un dispositivo móvil.

También he visto que muchas grandes empresas de marketing no han invertido en diseño web receptivo y todavía están buscando un sitio web separado optimizado para dispositivos móviles. Entonces, ¿qué debo elegir, un diseño web receptivo o un sitio web separado optimizado para dispositivos móviles?

Nikhil
fuente

Respuestas:

8

Según lo definido por Ethan Marcotte en ALA 306 , el término "diseño receptivo" se refiere a la técnica de aplicar diferentes reglas de estilo a su HTML dependiendo del tamaño de la pantalla del usuario. Para obtener más explicaciones sobre el diseño receptivo, aquí hay un buen mazo de Mike Bollinger .

En este modelo, envía exactamente el mismo HTML al cliente, ya sea que la pantalla sea pequeña o grande. Sin embargo, si los recursos (principalmente) las imágenes que se hace referencia en el CSS no están disponibles para ciertas resoluciones de pantalla, que pueden no ser descargados. Por ejemplo, para pantallas grandes que puede usar high-res.pngen su CSS y para pantallas pequeñas low-res.png, el cliente web puede optar por descargar solo la imagen en el estilo activo. (¡Vea el comentario de @ DBUK para al menos un cliente importante que actualmente descarga ambos! ¡Espero que los clientes se hagan más inteligentes!)

Esta técnica puede tener sentido en su caso, o puede tener más sentido crear un sitio móvil separado.

Diferentes dispositivos pueden implicar diferentes contextos de uso. Los teléfonos móviles siempre están en su bolsillo: ¿cómo usaría el usuario su sitio en la línea de comestibles? ¿Quieres enviarles todo el sitio? ¿O solo algunas características? O características totalmente diferentes? ¿Qué pasa si están en el sofá con el televisor leyendo casualmente su iPad?

Los dispositivos móviles tienden a tener procesadores más lentos, menos memoria y velocidades de conexión más lentas (todas esas "verdades" se vuelven menos ciertas cada año, por cierto); es posible que desee enviar un sitio móvil separado estrictamente por razones de rendimiento.

Me atrevería a decir que, en general, cuanto más estático, textual e impulsado por el contenido del sitio (es decir, un blog), mayores posibilidades hay de usar HTML existente y diseño receptivo. Cuanto más interactivo, multimedia y manejado por el usuario sea el sitio (es decir, una tienda), más posibilidades tendrá de adaptar sitios separados para tipos de dispositivos individuales.

Además, no olvide que hoy en día, también está la cuestión de si la experiencia móvil debería ser un sitio o una aplicación .

peteorpeter
fuente
Creo que, molestamente, las imágenes aún se descargarán. Las pruebas de cloudfour son un ejemplo: cloudfour.com/examples/mediaqueries/image-test .
DBUK
@DBUK Gracias por la corrección: había estado dudando al decir "no se descargará" frente a "no se puede descargar" en ediciones anteriores de esta publicación. Actualicé mi respuesta para que sea más precisa.
peteorpeter
Es nuevo para mí, así que no estoy seguro si es solo el iPhone. ¿Por qué nada es simple con la web :(
DBUK
1
@DBUK De hecho. De acuerdo con esa prueba, cuando ambas reglas de estilo de fondo están detrás de las consultas de medios, solo se descarga la resolución baja, solo cuando la resolución alta es la regla de estilo predeterminada y luego es anulada por una consulta de medios que ambas se descargan. Básicamente, es complicado!
peteorpeter
Entonces, ¿un primer enfoque móvil solucionaría este problema, por ejemplo, el estilo predeterminado para la resolución más baja y el uso de consultas de medios para todos los más grandes más el escritorio?
DBUK
1

El diseño receptivo no debería descargar la misma cantidad de datos en cada dispositivo, ya que no todos los dispositivos tienen los mismos requisitos multimedia. Los sitios móviles deberían usar imágenes de baja resolución y ser de naturaleza menos gráfica que los sitios para computadoras de escritorio / portátiles / tabletas. Y si desea combinar sus sitios móviles y regulares, debe tener esto en cuenta, de lo contrario, su sitio no responderá bien, ¿verdad?

El pedeorpeter slidedeck se vincula con el script Responsive Images del Filament Group, que le permite mostrar la imagen del tamaño correcto para el dispositivo apropiado usando JavaScript, idealmente sin descargar más de una versión. Para los recursos de imagen de diseño, esto normalmente se haría a través de consultas de medios que especifican diferentes estilos para diferentes resoluciones de pantalla.

Lèse majesté
fuente
1

Creo que muchas empresas tardarán mucho tiempo en actualizar sus sitios, demonios, todavía hay algunas que usan tablas. Responsive, y el primer enfoque móvil, son definitivamente las palabras de moda del momento.

Como se menciona en el póster anterior, debe usar imágenes de baja resolución para su teléfono móvil / dispositivos de baja resolución. Las consultas de medios lo ayudarán a orientar todas las resoluciones más bajas. Sin embargo, escuché que el safari móvil ignorará la pantalla: ninguno gobierna y descarga las versiones de escritorio de las imágenes también. Además, si sigue la ruta de la imagen receptiva, ejerce mucha presión sobre el procesador móvil: 3bytes por 1 píxel ... creo. Hay muchas soluciones para evitar el contenido adicional que se descarga, algunas bastante hacky - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=es_ES#gid=0

Para obtener información sobre las desventajas del diseño web receptivo, visite http://www.webdesignshock.com/responsive-design-problems/ . Sin embargo, no dejes que esa publicación de blog te desanime. A Book Apart escribió un libro fantástico sobre el tema: http://www.abookapart.com/products/responsive-web-design . Definitivamente vale la pena agarrar la versión de libro electrónico.

DBUK
fuente
¿Puedes dar más detalles sobre la declaración de 3kb por 1px? No veo cómo usar JavaScript para obtener una imagen de tamaño completo solo si la resolución de la pantalla es mayor que 480px tendría ese efecto. Además, nunca debe usar display: nonepara ocultar imágenes de usuarios móviles. Eso es solo una mala práctica.
Lèse majesté
"Algunos operadores de red, por ejemplo, comprimen imágenes antes de que pasen por el aire al dispositivo móvil" - w3.org/TR/mobile-bp Eso significaría que el móvil necesitaría descomprimirlas (?) A un costo de 3bytes por píxel (@ 24 bits RGB, por ejemplo, un JPG)? Vaya, puse kb arriba, maldita sea. Esto es puramente desde un punto de vista CSS, con el móvil descargando todas las imágenes ... móviles y de escritorio, y sin tener en cuenta las soluciones de JavaScript.
DBUK