Un problema solventable. Ancho variable del blog

Una de las cosas a la que no prestamos mucha atención cuando comenzamos a desarrollar nuestro blog, es la que se refiere al ancho que tendrá nuestro espacio. Cogemos una plantilla, hacemos las pruebas pertinentes observando el resultado en NUESTRA PANTALLA y cuando nos gusta, la instalamos.

Lo que ocurre es que hay una importante diversidad de resoluciones y cada usuario verá la página ajustada a su propia resolución. Como leemos de arriba a abajo, el alto no supone ningún problema, ya que para eso está la barra de desplazamiento. Pero lo que ya es un poco coñazo es tener que mover el scroll horizontal cada vez que terminamos una línea o cada vez que queremos ver la barra lateral que queda oculta. Esto último ocurre, por ejemplo, cuando diseñamos un ancho de 1024 pixels y el usuario tiene una resolución de 800px. De este asunto es de lo que se queja nuestra amiga de Androides Roqueros.

Resolución de 1280px

Resolución de 800px

Actualmente, los anchos habituales son de 800, 1024, 1280 y 1440 pixels. Por tanto, si creamos una página con 800px, todo el mundo la verá correctamente. Eso sí, infrautilizamos el espacio disponible y en resoluciones muy grandes, el contenido se quedará como muy desangelado en el centro de la pantalla.

CSS nos permite una solución, pero que no está exenta de otro tipo de problemas. Existe una instrucción (WIDTH) en la que se puede indicar el ancho en pixels de cada uno de nuestros contenedores y que ya vimos en "Crear bloques de información". Si bien lo habitual es indicar un ancho fijo mediante una expresión numérica de pixels, también se puede utilizar un expresión porcentual.

Así, en lugar de usar width:200px; también podemos usar otra similar a width:80%;

El ancho así definido, expresará que tanto por ciento del ancho disponible, debe ocupar el contenedor correspondiente.

Un ejemplo. Definimos un contenedor principal (outer), en el que luego colocaremos un espacio para entradas (main) y otro con la barra lateral (sidebar). Respectivamente, 1000, 750 y 250 pixels de ancho fijo.

#outer-wrapper {
width: 1000px;
...
}
#main-wrapper {
width: 750px;
...
}
#sidebar-wrapper {
width: 250px;
...
}

Cuando alguien con pantalla de 800px vea nuestro blog, el contenido que sobrepase ese ancho (200px), quedará oculto a la derecha y tendrá que usar la barra de desplazamiento horizontal del navegador para poder ver ese trozo de página. Cuando alguien con 1440px de resolución visite la misma página, verá un hueco de 440px, bien repartido a ambos lados o bien en uno de los dos lados, según el diseño de la plantilla.

Sin embargo, si hacemos esto otro...

#outer-wrapper {
width: 100%;
...
}
#main-wrapper {
width: 75%;
...
}
#sidebar-wrapper {
width: 25%;
...
}

...cualquier usuario verá una página en la que las tres cuartas partes del ancho estarán ocupadas por el contenedor de las entradas y la otra cuarta parte la ocupará la barra lateral.

Actualmente, este blog tiene una cabecera de ancho fijo y cuerpos de entradas y barra lateral variables. Si le dais al botón "restaurar" del navegador y luego abrís y cerrais la ventana manualmente en cuanto a anchura, apreciareis el resultado. Tened en cuenta que las imágenes no modifican su tamaño, pero que las líneas de texto sí lo hacen, tal y como pasa por ejemplo con Word cuando cambiais los márgenes.

Resolución de 800px

Resolución de 1280px

---

Fácil ¿no?... Pues la verdad es que sí y no. Ahora empiezan los problemas. En las plantillas más sencillas, no existirán mayores pegas que las relacionadas con los márgenes (margin) y los espacios (padding). Según el explorador (IE, Firefox, Opera...) el tratamiento de estas instrucciones tiene un resultado un poco distinto, lo que provocará que por un solo pixel, quizás no quepa el contenedor definido y se nos descuadre toda la estructura. En este caso con no apurar el espacio, tenemos suficiente. Usemos el 98 o el 99% del ancho total y en los bloques "interiores" al principal, pongamos por ejemplo un 74% y un 24%. Evidentemente, estos dos últimos no sumarían un 100%, pero eso es precisamente lo que queremos para evitar problemas.

Experimentando con la plantilla y probando con Vista Previa antes de salvar, esto lo solucionais con poco trabajo.

---

Otra cosa que ya requiere un poco más de trabajo es el rediseño de páginas con muchas florituras gráficas, como esquinas redondeadas o dibujos formados por distintos elementos.

Una cabecera con esquinas redondeadas, normalmente se hace montando una imagen que contenga las esquinas superiores, a continuación un fondo (background) plano del mismo color y por último otra imagen con las esquinas inferiores. "Encima" del conjunto, irá nuestra imagen principal o texto (el fondo negro sólo es para que se aprecien las esquinas; realmente debería ser transparente)



Este sería el resultado con anchos fijos:


Pero cuando nuestro contenedor tiene un ancho variable y el dibujo de las esquinas tiene un ancho fijo, según que la resolución del usuario sea mayor o menor que la esperada, pasan cosas como estas:



Siento no poderos dar soluciones concretas, porque dependerán del diseño gráfico de cada web y sólo hay que darse una pequeña vueltecita por internet, para ver que hay casi tantos diseños como personas.

Pero para que no desespereis, aportaré al menos que muchos casos se solucionan de una forma relativamente sencilla. Hay que usar imágenes de alto fijo y montar el resultado en vertical utilizando las propiedades de repetición y posición de BACKGROUND, tales como NO-REPEAT, LEFT, TOP, etc., sustituyendo las imágenes "base" anteriores por otras como estas:

También se puede fijar la parte superior-izquierda y colocar "imágenes complementarias" a la derecha y abajo. Pero como hemos dicho, esto es mucho más complicado de hacer y, sobre todo, de explicar aquí caso a caso.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter