Imagen: El diseño de este blog, en una pantalla de 1280x1024 usando Firefox 3.Por un lado el diseño fijo tiene la ventaja de controlar el aspecto final en todos los ordenadores, pero la desventaja de que en pantallas pequeñas habrá que hacer mucho desplazamiento de pantalla.
Si optamos por un diseño elástico debemos controlar que la anchura máxima no sea excesiva, o el texto se "desparramará" por toda la pantalla, con líneas muy largas y cansinas de leer.
Leyendo varias páginas que tratan sobre cómo mejorar el diseño de tu blog en Blogger y la importancia del mismo, me encontré que hacer que la anchura del blog fuera elástica según el tamaño de pantalla (dentro de un límite) era de lo más sencillo.
Googleando, esta es la página que mejor explica cómo aplicarlo en blogger:
Para modificar la plantilla hay que ir a la sección Diseño -> Edición de HTML, y allí tenemos el código fuente. Al principio asusta, pero no es para tanto. En el código tenemos que buscar la siguiente parte, que es la capa externa que envuelve todo el contenido del blog:Siguiendo los pasos de Alejandro, me puse a modificar mi plantilla fija de 900 pixels de ancho total (ya que la anchura de pantallas de 1024 es lo más habitual), y de paso ampliar hasta los 1024 pixels la plantilla y hacerla accesible a pantallas 800x600 sin necesidad de usar la barra de desplazamiento horizontal.
#outer-wrapper {Y hay que añadirle tres líneas, que he destacado en negrita, para dejarla como el siguiente código. Hay que dejar como está cualquier código que haya en esa capa, a no ser que se refiera a los márgenes (margin) o a la anchura (width); en estos casos, habrá que borrarlos para añadirle nuestras medidas.
font:$bodyfont;
}
#outer-wrapper {
font:$bodyfont;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
Ya anteriormente le había cambiado varias veces de plantilla, reflejando un poco mis gustos y el tono del Blog. Actualmente tiene un acabado de mucho contraste entre el texto y el fondo, destacando los enlaces y los bordes de color verde, como muchas de las entradas que pongo últimamente. El verde y el azul son mis colores favoritos ;-).
Pero pasemos a ver qué secciones hay que cambiar:
Sólo tenemos que modificar los encabezados de las capas (o wrappers):
#outer-wrapper {
max-width: 1004px;
margin-left: auto;
margin-right: auto;
Sólo queda quitar la anchura fija de main y sidebar (main se refiere a la sección de entradas, sidebar a los paneles laterales) y meter un porcentaje para que se reparta el espacio en esa proporción:
#main {
width: 66%;
Y justo debajo:
#sidebar {El 4% restante se reserva a la separación de ambas secciones automáticamente.
width: 30%;
Así es como se ve ahora en una pantalla de 800x600 pixels de resolución; ya no aparece la barra inferior de desplazamiento:
Hay que tener en cuenta que hay muchos tipos de plantillas, algunas con paneles laterales a uno y otro lado, pero basta con ir probando y darle a "vista previa" sin guardar los cambios hasta que estemos seguros de que todo está correcto.
Mi blog tiene un diseño de ancho variable. Es posible que sea un problema para la gente que tenga pantallas muy grandes y el navegador maximizado, pero al mismo tiempo doy la posibilidad a mis visitantes de usar el ancho de línea que ellos prefieran con tan sólo redimensionar el navegador.
ResponderEliminarCreo que hoy en día con las pantallas tan grandes que hay, con anchos de hasta 1600 y 1900 puntos, es un error trabajar con el navegador maximizado como se hacía antes, sino que es mejor tenerlo como una ventana e ir ajustando su tamaño de forma que todas las webs se vean de una forma cómoda, que es más o menos poner el navegador como si la pantalla fuera de 1024x768 o similar.
Sí, me había fijado que tu web es muy cómoda de leer, es mi inspiración ;-).
ResponderEliminarY tienes toda la razón, no tiene sentido maximizar el navegador en pantallones tan grandes cuando normalmente estás a menos de 1 metro de él, lo mejor es tener varias aplicaciones a la vez en la pantalla para aprovechar tanto espacio, es más productivo.