En un artículo anterior les he hablado de la importancia de los sitios web flexible o “responsive” debido a la alta penetración de los dispositivos móviles, principalmente los “smartphones”, lo que ha obligado a pensar “mobile first” a la hora de diseñar y programar un website.
En este otro artículo anterior nos referimos a las herramientas necesarias para crear nuestro website pensando en “mobile first” – flexible o “responsive”. Ahora, ¿cómo logramos adaptar a estos tiempos un website o portal ya establecido, y que llevarlo a móvil por medio de un nuevo diseño, tomando en cuenta que fue desarrollado hace unos diez años y cuyo tamaño físico y lógico (base de datos) son enormes? No es tarea fácil, y tomaría mucho tiempo si no se cuenta con suficientes recursos para ello o simplemente no se cuenta con el tiempo necesario para adaptarlo, o en última instancia sólo una persona administra el sitio.
La solución viene gracias a CSS y Media Query.
Media Query es una consulta tipo SQL semántico o condición que nos permite disponer de diferentes referencias de estilo para un mismo elemento dentro del DOM (Document Object Model) o estructura física de un fichero HTML. Mozilla lo define como: “Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. “.
¿Cómo funciona Media Query y cómo me ayuda a convertir mi viejo website a “responsive”?
Media query posee dos formas de implementación:
1) Por medio de declaración de atributo en una referencia de enlace o inclusion de un archivo .css
<!– CSS media query on a link element –>
<link rel=”stylesheet” media=”(max-width: 800px)” href=”example.css” />
2) Por medio de declaración dentro del propio .css ya sea inline o por inclusión:
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
Estas dos formas de implementación nos permiten interarctuar y asignar referencas de estilo según las dimensiones de la pantalla del dispositivo que despliega la página o incluso según la orientación del dispositivo (vertical u horizonal). Además de estos atributos, otros ya existentes son perminitor emplear una referencia de estilo si la salida es una pantalla (screen) o si la salida es una impresora (print).
Retomando nuestro objetivo, hacer el website responsive, podemos identificar la resolucion mayor y menor en que queremos ajustar nuestro contenido según la pantalla del dispositivo de sálida, es decir, la resolución.
Condicionando la vista, podemos generar dos o más estructuras de contenido según se desee basado en los dispositivos que queremos impactar. Por ejemplo, si queremos tener dos estructuras: una para computadoras de escritorio y portátiles, otra para teléfonos celulares o dispositivos menores, lo hacemos de esta forma:
Primero, generamos nuestro CSS declarado normalmente:
body .content {
font-size: 14px;
width: 720px;
height: 1024px;
text-align:center;
border: 1px solid red;
}
Esta referencia de estilo está declarada para un elmento con la clase (class) con el valor content:
<html>
<head>
<style>
body .content {
font-size: 14px;
width: 720px;
height: 1024px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">Hola Mundo!</div>
</body>
</html>
Luego podemos definir referencias particulares para otros dispositivos al mismo elemento del DOM; pero esta vez indicando el media query para la referencia:
@media only screen and (max-width: 480px) {
body .content {
font-size: 14px;
width: 100%;
min-height: 480px;
border: 1px solid red;
}
}
Nuestro nuevo código se vería así:
<html>
<head>
<style>
body .content {
font-size: 14px;
width: 720px;
height: 1024px;
border: 1px solid red;
}
@media only screen and (max-width: 480px) {
body .content {
font-size: 14px;
width: 100%;
min-height: 480px;
border: 1px solid red;
}
}
</style>
</head>
<body>
<div class="content">Hola Mundo!</div>
</body>
</html>
De esta forma obtendremos dos formatos distintos para un mismo elemento de nuestra página web lo que nos permite, rápidamente adaptar el contenido para diferentes dispositivos.
Como hemos visto con solo agregar la linea de @media only… { } podemos modificar todo nuestro website existente y adaptarlo a una estructura flexible o “responsive” de forma rápida. Podemos hacerlo creando un fichero independiente .css (“best practice”) o de manera lineal <style></style> según la estructura existente.
Si quieres conocer más sobre media query te recomiendo la red de desarrolladores mozilla o simplemente buscar en la red sobre el tema.
One Reply to “¿Cómo convertir tu viejo website a responsive o mobile-friendly?”
Comments are closed.