24/07/2013

¿Qué debemos tener en cuenta al desarrollar un sitio web responsivo?

¿Qué debemos tener en cuenta al desarrollar un sitio web responsivo?

El diseño web responsivo es aquel que permite adaptar el aspecto de un sitio web a la plataforma desde la cual se lo visualiza. Esto incluye el cambio automático de tamaño de imágenes, tablas, elementos estructurales, texto y videos. Sin embargo, esto no basta por sí solo para que un sitio sea considerado apto para cualquier dispositivo. Con frecuencia, los desarrolladores web omiten otros aspectos que afectan exclusivamente la experiencia de usuario de quienes ingresan desde dispositivos diferentes a las tradicionales laptops y computadoras de escritorio:

  • El contenido, primero. Antes de diseñar un sitio web responsivo, debemos definir el volumen de contenido que vayamos a mostrar en él. Lo ideal es poder mostrarles a usuarios de móviles la misma cantidad de contenido que a los usuarios de computadoras.
  • Un dedo no es un cursor. Un botón puede tener el tamaño adecuado para ser «cliqueado» pero ser demasiado chico para ser pulsado con un dedo, cuyo diámetro es de alrededor de 44 píxeles. Si no se hizo esta consideración, el usuario podrá activar accidentalmente botones adyacentes.
  • La ventana no es la resolución de pantalla. Para probar desde una computadora si un diseño es responsivo, se puede restaurar la ventana del navegador y achicar o agrandar su tamaño. El diseño debe estar adaptado a todo tamaño posible, y no sólo a las dimensiones «estándar» de una tablet o un smartphone. ¿Qué sucedería si un usuario quisiera ver nuestro sitio en una ventana pequeña para tener un documento de Word abierto en el espacio restante de la pantalla?
  • En una pantalla táctil, el :hover no existe. El selector :hover de CSS permite especificar cómo se transforma un elemento cuando pasamos el mouse sobre él, sin cliquear. Esta acción no existe en dispositivos táctiles, donde cualquier contacto con el dedo es considerado como un clic. Por eso, un botón que cambia de color cuando pasamos el mouse sobre él no mostrará ese comportamiento en un smartphone.

Un teléfono o una tablet no son simples computadoras reducidas; por el contrario, tienen normas propias que todo desarrollador web debe conocer.

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