Qué es el diseño web responsivo
-
Upload
zerozeroestudio -
Category
Devices & Hardware
-
view
21 -
download
1
Transcript of Qué es el diseño web responsivo
![Page 1: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/1.jpg)
QUE ES EL DISEÑO WEB
RESPONSIVO
![Page 2: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/2.jpg)
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
![Page 3: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/3.jpg)
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
![Page 4: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/4.jpg)
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
![Page 5: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/5.jpg)
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
![Page 6: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/6.jpg)
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
![Page 7: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/7.jpg)
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.
![Page 8: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/8.jpg)
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
![Page 9: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/9.jpg)
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.
![Page 10: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/10.jpg)
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
![Page 11: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/11.jpg)
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
![Page 12: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/12.jpg)
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
![Page 13: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/13.jpg)
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
![Page 14: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/14.jpg)
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
![Page 15: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/15.jpg)
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
![Page 16: Qué es el diseño web responsivo](https://reader035.fdocumento.com/reader035/viewer/2022071904/55c67e73bb61eb74578b48a6/html5/thumbnails/16.jpg)
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