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.
