MANUAL DE DISEÑO WEB ADAPTABLE
El diseño web adaptable, en inglés Responsive Web Design (RWD) es un nuevo concepto de diseño y desarrollo de páginas web cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarlas.
Actualmente las páginas web pueden visualizarse en multitud de dispositivos, como tabletas, teléfonos inteligentes, ordenadores portátiles, ordenadores de sobremesa, etc.
Además, cada tipo de dispositivo tiene características específicas de tamaño de pantalla, resolución de pantalla, potencia de CPU, capacidad de memoria, etc.
Con «responsive design» se consigue una visualización adecuada en diferentes tamaños de pantalla con un único diseño web.
RESPONSIVE DESIGN, PASO A PASO
1. CONTENIDO
El contenido (textos, imágenes, animaciones, vídeos, müsica, etc.) es, en cualquier tipo de diseño, lo más importante de un sitio-web.
No se debe diseñar un sitio web sin tener previamente elaborado el contenido ya que será el contenido el que definirá el diseño y no al contrario.
2. DISEÑE PRIMERO PARA DISPOSITIVOS MÓVILES («MOBILE FIRST»)
El diseño del sitio-web debe hacerse para que se visualice correctamente en un dispositivo móvil de pantalla pequeña y posteriormente adaptarlo para pantallas de mayor tamaño.
No debe adaptarse un diseño creado para una pantalla grande a pantallas pequeñas.
3. ETIQUETA «META VIEWPORT»
Esta etiqueta es totalmente imprescindible para la correcta visualización de cualquier página web.
Se coloca en el «head» de la página y sirve para indicar al navegador que la página se adapte a las dimensiones de la pantalla.
La configuración recomendada es la siguiente: «meta name="viewport" content="width=device-width, initial-scale=1"»
Con esta etiqueta le decimos al navegador que el ancho de la página sea igual al ancho de la pantalla.
4. USAR UNIDADES RELATIVAS TIPO REM
La unidad REM (root em) es relativa al tamaño de letra del elemento raiz (html).
Por defecto, si no se declara ningún tamaño de fuente, el navegador utiliza un tamaño de 16 píxeles (px) que equivaldrían a 1 rem.
Por tanto, si cambiamos el tamaño de fuente en el elemento «html» cambiamos el tamaño del rem.
Una vez configurado el tamaño de 1 rem podremos utilizar esta unidad para definir el tamaño de cualquier elemento de la página. Por ejemplo, con un tamaño de 1 rem equivalente a 16 px.:
#contenedor { width: 75rem; } definimos un ancho del «div» contenedor de 75 rem = 1200 px.
body { font-size: 1.4rem; } definimos un tamaño de letra del texto en todo el «body» de 1.4 rem = 22,4 px.
h1 { font-size: 2.4rem; } definimos un tamaño de letra del encabezado h1 de 2.4 rem = 38,8 px.
5. DEFINIR EL TAMAÑO DE LETRA
El texto es la parte más importante de una página web, debe estar preparado para poder leerse correctamente en cualquier tamaño de pantalla y, especialmente, en dispositivos móviles.
Con un enfoque de diseño «mobile first», empezaremos por definir el tamaño del texto. El tamaño mínimo recomendado para que el texto se lea correctamente en pantallas pequeñas es de 19 px (equivalente a 1.2 rem si hemos definido un tamaño de letra del 100%).
El tamaño de fuente se declara en el archivo CSS. Si no se declara ningún tamaño de fuente el navegador utiliza por defecto un tamaño de 16 px.
Si en el archivo CSS declaramos un tamaño de letra en el elemento raíz (html) del 100%: «html{font-size: 100%;}» estamos definiendo que 1 rem = 16 px y por lo tanto 0.9 rem = 14,4 px; 1 rem = 16 px; 1.1 rem = 17,6 px; 1.2 rem = 19,2 px; 1.3 rem = 20,8 px, etc.
Si declaramos en el CSS un tamaño de letra en el elemento raíz (html) del 62,5%: «html{font-size: 62.5%;}» estamos definiendo que 1 rem = 14 px y por lo tanto
1.5 rem= 15 px; 1.6 rem= 16 px, etc.
6. CREAR UN «CONTENEDOR RESPONSIVE»
Un «contenedor responsive» es una caja o «div» que contiene todos los elementos de la página.
Para crear un «contenedor responsive» mediante el CSS definimos el ancho de la caja contenedor en %.
Por ejemplo, con «#contenedor {margin: 0 auto; width: 90%; max-width: 60rem;}» conseguimos un «contenedor responsive» centrado en la página, que ocupe el 90% del ancho de la pantalla y que su ancho nunca sea superior a 60 rem.
7. ADAPTAR LAS IMÁGENES A LOS DIFERENTES ANCHOS Y ALTOS DE PANTALLA
Para que las imágenes se ajusten a las dimensiones del contenedor en el CSS utilizaremos la siguiente propiedad: img {max-width: 100%; height: auto;}
Estableciendo la propiedad «max-width» en el 100%, conseguimos que el ancho de la imagen sea igual al ancho de la pantalla, es decir, si es necesario la imagen se reducirá de tamaño para adaptarse a las dimensiones de la pantalla, pero nunca llegará a ser más pequeña que su tamaño original.
RESUMIENDO
Los parámetros inprescindibles para un diseño web responsable son:
En el HTML:
- Etiqueta «meta viewport» en el head del html: «meta name="viewport" content="width=device-width, initial-scale=1"»
En el CSS:
- html {font-size: 100%;}
- body {font-size: 1.2 rem;}
- img {max-width: 100%;}
- #contenedor {margin: auto; width: 98%; max-width: 60rem;}
PARA COMPROBAR SI NUESTRO DISEÑO ES ADAPTABLE
Podemos utilizar las siguientes herramientas «on line»:
- Test de Google
- Responsinator
| Manuales de Publiceuta | Publiceuta |
© Reservados todos los derechos