# data[].attributes.body
Un diseño web responsive es el que es capaz de adaptarse a pantallas de diferentes tamaños con un solo sitio web. El sistema detecta automáticamente el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página, desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia posible

# data[].attributes.body
Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META

# data[].attributes.body
Para hacer un diseño responsive tienes en tu mano varias herramientas.

La primera es poder contar con una buena plantilla de WordPress, esto es vital hoy día y aunque la mayoría lo son todavía te puedes llevar alguna sorpresa.

Divi, Generatepress, Astra, Ocean, Bridge, cualquiera de ella hace una buena función responsive.

Elementor es un maquetador que permite diseñar un diseño web con un sistema sencillo de arrastrar y soltar elementos (Drag and drop) pero el punto fuerte es poder diseñar la web específicamente en versión, desktop, Tablet y mobile.

De esta manera realizas un diseño 100% responsive maquetando directamente en móvil.

# data[].attributes.body
Lighthouse es una herramienta de código abierto (open-source) que brinda una manera de analizar el desempeño de un sitio específico a cada dispositivo.

Foo usa Lighthouse detrás de escena para monitorear el desempeño de un sitio web y brindar feedback para su análisis. Se puede configurar el monitoreo para ambos escritorio y dispositivos móviles y obtener feedback continuo acerca de qué tan responsive es tu sitio web.

Por ejemplo, un reporte de Lighthouse mostrará las imágenes que son cargadas inapropiadamente basada en el dispositivo.