Desarrollo de sitios específicos para móviles. ¿Donde empezar?

Estoy empezando el proceso de aprender los entresijos de los sitios en desarrollo para los navegadores web móviles. ¿Existen buenos recursos / comunidades en línea que discutan temas específicos de desarrollo de sitios móviles?

Mi comprensión inicial es que para cubrir diferentes teléfonos que necesita para construir un sitio que está habilitado para los navegadores con el motor de webkit (iphone, android, etc) y otro sitio más básico para otros navegadores más antiguos, es esta suposición correcta?

Además, ¿qué significa desarrollar exactamente para webkit? ¿Cómo es diferente de usar javascript / css / html? ¿Es lo mismo, excepto que se limita a webkit funciones específicas y css? Miré en el sitio webkit, pero no lo explicó en esos términos.

¿Hay algún otro snafus que necesito tener cuidado al desarrollar para los browsers móviles?

Su suposición es correcta, necesitará desarrollar varias versiones de su sitio dirigidas a diferentes tipos de navegador.

Webkit es el motor utilizado por Safari (Safari móvil), Chrome y Andriod Browser (móvil Chrome?) Que puede utilizar Javascript estándar, XHTML y CSS, lo principal, es hacer que su sitio "gordo-dedo-amigable" ya que estos Todos los dispositivos son impulsados ​​por pantallas táctiles.

Lo que quiero decir con "gordo-dedo-amistoso" es que tienes grandes enlaces / botones que son fáciles de golpear con el dedo, la mayoría de los navegadores móviles son buenos en la aproximación de qué enlace que se pretende tocar, pero si tienes un montón de cosas atascadas Juntos, frecuentemente se equivoca.

Otra consiteración es el tamaño de la pantalla, y por lo tanto la anchura / altura de su sitio.

La mejor ilustración que tengo de esto es de Ars Technica – checkout su sitio en su navegador de escritorio, a continuación, echa un vistazo a su sitio en su navegador móvil. Es una versión muy lisa del sitio. ( http://www.arstechnica.com/ )

Webkit es un motor de renderizado diseñado para permitir a los navegadores web renderizar páginas web. Proporciona el conjunto de clases para mostrar el contenido web en ventanas e implementar diferentes características que son proporcionadas por el navegador (como enlaces, fwd / hacia atrás, etc).

No es necesario crear los diferentes sitios para los diferentes motores de renderizado, como el webkit. Diseño de sitio web móvil debe tener en cuenta el tamaño de la pantalla y cómo los diferentes componentes se ven / se comportan en diferentes motores de renderizado.

Mire esta pregunta para más detalles sobre cómo construir el sitio móvil.

Si desea admitir navegadores antiguos, debe tener varios sitios. Pero eche un vistazo a las estadísticas del navegador móvil primero para decidir si vale la pena. Si solo desea que su sitio web funcione para iPhone / Android u otros teléfonos con navegadores de grado A, puede personalizarlo con un CSS móvil (para pantallas pequeñas). Pero para obtener un buen rendimiento en dispositivos móviles en conexiones lentas / poco fiables, es probable que tenga que tener un html separado despojado.

Apple tiene una muy buena guía para ayudarle a optimizar su sitio para iPhone. La mayor parte también funcionará en los navegadores móviles modernos: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Peter Paul Koch ha hecho una excelente investigación sobre diferentes navegadores móviles. Él tiene varios artículos, pero éste es un buen comienzo: http://www.quirksmode.org/mobile/browsers.html

Al igual que Nate Bross mencionado, usted debe optimizar para dispositivos táctiles. Desafortunadamente, es muy difícil saber si un dispositivo tiene toque o no, ya que no hay ninguna consulta de medios para ello. Puede hacer sniffing de agente de usuario para algunos dispositivos, pero no lo recomiendo. Más información aquí: Optimizar el sitio web para dispositivos táctiles

Por el momento, detecto eventos táctiles (con una excepción para Chrome). Si esto devuelve verdadero, me inyecto un toque CSS. Un poco desagradable, pero las otras opciones son peores:

function() { if( /Chrome/i.test(navigator.userAgent) ) { return false; } try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } 

Usted solicitó específicamente sitios para navegadores web móviles, pero también puede consultar las posibilidades de crear una aplicación web para móviles. Parece una aplicación de iPhone (o Android para el caso), pero se ha construido con la ayuda de HTML5. Usted puede hacer animaciones bastante liso con el CSS3 en la imagen webkit, y el iPhone también tiene etiquetas meta para ocultar las barras de herramientas de navegación de Safari. Los usuarios pueden marcar su página en su pantalla de inicio, y funcionará igual que una aplicación para iPhone normal. Por supuesto, estás limitado al navegador y su rendimiento. Pero puede crear aplicaciones multiplataforma 🙂 HTML5 + JS es el único lenguaje de plataformas multi-móvil que Steve Jobs aprueba, y con la ayuda de PhoneGap incluso puede entrar en la AppStore! Si la aplicación web suena interesante, debe echar un vistazo a jQTouch , jQuery CSS Transition plugin y, por supuesto, la construcción de aplicaciones para el iPhone con HTML, CSS y JavaScript por Jonathan Stark.

Si su sitio es bastante simple (sólo entrega de contenido), sugeriría un servicio como mobify: http://mobify.me/

Muchas publicaciones grandes lo usan, y yo también. De hecho, Ars Technica (que Nate Bross señaló en una respuesta anterior) utiliza este servicio para mostrar su contenido móvil.

Tienes control sobre el estilo, y eso es todo, así que si tu sitio es más complejo, puede que no sea para ti. De lo contrario, es un buen servicio. Usted puede tener un sitio móvil hasta casi tan rápidamente como se tarda en el DNS para la dirección de su sitio móvil para actualizar.

No estoy de acuerdo en que necesite crear varias versiones de un sitio Web.

Un simple sitio web HTML5 funcionará en todos los navegadores móviles y en los exploradores de escritorio.

La belleza de los últimos desarrollos de HTML5 es que usted podría usar nuevas características de Iphone / Android como Geolocation, y los navegadores más antiguos simplemente ignorarán el código JS si lo ponen cuidadosamente dentro de las declaraciones de try catch.

Para los problemas tipo "dedo gordo" puedes servir un CSS diferente que hace que los botones sean más grandes si realmente debes hacerlo. Los buenos navegadores deben hacer que los botones predeterminados sean fáciles de presionar en cualquier caso.

Manténgalo sencillo y no tendrá que ver estos enfoques fragmentados y costosos dependientes del dispositivo. Escribir HTML5 a mano y utilizar un validador . ¡Buena suerte!

  • CSS: -webkit-touch-callout alternativas para android
  • ¿Qué formatos de audio son compatibles con el navegador android?
  • ¿Cómo actualizar manualmente el navegador android con el último webkit (nocturno)?
  • WebKit / WebView toque / onclick resaltado por defecto (Android Ice Cream Sandwich)
  • ¿Qué eventos de DOM están disponibles para WebKit en Android?
  • ¿Hay alguna referencia / documentación del navegador de Android?
  • ¿La aplicación se bloquea al reproducir video de tubo en la vista web?
  • Añadir encabezados personalizados a las solicitudes de recursos de WebView - android
  • Escala incorrecta en WebView
  • ¿Cómo puedo depurar javascript en Android?
  • Problemas de visibilidad y visibilidad del navegador de Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.