it-swarm-es.com

Diseño para navegadores web móviles

¿Cuál es el mejor enfoque para diseñar un sitio web que se ejecute en la mayoría de los navegadores web móviles modernos?

¿Es suficiente apuntar a navegadores basados ​​en WebKit?

8
rick schott

No, apuntar a WebKit no es suficiente. Lo primero que debe hacer es considerar que hay dos segmentos del mercado móvil: basados ​​en el tacto y no basados ​​en el tacto. Esto afecta cómo diseña su experiencia de usuario móvil. Afortunadamente, los táctiles van a tener una tendencia significativa hacia WebKit (Android, iPhone y WebOS). Los otros serán principalmente IE Mobile (IE Mobile 6 en Windows Mobile 6.5 y uno nuevo basado en IE7/IE8 en Windows Phone 7) y Opera = (Móvil y Mini). Consulte esto lista de navegadores móviles en Wikipedia para obtener más información sobre los motores y las capacidades de representación.

Para las plataformas táctiles, una biblioteca como Sencha Touch puede ayudarlo a crear experiencias comparables en todos los dispositivos, pero será difícil crear experiencias iguales en todos los dispositivos. De hecho, te recomiendo no lo intentes . La diferencia entre las plataformas móviles táctiles y no táctiles se está volviendo tan grande que es casi como la diferencia de UX de tratar de ajustar una interfaz de usuario basada en escritorio en una pantalla de tamaño móvil, que funciona bien en plataformas táctiles ya que usan el paradigma de "zoom" del iPhone - pero tendrá dificultades para obtener algo útil de ese enfoque para plataformas antiguas o no táctiles.

Sin embargo, considere el artículo de LukeW y las charlas posteriores sobre diseñando para dispositivos móviles primero , que no es necesariamente una respuesta a su pregunta, pero puede considerarse como un buen principio: comience a diseñar identificando las cosas que los consumidores quieren hacer en su sitio, y haga que esas cosas estén disponibles de manera rápida y fácil. Eso es un diseño consistentemente bueno en todas las plataformas ¡todas, por lo que en ese sentido puede usarlo como un patrón que guíe su diseño móvil.

12
Rahul

Hice algunos experimentos ayer con un iPhone 3. Aquí están mis experiencias:

  • No asuma que el ancho es de 320 píxeles, por lo tanto, use un diseño de ancho fluido.

  • Usa el doctype correcto. Yo uso el XHTML Mobile 1.2. Pero no estoy seguro si este es el correcto.

  • Haz los botones enormes.

  • No desplace el mouse, así que use iconos para indicar lo que hacen los diferentes elementos de la interfaz de usuario.

4
neoneye

El término móvil está creciendo fuera del ámbito de los teléfonos y comienza a incluir dispositivos como tabletas, que implican pantallas táctiles de cinco a nueve pulgadas. Además, un diseño móvil debe tener en cuenta las orientaciones horizontal y vertical. Además de lo que dijo neoneye, algunas recomendaciones/sugerencias más.

  • Use un poco de margen o relleno para asegurarse de que no hay texto en el borde de la pantalla.
  • Además de usar un diseño de ancho fluido (los anchos pueden ir de 320 px a 1024 px), asegúrese de que los elementos de diseño que use se ajusten bien. Por ejemplo, los botones se ven mejor envueltos que una lista horizontal.
  • El texto debe ser un poco más grande, pero aún legible. En mi opinión, un buen estilo tipográfico es al menos igual de importante aquí. Los elementos del estilo tipográfico aplicado a la web es una buena referencia.
3
waymost

Si su audiencia puede ser calificada un poco más, entonces podría hacer algunas suposiciones informadas de que la mayoría de los clientes están utilizando un dispositivo primario o un navegador de renderizado. Aborde primero las necesidades centrales de su audiencia principal. Intentar distribuir su aplicación en todas las plataformas por igual en el "principio" podría ser una tarea demasiado desalentadora.

Aquí hay algunos artículos útiles que he encontrado:

Referencia móvil http://www.quirksmode.org/mobile/

2
hungrysquirrel