Ajustar pagina web a todas las Resoluciones

Ajustar pagina web a todas las Resoluciones

Uno de los problemas más comunes que se presentan cuando creamos una página web es el hecho de las resoluciones, resulta que una página se ve diferente dependiendo del tamaño de la pantalla del usuario, con este tutorial te voy a dar las recomendaciones para elegir la mejor resolución y para ajustarla a las diferentes pantallas posibles.

Eligiendo el mejor tamaño de diseño

Hace poco tiempo conocí una herramienta publicada que proporciona diferentes opciones para ajustar nuestra página web a la mejor resolución, dicha herramienta se llama “960 Grid System“.

Esta herramienta es usada por casi todos los diseñadores profesionales (puedes constatarlo en la pagina 960.gs), así que es la que, en mi opinion, debes usar para crear tu página web. Una vez que descargues la herramienta entra en “960_download>>templates” y selecciona el programa con el que crees el diseño de tu web, por ejemplo, si usas photoshop, abre el archivo “960_grid_12_col.psd” y vas a ver lo siguiente:

guias

Un espacio de trabajo con guías tanto externas como internas que te van a ayudar a colocar tu diseño, la idea es que tu espacio de diseño no sobrepase las ultimas guías laterales.

Colocando el diseño en el centro para todas las resoluciones

Esto lo puedes hacer fácilmente con CSS. Comienza tu diseño colocando todo dentro de un gran div, llamado como quieras, tu diseño en HTML debe quedar algo así:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
	<div id="nombre-del-div-grande">
		tu contenido aqui adentro
	</div>
</body>
</html>

Después que agregues este div, entra en tu css y colócale las siguientes propiedades:

1
2
3
4
5

#nombre-del-div-grande {
	margin: auto;
	padding: 0;
	width: tamaño-del-diseño.px;
}

Donde el tamaño-del-diseño que ves en la línea 4 seria el ancho total de tu diseño.

guias2
Con eso tu página debe estar centrada y ajustada a las diferentes resoluciones

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

23 Comentarios en "Ajustar pagina web a todas las Resoluciones"

  1. HazardGrl

    4 julio 2009

    Respuesta

    Hermoso!! El mejor tuto que he visto en mucho tiempo Mijael, LO AMO!! en verdad… ya lo pondré en práctica ^.^

    Besotes!!

  2. Mijael

    5 julio 2009

    Respuesta

    Jajajaja que linda Hazard….Me alegra que te guste el tutorial…espero verlo en practica pronto como dices :P…Saludos y besos.

  3. Hayley-bu

    10 julio 2009

    Respuesta

    Hola! tengo un problema con mi web, y no sé si se deba a la resolucion. Resulta que se ve diferente cuando le agrego el “www” …. mi pagina es http://drake-b.com/ y todas las imagenes se ven borrosas … se nota mas en el texto escrito en el header …..pero cuando le agrego el “www” http://www.drake-b.com/ se ve perfecto …como le hago para que se vea bien con y sin el “www”

    ya había dejado esta duda en su foro, perdona si estoy presionando.

  4. ohbabyb

    11 julio 2009

    Respuesta

    Me sirvio muchisimo ! :p

  5. Mijael

    11 julio 2009

    Respuesta

    Respuesta al Comentario deHayley-bu: No se de verdad que sera lo que puede pasarte con tu web…pero yo la veo igual…con o sin el www, se ven borrosas las dos….pero la verdad no se..porq yo las veo igual las dos.
    Respuesta al Comentario deohbabyb: Para eso esta hecho ohbabyb, que bien que te sirva lo que aqui se hace.

  6. antonella molina

    31 agosto 2009

    Respuesta

    gracias por la informacion
    me saque un 10 en tecnologia
    los amo
    gracias

  7. Mijael

    31 agosto 2009

    Respuesta

    Me alegra que te guste el tutorial antonella…Saludos!

  8. Hadabell

    8 septiembre 2009

    Respuesta

    Hola Mijael qué tal? mira estoy comenzando a hacer el diseño de una web y no logro comprender muy bien esta herramienta. (a)Debo realizar el diseño en el espacio señalado en la herramienta? (b)o puedo hacer mi diseño en el tamaño que quiera y luego con ccs se ajustará?

    Si es positiva la respuesta (a) dices que: “la idea es que tu espacio de diseño no sobrepase las últimas guías laterales” cuáles son las líneas laterales? : S sorry por la brutalidad jajajaja. Besos.

  9. Mijael166

    8 septiembre 2009

    Respuesta

    Jejeje hadabell, la respuesta correcta es la a, te explico..la herramienta tiene muchas guias verticales cierto?…lo que debes hacer es que tu diseño no debe sobrepasar las ultimas lineas verticales que estan ahi…

    En la ultima imagen que esta en el tutorial dice que “este es el ancho que deberias colocar en la propiedad width”..ese ancho es el que debe tener tu diseño.

    En resumidas cuentas….que tu diseño no sobrepase las guias :P..

  10. Hadabell

    8 septiembre 2009

    Respuesta

    em… mijael, disculpa la molestia, pero tendrás algún correo personal o msn para enseñarte algo?… me da pena publicarlo porque es muuuy novato, pero quiero aprender y tengo algunas dudas :( perdon por fastidiar.

  11. Mijael166

    8 septiembre 2009

    Respuesta

    Ya te agregue al correo que colocaste en el formulario de envio…Saludos hadabell..y no te de pena q nadie aprende de un dia a otro..si vieras mis primeros trabajos seguro te ries ;-)..

  12. Antony

    16 septiembre 2009

    Respuesta

    Hola , bueno yo tengo un problema con los exploradores
    (IE, FIREROX, GOOGLE CHROME)
    soi principiante haciendo webs , el problema esque cuando
    quiero ver como queda las webs que hago ( es decir las pruebas que te hace el dreamweaver)
    en cada explorador se ve de diferente forma ):
    porfavor ayudame con eso

  13. Mijael

    16 septiembre 2009

    Respuesta

    Jejeje ese es uno de los grandes problemas para mi de hacer paginas webs, hay diferencias en los exploradores y todas esas diferencias tienen soluciones. siquieres pon algunas aki o en el foro y con gusto te ayudo.

  14. superchango

    17 septiembre 2009

    Respuesta

    estoy haciendo una pagina y el problema es que en mi pc se ve muy bien, tengo 17 pulgadas y una resolucion de 1024 y creo que es x 800, el problema es que cuando voy a la casa de mi novia tiene un monitor mas grande y la pagina se ve desconfigurada, el hecho es que si pongo las celdas en porc. se agrandan pero la imgen de fondo sigue estando igual, si modifico las celdas voy a tenr que cambiar todo, hay alguna forma de evitar eso? o que me recomendas al iniciar la creacion de una pagina web, soy nuevo en esto.

  15. Marcelo

    1 agosto 2010

    Respuesta

    Hola Mijael!! cuando coloco el contenido de mi sitio en el archivo “960_grid_12_col.psd”, de que forma lo guardo para luego comenzar con la parte de html y css que tú explicas sobre el final?
    Gracias.

    • Mijael

      1 agosto 2010

      Respuesta

      Bien, yo guardo El archivo igual en PSD, recuerda que sirve para tener guia de nuestro CSS y ademas para recortar las imagenes necesarias asi que dejalo igual en psd para continuar con el proximo capitulo.

      • marcelorullan

        1 agosto 2010

        Respuesta

        Gracias Mijael!! disculpame pero al “próximo capítulo” donde lo encuentro, o te referís a lo que sigue en este mismo post?.

        • Mijael

          2 agosto 2010

          Cierto…no hay proximo capitulo xD Pero me refiero a cuando lo vamos a pasar a HTML

  16. mauricio gonzalez

    1 agosto 2010

    Respuesta

    excelente tu tutorial , me sirvio muchicimo . Gracias y espero exito para todos .

  17. wolfang3

    3 agosto 2010

    Respuesta

    Yo creo que la mejor forma es usar tablas porque asi queda tod más hordenado y asi puedes ir usando includes…
    Las tablas solo deben ponerlas en 100% de anchura y listo quedaran a cualquier resolucion

    • Mijael

      3 agosto 2010

      Respuesta

      Depende de lo que se haga mas facil para cada quien..Todas las paginas profesionales trabajan con este sistema puedes constatarlo en la misma pagina de descarga. Saludos :P

  18. lucas quevedo

    9 agosto 2010

    Respuesta

    Hola tengo un problema yo me cree una pagina web y puse una fondo y puse que la tabla se adapte al 100 % en una resolucion de 1024×768 pero con resoluciones mas grandes la pantalla osea el fondo se me hace mosaico y en una resolucion mas chica me falta fondo como puedo hacer

  19. Mijael

    10 agosto 2010

    Respuesta

    Si en unas te falta fondo y en otras te sobra….deberias usar otro fondo que puedas repetir (mosaico) u otra que no necesites q se repita que deberia ser bastante grande…en css la propiedad el background para que no te haga mosaico es:

    background: url(la url de la imagen) no-repeat;

    es el no-repeat…saludos!

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar