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