¿Cómo configuraría un sitio web para dispositivos móviles?

Depende en parte del tipo de sitio web del que esté hablando.

Puede recorrer un largo camino hacia una mejor compatibilidad con múltiples navegadores móviles asegurándose de que su HTML sea lo más simple y compacto posible, el orden de origen tiene sentido sin ningún estilo, los elementos semánticos se usan correctamente y el contenido y la funcionalidad básicos son accesibles sin CSS y JavaScript habilitado. Esto se debe a que algunos navegadores móviles no admiten CSS y JavaScript muy bien, si es que lo hacen.

También debe optimizar sus scripts y llamadas HTTP (tamaño y frecuencia de …) tanto como sea posible: los dispositivos móviles en general tienen menos potencia, ancho de banda y memoria que sus contrapartes de escritorio, por lo que una aplicación web que funciona bien en una máquina de escritorio con una conexión de banda ancha podría ahogar un navegador móvil que se ejecuta en una red celular.

A continuación, podría considerar hacer un rastreo del lado del servidor y servir un conjunto apropiado de estilos y contenido a los navegadores móviles.

También puede usar tecnologías de optimización del lado del cliente para optimizar los diseños de sitios para los navegadores que los admiten, por ejemplo, consultas de medios y la metaetiqueta de la ventana gráfica.

La prueba es realmente la clave: pruebe en una sección transversal decente de dispositivos móviles, y no solo en dispositivos iPhone y Android.

Hay mucho más que decir que esto, pero espero que esto te ayude a comenzar. Visite http://dev.opera.com/articles/vi… para obtener más detalles.

Todo lo mejor.

El uso de hojas de estilo móviles es una buena opción para sitios web de noticias, blogs y comercio electrónico (sitios web centrados en el contenido). Para la mayoría de los sitios web comerciales, es mejor desarrollar un sitio web optimizado para dispositivos móviles por separado en un subdominio (es decir: m.bluetrainmobile.com) para que pueda optimizar el contenido y el estilo para uso móvil.

Hice esto recientemente en mi propio sitio web y creo que hay algunas maneras de hacerlo.

En primer lugar, podría simplemente tener una sección en su hoja de estilo que cambiara el aspecto del sitio en un navegador móvil usando @media.

Entonces algo como:

@media handheld {
/ * tu CSS aquí * /
}

Pero, esto significaría que todo el CSS por encima de esto también se aplicaría, por lo que podría usar dos hojas de estilo separadas en su lugar.

Sin embargo, la forma en que lo hice fue verificar el Agente de usuario para determinar si se trataba de un navegador móvil y servir contenido ligeramente diferente, que en consecuencia era menos pesado en datos.