Diseño Página Web Para Todas las Resoluciones
Diseño Web Para Todas las Resoluciones de Pantalla
Diseñando para resoluciones de 800 x 600, 1024 x 768, 1280 x 1024 y superiores. En la actualidad la mayor parte de las personas usan una resolución de 1024 x 768 pero todavía hay gente que navega a una resolución de 800×6oo y si nuestra web está diseñada únicamente para 1024×768 nuestros usuarios con resolución de 800×600 tendrán una barra horizontal, forzándolos a ir de un extremo a otro para poder leer nuestro contenido
Paso 1: Decidir nuestra resolución mínima
Nuestra investigación nos dice que menos de un 0.5% navega a una resolución de
640×480 por lo cual yo no lo consideraría y me iría a las siguiente resolución que es 800×600. Algunos de nuestros visitantes usan a esta resolución por lo que consideraríamos 800×600 nuestra resolución más baja.
Paso 2: Diseña tu sitio para esta resolución
Una vez que haz definido tu resolución mínima, diseña tus gráficos para esa resolución, en otras palabras no puedes pasar de 800px de ancho, diseña tu página y exporta los gráficos como lo haces normalmente.
Paso 3: Al convertir tu diseño en HTML asegúrate que tus tablas estén en porcentaje
El truco al diseñar páginas para todas las resoluciones es que trabajes en % y no en píxeles. Si trabajas en píxeles estás dando medidas absolutas, en cambio si trabajas en % estás dando medidas relativas. La tabla va a ser un
porcentaje dado de la resolución de pantalla. Ejemplo:
Si diseñamos para una resolución de 800×600 es probable que tu tabla sea ancho 800 px y alto 600 px. pero para hacerlo para todas las resoluciones de pantalla nuestra tabla sería ancho y alto 100% , de esta forma sea cual sea nuestra resolución de pantalla nuestra página siempre se ajustara. Será el 100% de la resolución de pantalla o el % que le hayas asignado.
El primer paso es hacer nuestra tabla 100% de ancho y de alto o 95% de alto y de ancho si deseamos
tener algo de blanco alrededor.
Paso 4: Dentro de la tabla, mide las celdas en píxeles excepto la de contenido
Este paso es muy importante, debes darle medidas fijas a cada celda, es decir en píxeles excepto a la celda donde va tu contenido.
Paso5: Insertar Imágenes y Contenido
Una vez que tienes tus tablas diseñadas en porcentaje, necesitas insertar tus imágenes y contenido. Una distribución común sería tener un logo en la esquina izquierda y la navegación en la columna izquierda. Lo que yo suelo hacer cuando es posible es usar la parte superior izquierda y derecha para imágenes fijas y el centro lo dejo de acuerdo al tamaño de la página.
Ve un ejemplo de diseño de página web hecho por Respuesta Web Express prueba en diferentes resoluciones:
 |
 |
Paso 6: Prueba tu sitio en todas las resoluciones y diferentes navegadores
El último paso es probar nuestro sitio en diferentes resoluciones y con diferentes navegadores (IExplorer, Opera, Firefox, Safari).
Para cambiar la resolución de nuestra pantalla debes de:
-
Hacer clic derecho sobre tu escritorio y selecciona Personalizar
-
Escoge Configuración Pantalla
-
En esta pantalla ajusta la resolución que desees y prueba tu sitio
Si tu todo funciona bien ¡Felicidades! Acabas de diseñar una página web para todas las resoluciones.
Si eres nuevo aquí, puedes registrarte a mi RSS. ¡Gracias!
Artículos Relacionadas:
