Estructura de un sitio web con Responsive Desing

La estructura básica debe comprender tres secciones:

• Cabecera: donde irá el básicamente el logo o nombre de la empresa y un menú que debe ser responsivo (adaptarse a distintos tipos de dispositivos), podemos anidar dentro un buscador de productos o servicios.
• Cuerpo: dependerá de cada sección del sitio web, por ejemplo podemos tener una sección donde se informa sobre la empresa mostrando su visión,misión y objetivos; otra donde se muestra un catálogo de productos ordenados por categorías; otra que nos muestra un formulario de contacto, etc.
• Pie de página: deben ir los enlaces a redes sociales, información de contacto, dirección, derechos, mapa, o un mapa del sitio web (así proponemos formas alternativas de navegación).

Diseño Web Responsivo

Adicionalmente se debe considerar el diseño web responsivo o RWD por sus siglas en inglés, este implica que un sitio web debe tener una "versión" para dispositivos de tamaños menores al de una pantalla de computadora como una Tablet o Smatphone. El RWD es un conjunto de herramientas y principios de diseño que permiten a un sitio web ajustarse al tipo de pantalla(resolución) donde es desplegado.

El RWD incluye dos tecnologías web que son el HTML en su versión 5 (la más actual al 2019) y CSS en su versión 3 (la más actual al 2019) y los principios que rigen el diseño web responsivo:

1. Uso de contenedores flexibles, se adaptan a los diferentes tamaños de pantallas, proveyendo una visualización de datos amigable con el usuario.
2. Imágenes y videos que se adaptan a los tamaños de los dispositivos donde se visualizan.
3. Media queries: son las estructuras "condicionales" que usa CSS para modificar los estilos de las páginas HTML según el tamaño del dispositivo donde se visualiza el sitio web.

El RWD tiene como objetivo usar el mismo código HTML para los diversos formatos del sitio web (tanto verisón de escritorio como móvil), usando el mismo código CSS que mediante los "media queries" asigna diferentes propiedades según el tamaño de la pantalla donde se visualiza.

Esta es la vista de una web en una pantalla grande.

Esta es la vista en un dispositivo móvil.