CONSTRUCCIÓN DE PÁGINAS WEB
© Santiago Martín de Jesús
CREACIÓN DE PÁGINAS WEB CON EL
LENGUAJE DE MARCAS
Diseño Responsive
Diseño responsive
Responsive Web Design es la técnica que nos permite crear sitios
adaptables a las condiciones del ordenador o dispositivo desde donde se
van a acceder, sobre todo en lo que tiene relación con la pantalla del
sistema donde se están visualizando. Aunque el término es
suficientemente general como para poder referirse a una adaptabilidad en
torno a cualquier condición.
Antes de pensar en la web, podemos entender el término "responsive" en
general. Es la característica de un sistema que tiene respuesta hacia el
medio que le rodea. No es algo específico de la web, sino que lo
encontramos en el día a día. Por ejemplo, una luz que se enciende cuando
alguna persona pasa al lado, una puerta que se abre cuando nos situamos
cerca para entrar o un semáforo que se pone en rojo cuando pasa un
coche a velocidad mayor de la permitida. Todo ello son sistemas
"responsive", que tienen una respuesta conforme al medio o las
condiciones donde se encuentran.
3
Diseño responsive
Marco actual donde surge el Responsive Web Design
Tenemos que pensar en las condiciones actuales de la Web. Antes existían solo
ordenadores donde se consumían los contenidos y sin embargo hoy podemos
consultar Internet en cualquier tipo de dispositivo. Móviles, tablets, televisores,
libros electrónicos, relojes e incluso neveras permiten acceder a la Web y sus
servicios. Son múltiples medios con distintas características y los diseñadores web
deben preocuparse porque los sitios se vean bien en cualquiera de ellos.
4
Diseño responsive
¿Versión para móviles?
Tradicionalmente en la web los sitios estaban optimizados para ordenadores de escritorio.
Luego, al popularizarse el acceso a Internet en móviles, o al introducirse el mercado de los
tablets, lo habitual era la existencia de diversas versiones de un mismo sitio, creadas y
optimizadas específicamente para teléfonos, tabletas y ordenadores personales.
Aún seguimos viendo esa solución en la Internet de hoy e importantes sitios mantienen
versiones distintas para su web. Esa forma de trabajar era mayoritaria hasta el año 2010
aproximadamente, sin embargo, no es práctica. Nos obligaba a diseñar una web varias veces y
mantener layouts para diversos tipos de dispositivos. El trabajo por tanto se duplicaba o
triplicaba y no solo el de creación del sitio, sino lo que es peor, el de mantenimiento. Si el
dueño de una web decidía crear una nueva sección, o reformular una existente, estaba
obligado a actualizar las webs de cada uno de los sistemas para los que había creado
versiones distintas.
Pero el problema se agravó con la llegada de la Internet en la televisión, en el coche, etc.
¿Qué nos toca? ¿hacer una versión web para cada uno de los dispositivos nuevos que vayan
apareciendo? El camino no va por ahí.
Para atender a las necesidades actuales y futuras, necesitamos crear sitios web que sean
adaptables a cualquier medio donde queramos consumirlas, presentes y futuros. Tener una
única web es la mejor situación y justamente la mejor ventaja que nos ofrece el "responsive".
5
Diseño responsive
Tecnología que surge para cubrir las necesidades de adaptabilidad
En resumen, CSS3 vino para solucionar algunas de las necesidades actuales, por
medio de nuevos atributos y construcciones capaces de responder al entorno
donde se encuentran. Nos referimos sobre todo a las Media Queries o a atributos
tan simples como max-width o min-width (aunque estos últimos pertenencen a
CSS 2.1). Gracias a estas utilidades somos capaces de reaccionar ante distintas
circunstancias como la anchura de la pantalla, ventana o contenedor donde están
aquellos elementos a maquetar.
6
Diseño responsive
Consejos para que el diseño web adaptable sea más fácil de producir
No uses estilos in-line:
Los estilos inline son aquellos que se colocan en el propio HTML, sobre todo en el
atributo style de la etiqueta. También por supuesto es inadecuado usar cualquier
atributo HTML que sirva para aplicar un formato, como align="center". Esos estilos
inline van a ser un corsé que quizás no se adapte a todas las circunstancias. Igual
un texto que aparece centrado en cierta resolución y queda bien, resulta horrible
en una resolución diferente y si tu etiqueta tiene marcado ese estilo inline no lo
podrás cambiar cuando lo necesites, en tus media queries.
La web no necesariamente se debe ver igual en todos los dispositivos y
navegadores:
El responsive es justamente eso, adaptarse al medio, pero lo que quiero decir
ahora es que una web no necesita verse igual en todos los clientes web. Debe
poder leerse bien en todos y permitir a los usuarios consumir su contenido, pero
no debemos empeñarnos en que se vea igual en Internet Explorer 8 que en Google
Chrome. Entendamos que son navegadores diferentes y por tanto la web es normal
que se vea diferente. No tratemos de marear la perdiz para conseguir un sin-
sentido.
7
Diseño responsive
Consejos para que el diseño web adaptable sea más fácil de producir
¿Ya te hemos dicho que no uses tablas para maquetar?
Creo que a día de hoy ya no es necesario, o no debería serlo, incidir en este tema.
Pero por si las moscas, no cuesta nada volver a mencionarlo. No se debe maquetar
con tablas. En vez de eso, usa contenedores como DIV, o si encajan todavía es
mejor usar los semánticos como ARTICLE, SECTION, MAIN, etc. Es verdad que las
tablas son muy cómodas para crear una estructura de columnas donde colocar
contenido, pero no son nada flexibles para un diseño responsive. Todo lo que
tengas en tablas lo vas a tener que cambiar tarde o temprano por otros tipos de
contenedores, para luego mediante CSS definir la estructura de columnas, una o
varias, según las dimensiones de la pantalla o el navegador. Así que conviene que
cuanto antes te acostumbres a desechar las tablas, si es que todavía las usas. Esto
no quiere decir que nunca más vas a poder usar la etiqueta TABLE, ni mucho
menos. TABLE es ideal para mostrar información tabulada, por ejemplo un listado
de registros, una tabla de características de producto, donde sabes seguro que
siempre se van a visualizar los contenidos tabulados. En ese caso, hasta TABLE
tiene un correcto valor semántico.
8
Diseño responsive
Problemática sobre el diseño adaptable. Responsive Web Design es algo
más que tamaños de pantalla, hay que adaptarse en muchos otros
sentidos a las características de la navegación en escritorio y dispositivos.
No se trata simplemente de servir una buena experiencia web a tus usuarios.
Abandono de páginas web
Los estudios demuestran que el 57% de los usuarios abandonarán tu página si tarda más de
tres segundos en cargar.
Google, velocidad y SEO
Desde la primavera de 2010 Google toma la velocidad de carga como un factor en su ranking.
El impacto no es tremendo para sitios que tarden más o menos en cargar, pero si la página
asciende de cierto umbral, será castigada por su algoritmo de búsqueda.
Todo esto prueba que la velocidad no es sólamente un asunto de interés cuando hablamos de
experiencia de usuario. Cuida la velocidad si quieres que tu página quede bien parada entre la
maraña de sitios de hoy en día.
9
Diseño responsive
Ancho de banda
Tiempo atrás, la gente solía hablar del abstracto concepto de 'Contexto Móvil'. La famosa
teoría de Google divide a los usuarios en tres grupos:
– Repetitivo: Gente que usa su teléfono para estar al loro de cambios reiterativos
(resultados deportivos, Facebook, bolsa…)
– Aburrido: Usuarios que sacan el teléfono durante todo tipo de tiempos de espera
(colas en el supermercado, aviones…)
– Urgente: Este es obvio, ¿no?
Bueno, la cuestión es que el famoso 'Contexto Móvil' no existe. La gente no sólo utiliza su
teléfono mientras anda por la calle, viaja en tren o descansa en su casa. ¡Hacen todo al mismo
tiempo!
Los móviles están con la gente en todos lados, así que la gente los utiliza en cualquier parte.
10
Diseño responsive
¿Dónde utiliza la gente su teléfono móvil?
– El 84% en casa
– El 80% aleatoriamente durante el día
– El 76% haciendo cola
– El 69% de compras
– El 64% en el trabajo
– El 62% mientras ven la tele (otro estudio dice que el 84%)
– El 47% de camino al trabajo
Mientras sigan generándose nuevas situaciones, nuevos mercados y nuevos hábitos, el
contexto móvil cambiará. Podemos asumir tranquilamente que el concepto de 'Contexto
móvil' será siempre cambiante, hasta que la gente deje de usar su teléfono.
Esto nos lleva inevitablemente a mirar de reojo al ancho de banda. Hay un solo escenario en
que puedes irte de rositas sirviéndole a tus usuarios una página obesa: si la sirves a sus
MacBook Pro, mientras están en su casa de Inglaterra o EE.UU. con un tremendo ancho de
banda.
El resto de posibles situaciones, que no son pocas, tienen que ser cubiertas también. Incluido
el interminable torrente de nuevos dispositivos que inunda el mercado en nuestros días. La
gente los utiliza para visitar tus páginas.
Hablando en plata, el diseño Responsive no trata ya de tamaños de pantalla, sino de
diferentes situaciones y escenarios. Las soluciones han de ser flexibles, adaptables y muy
bien pensadas.
11
Diseño responsive
Cuando diseñamos una web debemos fijarnos en tres cosas fundamentales:
– diseño para todos los navegadores y sistemas,
– todas las resoluciones de pantalla y
– todas las velocidades de conexión.
El diseño web necesita adaptarse a todas las condiciones donde puede ser consumido. No
estamos hablando solamente de las pantallas, también del navegador o del sistema operativo
del ordenador o dispositivo. Pero también el contenido debe ser pensado de manera que no
se ofrezca información innecesaria que no agrega valor en la estrategia de comunicación. El
contenido es el rey, pero también tiene peso, y no solo eso: mucho contenido puede
despistar de lo realmente importante. En el caso de un comercio electrónico puede acabar
provocando que el usuario se sature con muchas opciones ello derive en la pérdida de una
venta.
12
Pasos para diseñar un sitio responsive
1. Crear un HTML con el contenido que deseamos mostrar
En cualquiera de los caminos debemos partir de un mismo HTML. Como sabes, el
contenido se escribe con HTML y debe ser común para todos los tipos de dispositivos e
incluso para los ordenadores con pantallas enormes. El lenguaje CSS es el que nos
permite aplicar un formato adecuado para la presentación de ese contenido y allí es
donde podremos aplicar nuestras reglas, que permitirán que el diseño se adapte a cada
tipo de sistema donde deba ser consumido el contenido.
2. Aplicar CSS
Hacer el HTML es la parte menos divertida. Con el CSS comenzará la fiesta y podrás
empezar a disfrutar la mejor parte del diseño web. Como sabes, el CSS sirve para aplicar
un formato a la página, tanto en lo que respecta a la posición de los elementos como al
estilo o aspecto que deben tener. En este punto debes comenzar a aplicar los estilos
necesarios a la página, poco a poco, para que comience a verse como tú querías.
Cada navegador entiende un conjunto de reglas de estilos y aquellas que no soporta, por
desconocerlas, simplemente las ignora. Ahí es donde comienza la parte más compleja
del diseño web y donde podremos aplicar principalmente dos flujos de trabajo
diferentes. Pero antes de explicarlos queremos analizar los dos tipos de circunstancias en
las que debemos encontrar soluciones.
13
Pasos para diseñar un sitio responsive
A. Recursos de diseño estéticos
Son aquellos estilos que se agregan para mejorar la estética de un sitio, como fuentes tipográficas
especiales, cajas con esquinas redondeadas, sombras en textos o cajas, etc. Este tipo de elementos
no requieren una especial adaptabilidad. Son menos preocupantes, porque no van a afectar a la
accesibilidad de un contenido. Son interesantes para que un sitio se vea especialmente bonito, pero
si un navegador no puede renderizar ese tipo de estilos no representará un problema de gravedad.
Por ejemplo, si Internet Explorer 8 no es capaz de mostrar un borde redondeado, no va a pasar
absolutamente nada, puesto que los usuarios serán capaces de ver las cajas, aunque tengan esquinas
con ángulos rectos.
B. Diseño de layout
Son aquellos estilos que se encargan de presentar la información con una estructura definida, por
columnas, cabecera, pie, etc. El layout, al que nos referimos también como plantilla, nos permite
jerarquizar la información y desplegarla de manera que el usuario la pueda entender mejor, pueda
apreciar la importancia de cada cosa y centrarse en lo que nosotros preferimos que se aprecie más.
Por ejemplo, si una web tiene una barra lateral donde hay banners y otras cosas con menor
importancia (lo que conocemos como "aside") en todos los sistemas deberíamos poder remarcar la
menor importancia de ese contenido. Si un navegador no es capaz de situar esa barra lateral en su
lugar, por lo menos debemos centrarnos en que no aparezca antes que otras informaciones más
importantes. O incluso más importante sería que, si un navegador no consigue respetar el diseño de
layout, que por lo menos no aparezcan unos elementos encima de otros, dificultando la lectura del
contenido.
14
CSS Media Queries
CSS Las Media Queries, incorporadas en CSS3, son las primeras construcciones del lenguaje
CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas
situaciones.
Las Media Queries son, en una traducción rápida, consultas de las características del medio
donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo se
aplicarán en caso que esa consulta del medio sea satisfactoria.
Son una de las herramientas fundamentales para implementar el "Responsive Web Design" y
han llegado de la mano del CSS3, convirtiéndose en un aliado fundamental de cualquier
diseñador web.
En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para
distintos tamaños de la pantalla. Son sencillas de entender y aplicar, aunque el estándar es
bastante sofisticado, con diversas posibilidades. Existen muchos usos, algunos no tan
habituales en el mundo del diseño actual, pero que podrán tener su protagonismo en algún
momento.
15
CSS Media Queries
Paso al frente del CSS.
Las Media Queries representan una evolución importante de CSS, puesto que suponen la
primera estructura condicional en el lenguaje. Sabemos que CSS no es un lenguaje de
programación, ni tiene motivos para parecerse, pero existen muchas cosas que se
implementan en los lenguajes de programación y que nos vendrían bien en el desarrollo con
CSS, como es el caso de los condicionales.
"Si ocurre ésto, entonces haz tal cosa”
Una construcción condicional como ésta es tan útil y básica que, aunque CSS no sea un
lenguaje de programación, necesita incorporarlas. Ejemplos de casos en los que nos vendría
bien un condicional:
– - Si la pantalla del usuario tiene estas características, entonces aplica estos estilos
– - Si se imprime el documento en la impresora, aplica estos estilos.
– - Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición
horizontal (landscape), entonces aplica este CSS.
Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las Media
Queries. Son un paso al frente en cuanto a la separación entre el contenido y su
representación, puesto que nos facilitan que el contenido de una página pueda adaptarse al
medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener que
tocar el HTML para nada.
16
Implementar Media Queries
El método que vamos a ver consiste en incorporar los estilos en una construcción @media
donde se apliquen entre llaves todos los estilos que queremos para una consulta de medio
dada. Es el que se usa habitualmente a nivel profesional.
@media (min-width: 500px) { Como puedes ver, tenemos la sentencia
h1{ @media en la que podemos indicar
margin: 1%; entre paréntesis las condiciones que
} deben cumplirse para que se aplique
.estiloresponsive{ esta media query. En este caso será
float: right; para pantallas que tengan una anchura
padding-left: 15px; mínima de 500 píxeles.
}
}
Y entre llaves colocamos todas las reglas y atributos de estilos CSS para aplicar en esta
situación. Las reglas de estilos son las mismas que pondrías fuera de la estructura condicional.
Cuando la sentencia entre paréntesis se evalúe como verdadera, se aplicarán todas ellas.
También es posible aplicar las Media Queries es a través del atributo media de la etiqueta LINK. Esta
etiqueta es la que se usa para enlazar una hoja de estilo con un documento HTML. En ese enlace podemos
especificar condicionales que deben cumplirse para que los estilos enlazados se apliquen. Por ejemplo,
aplicará un estilo para pantallas con un ancho mínimo de 1200 px.
<link rel="stylesheet" href="estilo-pantallas-grandes.css" media="(min-width:1200px)”>
Este modo de uso ralentiza la carga de la página en relación a hacer una única solicitud de un archivo CSS
17 que contenga todo el código de los estilos, por lo que está desaconsejado.
Operadores lógicos para las Media Queries
Para combinar diversas condiciones podemos usar los operadores lógicos, de una manera
similar a como se usan en lenguajes de programación. Los que tenemos disponibles son:
• Operador and: las dos condiciones deben cumplirse para que se evalúe como verdadera.
• Operador not: es una negación de una condición. Cuando esa condición no se cumpla se
aplicarán las media queries.
• Operador only: se aplican las reglas solo en el caso que se cumpla cierta circunstancia.
• Operador or: no existe como tal, pero puedes poner varias condiciones separadas por
comas y cuando se cumpla cualquiera de ellas, se aplicarán los estilos de las media
queries.
@media (max-width: 600px) and (orientation: landscape) {
h1{
color: red;
}
}
Esta regla se aplicaría para pantallas con una anchura máxima de 600 píxeles y cuando la
orientación está en horizontal.
18
Viewport
Ten en cuenta que la mayoría de smartphones simulan tamaños de pantalla mayores,
haciendo una especie de dimensiones virtuales que faciliten la lectura de webs que no están
diseñadas para Responsive Web Design. Por ello, lo más seguro es que tengas que poner el
"viewport" en el documento HTML algo como:
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
Sin ese viewport tu móvil simularía que tiene unas dimensiones de unos 980 píxeles,
cuando quizás la pantalla solo tenga una anchura real de 320 o 500 píxeles.
19
Medidas relativas al viewport
Vamos a ver cada una de las nuevas unidades de medida que tienen relación con el viewport
del navegador.
vw: viewport width
Esta unidad de medida funciona como porcentaje del ancho total del viewport. Por lo que si
queremos que cierto elemento mida, a lo ancho, lo mismo que el viewport, deberíamos
indicarle: width: 100vw;
vh: viewport height
Similar a la unidad vw, la unidad de medida vh se refiere al porcentaje del alto total del
viewport. Es una medida muy utilizada en sitios que tienen “pisos” de diseño, de forma tal
que cada uno de estos “pisos” del HTML midan lo mismo que el alto de la ventana.
vmin: viewport min
En este caso también se trata del porcentaje de la medida actual del viewport, pero se calcula
con respecto al lado más corto. Es decir que si el ancho del viewport es más corto que el alto,
entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es más
corto que el ancho, entonces vmin será lo mismo que vh.
vmax: viewport max
Justo a la inversa de vmin: se trata del porcentaje de la medida actual del viewport, pero se
calcula con respecto al lado más largo. Es decir que si el ancho del viewport es más largo que
el alto, entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es
20 más largo que el ancho, entonces vmin será lo mismo que vh.
Funciones Multimedia para Media Queries
La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para
expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los
símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si se usa una función
multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente
de cero.
color
Valor: <color>
Medio: media/visual
Acepta prefijos min/max: si
Indica el numero de bits por componente de color del dispositivo de salida. Si el
dispositivo no soporta colores, este valor es 0.
Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:
@media all and (color) { ... }
Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:
@media all and (min-color: 4) { ... }
21
Funciones Multimedia para Media Queries
color-index
Valor: <integer>
Medio: media/visual
Acepta prefijos min/max: si
Indica el numero de entradas en la tabla de colores para el dispositivo de salida.
Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de
color, puedes hacer esto:
@media all and (color-index) { ... }
Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:
@media all and (min-color-index: 256) { ... }
22
Funciones Multimedia para Media Queries
device-aspect-ratio
Valor: <ratio>
Medio: media/visual, media/tactile
Acepta prefijos min/max: si
Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de
dos enteros positivos separados por una barra ("/"). Este representa la proporción
de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales
(segundo termino).
Lo siguiente selecciona una hoja de estilo especial para ser aplicada en pantallas widescreen.
Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.
@media screen and (device-aspect-ratio: 16/9), screen
and (device-aspect-ratio: 16/10) { ... }
23
Funciones Multimedia para Media Queries
device-height device-width
Valor: <length> Valor: <length>
Medio: media/visual, media/tactile Medio: media/visual, media/tactile
Acepta prefijos min/max: si Acepta prefijos min/max: si
Describe la altura del dispositivo de Describe la anchura del dispositivo de
salida (ya sea la totalidad de la salida (ya sea la totalidad de la
pantalla o página y no el área del pantalla o página y no el área del
documento a renderizar). documento a renderizar).
Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de al
menos 800px de ancho, usted puede usar esto:
@media screen and (max-device-width: 799px) { ... }
24
Funciones Multimedia para Media Queries
height width
Valor: <length> Valor: <length>
Medio: media/visual, media/tactile Medio: media/visual, media/tactile
Acepta prefijos min/max: si Acepta prefijos min/max: si
La función height describe la altura La función width describe el ancho de la
de la superficie a renderizar en el superficie a renderizar en el dispositivo
dispositivo de salida (como la altura de salida (como el ancho de una ventana
de una ventana o la bandeja de papel de un documento o el ancho de la
en una impresora). bandeja de papel en una impresora).
Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un
ancho de al menos 20em, usted puede usar esta query:
@media handheld and (min-width: 20em), screen and (min-
width: 20em) { ... }
Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho
mayor a 8.5 pulgadas:
@media print and (min-width: 8.5in) { ... }
25
Funciones Multimedia para Media Queries
orientation
Valor: <landscape | portrait>
Medio: media/visual
Acepta prefijos min/max: si
Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es
mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).
Para aplicar una hoja de estilo solo en orientación vertical (portrait):
@media all and (orientation: portrait) { ... }
26
Funciones Multimedia para Media Queries
resolution
Valor: <resolution>
Medio: bitmap
Acepta prefijos min/max: si
Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución
puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros
(dpcm).
Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:
@media print and (min-resolution: 300dpi) { ... }
27
Ejemplos básicos de diseños responsive
0 .- Texto adaptable 1
0 .- Texto adaptable 2
1 .- Estructura responsive básica sin menú
2 .- Estilo 2 columnas
3 .- Menú responsive
4 .- Estructura responsive básica con menú
5 .- Web responsive con varios apartados
28
