Diseño web para iPhone y iPad para principiantes Hoja de referencia: imitaciones

Muchas personas que navegan por la web móvil lo hacen en un iPhone o iPad, por lo que el diseño de sitios web móviles dirigidos a estos dispositivos tiene sentido para muchos diseñadores web Comience a crear su diseño web para iPhone o iPad eligiendo una estrategia de diseño. Si decides diseñar sitios web específicos para iPhone y iPad, comienza por comprender los conceptos básicos de diseño web que hacen que un sitio funcione bien para usuarios de iPhone o iPad.

Elección de una estrategia para su diseño web móvil

La gente ahora ve páginas web en todo, desde pequeñas pantallas de teléfonos celulares hasta proyectores que iluminan el costado de un establo. Las limitaciones que enfrenta en el diseño web móvil para la pantalla del iPhone pequeño pueden parecerse a pintar huevos de Pascua en una camisa de fuerza. E incluso los profesionales con experiencia encuentran el diseño de sitios web para móviles que se ven geniales en pantallas de todos los tamaños y dimensiones desafiantes, incluso en la pantalla de iPhone de aspecto resbaladizo.

Uno de los aspectos más emocionantes de la creación de sitios web para iPhone, iPad y iPod touch es que te ofrecen la oportunidad de reconsiderar por completo cómo diseñas para Internet.

El diseño es muy subjetivo: o te encanta el rosa o lo odias y probablemente no hay mucho que podamos hacer para cambiar de opinión. Pero más allá de las opciones de color y las preferencias de fuente (que le dejamos a usted), aquí hay dos enfoques para el diseño web móvil para iPhone y iPad:

• Cree varios diseños para una visualización óptima en iPhone, iPad y iPod touch. Esta estrategia le permite hacer el mejor uso de la pantalla, ya sea en modo retrato o paisaje. También puede aprovechar la pantalla de iPad más grande mientras se pega con un diseño de una sola columna que funciona mejor en el iPhone y el iPod touch. Crear todos estos diseños es, por supuesto, más laborioso que crear una página web o una página web móvil. Sin embargo, si su audiencia usa dispositivos móviles como el iPhone y el iPad para visitar su sitio web, vale la pena el esfuerzo.

• Diseñando un diseño de página flexible que se pueda adaptar a las diferencias de tamaño de un iPhone, iPad e incluso las computadoras portátiles y los monitores que las personas aún guardan en sus escritorios. Si elige esta estrategia de diseño web móvil, no tiene la flexibilidad que ofrecen los diseños orientados. Puede entregar un sitio web que satisfaga las necesidades de sus visitantes y funcione bien en una variedad de dispositivos siguiendo algunas pautas. Primero, no use Flash en el diseño de su sitio web porque Flash no funciona en el iPhone o iPad. Además, desea que su sitio llene la pantalla de un iPad en modo vertical, de modo que no corte la longitud de su página a 600 píxeles.En cambio, dimensione la página a 980 píxeles de ancho por al menos 980 píxeles de largo. Por último, pero no menos importante, al realizar pruebas, vea su sitio en los dispositivos más importantes para su audiencia, asegurándose de que las imágenes se carguen rápidamente y se vean sin importar el tamaño de las pantallas de sus visitantes.

Optimización de sus diseños web móviles para iPhone

Sí, la pantalla del iPhone es pequeña, pero debe dejar de pensar en limitaciones y comenzar a centrarse en las nuevas oportunidades sorprendentes que ofrece el diseño web para iPhone, como atraer a un público de personas el movimiento, las personas que pueden estar paradas justo afuera de su restaurante, por ejemplo, mientras miran su menú en sus iPhones y consideran si comen allí.

Al diseñar un sitio web para iPhone, recuerde los siguientes puntos clave:

• Cada píxel cuenta. No tienes mucho espacio para jugar, así que asegúrate de no desperdiciar ni un solo píxel en tus diseños web para dispositivos móviles.

• Crea diseños de iPhone para dispositivos móviles con solo una columna de información. Los diseños de múltiples columnas simplemente no encajan bien en pantallas pequeñas como la pantalla del iPhone.

Cuando cree un diseño especial para iPhone, asegúrese de incluir un enlace a la versión de escritorio de su sitio web. Los visitantes de su sitio web móvil ya pueden estar familiarizados con la versión de escritorio y pueden preferir visitar la versión que ya les es familiar, incluso si usan un iPhone. La versión móvil del navegador web Safari tiene como objetivo mostrar cualquier sitio de escritorio al igual que una computadora de escritorio, y con la excepción del tamaño de pantalla más pequeño, se acerca mucho.

Cómo crear diseños web móviles compatibles con iPad

El iPad, con su gran pantalla hermosa, puede hacer creer que no necesita hacer nada especial en su diseño web móvil, pero las mejores técnicas de diseño web para el iPad no son los mismos que los del escritorio.

Aunque el iPad ofrece mucho más espacio en pantalla que el iPhone, aún crea nuevos desafíos para los diseñadores web móviles. Recuerde lo siguiente cuando diseñe sitios web móviles para el iPad:

• Diseñe para ambas orientaciones: La capacidad de convertir el iPad del modo paisaje al retrato altera dramáticamente el espacio de la pantalla para sus diseños web.

• Aproveche al máximo HTML5 y CSS 3: Cuando diseña para el iPad, no tiene que preocuparse por todos los navegadores web que todavía se usan en las computadoras de escritorio, por lo que puede aprovechar al máximo lo último en estas tecnologías de diseño web.

• Pruebe los diseños de iPad en un iPad: Cuando cree contenido para el iPad, probablemente esté usando una máquina que es bastante diferente de la del iPad. No pruebes tu trabajo en el mismo lugar donde lo desarrollas. Puede que tenga que hacer la mayor parte del diseño y la codificación de sus sitios iPad mientras está sentado en una computadora de escritorio o portátil, pero cuando haya terminado, levántese, estírese y vaya a sentarse en una silla cómoda para ver cómo funciona su sitio web se ve y funciona en un iPad.

Pruebe los diseños de su página web en diferentes situaciones de iluminación. Saque el iPad para ver cómo se ven sus páginas bajo la luz brillante del sol y lleve el iPad a la cama con usted para ver cómo se ve el diseño de su teléfono móvil cuando se esconde en la oscuridad bajo las sábanas.(¿No te encanta no necesitar una linterna para leer en el iPad, de la manera que lo hacíamos cuando queríamos quedarnos hasta tarde para leer libros cuando éramos niños?)