Cómo Crear un Sitio Web Para Móviles (En 4 Sencillos Pasos)
En octubre de 2016, el número de usuarios de Internet para móviles y tabletas superó por primera vez al número de usuarios de computadoras de escritorio. Este cambio de paradigma sirvió como un llamado a la acción para que los desarrolladores comenzaran a repensar toda su industria. Desde entonces, el uso móvil ha seguido creciendo y se ha vuelto aún más frecuente y hay muchas soluciones de desarrollo de sitios web elegantes que se emplean hoy en día para servir a estos usuarios.
Estas soluciones son capaces de proporcionar a los usuarios una experiencia similar que obtendrían en un escritorio sin comprometer el contenido o la función de su sitio web. Si bien construir un sitio que sea capaz de crear esta experiencia puede parecer desalentador, es mucho más fácil de lo que crees.
De hecho, es tan simple que hemos compilado una Guía de 4 Pasos fácil de seguir para crear un sitio web móvil para comenzar.
Elija Su Enfoque de diseño web
Hay varias soluciones que puede emplear para crear un sitio web compatible con dispositivos móviles. Si bien cada enfoque de diseño web tiene sus propios adherentes que le dirán que es el mejor, debe determinar cuál se adapta a sus necesidades en función de su propia consideración de la información.
Diseño web adaptable
El diseño web adaptable (RWD) emplea diseños adaptables que son posibles mediante el uso de medios basados en proporciones, extensiones y cuadrículas de backend. Esto significa que si se expande o contrae una ventana del navegador, el contenido la seguirá y se adaptará según corresponda. El resultado es un sitio web que se ve similar tanto en el escritorio como en el móvil.
Esta interfaz de usuario de plástico a menudo se compara con el agua. Puede verter una taza de agua en un vaso, una olla o una jarra y el volumen de agua seguirá siendo el mismo, a pesar del cambio de recipiente.
Diseño web adaptable
A diferencia de RWD, el diseño web adaptable (AWD) no depende de un solo diseño cambiante. En su lugar, utiliza diseños distintos para diferentes dispositivos y tamaños de pantalla. Esto significa que cuando inicia sesión en un sitio web, se le proporciona la página que mejor se adapte a las necesidades del dispositivo que está utilizando actualmente.
Por ejemplo, algunos pueden elegir crear tres sitios web: uno para teléfonos inteligentes, otro para tabletas y otro para computadoras de escritorio. Esto requeriría tres diseños diferentes, que permanecerían «en espera» hasta que cada visitante los llamara. En lugar de un sitio web único para todos, un AWD actúa como una puerta de enlace personalizada para todos los usuarios.
El enfoque que elija para crear su sitio web móvil es solo el comienzo del proceso de diseño.
Use un Creador de sitios web o un CMS
Una vez que determine cómo desea que funcione su sitio web en diferentes dispositivos, ¡estará listo para comenzar a crearlo! La plataforma en la que creas tu sitio es fundamental para emplear tu plan de diseño móvil. Para los usuarios básicos, hay dos opciones a considerar.
Constructores Web
sitio Web de constructores de tomar todas las conjeturas de diseño web y le permiten crear una totalmente personalizable y característica-rico sitio web en cuestión de minutos. Logran esto permitiendo a los usuarios elegir un tema o plantilla y simplemente arrastrar y soltar las funciones que les gustan en sus páginas web y eliminar fácilmente las que no.
La mayoría de los creadores de sitios web, incluido el estándar de oro Wix, permiten a los usuarios determinar simplemente cómo reaccionarán sus sitios en dispositivos móviles. La plataforma Wix se basa principalmente en sitios web adaptativos, mientras que otros servicios como Weebly se basan principalmente en el diseño receptivo. Dependiendo del tipo de enfoque que imaginó para su sitio, puede decidir elegir un creador de sitios web que se adapte a sus necesidades.
Sistemas de gestión de contenido
Un sistema de gestión de contenido (CMS) es su mejor alternativa a un creador de sitios web dedicado. Los CMSS como WordPress dependen de un poco más de conocimiento de computadoras e Internet, pero pueden proporcionar más funciones que los creadores de sitios web. Además, un CMS ofrece diseños RWD y AWD.
Al igual que los creadores de sitios web, un CMS puede aprovechar cualquiera de los enfoques de diseño móvil integrándolos en la multitud de temas disponibles para los usuarios. Estos temas pueden ser tan ricos como los que se encuentran en los creadores de sitios web, pero es mejor que sirvan a aquellos a quienes no les importa ensuciarse un poco las manos y aprender un poco sobre diseño web.
Si decides usar un CMS, simplemente puedes descargar un tema listo para dispositivos móviles, ya sea gratis o por una tarifa, y usarlo para crear tu sitio web. La mayoría de estos temas vienen con soporte completo y actualizaciones regulares, por lo que no tiene que preocuparse por mantener y administrar su sitio web.
Diseñar un sitio web móvil
Al determinar en qué plataforma construirá su sitio, estará listo para diseñar y crear su sitio web. Ya sea que esté creando un blog, una cartera, un sitio de negocios o incluso una tienda de comercio electrónico, puede hacerlo utilizando los principios estándar necesarios para el diseño de cualquier sitio. Una vez que complete su diseño, simplemente tendrá que probar su sitio para ver si responde correctamente (RWD) o crear otro diseño para dispositivos móviles (AWD).
Diseñar un sitio web móvil es casi tan sencillo como diseñar un sitio de escritorio, pero hay algunas cosas que debes tener en cuenta.
a. Los usuarios móviles Generalmente tienen un ancho de banda limitado
Siempre debe tener en cuenta que la mayoría de los visitantes móviles utilizan redes móviles que limitan su ancho de banda. Como resultado, es crucial mantener tu sitio móvil ligero y libre de demasiado contenido que pueda consumir esos bytes cruciales.
b. Los usuarios de dispositivos móviles desean Información Relevante Rápidamente
A menudo, los usuarios de dispositivos móviles visitan un sitio para obtener información pertinente sobre las ubicaciones que visitan, como el horario de las tiendas o los números de teléfono. Si esta información relevante no está disponible de forma rápida y clara, puede resultar en la pérdida de un cliente. Asegúrate de que tu sitio web móvil tenga enlaces rápidos a información de contacto y otros datos relevantes.
c. Los dispositivos móviles son menos potentes
Las computadoras de escritorio y portátiles están construidas con tarjetas gráficas y procesadores que son capaces de manejar una carga pesada. Si bien los dispositivos móviles son extremadamente potentes, no están construidos de la misma manera. En su lugar, pierden la función por la forma y, como resultado, no pueden manejar el contenido pesado del procesador de la misma manera que una computadora.
Si su sitio de escritorio requiere este tipo de dedicación de recursos, es posible que desee pensarlo dos veces antes de servir a una audiencia móvil este mismo tipo de sitio.
Organizar contenido
Al crear un sitio para dispositivos móviles, es importante asegurarse de que los usuarios puedan acceder a todo el contenido de su sitio de escritorio y, al mismo tiempo, conservar la capacidad de trabajar en una pantalla más pequeña. Hay varias consideraciones que debes tener en cuenta al organizar tu contenido.
a. Mobile First
Mobile First es uno de los movimientos más nuevos en el mundo del diseño. Estipula que primero debe diseñar su sitio móvil antes de expandirse a páginas para computadoras de escritorio y tabletas. El contenido que cree para su sitio móvil también se puede cargar en la versión de escritorio.
Este enfoque, por lo tanto, es útil para sitios web receptivos y con servicios dinámicos en los que el contenido de su versión móvil es idéntico al de su sitio de escritorio.
b. Segundo móvil
Si ya tienes un sitio web de escritorio, organizar el contenido puede ser un poco más difícil, aunque no del todo imposible. Primero, averigua los elementos de tu sitio de escritorio que necesitas mostrar en la versión móvil.
Recopile datos de usuario a través de las herramientas de análisis estándar que utiliza y descubra:
- El contenido que es más importante para sus visitantes.Lo que los usuarios móviles tienden a ignorar.El camino que suelen tomar tus visitantes.
Utilice los conocimientos que recopile para saber qué debe y qué no debe ir en el sitio móvil. Esto te ayudará a limpiar tu sitio de escritorio. Luego, haz un mapa de la ruta de contenido que tomarán tus visitantes.
Después de tener una buena idea sobre el flujo visual de su sitio, puede diseñar fácilmente el diseño inicial para pantallas móviles e ir directamente al desarrollo del sitio web móvil.
c. Navegación
Las pantallas de los teléfonos móviles son pequeñas. Esto significa que debe minimizar las opciones de navegación móvil. Considere usar una lupa o el menú navicon de tres líneas (hamburguesa). Una vez que haya terminado, pruebe su sitio web en los dispositivos populares utilizados por hasta el 90% de sus visitantes móviles.
d. Design for Touch
Dado que es imposible hacer clic con el botón derecho del ratón o pasar el cursor con los dedos en un dispositivo móvil, debe espaciar los enlaces en su sitio web móvil para asegurarse de que sus usuarios no hagan clic accidentalmente en los enlaces incorrectos. Haga esto:
- Dando comentarios cada vez que se toque la pantalla.Usar botones para definir dónde los usuarios pueden y no pueden hacer clic.Rediseña tus menús desplegables.Minimizando la entrada de texto.
¡Y ahí lo tienes! Utilice esta información la próxima vez que necesite rediseñar completamente su sitio web de escritorio para verlo en dispositivos móviles, o cuando esté creando un nuevo sitio móvil desde cero.