09/04/2014

Optimizar un sitio web para móviles: seis consejos útiles

Optimizar un sitio web para móviles: seis consejos útiles

Aunque las estadísticas al respecto recogidas en nuestro país difieren, es innegable que el tráfico de Internet a través de dispositivos móviles se encuentra en pleno crecimiento. Hacer que nuestro sitio web sea responsivo, desarrollar una versión móvil y ofrecer una aplicación para iOS y Android son opciones entre las que necesariamente debemos elegir: la alternativa es negarles a los usuarios de smartphones o tablets una experiencia de navegación satisfactoria. Pero no solo se trata de ajustar los contenidos a pantallas más chicas: hay que cubrir las necesidades de usabilidad particulares que imponen estos dispositivos.

  1. Menús inteligentes. En dispositivos móviles, el menú de navegación sólo debe mostrar los enlaces esenciales, incluso aunque esto implique ocultar algunos enlaces visibles en escritorio. Si el menú es desplegable, la lista de segundo nivel debe aparecer necesariamente ante el «toque» (equivalente a un clic), ya que la acción de pasar el cursor sobre un título no existe en dispositivos táctiles.
  2. Enlaces adecuados. Cada enlace debe tener el grosor necesario como para contener el diámetro del dedo (aproximadamente, 44 píxeles). Alrededor de él debe dejarse suficiente espacio vacío como para que el usuario no lo presione accidentalmente.
  3. El contenido importante, arriba. Dada la limitación del espacio, debemos optimizarlo mejor. El contenido que queremos asegurarnos de visibilizar debe quedar al tope de la página, mientras que el contenido menos importante debe quedar abajo.
  4. Dar opciones. Es altamente probable que el sitio para móviles contenga menos elementos. Por eso, no está de más ofrecer un enlace para acceder a la versión completa (la de escritorio) desde el dispositivo móvil, para aquellos que creen estar perdiéndose de algo.
  5. Evitar el ingreso de texto. Suele ser muy incómodo escribir en un smartphone. Por eso, los métodos de entrada basados en escritura deben, siempre que sea posible, reemplazarse por menús de opciones, checkboxes y radio buttons.
  6. Reducir las imágenes. Solo deberían utilizarse las imágenes necesarias, de tamaño reducido y con el peso comprimido, para no sobreexigir las lentas conexiones móviles.

Siguiendo estos consejos evitaremos a los usuarios de móviles las frustraciones habituales al presionar enlaces accidentalmente, ingresar opciones equivocadas o no encontrar lo que buscan en la página.

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