El diseño del sitio web móvil es complicado, ya que una versión móvil de un sitio puede no ser compatible con todos los dispositivos. Los diseñadores deben conocer las mejores prácticas de diseño para que su presencia móvil sea significativa y valiosa.
Existe un debate continuo entre los desarrolladores web sobre qué forma de crear un sitio web optimizado para dispositivos móviles es la mejor. Hay tres métodos principales para desarrollar un sitio web móvil.
Estos son:
- Diseño web adaptable.
- Sitios web dedicados a móviles.
- RESS: la programación del lado del servidor representa CSS y HTML, según el tipo de dispositivo.
Cada método tiene sus pros y sus contras. Un desarrollador web debe conocer cada técnica para implementar la mejor para la situación.
3 maneras de diseñar un sitio web móvil
Diseño Web Responsivo (RWD)
RWD se basa en las consultas de medios CSS3 para alinear el diseño de una página web con el tamaño del área de visualización de un dispositivo. El mismo código HTML se utiliza para presentar diferentes diseños de página web para tabletas, dispositivos móviles, equipos de escritorio y otros dispositivos.
Beneficios:
- Su sitio web tendrá un contenido y un marcado HTML similares, por lo que los visitantes de dispositivos móviles tendrán la misma experiencia, sin importar qué tipo de dispositivo estén usando.
- Una sola URL hace que sea más fácil para los usuarios vincularse y compartir contenido. (Si la página web está disponible con más de una dirección URL, los usuarios pueden confundirse).
Inconvenientes:
No es posible optimizar por separado el contenido móvil. Por lo tanto, un diseñador que utiliza RWD no puede adaptar el contenido por separado para los usuarios móviles.
De acuerdo con los datos de enero de 2013 del archivo HTTP, una página web promedio es de aproximadamente 1.3 MB. Sin embargo, la mayoría de los sitios de RWD son comparativamente más grandes. Este tamaño más grande disminuye el rendimiento de los sitios móviles, haciéndolos más lentos.
Los usuarios móviles están más en sintonía con los patrones de diseño de la interfaz de usuario específicos para dispositivos móviles. Además, los usuarios de dispositivos móviles están acostumbrados a realizar múltiples tareas. A menos que la estructura de navegación sea personalizada para dispositivos específicos, los usuarios pueden enfrentar problemas cuando intentan realizar varias tareas simultáneamente.
Sitios móviles dedicados
Este método mejora la experiencia de los usuarios móviles al crear un sitio web completamente separado.
Beneficios:
- Simplicidad de administración: se requieren cambios separados para los sitios móviles y de escritorio. Los cambios realizados están limitados a cada versión respectiva. Esto significa que los cambios destinados a la plataforma móvil no se pueden acceder desde el escritorio.
- A medida que desarrolla un sitio web específico para dispositivos móviles, es más fácil optimizarlo y optimizarlo específicamente para esa audiencia.
- El contenido y la estructura de navegación se pueden personalizar para usuarios móviles.
Inconvenientes:
Compartir una página web a través de las redes sociales se vuelve más difícil, ya que con sitios móviles dedicados hay múltiples URL para las páginas. Cuando los usuarios de escritorio hacen clic en las URL de dispositivos móviles compartidas en las plataformas de redes sociales, pueden recibir inadvertidamente la versión móvil del sitio en lugar de la versión de escritorio.
Para evitar problemas de contenido duplicado, el desarrollador web debe usar las etiquetas meta rel = "alternative" y rel = "canonical". Si un usuario móvil busca en Google y hace clic en una URL de escritorio, el usuario verá la versión de escritorio o será redirigido a la versión móvil de la página web. Si la versión móvil no existe, el usuario recibirá un mensaje de error.
Crear un sitio web totalmente diferente para usuarios móviles significa que el sitio se adaptará específicamente para usuarios móviles. Sin embargo, para cumplir ese propósito, los desarrolladores web tienen que eliminar la funcionalidad y el contenido, lo que resulta ser una pesadilla para ellos.
Diseño web adaptable+ Componentes del lado del servidor (RESS)
Este método depende de la programación del lado del servidor para proporcionar HTML y CSS personalizados para diferentes dispositivos. El código para usuarios móviles será diferente del de los usuarios de escritorio.
El objetivo principal de esta implementación es mejorar el rendimiento del sitio web. Este método funciona bien cuando se combina con un diseño web responsivo. Por lo tanto, esta implementación puede denominarse componentes del lado del servidor Responsive Web Design + (RESS).
Beneficios:
- La estructura de navegación se puede personalizar para diferentes tareas realizadas por usuarios de escritorio y móviles.
- Los desarrolladores pueden eliminar elementos de página de HTML y CSS para lograr la visualización deseada.
- Es posible eliminar JavaScript innecesario de HTML, lo que libera los recursos de la CPU, la memoria y el caché de los dispositivos móviles.
Inconvenientes:
- HTML dinámico aumenta la carga en el servidor.
- No se puede confiar en la detección de dispositivos.
- HTML y CSS están optimizados para el rendimiento móvil. La versión de escritorio utiliza más solicitudes HTTP y scripts de Java.
¿Qué método elegir?
La decisión de diseñar un sitio optimizado para dispositivos móviles depende de los productos que venda, su público objetivo, la inversión requerida, su competencia, las tasas de conversión, etc. El método de diseño que funcionará mejor depende en gran medida de los formatos de pantalla, sistemas operativos, navegadores y resoluciones
La mayoría de los sitios de diseño web receptivos no se implementan de manera óptima y, como resultado, estos sitios tardan más en cargarse. Dado que la competencia es feroz, puede perder clientes si su sitio tiene un rendimiento más lento. Un usuario simplemente cambiará a otro sitio web que tarda menos tiempo en abrirse. Aunque es posible crear sitios web con tiempos de carga más cortos con sitios móviles dedicados, también hay varios inconvenientes asociados a esta implementación.
RESS proporciona los beneficios de que RWD supere sus dos principales inconvenientes. La principal desventaja de RESS es que la detección del dispositivo no es confiable. Debe probar con frecuencia nuevos dispositivos para asegurarse de que el proceso continúe funcionando correctamente.
Existen servicios como DeviceAtlas, WURFL y otros que pueden detectar nuevos dispositivos. Será una gran ayuda para actualizar nuevos dispositivos en su base de datos.
El diseño web móvil es exitoso solo cuando un sitio web se muestra correctamente en un dispositivo móvil. Aunque es una tarea desalentadora para los diseñadores representar todas las partes esenciales de un sitio de escritorio en una pequeña ventana móvil, cada día surgen nuevas técnicas para hacer que los sitios web móviles sean mejores, más rápidos y más completos.
Foto del sitio web móvil a través de Shutterstock
15 comentarios ▼
