El responsive design o diseño adaptativo es el que procura adaptar el contenido de una página web a todos los formatos posibles. Ordenador de sobremesa, portátil, tablet o móvil.
Hay que tener en cuenta la pantalla (con sus respectivas proporciones) y la orientación (horizontal o vertical). Para ello, uso emuladores de dispositivos y visualizo la web en varios formatos.
También pido a mis amigos y familia que visualicen la página es sus dispositivos por si hay algo “raro”.
Es importante evitar el duplicado de contenido (no debes poner la misma imagen tres veces, para ordenador, tablet o teléfono). Para ello, se usan los Media Queries de CSS. ¿Te resultan familiares?
Una Media Query es una regla que se introduce en una hoja de estilo CSS para definir propiedades para ciertos objetos según el dispositivo.
Imagínate que tienes una imagen que es de 300×300 en un ordenador de sobremesa. Con una media query puedes indicarle que en pantallas de menos de 800px de ancho, la imagen sea de 200×200.
Sería algo así:
@media only screen and (max-width: 800px) {
#imagen1 {
max-size: 200px;
}
}
Si no entiendes nada y te interesa saber más, puedes encontrar muchísima información en www.w3schools.com. Para mi es una las páginas de referencia que más uso. Es super clara y te permite practicar con ejemplos.
El responsive design es un trabajo muy laborioso pero, cuando terminas, la satisfacción es infinita. Aunque si eres perfeccionista como yo, siempre hay algo que mejorar.
Si tu página aún no es responsive y necesitas ayuda, ¡escríbeme y empecemos!
