El diseño web responsivo permite que las páginas web se adapten automáticamente al dispositivo desde el que se accede, ya sea ordenador, teléfono o tableta. Utiliza técnicas como media queries de CSS para reorganizar los elementos cuando cambia el ancho de la pantalla. Esto garantiza una experiencia de usuario óptima en todos los dispositivos y evita tener que crear versiones separadas de la página para cada uno.
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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.
8. 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
9. 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.
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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
