Está en la página 1de 2

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Diseño Web Responsivo


El diseño Web responsivo hace que su página web se ve bien en todos los dispositivos, sólo utiliza
HTML y CSS. El diseño Web responsivo no es un programa o un JavaScript.

Para la mejor experiencia del usuario


Las páginas Web pueden ser vistas usando diferentes dispositivos: computadores de escritorio,
tabletas, teléfonos y relojes. Su página web debe quedar bien y ser fácil de usar,
independientemente del dispositivo.
Las páginas Web no deben dejar de lado la información para adaptarse a dispositivos más
pequeños, sino más bien adaptar su contenido a las características de cualquier dispositivo:

Se llama diseño Web sensible o responsivo cuando se utiliza CSS y HTML para cambiar el tamaño,
ocultar, reducir, ampliar o mover el contenido para que se vea bien en cualquier pantalla.

¿Qué es la ventana gráfica?


La ventana es la zona visible del usuario de una página web. La ventana gráfica varía con el
dispositivo y será más pequeño en un teléfono móvil que en una pantalla de computador.
Antes de las tabletas y los teléfonos móviles, las páginas Web fueron diseñadas sólo para las
pantallas de computador y era común para las páginas web tener un diseño estático y un tamaño
fijo.
Entonces, cuando comenzamos a navegar por internet usando las tabletas y los teléfonos móviles,
las páginas web de tamaño fijo eran demasiado grandes para caber en la ventana gráfica. Para
solucionar este problema, los navegadores de los dispositivos de escala ajustan la página Web a la
pantalla reducida.
Esto no era perfecto, pero fue una solución rápida.
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Ajuste de la ventana gráfica


HTML5 introdujo un método para que los diseñadores Web tuvieran control sobre el área de
visualización, a través de la <meta> etiqueta.
Debe incluir los siguientes <meta> elementos de visualización en todas sus páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un <meta> elemento de visualización da las instrucciones de su navegador sobre cómo controlar


las dimensiones y la escala de la página.
La parte width=device-width establece el ancho de la página para el ancho de pantalla del
dispositivo (que variará en función del dispositivo).
La parte initial-scale=1.0 fija el nivel de zoom inicial cuando la página se carga por primera
vez por el navegador.
Este es un ejemplo de una página web sin la etiqueta meta de visualización, y la misma página
web con la etiqueta meta de visualización:

Tamaño contenido a la ventana gráfica


Los usuarios tienden a utilizar más el desplazamiento vertical en sitios web tanto en dispositivos
de escritorio como móviles (pero no tanto horizontalmente).
Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente, o alejar la imagen, para
ver toda la página web que se traduce en una experiencia pobre para el usuario..
Algunas reglas adicionales serían:

1. No utilizar grandes elementos de ancho fijo, Por ejemplo, si una imagen se visualiza en
una anchura mayor que el área de visualización. Esto puede ocasionar que la ventana
gráfica deba desplazarse horizontalmente. Recuerde que debe ajustar este contenido
para que quepa en el ancho de la ventana gráfica.
2. No deje que el contenido se base en un ancho de visualización particular, para un mejor
rendimiento, Se debe dimensionar las pantalla y las diferentes anchura en píxeles, ya que
estas varían ampliamente entre los dispositivos, el contenido no debe depender de un
ancho de visualización particular.
3. Uso de consultas de medios CSS para aplicar un estilo diferente para pantallas pequeñas y
grandes, El ajuste de grandes anchuras para elementos de la página hará que el elemento
no sea demasiado grande para la ventana gráfica en un dispositivo más pequeño. En su
lugar, considere el uso de valores de anchura relativos, como anchura: 100%. Además,
tenga cuidado de usar valores altos de posición absolutos. Se puede hacer que el
elemento caiga fuera de la ventana gráfica en dispositivos pequeños.