Diseño web: centrado o a la izquierda
Una cosa que piensas cada vez que diseñas una web es si el diseño lo centras en pantalla o lo pones pegado a la izquierda. El otro día lo hablaba con roxu y de la conversación salió esto.
La elección es una cuestión de diseño. Hace años, la mayoría de las pantallas llegaban a tener una resolución de 800×600 y por tanto las webs se orientaban a esa resolución.
Luego hemos pasado a los 1024 y algunos a 1280, otros menos a 1440 y pocos superan esas resoluciones.
Las webs, su aspecto en la pantalla, se ha adaptado. La adaptación se puede hacer de varias formas, como siempre. Hay quienes prefieren ocupar el 100% de la ventana del navegador.
Una cosa a tener en cuenta es que en resoluciones muy altas ya no es tan normal utilizar la ventana del programa de navegación en toda la pantalla. Suele quedar sitio a los lados para tener el skype, messenger, etc.
La mayoría de los sitios -y cuando digo la mayoría digo el 99% o así ;)- adaptan su estilo de pantalla a una resolución de 1024 ¿Por qué se elige adaptarlo a 1024? Porque controlas el espacio donde se muestra lo que se muestra de una forma definida.
Si pones que ocupe el 100%, normalmente los sitios mantienen un ancho fijo para las dos columnas exteriores y la columna central escala. Esto se contrapone a querer darle un estilo que más o menos permanezca.
También es cierto que pocas personas tienen resoluciones altas o utilizan la ventana del navegador a pantalla completa, pero… ¿quién quiere ver su web descuadrada aunque sólo sea un momento por una cosa así?
¿Cómo se ve una web preparada para verse a 1024 en una resolución de 1280? Aquí caben dos posibilidades: o se pega a la izquierda y por tanto deja espacio a su derecha (tanto como ancha sea la ventana del navegador) o se centra y deja el mismo espacio por ambos lados -tanto como ancha sea la pantalla del navegador.
Según sea el diseño, se puede optar por una u otra opción. Las otras cuestiones -resoluciones, comportamiento del usuario- también influyen y hay que permanecer atentos a ver cómo evoluciona esto.
Veamos algunos ejemplos, todos a 1024 menos cuando se señala:
Centrado:
- http://www.elpais.com/
- http://publico.es/
- http://www.20minutos.es/
- http://www.larazon.es/
- http://www.lavanguardia.es/
- http://www.lavozdegalicia.es/portada/index.htm
- http://www.diariovasco.com/
- http://www.laverdad.es
- http://www.gara.net/ (y a 800px!)
- http://www.deia.es/es/ (800)
- http://www.diarioinformacion.es (y todos los de editorial prensa ibérica: el faro de vigo, diari de girona, la nueva españa…)
- http://www.lasexta.com
- http://www.cuatro.com (combinado con cabecera 800)
- http://www.efe.com/
- http://www.antena3tv.com/
- http://www.telemadrid.es/
- http://www.timesonline.co.uk/tol/global/ (me encanta…)
- http://www.guardian.co.uk/
- http://www.wired.com/
- http://www.nytimes.com/
- http://www.cnn.com (aunque combinado con cabecera 100%)
- http://www.miamiherald.com/
- http://www.lefigaro.fr/
A la izquierda:
- http://elmundo.es/
- http://www.abc.es/ (y por ende vocentos: las provincias, etc)
- http://www.telecinco.es/ (participa vocento y por ello…)
- http://www.adn.es/
- http://www.elperiodico.com/default.asp
- http://que.es/madrid/
- http://www.europapress.es/
- http://www.diariodecadiz.com/
- http://www.independent.co.uk/
- http://www.bbc.co.uk
- http://www.washingtonpost.com/
- http://www.sfgate.com/
- http://www.latimes.com/
- http://www.lemonde.fr/
- http://www.liberation.fr/
- http://www.repubblica.it/
- http://www.ilmessaggero.it/
- http://www.corriere.it/
- http://www.faz.net
- http://www.sueddeutsche.de/
100%: