Cómo crear una versión para iPhone de un sitio web

Cada lanzamiento de iPhone genera picos de tráfico web. Con el iPhone 3GS (2009), subió 400% la subida de vídeos móviles a YouTube (iPhoneHeat.com) y se convirtió en la cámara principal en Flickr. Al ser tan fácil acceder a la web, muchos usan iPhone para ver sitios no sociales. Es vital que tu web se vea bien en la pantalla de 3,5" (horizontal) del iPhone.

Instrucciones

1. Mantén el diseño simple: La pantalla del iPhone es ~10" menor que un portátil. Safari en iPhone es navegador completo. Tu contenido NO se convierte automáticamente a versión móvil. Sea cual sea el ancho de tu página, se muestra en 3,5" (480×320px vertical, 480px ancho horizontal) igual que en escritorio. Demasiados elementos: difíciles de distinguir y lentos al cargar. El iPhone alterna 3G/EDGE/Wi-Fi; cambios alargan carga y el usuario se va. Haz páginas más cortas para aligerar carga.
2. Evita diseño dependiente de ratón: El iPhone usa pantalla táctil. Navegan con dedos: doble toque = zoom/centrar, arrastrar = mover, flick = scroll, pellizcar = zoom in/out. Dedos por toda la pantalla: evita muchos enlaces juntos o muy cercanos (difícil tocarlos sin error).
3. Diseña con elasticidad (Responsive Design): Safari iPhone abre cada ventana a pantalla completa: 480×320px (vertical), 480px ancho (horizontal). Safari transforma tu web para llenar sus píxeles sea cual sea tu ancho fijo. Piensa anchos relativos (%, em, rem, vw), no absolutos (px). Tamaño texto y formato: defaults pueden ser sobrescritos para llenar pantalla. El texto puede envolver imágenes o saltar líneas inesperadamente.
4. Evita framesets (marcos): Los marcos ajustables individualmente no aparecen igual en iPhone. Safari elimina barras de scroll de marcos (ratón/touchpad). Usa columnas y bloques de texto para aprovechar espacio. Columnas son compatibles: doble toque en columna = zoom a esa columna. Permiten enfocar texto aparte del diseño general.
5. Evita Flash, Java applets y tecnologías no soportadas: Aparecen como cajas vacías. Más huecos en contenido = más probable que el usuario se vaya. Flash está muerto (fin 2020). Usa HTML5, CSS3, JavaScript moderno.

Buenas prácticas modernas (Responsive Web Design)

• Viewport meta tag: ``
• CSS Media Queries: `@media (max-width: 480px) { ... }` para estilos móviles.
• Imágenes flexibles: `max-width: 100%; height: auto;`.
• Touch targets mínimos: 44×44px (guía Apple) para botones/enlaces.
• Formularios optimizados: `input type="email/tel/number/date"` muestra teclado apropiado.
• Prueba en dispositivo real y simulador (Xcode / Chrome DevTools Device Toolbar).