¿Cómo puedo diseñar un sitio para teléfonos móviles?

Question

¿Cómo puedo iniciar el desarrollo de un sitio que se puede navegar desde teléfonos móviles? Por ejemplo, si navega en el sitio de Gmail desde un iPhone, el sitio se ve diferente al sitio normal. Tienes que diseñar dos sitios diferentes para hacer esto? ¿Cómo puedo saber si un navegador móvil accede al sitio?

Answer 1

No TIENE QUE diseñar dos sitios diferentes, pero probablemente desee, si es importante, permitir que los usuarios móviles accedan a su sitio.

Hay algunas maneras de resolver este problema, cada una con sus pros y sus contras. ¿Asumo que su sitio tiene su información en una base de datos y publica esos datos usando un conjunto de plantillas? (Como un sitio de Ruby on Rails o Django; un sitio de PHP; un blog; etc.) Si ha codificado a mano un montón de páginas HTML estáticas, esto va a ser mucho más laborioso para usted.

1: el mismo HTML, diferentes hojas de estilo para PANTALLA y MÓVIL

La idea: entrega la misma estructura HTML a todas las solicitudes. Crea una hoja de estilo para PANTALLA y otra para MÓVIL.

Bien: para ti, el programador. Es más fácil para usted mantener 2 hojas de estilo que mantener 2 sitios de plantilla totalmente separados.

Malo: Para tus usuarios. Un sitio que es fácil de usar en un dispositivo móvil por lo general es ineficiente para un navegador normal; y los sitios optimizados para una computadora de escritorio / portátil a menudo fallan miserablemente en un dispositivo móvil. Obviamente, depende de cómo codifiques tus páginas, pero en la mayoría de los casos, llevar tu sitio normal a un navegador móvil será malo para tus usuarios. (Consulte http://www.useit.com/alertbox/mobile-usability.html para un resumen de la reciente investigación de usabilidad de Jakob Nielsen en sitios móviles.)

2: Mantener sitios separados

(¡Gmail mantiene incluso más de 2 sistemas! Básicamente tienen diferentes aplicaciones / plantillas de contenedor que procesan los mismos datos: la versión completa del navegador AJAX; la versión simple del navegador HTML; una versión móvil básica; una aplicación nativa de Blackberry; aplicación nativa de iPhone.)

Este es el estándar emergente para sitios que realmente se preocupan por tener presencia móvil y de escritorio. Es más trabajo para usted, pero en general es mucho mejor para sus usuarios.

En el lado positivo, es probable que pueda crear un sitio HTML puro que funcione para dispositivos móviles y que actúe como una alternativa para el usuario web excepcional que no tiene javascript o que tenga problemas de accesibilidad importantes que les impidan usar el " completo " sitio.

También, dependiendo de su base de usuarios: en los EE. UU., las personas generalmente tienen acceso a una computadora de escritorio / portátil y usan sus dispositivos móviles para el acceso auxiliar. Por ejemplo, reservo mis boletos de avión y mi auto de alquiler con mi computadora de escritorio, pero quiero buscar mi código de reserva en mi móvil. En muchos casos, puede salirse con la limitación de la funcionalidad que ofrece en el sitio móvil y requerir que la computadora completa realice casos de uso poco comunes.

El procedimiento básico:

1. Diseño & amp; construir interfaces de usuario para móviles y pantalla.
2. Inicia los sitios en dos URL diferentes; la convención emergente es www.yoursite.com para la versión de escritorio y m.yoursite.com para la versión móvil. (Esto permite a los usuarios navegar directamente a m.yoursite.com si conocen la convención).
3. En www.yoursite.com, huela el agente de usuario y realice una prueba para ver si el navegador del usuario es móvil. Si es así, dirija al usuario a m.yoursite.com.
   1. Hay sniffers escritos en varios idiomas de servidor (PHP, Perl, lo que sea) que probablemente puedas usar. Revisa las licencias. Aquí hay un ejemplo de un sniffer escrito en php .
   2. Del artículo de Wikipedia sobre el agente de usuario sniffing : " sitios web específicamente orientados a teléfonos móviles, como el modo I de DoCoMo de NTT o Vodafone Live de Vodafone Los portales, a menudo dependen en gran medida de la detección de agentes de usuario, ya que los navegadores móviles a menudo difieren mucho entre sí. Muchos de los desarrollos en la navegación móvil se han realizado en los últimos años, mientras que muchos teléfonos antiguos que no poseen estas nuevas tecnologías aún se utilizan mucho. Por lo tanto, los portales web móviles a menudo generarán un código de marcado completamente diferente según el teléfono móvil que se utilice para navegar por ellos. Estas diferencias pueden ser pequeñas (por ejemplo, cambiar el tamaño de ciertas imágenes para ajustarlas a pantallas más pequeñas) o bastante extensas (por ejemplo, la representación de la página en WML en lugar de XHTML). & Quot;
4. En m.yoursite.com, proporcione un enlace para volver a www.yoursite.com. Los usuarios que hacen clic en este enlace NO deben ser redirigidos de nuevo al sitio móvil, y la forma de lograrlo depende de su implementación.

Es posible que desee seguir Quirksmode para su emergente artículos sobre pruebas móviles.

3: las plantillas generan diferentes fragmentos de datos según el agente de usuario y mantienen hojas de estilo separadas

Me gusta (2), esto requiere que huela el agente de usuario. A diferencia de (2), sigue usando la misma lógica de página y no tiene que mantener dos sitios separados. Esto podría estar bien si solo estás tratando con un blog o sitio web que trata principalmente de leer datos.

En el código de tu plantilla, puedes decir cosas como

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

Esto le permite mantener principalmente un conjunto de archivos de plantilla. También puede optimizar las páginas que está enviando a sus usuarios móviles, para que no tengan una gran página cuando solo quieren leer su publicación de blog o lo que sea.

Answer 2

La mayoría de los dispositivos móviles en estos días admiten " hojas de estilo móviles " que son simplemente hojas de estilo alternas para mostrar cosas más simples. Puede agregar una hoja de estilo móvil a su sitio de la forma habitual e incluir el atributo media = " handheld " :

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

Entonces esos estilos se aplicarán a los móviles.

El único problema con este método es si su HTML es voluminoso, la página puede tardar un poco en cargarse, ya que la mayoría de los navegadores móviles son más lentos (excepto Opera Mini). Es por eso que los sitios más grandes como flickr y digg usan sitios separados.

Notas adicionales:

• El HTML voluminoso no afecta tanto a Opera Mini porque utiliza un proxy que realiza el procesamiento externo y luego envía una imagen " especial " al dispositivo.
• Use HTML simple y limpio, luego puede enviarlo a los navegadores normales y dispositivos móviles
• Tendrá que verificar las combinaciones de hojas de estilo con los atributos de media . Si agrega el código anterior a IIRC, los navegadores ignorarán la primera hoja de estilo. Si agrega media = " todos " a la primera, se usarán ambos (y, por lo tanto, puede anular los estilos originales en lugar de comenzar de nuevo).

Answer 3

Para ver cómo se ve una página web en un navegador móvil, use Opera Mini Emulator

Answer 4

Consulte el proyecto WURFL . Su intención es ayudar a los desarrolladores a identificar varios navegadores de teléfonos, y comenzó mucho antes de que existiera Mobile Safari, en los días de HDML, WAP y XHTML-MP. Sin embargo, está actualizado, almacenando las capacidades de dispositivos modernos como el iPhone. Tiene datos en más de 400 dispositivos y tiene bibliotecas en Java, PHP, Perl, Ruby, Python, .NET, C ++. Dependiendo de la amplitud con la que desee orientar su aplicación móvil, es algo que debe tener en cuenta. Aquí hay una lista de sitios que usan WURFL.

Otro proyecto relacionado escrito por Luca Passani (el cofundador y mantenedor de WURFL) es Switcher . Puede usar esto para redirigir automáticamente a la versión móvil de su sitio.

Answer 5

Manténgalo simple, piense en opera mini y lo hará bien. (iPhone tiene más de un navegador normal ...)

1. Centrarse en el contenido

2. Evitar los complementos

3. Siga los estándares web

4. Separe el contenido del diseño / diseño, use css lo más posible.

5. Usa texto e imágenes.

Agregue el resto de las campanas y silbidos si es necesario, pero asegúrese de que el contenido del sitio siempre esté disponible, incluso cuando las campanas y silbidos estén apagados. Si puede navegar por la página con un navegador simple como lynx y un navegador normal como Firefox, entonces está en el camino correcto.

Para obtener más información, no dude en visitar cualquier campaña del navegador

---

Editar: En caso de que no sea obvio, trabaja con diferentes css para diferentes tipos de navegadores, pero siempre use el mismo contenido. Visite el css zen garden para obtener una demostración agradable.

---

Actualización: Agregando un enlace a los tipos de medios css, y como dicen otros, es la opción de la computadora de mano lo que es interesante.

• http://www.w3.org/TR/CSS21/media.html

Answer 6

  

¿Tienes que diseñar dos sitios diferentes para hacer esto?

Sí

  

¿Cómo puedo saber si un navegador móvil accede al sitio?

Su lenguaje de programación probablemente tenga alguna forma de ver la información del cliente. PHP, por ejemplo, tiene una variable superglobal $ _SERVER que tiene todo tipo de información tanto del servidor servidor como del cliente visitante. En este caso, estaría interesado en el valor de $ _SERVER ['HTTP_USER_AGENT'] , que daría el siguiente resultado, si debo visitar una página:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Esto te dice que estoy ejecutando Mac OS X 10.5.6, usando Safari 4.0. Hay palabras clave conocidas para varios navegadores móviles. Una versión del navegador del iPhone, por ejemplo, tiene el siguiente agente de usuario:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

el " iPhone " ya lo regala, pero se confirma con las palabras clave " Móvil " y " Safari "

Answer 7

La mayoría de los sitios tienen un subdominio ligeramente diferente para los sitios móviles (la mayoría usa " m "). p.ej. flickr utiliza m.flickr.com

(hay una recomendación para usar el .mobi TLD pero nunca visto que se utiliza)

Haga que el diseño sea súper simple, no use demasiados gráficos, donde necesita mantenerlos lo más pequeños posible. Esto puede ser útil para el diseño.

Probablemente construiría un conjunto diferente de páginas para usuarios móviles, haciendo uso de los mismos objetos de negocios, etc. que usa para el sitio principal.

Si las diferencias entre el diseño de las dos vistas no son muy buenas, ¿podría ser capaz de obtener solo un servicio con archivos CSS separados?

Answer 8

Su sitio debe limitarse al teléfono móvil que puede admitir en los requisitos máximos. ni siquiera puede entretener a todos los teléfono móvil .

Su sitio web debe tener un conjunto diferente de estilo css, y el AGENTE DE HTTP debe verificar el tipo de cliente de acuerdo con la solicitud. La selección de Css debe realizarse.