Consejos para diseñar páginas web para el navegador móvil?

Question

Hago mi debut en el diseño de una aplicación web específicamente dirigida a navegadores móviles. Si bien he escrito páginas web anteriormente en C#/ASP.NET, nunca he hecho nada específicamente para el espacio limitado de la pantalla y otras idiosincrasias de los navegadores móviles. Así que estoy buscando algunos punteros aquí:

• ¿Qué consideraciones de diseño debo tener en cuenta (aparte de la pantalla obviamente más pequeña)?
• ¿Qué características útiles hay en C# que pueden tener un buen efecto para el cliente móvil?
• ¿Cómo se asegura de proporcionar una experiencia de usuario relativamente uniforme para todos los navegadores móviles?
• ¿Algún otro consejo que tenga?

Gracias!

Answer 1

¿Qué consideraciones de diseño que deben ser teniendo en cuenta (aparte de la pantalla obviamente menor)?

¿Qué hay de la interacción con el usuario, por ejemplo, hay pocos dispositivos que permiten la "flotando", por lo que no dependen de pseudo-clases que no pueden ser emuladas en un dispositivo móvil, pero no ignoran por completo , por lo que los dispositivos móviles pueden usarlos.

Piense en la orientación del diseño, si el dispositivo admite el paisaje y la visualización horizontal.

Algunos dispositivos como el iPhone no se pueden operar con una precisión de milímetro con un lápiz óptico, por lo que las entradas no son peligrosamente pequeñas.

Si se utiliza a efectos tarta de la interfaz de usuario, la mayoría de los dispositivos móviles no muestran efecto (como los proporcionados por jQuery) muy bien ...

Finalmente prueba, prueba, prueba! Pruebe en tantos dispositivos móviles reales que pueda, y cuando haya terminado, considere usar emuladores (como los de BlackBerrys o iPhone), aunque esto no le proporcionará la sensación de usar el dispositivo, debería mostrar cualquier representación problemas.

Answer 2

Probablemente obvio, pero asegúrese de definir una hoja de estilo portátil a medida.

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" /> 

Mientras que los teléfonos inteligentes modernos (por ejemplo, iPhone) puede manejar sitios normales, el zoom constante dentro y fuera es mejor evitar por una aplicación móvil dedicado. Sin embargo, vale la pena diseñar dos versiones en caso de que el usuario quiera acceder a la aplicación usando también una computadora portátil/computadora de escritorio.

Answer 3

Hacer una buena experiencia en dispositivos móviles es principalmente sobre la interfaz de usuario, y no la aplicación de fondo.

• utilizar una hoja de estilo dispositivo móvil (media="handheld" atributo en el link -elemento)
• tener tan pocas peticiones HTTP como sea posible:
  • Comprimir todos los scripts y hojas de estilo en un solo archivo (uno para .js, uno para.css, que es)
  • Como pocas imágenes como sea posible
• que tener en cuenta las diferencias entre los dispositivos táctiles y dispositivos no táctiles (tamaño de los botones, por ejemplo)
• tener cuidado con la cantidad de contenido encajas en una página.

Answer 4

No redirija a la versión móvil del sitio, perdiendo el objetivo deseado. Si deseo ver un artículo en un sitio, no me lleve a la página de inicio del dispositivo móvil. Puede llevarme a la vista móvil del artículo, pero secuestrar mi objetivo por completo es inaceptable.

Un cierto cr *** ed.com qué siempre que es increíblemente irritante ....

Answer 5

Comprimir, minifying, optimizar por un par de razones. El ancho de banda no es bueno, una página que se carga en un par de segundos en el escritorio podría tardar más de 30 segundos en un dispositivo móvil. El almacenamiento en caché es realmente pobre en los móviles. Un ejemplo es que el iPhone no almacenará en caché los componentes de un sitio web de más de 25k. Así que obtenga sus imágenes, secuencias de comandos y hojas de estilo lo más pequeñas posible.

Answer 6

Debe consultar WURFL, que básicamente es un gran archivo xml que lo ayuda a identificar el dispositivo. Agarra el agente de usuario y lo compara con el archivo con su API para obtener todas las capacidades y funciones para ese dispositivo. Lo he usado en numerosos proyectos con gran éxito.