Es probable que haya visto cómo el iPhone puede voltear y expandir páginas web. Puede mostrarle la página web completa de un vistazo o acercarla para que el texto que le interese sea legible. En cierto sentido, dado que el iPhone usa Safari, los diseñadores web no deberían tener que hacer nada especial para crear una página web que funcione en el iPhone. Pero, ¿realmente quieres que tu página funcione o se destaque y brille?
Cuando usted construir una página web, debe pensar quién lo verá y cómo lo verá. Algunos de los mejores sitios tienen en cuenta en qué tipo de dispositivo se está viendo la página, incluida la resolución, las opciones de color y las funciones disponibles. No solo confían en el dispositivo para resolverlo.
Directrices generales para la creación de un sitio para dispositivos móviles
- Pruebe en tantos dispositivos como pueda. Lo primero que debe hacer es ver su sitio en un iPhone y tantos diferentes dispositivos móviles o emuladores como puedas. Si bien puede usar emuladores para todas sus pruebas, en realidad no le dan la misma sensación que tratar de navegar a través de un sitio web en la pequeña pantalla. Debe probar en dispositivos reales tanto como sea posible.
- Haz que tus páginas se degraden con gracia. Puedes escribir tus páginas para Habilitado para flash, navegadores de pantalla ancha, pero asegúrese de que la información crítica sea visible incluso en un monitor pequeño que no pueda manejar ninguna función especial (como cookies, Ajax, Flash, JavaScript, etc.). Cualquier cosa más allá de XHTML Basic estará más allá de algunos teléfonos móviles. Si bien la mayoría de los teléfonos inteligentes pueden manejar todas esas cosas, otros dispositivos móviles no pueden.
- Cree una página específica para redes inalámbricas y facilite su búsqueda. Si va a crear una página específica para su teléfono celular y clientes inalámbricos, hágalo disponible. Una excelente manera es poner el enlace a la página inalámbrica en la parte superior de su documento y luego ocultar ese enlace de los dispositivos que no sean de mano que utilicen el tipo de medio portátil. Después de todo, la mayoría de las personas llegan a su página de inicio, incluso en teléfonos celulares, y si el enlace a su página inalámbrica no está allí, se irán si la página es demasiado difícil de usar.
Diseño de página web para teléfonos inteligentes
Lo primero que debe recordar al escribir páginas para el mercado de teléfonos inteligentes es que no tiene que realizar ningún cambio si no lo desea. Lo mejor de la mayoría de los teléfonos inteligentes disponibles es que utilizan navegadores Webkit (Safari en iOS y Chrome en Android) para mostrar páginas web, por lo que si su página se ve bien en Safari o Chrome, se verá bien en la mayoría de los teléfonos inteligentes (solo muchos menor). Pero hay cosas que puede hacer para que la experiencia de navegación sea más agradable:
- Recuerda que la pantalla es pequeña. Los teléfonos inteligentes condensarán todas esas columnas en la pequeña ventana, y esto puede hacer que sean muy difíciles de leer sin hacer zoom. La mayoría de los usuarios están acostumbrados a hacer zoom, pero puede resultar tedioso. Una columna de texto larga es más fácil de leer.
- Divida las páginas en trozos más pequeños. Puede ser difícil leer segmentos largos de texto en un teléfono celular, por lo que colocarlos en varias páginas hace que sean más fáciles de leer.
Vínculos y navegación en iPhones
- Cuanto más cortas sean las URL, mejor. Si alguna vez ha intentado escribir una URL en un teléfono celular, sabrá que es una molestia (excepto quizás para los adolescentes que están acostumbrados a enviar muchos mensajes de texto). Incluso en el iPhone, es tedioso escribir URL largas. Que sean breves.
- Pero el texto de enlace largo es más fácil de tocar. Cuando está en una página donde varias palabras separadas están vinculadas a diferentes artículos, todos uno al lado del otro, puede ser muy difícil tocar la correcta sin hacer zoom. Mucha gente simplemente se rendirá y se irá a otro lugar. Los enlaces con 3 a 5 palabras en ellos son más fáciles de hacer clic en el teléfono que los enlaces de 1 palabra.
- No coloques tu navegación en la parte superior de la pantalla. No hay nada más molesto que tener que desplazarse por pantallas y pantallas de enlaces para encontrar la información que desea. Si ha mirado páginas web diseñadas para teléfonos móviles, verá que lo primero que aparece es el contenido y el título. Luego, debajo de eso está la navegación.
- No tenga miedo de ocultar su navegación.Ocultar enlaces de navegación con CSS o JavaScript y hacer que aparezcan solo cuando el usuario lo solicita es una forma de facilitar la página a los usuarios de teléfonos inteligentes.
Consejos para imágenes en teléfonos inteligentes
- Las imágenes deben ser pequeñas. Sí, Android y iPhones pueden acercar y alejar las imágenes, pero cuanto más pequeños sean, tanto en dimensiones como en tiempo de descarga, más felices estarán sus clientes inalámbricos. Optimización de imágenes siempre es una buena idea, pero para las páginas de teléfonos móviles, es fundamental.
- Las imágenes deben descargarse rápidamente. Las imágenes ocupan mucho espacio en las páginas web cuando las visualiza desde un dispositivo móvil. Y aunque a menudo son muy agradables y hacen que las páginas se vean mejor cuando se ven en un navegador web de pantalla completa, a menudo se interponen en un dispositivo móvil. Además, cuando un usuario de teléfono inteligente está en la red celular, lo último que quiere pagar es descargar un montón de imágenes enormes o íconos de navegación.
- No coloque imágenes grandes en la parte superior de la página. Al igual que con la navegación, puede ser muy tedioso esperar a que se cargue una imagen que tarda de 3 a 4 pantallas completas en la parte superior de la página. Y esto es muy común en las páginas web. La única excepción a esto es si el lector sabe que obtendrá una imagen cuando haga clic, por ejemplo, en una galería de fotos.
Qué evitar al diseñar para dispositivos móviles
Hay varias cosas que debe evitar al crear una página optimizada para dispositivos móviles. Como se mencionó anteriormente, si realmente desea tenerlos en su página, puede hacerlo, pero asegúrese de que el sitio funcione sin ellos.
- Destello: La mayoría de los teléfonos móviles no son compatibles con Flash, por lo que no es una buena idea incluirlo en sus páginas inalámbricas.
- Galletas: Muchos teléfonos móviles no admiten cookies. Los iPhones tienen soporte de cookies.
- Marcos: Incluso si el navegador los admite, piense en las dimensiones de la pantalla. Los marcos simplemente no funcionan en dispositivos móviles, son muy difíciles o imposibles de leer.
- Mesas: No utilice tablas para el diseño en una página móvil. Y trate de evitar las mesas en general. No son compatibles con todos los teléfonos móviles (aunque los iPhone y otros teléfonos inteligentes los admiten) y puede terminar con resultados extraños.
- Tablas anidadas: Si debe utilizar una mesa, asegúrese de no anidarla en otra mesa. Son difíciles de admitir para los navegadores de escritorio y, en el mejor de los casos, hacen que la página se cargue más lentamente.
- Medidas absolutas: En otras palabras, no defina las dimensiones de los objetos en tamaños absolutos (como píxeles, milímetros o pulgadas). Si define algo como 100px de ancho, en un dispositivo móvil podría ser la mitad de la pantalla y en otro podría tener el doble de ancho. Los tamaños relativos (como ems y porcentajes) funcionan mejor.
- Fuentes: No asuma que ninguno de los fuentes está acostumbrado a tener acceso estará disponible en los teléfonos móviles.