El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.
Para aquellos que aun no entendierón lo que significa tener una web responsive , en el siguiente vídeo creo que los explica muy bien. ( vídeo de Web desarrolladores de google )
QUE NO DEBEMOS HACER A LA HORA CREAR UNA WEB
- Utilizar sytle en la etiquetas html . No es consejable tener los estilos dentro del html , para eso tenemos el CSS.
- Utilizar demasiados contenedores y clases. Reducir al máximo los contenedores será mas fácil.
- No utilizar px , utilizar %.
QUE DEBEMOS HACER SI QUEREMOS UNA WEB RESPONSIVE
- Diseñar la web de pantalla pequeñas grandes.
- Identificar los dispositivos, sistemas operativos, y resoluciones pantalla más habituales.
- Un html lo más semántico posible, para poder adaptarlo mejor.
- Fuentes con tamaños con %, definir un tamaño y luego el resto con %
CSS y HTML PARA HACER QUE SEA RESPONSIVE
Algunos cambios en nuestro código.
AÑADIR A NUESTRO HTML .
Entre la <head></head> añadir la meta-etiqueta :
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Con esta meta-etiqueta indicamos al navegador web que el valor del zoom que queremos que use. Siendo 1.0 una visualización sin Zoom y 2.0 una ampliación de toda la web al doble de su tamaño.
Hay dos tipicas configuraciones posibles de está etiqueta.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Recomenda cuando tenemos una web totalmente adaptada a moviles
<meta name="viewport" content="width=[Pixeles del min. ancho para ver bien la web]" />
Cuando no está adaptada completamente a moviles y le recomendamos una medida para ver.
CAMBIOS EN CSS PARA HACER RESPONSIVE.
Realmente la mayor parte del curre está en el css , si tenemos un html limpio y sencillo.
Lo primero que debemos tener claro es:
- Si deseamos que sea escalable o que tengamos fijo medidas entre resoluciones pantalla, o ambos.
Luego debemos crear las media queries , son sentencias que nos permite hacer declaraciones de etiquetas, clases, id ,... para las distintas pantallas.
Luego las media queries para adaptar a internet explorer, aunque personalmente yo no las utilizo, es la única forma que encontré para protestar por la mala compatibilidad que tiene este navegador.
Ejemplo @media screen
@media screen and ([CONDICION]){}
Pero para aquellos que queráis adaptar vuestra web a ese navegador existe una librería para ello, css3-mediaqueries-js, es una librería javascript que simplemente debemos añadir para Internet Explorer de versiones anteriores a la 9.
En la que bastaría con añadir al html en el <head>
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
Los 3 grupos de resoluciones básicos dentro al hacer design responsive:
- Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla.
- Pequeñas o antiguas pantallas, donde nuestra web, para el ancho marcado no cabe y nos aparece la odiosa barra inferior (que nadie usa) para terminar de ver el contenido.
- Pantallas móviles, donde el espacio es tan pequeño que la información no se lee correctamente con el diseño global.
FUENTES:
Tutorial IKhuerta : Transformar una Web a Responsive