T10: CSS3 - Web Responsive

El diseño web responsive permite que una página web se vea bien en todos los dispositivos, ya sean smartphones, tablets o portàtiles, empleando para ello únicamente código HTML y CSS sin necesidad de usar JavaScript. El diseño web responsive actual se basa en los siguientes aspectos claves:

• Mobile First: El diseño de la web debe realizarse en primera instancia teniendo en cuenta su renderizado sobre los dispositivos móviles. Tras maquetar la web para su correcta visualización sobre smartphones, se diseñará el método de escalado y organización para el resto de dispositivos: tablets, portátiles y ordenadores de sobremesa.

• Adecuación del contenido: Nunca se debe eliminar contenido, pero éste debe adecuarse a la pantalla del dispositivo (de ahí la importancia del paradigma Mobile First).

• Interfaz adaptativo: Una web no se maneja igual con un interfaz táctil que con un interfaz basado en el uso del ratón, por ello el interfaz de usuario deberá adaptarse al tipo de sistema de entrada usado por el usuario.

• SEO: Un buen diseño web responsive mejora el posicionamiento web, ya que los principales buscadores consideran en primer lugar la versión móvil del sitio web, permitiendo ganar posiciones si la versión mobile está debidamente optimizada.

En resumen, hablamos de diseño web responsive cuando se utiliza HTML y CSS para cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido con la finalidad de que se vea bien en cualquier pantalla.

Veamos un ejemplo que en los siguientes apartados aprenderemos a construir:

Diseño Web Responsivecdpn.io