Responsive

Página 1 de 18

Asignatura: Taller de Herramientas Web2
Profesor contenidista: Lic. Ignacio Tassi

Unidad 2. Responsive web design

1.1 Qué es el responsive web design?
1.2 Elementos del RWD
1.3 Comenzando mi responsive web design
1.4 Media Queries

Introducción
EL RWD tiene como idea fundamental impulsar el concepto de "One Web" el cual hace referencia a la idea de
construir unaWeb para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).
Hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no
sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.
Entoces la pregunta es, ¿tus páginas web son navegables en una tablet odispositivo móvil?

Desarrollo de contenidos
1.1 Que es el RWD?
El diseño web adaptable o Responsive Web Design que son una serie de prácticas aplicadas al diseño web que
le permiten al usuario acceder a un sitio web desde diferentes medios como dispositivos mobiles, tablets,
pantallas wide y diferentes resoluciones en los computadores, esto partiendo de la base que todo diseño web
debe estarcentrado en la experiencia del usuario al momento de acceder a un sitio web.
Un aspecto muy interesante de esta nueva
tecnología es que no solamente cambia el diseño
cuando cambia el ancho del dispositivo, sino que
también se ajusta el tamaño de las imágenes.
Algunos de los Beneficios del Responsive Web
Design


Reducción de costos. Se reducen los costos
ya que hasta hoy se debe hacer unportal

Página 2 de 18

para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y
mantenimiento de la información.


Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las
plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la
actualización dos veces lo que crea lanecesidad de mayor cantidad de recursos y posibilidad de error.



Mejora el SEO. El trabajo SEO (Posicionamiento en buscadores) puede ser costoso y lleva mucho
tiempo, entonces porqué debería repetir ese trabajo para un sitio móvil? Cuando usted elige un sitio
web adaptable en lugar de un sitio web específico para móviles por separado, todo el trabajo realizado
en cuanto a SEO y redes socialesse mantendrá por completo ya que se trata exactamente del mismo
sitio. Este criterio Google lo toma como una buena práctica.
El trabajo SEO será mantenido, incluyendo los textos de enlaces, la estructura de enlaces interna, tags
de títulos, meta descripciones, palabras clave, contenidos y URLs amigables a los buscadores..



Impacto en el visitante. Esta tecnología por ser nueva generaimpacto en las personas que la vean en
acción, lo que permitirá asociar a la marca con creatividad e innovación.

El viewport debe ser controlado, por medio de su metatag. Para responsive: device-width. Podemos evitar el zoom del dispositivo por medio de userscalable.

1.2 Como comenzar:
El Viewport:
El viewport debe ser controlado, por medio de su metatag. (Entre las etiquetas )
Pararesponsive: device-width. Podemos evitar el zoom del dispositivo por medio de user-scalable.


Esta es la configuración de la etiqueta viewport más usada para responsive design, pero no es la única que
podemos usar. Debemos entender las dos variables que aquí aparecen para que el movil se adapte a nosotros
y no al revés.
width:
El ancho que forzamos al móvil a adoptar con la web. Normalmente seindica como "device-width" para que
se muestre la resolución real del dispositivo pero dependiendo del diseño que finalmente hayamos creado
en la web es posible que queramos especificar un tamaño fijo que coincida con la resolución que hemos
preparado nosotros para la versión móvil de nuestra web.
En webs que no llegan a ser del todo adaptables (o que no lo son en absoluto) resulta muy útil,...