Cómo escribir páginas web para dispositivos móviles

Tabla de contenidoExpandir

• Reglas generales
• Diseño para teléfonos inteligentes
• Enlaces y navegación
• Consejos para imágenes
• Cosas a evitar

Lo más probable es que haya visto cómo el iPhone puede voltear y expandir páginas web. Puede mostrarle toda la página web de un vistazo o hacer zoom para que el texto que le interesa sea legible. En cierto sentido, desde la 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, ¿de verdad quieres que tu página simplemente funcione o se destaque y brille?

Cuando usted construir una página web , debe pensar en 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 crear un sitio para dispositivos móviles

Prueba en tantos dispositivos como puedas.Lo primero que debe hacer es ver su sitio en un iPhone y tantos otros dispositivos móviles o emuladores como puedas. Si bien puede usar emuladores para todas sus pruebas, realmente 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 puede 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 celulares. Si bien la mayoría de los teléfonos inteligentes pueden manejar todas esas cosas, otros dispositivos móviles no pueden. Crea una página específica para dispositivos inalámbricos y haz que sea fácil de encontrar.Si va a crear una página específica para sus clientes de teléfonos celulares y de servicios inalámbricos, hágala 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 son de mano usando el tipo de medio de mano. Después de todo, la mayoría de las personas visitan su página de inicio, incluso desde 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 hacer ningún cambio si no lo desea. Lo mejor de la mayoría de los teléfonos inteligentes disponibles es que usan 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 que mucho más pequeños). ). Pero hay cosas que puede hacer para que la experiencia de navegación sea más placentera:

Recuerda que la pantalla es diminuta.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 volverse tedioso. Una columna larga de texto es más fácil de leer.Divide las páginas en partes más pequeñas.Puede ser difícil leer segmentos largos de texto en un teléfono celular, por lo que ponerlos en varias páginas los hace más fáciles de leer.

Enlaces 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. Manténgalos cortos. Pero el texto de enlace largo es más fácil de tocar.Cuando se encuentra 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 el correcto sin hacer zoom. Muchas personas simplemente se darán por vencidas y se irán 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 coloque su navegación en la parte superior de la pantalla.No hay nada más molesto que tener que recorrer pantallas y pantallas de enlaces para encontrar la información que desea. Si ha mirado páginas web que fueron diseñadas para teléfonos celulares, verá que lo primero que aparece es el contenido y el título. Luego, debajo de eso está la navegación. No tengas miedo de ocultar tu navegación. Ocultar enlaces de navegación con CSS o JavaScript y hacer que aparezcan solo cuando el usuario lo solicite es una forma de facilitar la página a los usuarios de smartphones.

Sugerencias para imágenes en teléfonos inteligentes

Las imágenes deben ser pequeñas.Sí, Android y iPhone pueden acercar y alejar las imágenes, pero cuanto más pequeñas 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 celulares, es fundamental. Las imágenes deben descargarse rápidamente.Las imágenes ocupan mucho espacio en las páginas web cuando las visualizas 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 estorban 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 ocupa de 3 a 4 pantallas completas en la parte superior de la página. Y esto es extremadamente 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 iPhone 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 use tablas para el diseño en una página móvil. Y trata de evitar las mesas en general. No son compatibles con todos los teléfonos celulares (aunque los iPhone y otros teléfonos inteligentes los admiten) y puede terminar con resultados extraños. Tablas anidadas: Si debe usar una mesa, asegúrese de no anidarla en otra mesa. Estos 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 100 px de ancho, en un dispositivo móvil podría ser la mitad de la pantalla y en otro podría ser dos veces el 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 celulares.