Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Qué es el diseño web responsivo

350 views

Published on

Aprende con ZeroZero lo que es el diseño web responsivo o diseño web adaptativo, la mejor práctica a llevar a cabo a la hora de diseñar tu página web y hacerla navegable y usable para cualquier dispositivo.

Published in: Devices & Hardware
  • Be the first to comment

  • Be the first to like this

Qué es el diseño web responsivo

  1. 1. QUE ES EL DISEÑO WEB RESPONSIVO
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×