Los conceptos básicos de diseño web para dispositivos móviles

Al diseñar o rediseñar un sitio web, también se debe considerar la creación, versiones alternativas optimizadas para móviles del sitio. Estas versiones no deben ser confundidos con las aplicaciones nativas que viven en sus teléfonos inteligentes (los que se descargan de las tiendas de aplicaciones). Los teléfonos inteligentes tienen todos los navegadores web y pueden hacer que su sitio web con diversos grados de éxito. Esencialmente, usted debe hacer una lista de los dispositivos de lo que va a apoyar, y diseño de sitios alternativos para cumplir con estos objetivos múltiples. Aparte de eso, la limitación más evidente que todos ellos comparten es el tamaño de la pantalla pequeña de las ventanas del navegador del teléfono.

Se puede añadir código a su sitio que detecta el dispositivo del usuario y las redirecciona a la versión adecuada de su sitio web. Con tantos dispositivos a elegir, los desarrolladores suelen crear diferentes perfiles de dispositivos y agrupar a muchos dispositivos en uno de un puñado de estos perfiles. Los perfiles son generalmente impulsados ​​por tamaño de la pantalla:

• *Microscópico: 132 píxeles o menos ancho

• *Minúsculo: 240 píxeles o menos ancho

• *Pequeña: 320 o menos amplia

Teniendo en cuenta estos pequeños espacios pantalla en la que para entregar su experiencia en la red, no hay manera alrededor de la necesidad de proporcionar diseños alternativos.

Mira píxeles para sitios web para móviles

Lo que es único para dispositivos es que no tienen píxeles de 72 dpi más. Muchos de estos dispositivos tienen resoluciones más altas. Aquí es donde las cosas se complican, ya que para los sitios web y CSS, todavía debe definir elementos en píxeles que son de 1/72 de pulgada de ancho. Esta medida no tiene nada que ver con la densidad de píxeles de los dispositivos, por lo que el píxel actual es una unidad relativa de medida.

Sin embargo, si se va a configurar una plantilla de Photoshop para simular un espacio en la pantalla iPhone, tendrá que utilizar 640 x 960 a 72 ppp. Este tamaño de pantalla le da la derecha del detalle “retina display” que obtendrá en un iPhone. Pero no tener la tentación de exprimir una gran cantidad de texto e imágenes en este espacio. Esto es claramente un tamaño de lienzo mucho más grande que el teléfono. Para tener una idea de cómo su diseño será realmente mostrar en el teléfono, alejar el documento de Photoshop a 50 por ciento.

Simplificar la navegación de un sitio web para móviles

Recuerde, no hay ningún ratón para moverse. Muchos usuarios móviles tienen ya sea un teclado o una pantalla táctil. No hay mucho espacio para mostrar todos los elementos de navegación que podría incluir normalmente en el sitio principal. Por esta razón, las versiones móviles de sitios a menudo tienen un esquema de navegación reducidos al mínimo.

A menudo, estos sitios reducidos son frustrantes para los usuarios que están en movimiento y necesitan acceder a una determinada área del sitio normal. Es por eso que es una buena práctica incluir un enlace para ver el sitio principal.

Reducir el tamaño de los archivos

Cuando no están usando Wi-Fi para navegar por la web, dispositivos móviles leva acumular una gran cantidad de megabytes en el plan de datos de un usuario, que puede tener un límite mensual. Por lo tanto, cuanto más se puede reducir el tamaño del archivo y dimensiones de los componentes de interfaz y de contenido, no sólo su sitio de descarga más rápido en redes celulares, pero va a ir con cuidado en la asignación del presupuesto mensual de transferencia de datos del usuario. También puede eliminar código innecesario, comentarios y etiquetas opcionales para acelerar el proceso.

La orientación horizontal y vertical

la navegación móvil es un medio fluido. Entre la variedad de densidades de píxeles y la capacidad de ver los sitios en orientaciones horizontales y verticales, lo mejor es acercarse a su sitio web para móviles con un diseño flexible, ya que a diferencia de un diseño de ancho fijo. Al no especificar el ancho del sitio y dejar que se llene el espacio disponible de forma natural, a adaptar su sitio de manera más eficaz al entorno de visualización móvil. Además, utilizar el color CSS y gráficos de baldosas, en lugar de imágenes de píxeles individuales de ruedas, para llenar sus componentes.

Utilizar un diseño de una sola columna en un sitio web para móviles

A pesar de que los teléfonos inteligentes son más grandes que sus predecesores, que todavía no son lo suficientemente grande como para apoyar efectivamente más de un diseño de una sola columna cuando se muestran los contenidos. Se trata de una alteración significativa de diseño para hacer que su diseño web principal, pero bien vale la pena el esfuerzo en términos del impulso usabilidad. Un diseño de contenido de una sola columna que utiliza todo el ancho de la pantalla (en cualquier orientación) evita la necesidad de un usuario para realizar una panorámica de ida y vuelta o un zoom. Deje que la contenido ampliar abajo de la página en su lugar. Los usuarios son mucho más receptivos a desplazarse por la página de lo que son de tener que moverse de lado a lado y hacer zoom.

El sitio móvil Crew Clothing Company es un excelente ejemplo de un sitio móvil de comercio electrónico complejo que utiliza un sistema de navegación simplificado y un diseño de una sola columna para empacar en una gran cantidad de funcionalidad. Además, también proporcionan un vínculo claro para ver el sitio principal en caso de que los usuarios necesitan funcionalidad adicional que ha sido despojado de la versión móvil.