Tras la última actualización de Google en la que penaliza a los sitios que no están adaptados a dispositivos móviles, seguro que estas ya cansado de escuchar hablar del diseño responsive y de su importancia. Desde Grupo Idimad no vamos a ser menos, pues siempre ha sido seña de identidad de todos nuestros proyectos. Pero vamos a verlo desde otro punto de vista, vamos a profundizar un poco en todo esto y vamos a ver qué hay detrás. Vamos al código. Bajamos al sótano.
Nos centramos por lo tanto en la maquetación web y en los lenguajes HTML y sobre todo CSS.
Siempre tenemos que tratar que todo lo referente al estilo de la web vaya en clases CSS y no incluir estilos en las etiquetas de HTML, para que el cambio en algún punto sea lo más sencillo posible. Si tenemos todo el estilo concentrado en clases, será mucho más fácil encontrar lo que queremos modificar, y sobre todo, podemos adaptar el estilo a todos los dispositivos.
Pero vamos a ver un ejemplo para ver todo esto mucho más claro. Tenemos una clase declarada en el archivo CSS llamada “responsive2015” como vemos en la imagen. En ella, le indicamos unos parámetros como son el ancho, el color de fondo, el tamaño de la fuente y el margen superior. Cuando queramos aplicar este estilo, simplemente tendremos que incluirlo en la etiqueta HTML correspondiente. Por ejemplo en un DIV, de la siguiente manera:
<div class=”responsive2015”> CONTENIDO </div>
Y todo el contenido incluido ahí, tendrá esas características. Sencillo, ¿no?
Pero… en los dispositivos móviles, la letra se ve demasiado grande, hay demasiado margen superior y no queremos que el ancho sea del 50%. Es decir, ¿Cómo adaptamos nuestro sitio a los dispositivos móviles?
Pues la respuesta está en las media queries. Incluyendo en el archivo CSS la condición oportuna conseguimos limitar y adaptar las clases que queramos a un rango específico de dispositivos.
Siguiendo con el ejemplo anterior e incluyendo en el mismo archivo CSS la condición max-width: 970px, conseguimos que todos los dispositivos cuya resolución tenga un ancho menor de 970px tengan estas características. Y el contenido que teníamos en la etiqueta DIV del código HTML, se muestra de una manera para las resoluciones menores a 970px y las mayores a este tamaño.
Podéis ver un ejemplo real poniendo a prueba los proyectos de nuestro portafolio en diferentes dispositivos o redimensionando la pestaña de vuestro navegador y analizar cómo se comporta todo el contenido en distintas resoluciones.
