No hay vuelta atrás. La web móvil está aquí. Cada vez más usuarios están accediendo a la web desde dispositivos móviles. ¿Qué significa esto para los diseñadores web y los propietarios del sitio? Que en cada proyecto que hacemos, tenemos que abordar una estrategia móvil.
Diseño de páginas Web móviles para iPad, iPhone, Android, etc
Disenoweb.es construye sitios web para móviles que funcionan!. Nuestros sitios web para móviles son totalmente compatibles con todos los dispositivos, incluyendo iPhones, iPads, los dispositivos Android, Blackberry, Windows Mobile y Palm. Permiten a los usuarios desplegar su sitio web de forma rápida y fácilmente navegable, sin tener que preocuparse del contenido de Flash, scripts o que las imágenes ralentizen. Un sitio web sin compatibilidad móvil pierde cerca del 25% de su mercado objetivo total. Construimos nuestros sitios web para móviles para ser muy eficiente y rentables.
Creemos que su sitio web siempre debe mantenerse al día, por lo que su sitio web para móviles es totalmente actualizable con nuestro sencillo sistema móvil de gestión de contenidos!. Crear páginas ilimitadas, presentaciones de diapositivas, subir videos y mucho más. El sistema de gestión de contenidos se ha diseñado para permitir cambios rápidos y fáciles en su sitio web para móviles desde cualquier ordenador o acceso habilitado para la web movil.
Ya sea que usted quiere diseñar un sitio web, un sitio de noticias basadas en el contenido, o una aplicación web interactiva, lo mejor es adoptar un enfoque bien definido, uno que incluye un mirada reflexiva a la experiencia móvil del usuario en la web.
1. Defina su necesidad de un sitio móvil
Por lo general, un proyecto de diseño web movil se produce a través de una de las siguientes circunstancias:
Es una nueva página web o una estrategia móvil.
Se trata de un rediseño de un sitio web existente, que incluirá un nuevo sitio móvil.
Cada una de estas circunstancias, trae un conjunto de necesidades diferentes.
2. Tenga en cuenta los objetivos de negocio
¿Cuáles son los objetivos de la empresa en su relación con el sitio web, específicamente el sitio móvil? Al igual que con cualquier diseño, hay que dar prioridad a estos objetivos, y luego comunicar esa jerarquía en su diseño. Cuando se traduce el diseño de móviles, hay que dar un paso más allá y centrarse en sólo un par de objetivos de alta prioridad para la empresa.
3. Estudio de los datos del pasado, antes de seguir adelante
Si este proyecto es un nuevo diseño , o la de un sitio móvil existente, esperamos que el sitio ha tenido seguimiento del tráfico con Google Analytics u otro sistema de seguimiento. Es una buena idea estudiar los datos antes de sumergirse en el nuevo diseño y desarrollo.
Analizar las cosas como con qué dispositivos y navegadores acceden los usuarios a su sitio web móvil. Nos aseguramos de que el sitio está construido para todos dispositivos móviles, puede verse en todos los navegadores, a través del desarrollo, pruebas y puesta en marcha.
4. La práctica de diseño Web Sensible
Utilizando las tecnologías web más recientes y con visión de futuro, como HTML5 , CSS3 , y fuentes web , diseñamos su sitio para escalar y adaptarse a cualquier dispositivo móvil. Eso es lo que llamamos diseño de páginas web de respuesta.
5. La simplicidad ...
Como regla general cuando se convierte un diseño web a formato móvil, requiere simplificar las cosas siempre que sea posible. Hay varias razones para esto. Mantener el tamaño del archivo y el tiempo de carga inicial es siempre una buena idea para un sitio móvil y que las conexiones inalámbricas, son todavía relativamente lentas y la web puede tardar en cargar.
La usabilidad en la web móvil requiere además un enfoque simplificado para el diseño y la navegación. Con espacio en la pantalla, hay que elegir la ubicación de los elementos sabiamente. En pocas palabras: Menos es más.
Sin embargo, se pueden crear hermosos diseños que están optimizados para móviles. CSS3 nos da un sorprendente conjunto de herramientas para crear cosas como sombras, las esquinas redondeadas, etc todo ello sin recurrir a las imágenes voluminosas, encontrado un gran equilibrio entre la simplicidad y la belleza. Eso no quiere decir que usted no puede utilizar las imágenes.
6. Con una sola columna, las presentaciones suelen funcionar mejor.
Al pensar en el diseño, la estructura de una sola columna tiende a funcionar mejor. Esto no sólo ayuda con la gestión de un espacio limitado en la pantalla más pequeña, sino que también le ayuda a escalar fácilmente entre las resoluciones de dispositivos y mover de un tirón entre el modo de retrato y paisaje.
Utilizando técnicas de respuesta de diseño web, usted puede tomar un diseño de escritorio multi-columna de sitio y adaptarlo a un diseño de una sola columna.
7. La jerarquía vertical: pensar en términos plegable
¿Su sitio web tiene un montón de información que debe ser presentada en el sitio móvil? Una buena manera de organizar las cosas de una manera sencilla y digerible es la creación de un sistema de navegación desmontable. Se puede apilar bloques de contenido de gran tamaño en los módulos de plegado que permiten al usuario tener abierto el contenido que les interesa y ocultar el resto.
8. Deje sus comentarios sobre la interacción
Hablando de la interacción, tendrá que asegurarse de que proporcionar información obvia para cualquier acción que se producen en el front-end de su sitio móvil.
Por ejemplo, cuando el usuario pulsa un enlace o botón; es una buena práctica cambiar de estado visual el botón para indicar que ha sido aprovechado y la acción que se ha iniciado. Es común ver un enlace de color blanco a su vez totalmente azul en el iPhone cuando se lo toca. Esta información visual es familiar para la mayoría de los usuarios y lo mejor será tomar ventaja de ella.
Otra buena práctica es incluir estados de carga en las acciones que pueden tomar un poco más en cargar. Usar una imagen animada de carga para indicar que algo está en marcha.
9. El análisis de su sitio web móvil
Como con cualquier proyecto, hay que probar su sitio web para móviles en tantos dispositivos como sea posible.
