QUE ES EL DISEÑO WEB

RESPONSIVO

El diseño web responsivo tiene su origen en la etapa

en la que comenzó a entrar en auge la navegación

web a través de dispositivos móviles.

Las pantallas de los móviles y smartphones son

mucho más pequeñas que las de un ordenador, por lo

que la correcta visualización de las páginas web en

estos dispositivos se hace más dificultosa.

ZEROZERO

Cada vez es mayor el número de smartphones y la

penetración de estos entre la población mundial.

El uso de estos dispositivos está favoreciendo el

aumento de la navegación móvil

ZEROZERO

Se espera que la navegación a través de dispositivos

móviles supere a la navegación a través de

ordenadores de aquí a 5 años.

Incluso las videoconsolas tienen sus propios

navegadores web.

Además, la llegada de dispositivos como los wearables

o los coches conectados también implicará que las

webs deban mostrarse correctamente en sus

navegadores.

ZEROZERO

Al diseño web responsivo también se le llama diseño

web adaptable o adaptativo.

Su objetivo es adaptar la apariencia del contenido de

las páginas web al navegador del dispositivo desde el

que se accede a estas, ya sea un ordenador, móvil o

tablet.

ZEROZERO

La navegación actual de los usuarios es

multidispositivo y multipantalla, por lo que es

necesario que una página web se adapte lo más

posible a los diferentes tamaños de estas pantallas y

las distintas características de los navegadores.

ZEROZERO

ZEROZERO

El diseño web adaptativo consiste entonces en

redimensionar todos los elementos de una web y

disponerlos de forma que se adapten al ancho del

navegador de cada dispositivo.

El fin que es que esta adaptación al ancho permita la

visualización de los contenidos de forma correcta.

Cada dispositivo tiene distintas características en

función de su pantalla, procesador, capacidad de

memoria, etc.

Fue en 2008 cuando se ideó este tipo de diseño web,

como una recomendación bajo el concepto de

construir una misma web para todos.

ZEROZERO

ZEROZERO

Una de las principales características es que los

contenidos, el layout con texto e imágenes, es fluido.

Para esta fluidez y esta adaptación al ancho de la

pantalla, se programa y se escribe este tipo de

contenidos en código media-queries CSS3 y HTML5.

Las media queries son una conjunto de

órdenes incluidas dentro de las hojas de

estilos de una página web que se encargan de

ordenar al fichero HTML cómo debe mostrarse

para cada tipo de pantalla y sus respectivas

resoluciones.

ZEROZERO

Una ventaja del diseño responsivo es que es

capaz de reducir el proceso de desarrollo de

una web, evitando la duplicidad de contenidos

que existiría en el caso de crear una web

distinta par cada dispositivo.

ZEROZERO

ZEROZERO

Una ventaja del diseño responsivo es que es

capaz de reducir el proceso de desarrollo de

una web, evitando la duplicidad de contenidos

que existiría en el caso de crear una web

distinta para cada dispositivo como sucedía

con las web de tipo .mobi

Además, el diseño adaptativo web favorece la

viralidad de contenidos al no crear duplicidades.

De esta forma, el compartirlos estos se vuelve

una tarea mucho más sencilla, a la vez que

rápida, eficaz y natural.

ZEROZERO

El diseño responsivo busca servir a todos los usuarios que acceden a una misma página web los mismos contenidos y una usabilidad lo más parecida posible

Esto marca la diferencia con las apps móviles, s cambios de dominio o las webs que se sirven de forma dinámica.

ZEROZERO

A la hora de diseñar tu web responsive, debes tener en

cuenta:

1. La carga de contenidos en la página, que debe ser

igual para todos los dispositivos, pero evitando

gastar excesivos recursos para la navegación móvil.

2. Diseña una plantilla o patrón basado en la pantalla

móvil para asegurar la buena visualización de los

contenidos

3. No cargues efectos o animaciones en los

contenidos, porque probablemente no sean visibles

desde un smartphone.

ZEROZERO

En definitiva, el diseño adaptativo web es la

mejor práctica actualmente que se lleva a cabo

a la hora de diseñar páginas web.

Descubre cómo aplicar las reglas del diseño

web responsivo profesional y permite que todos

los usuarios puedan acceder a tus contenidos

sin dificultades ni limitaciones.

ZEROZERO