Responsive Design: por dónde empezar.

Hace algún tiempo os hablamos de las Ventajas de tener un diseño adaptativo (o responsive design). A estas alturas seguramente tengas claro que es una gran ventaja contar con este tipo de diseño y si te dedicas al mundo web, sabrás que está en boca de todos los clientes.

Aquí te vamos a hablar de algunas herramientas y recursos que te ayudarán a realizar webs con esta tecnología.

Si sabes html y css no te preocupes porque sólo tienes que ir un pasito más allá.

Una definición de responsive design sería: aquél diseño que va adaptándose a cada tamaño de pantalla en el que se muestra.

Una descripción técnica simplificada de en qué consiste el diseño adaptativo sería: se tratan de unas reglas CSS3 y una serie de condicionales Media Query.

Los Media Queries serían los encargados de detectar el tamaño de la pantalla en la que se muestra nuestra web y los css le indican qué características debe tener en una pantalla de unas medidas y en otras.

Los media queries se define en la hoja de estilos así:

@media screen and (max-width: 320px) {

Aquí van las reglas CSS necesarias

}

 

Y luego iríamos cambiando el valor de max-width según corresponda.

Os dejamos unos links a algunos tutoriales del tema:

También os dejamos un link donde ver 50 ejemplos de web adaptativas que os inspirarán: Ejemplos de responsive desing

En próximos artículos profundizaremos más en el tema.

Si quieres proponer que hablemos sobre una parte en concreto del responsive design o quieres comentar los recursos que ves imprescindibles, estaremos encantados de leerte.