12/02/2014

Responsive y adaptive: sitios web aptos para cualquier dispositivo

Responsive y adaptive: sitios web aptos para cualquier dispositivo

En varias oportunidades nos referimos al diseño web responsivo. Esta técnica, basada mayormente en los media queries de CSS3, consiste en adaptar una misma plantilla a múltiples dispositivos haciendo que el contenido o el aspecto visual que se muestra dependa del ancho o el alto de la pantalla del usuario, entre otros factores. Por ejemplo, si el usuario ingresa a un sitio web responsivo desde una computadora de escritorio podrá ver tres bloques de texto alineados horizontalmente; pero si ingresa desde un smartphone o una tablet, los verá apilados verticalmente, para ahorrar espacio horizontal y evitar que deba hacer scroll hacia la derecha. Otra posibilidad es que se muestre más o menos contenido dependiendo del tamaño de la pantalla. Un mismo diseño se ajusta a las características del dispositivo donde se muestra.

Pero este enfoque tiene algunos problemas:

  • Los archivos de plantilla que se carguen serán los mismos sin importar si estamos utilizando un smartphone o una computadora de escritorio. Esto quiere decir que, por más que en la versión móvil no se muestren algunos elementos, se cargarán de todas formas. Así, parte del tiempo de carga es desperdiciado, afectando la experiencia de usuario.
  • Si el sitio es muy complejo, puede ser necesario crear demasiadas reglas condicionales para adaptarlo a diferentes dispositivos, entorpeciendo el proceso de desarrollo y afectando la claridad del código fuente.
  • Puede ser muy difícil rediseñar para que sea responsivo un sitio web con layout fija.
  • Los media queries no son reconocidos por browsers antiguos.

Por estos inconvenientes, muchos sitios emplean un enfoque alternativo. El diseño web adaptive se basa en generar varias plantillas, para que se detecte el tipo de dispositivo y se cargue la más adecuada. De esta manera, sólo se cargan los archivos indispensables para mostrar el sitio en el dispositivo desde el que navegamos.

Este enfoque es indicado para sitios web con un gran volumen de contenido en cada página, especialmente si está organizado en numerosos bloques de texto (por ejemplo, los sitios web de noticias). En estos casos, generar diferentes plantillas es más eficiente que tratar de adaptar una sola a diferentes tamaños. Sin embargo, no es tan efectivo a la hora de adaptar un sitio web a una variedad de pantallas y formas de interacción cada vez más grande e impredecible: probablemente, tres o cuatro plantillas no cubran las necesidades de todos los usuarios.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce