Diseño y técnicos desafíos para el contenido de sitio web para móviles
El tema de la accesibilidad móvil emerge en todos los ámbitos de la creación de un sitio web, lo que afecta el tamaño y tipo de las imágenes incorporadas, la combinación de colores que se aplican a su sitio, y qué tipo de estructura de navegación que elija.
El punto aquí no es señalar los diferentes retos planteados por el tamaño de los dispositivos móviles. Aquí hay dos soluciones posibles para proporcionar el contenido de la web amigable:
Preguntas de los medios: Se puede presentar el mismo contenido en tamaño completo y los navegadores móviles, sino mostrar que el contenido de manera diferente usando diferentes hojas de estilo CSS. Por ejemplo, contenido que se presenta en tres columnas en se pueden presentar en una columna en un (más estrecha) ventana gráfica móvil (pantalla) un monitor de tamaño completo.
preguntas de los medios múltiples se pueden configurar para un sitio. Están definidos por el tamaño de la ventana gráfica de un usuario. Así, por ejemplo, puede crear una hoja de estilo que muestra el contenido de su sitio en tabletas, otro que muestra el sitio en un teléfono móvil en modo horizontal (horizontal), y otro para un teléfono móvil en modo retrato (vertical).
Es poco probable que crear más de dos o tres versiones de su sitio al principio, pero el número de estilos que puede definir para un solo sitio es ilimitado.
jQuery Mobile: Se puede construir un sitio completamente diferente para los usuarios móviles. La opción de jQuery Mobile consiste en la creación de contenido independiente para un sitio móvil que lo que se presenta a los visitantes del monitor de tamaño completo.
Las consultas de medios y jQuery Mobile están a su alcance. Ninguno de los dos requiere programadores de contratación o conocimientos avanzados de diseño de páginas web. Dicho esto, cuando se decida a dar el paso y crear una versión móvil de su sitio (usando preguntas de los medios o jQuery Mobile), que tendrá que poner un poco de tiempo y energía en averiguar uno (o ambos) de estos enfoques.
El punto aquí es elevar la conciencia en cuanto a cómo la diferencia de tamaño entre una ventana de tamaño completo y móvil afecta a todos los aspectos de diseño de la página y la tecnología, incluyendo estos temas:
Las pequeñas ventanas gráficas: La diferencia más obvia entre inmediata y navegación de escritorio / portátil y la navegación móvil es que las ventanas gráficas móviles (las pantallas de visualización) son más pequeños. La diferencia de tamaño entre los medios de tamaño estándar y los dispositivos móviles tiene implicaciones radicales para el diseño del sitio:
Video: Cómo saber si mi web cumple con los nuevos requisitos de diseño responsive de Google
Las páginas móviles en general, evitar el uso de columnas. diseño de la página edificio con una “estructura inferior” columnal es a menudo esencial para hacer el contenido accesible y atractivo en páginas de tamaño completo.
Enlaces a menudo tienen que ser más grandes en los dispositivos móviles para que sea accesible. enlaces pequeños son difíciles para los dedos grandes para aprovechar, y por lo tanto diferentes técnicas de enlace (tales como botones de gran tamaño, se puede hacer clic en lugar de líneas estrechas de tipo) se utilizan a menudo en el diseño móvil.
Las imágenes deben ser mucho menor en los dispositivos móviles. Hay una dimensión cualitativa cuando se trata de elegir y recorte de las versiones de las imágenes que aparecen en un sitio móvil. Los diseñadores están a menudo bien sirven para recortar fotos más estricto para un dispositivo móvil. Por ejemplo, una foto de la persona de la cabeza a los pies que funciona bien en un monitor de pantalla completa podría ser más agradable si cultivada a sólo un tiro en la cabeza para dispositivos móviles.
Formas están configurados de manera diferente en los dispositivos móviles. Algunos campos del formulario de entrada que funcionan bien en un ordenador portátil (como botones de radio y casillas de verificación) son difíciles de usar en un pequeño dispositivo de pantalla táctil. En su lugar, controles deslizantes (barras con un control deslizante que pueden arrastrarse) y flipswitches (con un sí / no conjunto de opciones) hacen que las formas más fáciles de llenar en un dispositivo móvil.
problemas de iluminación y color: Los dispositivos móviles son mucho más propensos a ser utilizado al aire libre que las de escritorio o incluso ordenadores portátiles. Y, la intensidad de la iluminación en los dispositivos móviles es inferior a la de los ordenadores pantalla más grande. Esto plantea retos particulares para la creación de sitios móviles.
Video: Impactblue Diseño de Paginas WEB para celulares
Las combinaciones de colores que funcionan bien en los monitores de tamaño completo - en ambientes relativamente oscuras en interiores - puede resultar frustrante o inútil en un dispositivo móvil con luz solar brillante. Evitar combinaciones de colores, como tonos de (matices sutiles o de cualquier color) grises en los dispositivos móviles.
Las velocidades de descarga: Usted ha escuchado los anuncios: “Nuestro 4G es tan rápido!” Bla, bla, bla. Aquí está el flaco: los dispositivos móviles, si no se ejecuta en una red Wi-Fi, las páginas se cargan mucho más lentamente que los ordenadores de sobremesa y portátiles, independientemente de si esos dispositivos más grandes están conectados a una conexión a Internet o conectarse a través de Wi-Fi.
Y, como usted ha adivinado por ahora, esto tiene implicaciones estratégicas para la presentación de contenidos para móviles visitantes. Debido a que las páginas móviles tardan más en cargarse, desea evitar que los usuarios navegar de una página a otra.
plug-ins móviles (y falta de la misma): Quizás la diferencia más ampliamente conocida entre la visualización móvil y un ordenador portátil / de escritorio es que los iPhones y iPads no son compatibles con Flash video. Sí, archivos de Flash Video (FLV) son ampliamente utilizados para la distribución de vídeo en línea, pero los archivos son un no-go para los dispositivos móviles de Mac. Aquellos usuarios verán un mensaje como el de Hulu aquí.
