Crear un diseño web para todos los dispositivos: dummies

Si la idea de diseñar un diseño web de retrato y paisaje de iPhone y un retrato de iPad y un diseño de paisaje, solo para una página web, te hacen sentir abrumado, aquí hay algo de alivio.

El navegador web Safari hace un buen trabajo al mostrar la mayoría de los sitios web en Internet, incluso si esos sitios no están específicamente diseñados para estos dos dispositivos. Si desea la opción más simple para cualquiera o todos sus sitios web, puede crear un diseño que sea "lo suficientemente bueno" en el escritorio, así como en el iPhone, iPad y iPod touch.

Si decide crear solo un diseño, asegúrese de seguir estas pautas:

• No use Adobe Flash. Lo siento, esto es un fastidio para los desarrolladores de Flash, pero a menos que Apple cambie su postura, todo lo diseñado en Flash ni siquiera funciona en un dispositivo con iOS. Como resultado, no use Flash en ninguno de sus sitios.

• Crea un diseño que no tenga más de 980 píxeles de ancho. Aunque el iPad muestra diseños de hasta 1024 píxeles en modo apaisado y solo 768 en modo retrato, Safari cambia automáticamente el tamaño del diseño de su página web si crea una página y no la amplía demasiado.

  Mantener la cantidad de píxeles entre 960 y 980 es ideal si desea que su sitio se dimensione de forma automática. Tenga en cuenta, sin embargo, que el cambio de tamaño de las imágenes automáticamente puede generar texto borroso y cambios en sus diseños que pueden dejarlos a menos de un píxel perfecto.

• Crea diseños que se extienden más de 600 píxeles en la página. Si sus sitios se ajustan perfectamente a un monitor con una resolución de 800 x 600 píxeles, probablemente sean demasiado cortos para verse bien en un iPad. En esta figura, puede ver un ejemplo del espacio sobrante en una página web diseñada para caber en menos de 600 píxeles de arriba a abajo.

  

Si está buscando la opción de diseño "Goldilocks" (no demasiado larga ni demasiado corta), diseñe sus páginas para que se vean como las que se muestran aquí. En este sitio para el actor Yuval David, verá cómo el iPad muestra una página de 970 píxeles de ancho y casi 2000 píxeles de arriba a abajo.

Observe que todo el diseño se amplía automáticamente en modo horizontal para llenar el ancho de 1024 píxeles y se reduce a solo 768 píxeles de ancho para que quepa en modo retrato.

Para obtener los mejores resultados, pruebe los diseños de su página web en un iPad o iPhone para asegurarse de que su página principal llene toda la pantalla en modo vertical. También asegúrese de que el texto y las imágenes no se vuelvan demasiado borrosos para leer o que se vean demasiado distorsionados cuando se amplían o reducen automáticamente.