Ja todos,

Por lo tanto, he tenido la tarea de desarrollar un sitio web para teléfonos inteligentes para nuestro portal de propiedades y lo primero que hice fue ver qué lecciones otros tenían que contar en línea, pero he encontrado muy poco.

No estoy creando una aplicación, estoy creando un sitio web y estoy buscando hacer y no hacer con respecto a html, css, enfoques de ancho / alto, javascript (¿jquery va a funcionar bien en todas las plataformas?) y cualquier otra cosa que sea relevante para este tipo de plataforma.

Mirando a los demás me gusta mucho http://mobile.whistlerblackcomb.com/.

Saludos, Denis

14
Denis Hoctor 4 dic. 2009 a las 21:42

10 respuestas

La mejor respuesta

ACTUALIZACIÓN :

Si bien la mayor parte del texto a continuación todavía se aplica, ahora diría que jQuery Mobile hace un gran trabajo al proporcionar un buen- diseñado y utilizable conjunto de componentes de UI, al tiempo que alivia muchos de los problemas de prueba y detección de dispositivos para los que he usado WURFL en el pasado Todavía está en beta, pero parece estar funcionando bastante bien. Recomiendo echarle un vistazo.


Los dos temas más importantes a tener en cuenta al comenzar son:

1) Detección de dispositivo

2) Diseño de interfaz de usuario móvil

Para el número 1, recomiendo mirar el conjunto de datos del dispositivo WURFL:

http://wurfl.sourceforge.net/

Con esto, puede recuperar (algunas) capacidades de los dispositivos que acceden a su sitio, utilizando su cadena de Agente de usuario. Probar aplicaciones web móviles es algo así como las pruebas de navegador desde el infierno: hay tantas combinaciones diferentes de dispositivos y navegadores, que es una tarea difícil. Si puede concentrarse en desarrollar una o dos versiones para teléfonos bastante capaces, diga:

1) ancho mínimo de 300 px con soporte "web" y una pantalla táctil 2) Lo mismo que el anterior, pero sin una pantalla táctil

Puede crear un sitio muy útil que funcione para la mayoría de los "teléfonos inteligentes" o "teléfonos de aplicaciones" como David Pogue los ha nombrado con mayor precisión. Para la prueba real, puedes probar:

1) Hacer una lista de todos tus amigos y qué tipo de teléfonos tienen 2) Ir a una tienda de teléfonos y usar esos teléfonos para probar tu sitio

E, independientemente de lo que haga, tendrá que ser ágil cuando reciba los comentarios inevitables de los usuarios sobre el contenido roto / lento en su dispositivo.

Con respecto al diseño de la interfaz de usuario, hay un par de problemas. El más simple es un bonito CSS. Aquí, solo mira algunos sitios móviles que te gustan y roba su CSS. Una vez que haya hecho esto, básicamente está haciendo un desarrollo web antiguo y regular, solo en una pantalla pequeña. los ul se convertirán en bonitas mesas para iPhone, etc.

El mayor problema es la usabilidad web móvil. En muchos sentidos, estamos en una situación web de los 90 con el desarrollo web móvil. Lo que quiero decir es que estamos trabajando sin patrones de diseño bien establecidos. Esto hace que el desarrollo web móvil sea realmente divertido, pero también significa que debe estar listo para ajustar su interfaz de usuario fea / rota a medida que evolucionan las mejores ideas. Un ejemplo actual son las rutas de navegación globales / migas de pan que ve en muchos sitios móviles. Un sorprendente número de personas está tratando de imitar el comportamiento de las aplicaciones nativas de iPhone al proporcionar una herramienta de navegación persistente (botón de retroceso) dentro de la aplicación móvil. Si bien esto es bastante bonito, tiene algunos problemas:

1) Es redundante, dado que el navegador viene con un botón de retroceso con el que los usuarios están muy familiarizados. La razón por la que existen estos navegadores globales en las aplicaciones nativas es que no vienen con una herramienta de navegación gratuita.

2) La web es genial. Puede ingresar, salir y volver a ingresar "aplicaciones" en cualquier punto de su estructura. Al suponer que un usuario toma una ruta lineal a través de su aplicación, está disminuyendo su webiness, haciéndolo mucho más crudo en relación con el resto de la web.

3) se rompe. O puede encontrarse en una situación en la que el navegador de la aplicación y el navegador del navegador apuntan en direcciones opuestas (al presionar el botón de retroceso en la aplicación avanza a través del historial de la aplicación), o puede simular un botón de retroceso con javascript, que se rompe si no lo hacen ' No comience al comienzo de una aplicación (enlace enviado por correo electrónico, marcador), o configure sesiones, lo que puede ser un gran dolor solo para replicar lo que obtiene del navegador de forma gratuita. Las sesiones también son vulnerables a la rotura (enlaces enviados por correo electrónico, marcadores), y realmente no está ganando mucho.

Creo que mis puntos principales aquí son:

1) No olvides que estás en la web. La web es genial, los navegadores son geniales, haz uso de eso.

2) No tengas miedo de jugar. No hay muchos patrones bien establecidos aquí, por lo que puede que tenga que probar algunos de los suyos.

15
jmans 15 ago. 2011 a las 17:57

También está este "diseño web móvil" de tres partes de Cameron Moll:

Estado de la Web móvil
Métodos para la locura
Consejos y técnicas

La serie es de 2005, pero mucha de la información sigue siendo relevante. La última parte "Consejos y técnicas" también enumera muchos otros recursos sobre desarrollo web móvil.

0
mensch 14 dic. 2009 a las 15:49

La charla de Meagan Fisher sobre Diseño de interfaces móviles efectivas proporciona un Buena visión general. Ella recomienda el libro "Diseño web móvil" de Cameron Moll. En cuanto a la tecnología, comenzaría familiarizándome con XHTML Mobile Profile si aún no lo ha hecho.

En lo que respecta al diseño, piense poco. Enganche un libro con una tipografía agradable y vea si puede duplicar el diseño de la página con CSS. "Elementos del estilo tipográfico aplicado a la Web" es un buen punto de partida para eso. Los sitios web de los teléfonos tratan de desplazamiento, no de navegación compleja. El ritmo y el espacio son importantes. Mantenga las imágenes pequeñas y el texto en alto contraste, y terminará con algo que se carga rápido y se ve bien.

0
Frank Mitchell 14 dic. 2009 a las 15:45

Si está buscando desarrollar específicamente para un iPhone o iTouch, use esta declaración condicional.

[if SafMob] @import url(iphone.css);

Aquí hay un artículo sobre la creación de sitios para dispositivos móviles. http://www.alistapart.com/articles/pocket/

0
Chad 10 dic. 2009 a las 20:58

Los sitios móviles a menudo se usan en teléfonos normales, y a menudo van a m.example.com en lugar de www.example.com. Estos sitios tienen poca / ninguna compatibilidad con JavaScript o CSS. Cuando pregunte sobre sitios móviles, tenga en cuenta que hay dos tipos de sitios móviles.

Se supone que los teléfonos inteligentes modernos manejan los navegadores de la misma manera que un navegador completo, pero no lo son. De hecho, el iPhone vive en un mundo de fantasía y reportará un ancho de ventana de más de 900 píxeles.

Hay trucos que puedes hacer para un teléfono inteligente. Una pantalla táctil no tiene uso para: pseudo-clase hover. Esto puede ser un problema para los menús que requieren flotar. Puedes diseñar alrededor de esto. ¿Cómo? usted pregunta...

Apple mira una nueva metaetiqueta (haga una búsqueda en Google) y otros navegadores de teléfonos inteligentes también la miran. Con esto, puede forzar al teléfono inteligente a informar su tamaño real de pantalla en píxeles, y no su tamaño de fantasía preprogramado.

Ahora que ha hecho esto, puede usar declaraciones condicionales CSS,

@media solo todas y (ancho máximo: 600px) {

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}

Lo he usado para bloquear <div> s que llenaban la pantalla de un dispositivo móvil: lightbox, por ejemplo. También usé esto para modificar los anchos de imagen, para que se ajusten mejor al dispositivo. ¿Por qué elegí 600 px? Sentí que muchos de los nuevos "netbooks" también deberían agruparse aquí.

Espero que esto ayude.

--Dave

0
the Hampster 9 dic. 2009 a las 01:18

Dado que los navegadores móviles modernos funcionan de manera muy similar a los navegadores de escritorio, el viejo adagio de "minimizar JS y CSS, optimizar imágenes" debería ser su principal preocupación, ya que el ancho de banda es más valioso en los dispositivos móviles.

Además, considere lo siguiente:

  • Piense si necesita todas sus imágenes y si son demasiado grandes para pantallas pequeñas. Considere eliminar o reducir el tamaño de las imágenes grandes.
  • Verifique su JavaScript: ¿funcionará su sitio sin él? Puede ser beneficioso desactivar partes, ya que puede reducir fácilmente la velocidad en los navegadores móviles
  • A menudo, puede obtener simplemente incluyendo estilos CSS especializados diseñados para dispositivos de pantalla pequeña en su sitio principal

También puede resultarle útil: ¿Por qué su el sitio móvil probablemente apesta

0
Jani Hartikainen 4 dic. 2009 a las 20:24

Sugeriría echar un vistazo a algunos otros sitios móviles. Publiqué algunos a continuación.

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0
Eric 4 dic. 2009 a las 20:12

Con los teléfonos inteligentes modernos, en realidad no hay diferencia entre desarrollar una página web convencional y un sitio web dedicado.

Pero podría probar los emuladores que ofrecen los principales jugadores como Apple, RIM, Motorola y Nokia para ver cómo se ven.

0
Kico Lobo 4 dic. 2009 a las 18:48

Aquí hay un sitio que ofrece una aplicación de teléfono inteligente para la web, aún no lo he probado, ¡Publicaré un comentario después de usarlo! http://www.makeuseof.com/dir/appsbar- construya su propia aplicación para teléfonos inteligentes /

1
yachtofworld 10 dic. 2011 a las 21:05

Una lista aparte puede ayudarlo a comenzar: "Ponga su contenido en mi bolsillo" por CRAIG HOCKENBERRY

1
Todd Holmberg 4 dic. 2009 a las 19:08