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

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?

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 .

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.

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.