Web para móvil

Inicio > Diseño Web > Web para móvil

Diseño web para móvil

A nadie se le escapa a día de hoy la importancia de tener un buen diseño web para móviles; cuando te dispones a programar una web para móvil es importante tener en cuenta algunos factores, factores que serán de vital importancia en la usabilidad de esa web para los usuarios móviles.

Podemos optar por dos tipos de diseño; aunque parecidos en el resultado final son bastante distintos en su arquitectura; el primero es hacer una web exclusivamente pensada para móviles; con lo cual el desarrollo será parecido al de la versión de escritorio pero con características concretas a la hora de visualizarse en los dispositivós móviles; o diseñar una arquitectura web de escritorio Full Responsive, la cual se adapte perfectamente en su visualización en dispositivos móviles.

Razones para la elección del diseño

La primera razón de peso para decidir entre una u otra opción de diseño web va a ser el coste; si optas por un diseño exclusivo para dispositivos móviles y otro para escritorio será necesario hacer dos arquitecturas de diseño web; con el correspondiente aumento de costes de diseño; sin embargo si tu opción es efectuar un diseño Full Responsive, tendrás que preocuparte durante el desarrollo, de cómo se visualizan los distintos elementos de diseño aplicados en estos dispositivos con el fin de hacerlo coherente; se corresponda con la arquitectura del diseño de escritorio, y sea apto para el funcionamiento en ambos tipos de dispositivos, tanto móviles como de escritorio.

Diseño web para móviles

A estas alturas a ningún desarrollador le voy a enseñar cómo se realiza un desarrollo web para móviles; y mucho menos la importancia que tiene disponer de una web perfectamente optimizada para este tipo de dispositivos. Cada vez cobra mayor influencia la navegación por Internet desde los distintos dispositivos móviles; bien sean Tablets o Smartphone, si bien es cierto que las búsquedas en Google aún van más o menos parejas en todos los dispositivos; es cierto que las búsquedas desde dispositivos móviles empiezan a obtener ventaja, y esta es precisamente una de las razones las cuales me han impulsado a escribir este artículo; un artículo de orientación más que un tutorial de diseño web para móviles; trata de ser una reflexión para optimizar nuestro diseño web.

No es mi objetivo tampoco entrar en cientos de datos estadísticos con el objetivo de apoyar mi explicación; son sobradamente conocidos y están al alcance de todos en la web; es más, basta con salir a la calle y ver el uso que se da a los dispositivos móviles ante casi cualquier consulta en la web.

Internet en ordenadores y en móviles

Evidentemente el uso es distinto; normalmente los ordenadores personales se utilizan en espacios de tiempo que nos permiten prestar una mayor atención a las búsquedas que se realizan, aunque esta afirmación es totalmente cierta; no es menos cierto que los tiempos de uso de los dispositivos móviles están aumentando, y si observamos las horas de mayor uso del movil podemos obtener algunos datos interesantes; durante el día el tiempo de navegación por internet desde dispositivos móviles apenas supera el minuto de duración; sin embargo a partir de las 21 horas el uso se dispara hasta los tres minutos.

La conclusión es sencilla; durante el día navegamos mientras estamos haciendo otro tipo de tareas, y se trata de búsquedas menos profundas; me atrevería a decir más que busquedas son consultas; mientras que a partir de las 21 horas nuestras búsquedas se amplian, en función de nuestros hábitos cotidianos; se consulta más profundamente las redes sociales personales y se buscan cosas menos concretas; pero relacionadas en muchas ocasiones con esa navegación rápida que hemos realizado durante el día; de aquí podemos deducir otro dato interesante; mientras efectuamos otras tareas de nuestro día a día, usamos los dispositivos para búsquedas en la web; búsquedas que después, en muchos casos, se van a reproducir en ordenadores personales; y a partir de las 21 horas, hacemos búsquedas desde dispositivos móviles mientras descansamos de nuestras tareas cotidianas.

Influencia del diseño móvil

Otra de las influencias para que el uso de la web en móviles sea menor pero vaya en aumento es la adaptación de las distintas operadoras de telefonía móvil al mercado, los planes de precios son cada vez más económicos y los usuarios de dispositivos móviles están empezando a perder el miedo a consumir su plan de datos. No obstante aún somos muchos los usuarios de web móvil que esperamos a tener a mano una wifi para navegar y de esa forma no consumir nuestro plan de datos.

El diseño web para móviles y la usabilidad móvil

web para móvilesSi hay algo que debemos tener en cuenta en el diseño web para móviles es precisamente la usabilidad y en ello es precisamente donde debemos centrar nuestros esfuerzos, las tendencias en diseño web para 2016 apuntan en ese sentido. Si ya estábamos convencidos de la necesidad de que nuestros contenidos tienen que ser ante todo usables en móvil, con el nuevo proyecto AMP (Accelerated Mobile Pages) esto cobra un mayor sentido, el proyecto contempla una serie de nuevas alternativas para la web y su presentación en los dispositivos móviles que ya describí en el anterior artículo sobre el tema del proyecto AMP.

Antes de diseñar, imaginar

Tenemos que pensar durante el diseño web para móviles en cómo los usuarios van a interactuar con nuestra web, si tomamos como válido ese dato del uso de dispositivos móviles durante el día, tenemos un minuto para convencer al usuario de que realice la acción de él esperada cuando accede a nuestra web desde este tipo de dispositivos, por tanto, cuanto mejor cargue, y más pronto se muestren las llamadas a la acción y el contenido de la web, muchas más posibilidades tenemos de convertir esa visita en una venta o en una consulta posterior. La búsqueda y aquello que espera encontrar el usuario en la web han de coincidir plenamente, en caso contrario veremos cómo aumenta el porcentaje de rebote en el diseño web que hagamos para dispositivos móviles, y eso es precisamente lo que queremos evitar a toda costa, ver como los usuarios abandonan nuestra web.

Diseño para escritorio o diseño para móvil

Mientras en el diseño web para ordenadores personales de escritorio podemos ser mucho más esplendidos en elementos visuales los cuales aporten mayor dinamismo a la web, en los dispositivos móviles debemos ser muy concretos y cuando optamos por los diseños Full Responsive no siempre tenemos en cuenta este punto durante el desarrollo, colocamos los puntos de atención distribuidos por todo el contenido con la intención de tener disponibles distintos focos de atención durante la navegación y eso en móvil se puede pagar muy caro, con una peor experiencia de usuario.

Garantizar una buena usabilidad web para dispositivos móviles

Con el objetivo de garantizar una buena usabilidad web para dispositivos móviles deberemos tener en cuenta como mínimo los siguientes factores durante el diseño de la web:

  1. No pienses en un único tipo de dispositivo al elegir la arquitectura del diseño web para móviles

    1. La diversidad de dispositivos móviles te obliga a tener en cuenta todos y cada uno de ellos durante el diseño de la web
      1. no es lo mismo el diseño para móviles que para tablets
      2. la orientación del dispositivo es fundamental, ten en cuenta que se debe visualizar el contenido de la web tanto en vertical como en horizontal
      3. Hay dispositivos desde 4 pulgadas hasta 15 pulgadas, por tanto el contenido del diseño web ha de ser muy flexible y adaptarse de forma matural a todos los dispositivos móvilesdiseño web para móviles
  2. Cuidado si utilizas plantillas prediseñadas

    1. Ni todas las platillas que puedes utilizar están optimizadas, ni todas son Full Responsive, prueba la demo de la plantilla en varios dispositivos móviles antes de hacer tu elección. Personalmente hace tiempo que utilizo en mi arquitectura el diseño web a 6 columnas, y esto se fundamenta en que los dispositivos móviles, excepto algunas tablets que permiten visualizaciones más complejas, visualizan con fluidez hasta un máximo de tres columnas, utilizando el formato a seis garantizo una perfecta adaptación independientemente de cual sea la ventana gráfica del dispositivo móvil y de esa forma consigo que este la muestre en el orden predeterminado durante la estrategia de diseño de la web
  3. Donde colocas el menú principal

    1. Este es un punto crítico, los menú en la parte superior obtienen menos clics, es mejor un menú deslizante o si optas por incorporar en tu web para móviles el menú en la parte superior que esté siempre visible a pesar de hacer scroll, los menús son necesarios para la navegación pero en el diseño de la web móvil debemos tener en cuenta la usabilidad como factor principal, menús demasiado grandes y con demasiados elementos dificultan la navegación en lugar de mejorarla.
  4. Focaliza el contenido de tu web para móviles

    1. Ya hemos apuntado antes el tiempo y las circunstancias segun las cuales se efectúa la navegación en dispositivos móviles, por tanto ten en cuenta ese factor a la hora de disponer los distintos contenidos en la versión web para móviles. Posiciona adecuadamente tus llamadas a la acción a lo largo del diseño y para que aparezcan de forma casi instantanea, debemos ser agresivos claro, pero con sutileza. Mucho cuidado si empleas vídeos o tablas, no utilices valores absolutos en pixels, trabaja con porcentajes para asegurarte que quien visualice el vídeo no tenga que cambiar la orientación de la pantalla para visualizarlo. Las tablas un poco lo mismo, en mi caso prefiero no utilizarlas, además de que en AMP dan errores y no son admitidos los atributos de tabla, en condiciones normales se visualizan mal a menos que distribuyas las tablas en tamaños basados en porcentajes, aún así y en función del texto contenido en cada celda de la tabla el tema es complicado de resolver y a los usuarios móviles debemos ponerles las cosas fáciles.
  5. Imágenes adaptadas para todos los dispositivos móviles

    1. En un post anterior sobre la optimización de imágenes en diseño web ya vimos la importancia de esta optimización para mejorar tanto la carga de la web en dispositivos móviles como para dar frescura al diseño, pues bien, trata de utilizar siempre imágenes perfectamente optimizadas y que no ralenticen el tiempo de visualización de la web para móviles, recuerda, tenemos apenas un minuto para enamorar con nuestra web.
  6. Los dedos son más grandes que el puntero del ratón

    1. Por lo menos los mios, y como usuario agradecería se tenga en cuenta este factor en el diseño web para móviles, hay varios factores que dificultan la navegación:
      1. La distancia entre los botones táctiles
      2. Distancia entre los elementos del menú
      3. Espacio entre textos e imágenes
      4. Tamaño de fuente
  7. La mayoría de plugin no funcionan en el diseño móvil

    1. Y esto me encanta, ya sabes que me gusta utilizar el mínimo de plugins posibles, pues cuando pienso en el diseño web para móviles menos aún, muchos de ellos no tienen ningún sentido y además la mayoría no sirven para nada, en mi caso trato de utilizar aquellos plugin que mejoran la interacción social, el resto si por mi parecer fuera los eliminaría todos.
  8. Aprovecha las funcionalidades de los dispositivos móviles para mejorar la experiencia de usuario

    1. Si algo tienen de particular los dispositivos móviles es que todos utilizan servicios de Geolocalización, conectan con la cámara de fotos, es posible cambiar entre una visualización en vertical o en horizontal y todos estos puntos nos aportan utilizaciones del dispositivo que no se pueden dar en los ordenadores personales, por ejemplo: ¿Porque no incluir un botón de llamada teléfonica en lugar de un formulario? Sin duda mucho más eficaz y de mejor manejo, no necesitas andar escribiendo para contactar, directamente llamada telefónica, prueba y me cuentas si es efectivo o no.

Diseñando una web optimizada para móviles

Sin duda tampoco voy a descubrir la pólvora en este apartado, la mayoría de desarrolladores hace mucho tiempo que utilizamos HTML 5 y CSS 3 para nuestra programación, pero si que creo oportuno repasar las etiquetas HTML más importantes y que influyen directamente en el diseño para móviles:

  • <!DOCTYPE html>
    • En este caso estamos efectuando la declaración del tipo de documento para que el dispositivo móvil reconozca que ese diseño está optimizado para él.
  • <meta charset=”UTF-8″>
    • Los juegos de caracteres admitidos por HTML 5 son bastantes más, pero el juego de caracteres UTF-8 asegura la compatibilidad con todos los dispositivos móviles.

Adaptación del diseño a la ventana gráfica

Una vez hecha la declaración de documento debemos introducir algunas etiquetas Meta las cuales son exclusivas para diseños móviles, estas etiquetas ayudan a los dispoistivos móviles a interpretar cómo se va a estructurar la arquitectura del diseño y así adaptar el contenido a la ventana gráfica:

  • <meta name=”MobileOptimized” content=”width” />
    • Esta etiqueta en concreto le está diciendo a los dispositivos móviles el tamaño necesario para adaptarlo a su ventana gráfica; esta etiqueta es especialmente útil tal cual está escrita; indica al navegador que no debe realizar cambio alguno en todo el contenido que contenga esta etiqueta Meta. En caso de que deseemos, aunque no se porqué motivo lo querrías indicar, aplicar un ancho fijo; lo podriamos indicar después del comando width con un valor en pixeles según el formato en que se diseñó la página.
  • <meta name=”HandheldFriendly” content=”true” />
    • Este formato le indica al navegador que la página está optimizada para móviles; prácticamente no se utiliza salvo en las populares Blackberry pero que han casi desaparecido; sin embargo Apple diseñó una etiqueta en principio exclusiva para sus dispositivos móviles; la cual se ha convertido casi en un estándar para indicar a los dispositivos móviles, y que hace exactamente lo mismo que la anterior.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    • Cómo apuntaba antes, esta etiqueta en principio diseñada para los dispositivos móviles basados en iOS; es utilizada ya por la práctica mayoría de dispositivos móviles, y se ha aceptado como un estandar de programación para móviles.
    • Esta etiqueta contiene la escala iniciar del documento a mostrar y sus distintas aplicaciones.
      • Width: define la anchura de la pantalla

      • Height: define la altura virtual de la pantalla en vertical o el ancho del Vewport en horizontal

      • Initial-scale: donde indicamos la escala inicial del documento

      • Minimum-scale: la escala mínima a la que se puede mostrar la web

      • Maximum-scale: donde se define la escala máxima admitida

      • User-scalable: que indica al navegador si el usuario puede hacer zoom

La etiqueta Viewport del diseño web para móviles de la página de Jardín de Ideas tiene la siguiente estructura:

<meta name=”viewportcontent=”width=device-width, initial-scale=1” />

En este caso no nos hemos matado mucho, simplemente le decimos a los navegadores que cumple todos los requisitos sin especificar nada más, sin embargo si haces la prueba verás que todos los conceptos incluidos en las etiquetas selectivas se cumplen a la perfección. Al desarrollar una web para móviles sólo utilizo las etiquetas selectivas para restringir utilidades, nunca para definir, por ejemplo si no quiero que el usuario tenga la opción de hacer zoom en la etiqueta User-scalable lo acompaño de “no”;

Conclusión.

Hasta aquí este artículo básico sobre el diseño web para móviles, sin duda hay conceptos sobre los que podemos profundizar mucho más, sin duda lo haré en próximos artículos.

Cómo siempre, si estás interesado en ampliar información sobre el diseño web para móviles estaré encantado de comentar las dudas que puedas tener.

Hablemos
Rating: 5.0. From 28 votes.
Please wait...
2017-03-13T09:11:07+00:00

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies