Optimizar el blog para distintas resoluciones

Algo que poco se trata en los blogs es la optimización de la resolución de la pantalla que sin duda es algo muy importante que considerar cuando creamos la plantilla para nuestro blog.

En esta oportunidad veremos distintos tipos de layout, sus ventajas y otras formas de optimización.

W3schools tiene una tabla estadística que sin duda es la mejor para conocer la cantidad de usuarios utilizan las resoluciones las que trataremos.


Tema 1: Tipos de Layout:

En este tema trataremos las distintas formas que pueden adoptar las plantillas, mostraré sólamente los 2 tipos que considero los más sencillos de implementar y los que menos trabajo dan.

1. Fixed: Este tipo de layout es uno de los más utilizados, mantiene siempre un ancho fijo el cual a distintas resoluciones puede ser un problema si no se sabe definir correctamente.

2. Fluid: El tipo fluid es un layout que trabaja con valores porcentuales, es decir, mantiene un tamaño en relación a la resolución que se está usando, es el que considero mejor pero a su vez es más dificil de implementar.

En los siguientes esquemas puedes ver la forma de trabajar de cada tipo de layout:

Ejemplo Layout Fixed:

940px

620px

300px

940px

Ejemplo Layout Fluid:

90%

66%

32%

90%

Ahora que sabemos un poco sobre cómo trabajan las layouts, es conveniente saber lo siguiente:

• Usa una resolución de 1024x768 cuando diseñes: Esto puede ser un poco molesto ya que la mayoría de los usuarios usamos una resolución superior, pero es importante también en cuenta esta resolución porque es la mínima que se utiliza. Podemos descartar resoluciones de 800x600 e inferiores ya que no son usadas hoy en día.
• Usa dimensiones de 960px o 940px de ancho: Generalmente los sitios se manejan por esta regla, ya que son óptimas para la resolución mínima en el caso de usar un layout fixed. La plantilla no sobrepasará los límites horizontales del navegador y así evitas problemas.
• Centra el layout: Es necesario y crucial que cada parte del layout esté centrada correctamente, esto es fácilmente aplicable con el margin:0 auto en cada contenedor. Esta regla es útil para ambos tipos de layout.
• Si tu resolución no alcanza una muy alta: Puedes hacer zoom out al blog para comprobar si todo está funcionando correctamente.

Tema 2: Usando CSS en distintas resoluciones:

Existe una regla que nos permite evitar hacer cambios al tipo de layout para corregir errores puntuales en distintas resoluciones mediante la inserción de estilos a esta resolución en particular.

Esto es posible gracias al siguiente código:

<link href="url-archivo-res-1024.css" media="screen and (min-device-width: 1024px)" rel="stylesheet"></link>

En donde 1024px lo cambiamos por la resolución a la que queremos añadir CSS y url-archivo-res-1024.css por la URL del archivo CSS (Si no sabes crear un archivo .CSS lee esta entrada).

Puedes comprobar la capacidad de esta función cambiando la resolución de tu computador y observando el siguiente contenedor (Actualiza la página para comprobarlo):

Este contenedor variará de color en resoluciones distintas

• En resolución de 800 deberás ver un color como este:
• En resolución de 1024 deberás ver un color como este:
• En resolución de 1280 o superior deberás ver un color como este: