¡Cómo me gusta trabajar el responsive!

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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Información básica sobre protección de datos: Responsable: Ruth Gascón Barba. Finalidad: Gestión y publicación de los comentarios del blog. Legitimación: Consentimiento del interesado. Destinatarios: no se cederán datos a terceros, salvo obligación legal. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional. También se puede instar reclamación ante la Agencia Española de Protección de Datos.