¿Responsive Web Design?
"Responsive web design" o "diseño web de respuesta"
es un término relacionado con el concepto de desarrollo de sitios web de una
manera, que permite que la estructura sea cambiada de acuerdo a la resolución
de la pantalla del dispositivo desde el que se esté visualizando. En este
artículo nos muestran algunos ejemplos y nos ofrecen unas cuantas buenas
prácticas a tener en cuenta a la hora de desarrollar un sitio web con estas
características.
¿Como funciona Responsive Disign Web?
Luego con más calma esa misma persona consulta desde un ordenador
los contenidos o incluso desde su televisor en la comodidad de su hogar.
El usuario actual utiliza Internet desde múltiples dispositivos
con distintas resoluciones y formas de mostrar nuestros contenidos, no preparar
nuestra web o Blog a tal efecto supone perder visitas y posicionamiento en los
buscadores cuando se nos trata de localizar por dispositivos móviles.
Ejemplos de Responsive Disign Web o Sitios Adaptables.
- Bootstrap: Boostrap es un ejemplo de cómo el diseño de la columna y la navegación se pueden hacer Responsive de una manera fresca. En lugar de mostrar el menú todo el tiempo (tomando el espacio de más desplazamiento) se trata de un menú desplegable. Otra forma típica de hacer la navegación es utilizar un cuadro de selección como se ha visto anteriormente en Smashing Magazine.
- Bluegg: también es un blog de diseño Responsive, pero más sencillo que los dos anteriores. La forma en que se hace es lo que vemos en la mayoría de los diseños de respuesta hasta el momento. El diseño es el mismo pero ampliado hasta el tamaño de la pantalla que es muy pequeña (tamaño del teléfono inteligente con alrededor de 640 píxeles). A continuación, la disposición se cambia a una columna y la barra lateral etc, que se coloca por debajo de la página principal.
Estructura de Responsive Disign Web (Estructura Flexible).
Tras la introducción al Responsive Design ahora toca conocer lo
esencial para crearlos: el meta-tag Viewport, las @media queries y tener en
cuentas ciertas cosas más “clásicas”, pero que son esenciales (cosas como las
que permiten que los borradores y notas de W3C se adapten “casi” perfectamente
al ancho de pantalla).
Viewport:
Esta meta-etiqueta fue creada en principio por Apple para su móvil
predilecto, pero se ha convertido en todo un estándar que es soportado por la
mayoría de los dispositivos móviles (smartphones, tablets y gran parte de
móviles de gama media y baja).
Su uso es totalmente necesario, ya que sino el navegador establece
el ancho con el que prefiere visualizar una página en lugar de usar el ancho
del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el
navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no
usamos esta meta-etiqueta).
Este es un ejemplo de como usarla, es el que yo recomiendo, ya que
es la configuración más habitual (hay que añadirlo en el <head>):
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
Se pueden usar los siguientes parámetros (separados por comas):
Width: ancho de la página (se puede establecer en píxeles o como
device-width y usará el ancho del que dispone).
Height: alto de la página, actúa igual que el width.
Initial-scale: escala o zoom inicial de la página (este y los
demás tipos de escala se establecen con valores como 1.0 para no tener zoom o
2.5 para tener un zoom del 2,5 de aumento, por ejemplo).
Minimum-scale: zoom mínimo que podemos hacer en la página.
Maximum-scale: zoom máximo que podemos hacer en la página.
User-scalable: establece si está permitido o no hacer zoom
(yes/no).
on las prisas para ir al trabajo aprovecha su móvil para ver
vuestras actualizaciones.
Parámetros CSS básicos para el Resposnive Design:
Para lograr que se adapte nuestra web a los anchos de pantalla
debemos de poner en práctica ciertas cosas necesarias:
La primera, y la más importante es dejar de usar píxeles en todos
los sitios y usar porcentajes (por ejemplo: width:60%).
Que establezcamos el ancho de la página con el 100% no significa
que queramos que sea este en una pantalla con alta resolución y para limitar el
ancho (o alto si se terciara) debemos de usar el parámetro max-width o si
quisiésemos establecer un alto máximo max-height (y para establecer el mínimo
sería min-width y min-height, aunque no será demasiado necesario usarlo).
No usar posiciones absolutas ni fijas (menos cuando hagan falta),
para crear una barra lateral donde tendremos un menú, por ejemplo, lo mejor es
flotarlo con float:left/right, aunque esto sería lo básico puede que este
ejemplo no se ajustase a nuestras necesidades, pero es una técnica muy usada.
Un diseño sensible deja de serlo en el momento que la imagen de
fondo (de tenerla) se repita y no debiera de hacerlo, para eso debemos de
escoger una imagen mejor o saber adaptarla (siendo una imagen de fondo lo mejor
sería usar @media queries, que explicaré más abajo).
Las imágenes y vídeos hay que hacer que no sobresalgan de la
estructura, sino aparecerá un scroll lateral en los dispositivos móviles que
reventará totalmente el diseño (en la próxima parte de la guía os contaré como
hacer ambas cosas).
Lenguajes usados en Responsive Disign Web.
Responsive web design funciona utilizando una técnica basada en el
lenguaje de programación HTML y los códigos CSS y CSS3 cuyo funcionamiento son
los siguientes:
Se programa sobre HTML
o HTML5, lo que permite añadir etiquetas
del tipo <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″> ycolocarlas sobre los
encabezados y otros títulos. De esta forma, se logra que el aspecto se ajuste
automáticamente al tamaño de las pantallas de cada dispositivo.
Luego se aplican las modificaciones correspondientes en las hojas
de estilo de CSS o CSS3 y, cuando un usuario navegue, por ejemplo, en su
smartphone se cargarán automáticamente las reglas correspondientes al tamaño
reducido de la pantalla, garantizando una óptima visualización y navegación.
Una vez aclarada la duda ¿Qué es Responsive Design? nos adentramos
en cómo funciona esta forma de diseñar y desarrollar páginas web para que se
adapten a la presentación en cualquier dispositivo.
En la actualidad donde cada vez se utilizan más los dispositivos
móviles y tabletas, donde tan pronto estamos utilizando la televisión o el
ordenador para navegar por Internet, el diseño adaptable es fundamental para
llegar hasta nuestros usuarios.
Podéis comprobar las estadísticas de vuestro Blog y verificar cómo
hay cada vez un mayor porcentaje de usuarios que decide utilizar su
"tablet" para leer vuestros contenidos cómodamente desde su cama
antes de dormir o que apurado por la mañana c Ejemplos básicos de dispositivos
para Responsive Disign Web
Ventana o monitor menor de 800px
@media
screen and (max-width: 800px) {
#contenedor{
width:100%;
}
}
Con @media screen estamos iniciando la consulta media query, para
añadir condiciones debemos utilizar “and”. Es este caso estamos aplicando un
ancho del 100% a la capa #contenedor si el monitor o ventana tiene una
resolución inferior a 800px
Smartphones
@media
screen and (max-device-width : 480px) {
#sidebar{
display:none;
}
#menu{
text-align:center;
}
}
Los anteriores estilos sólo se aplicaran a si el dispositivo tiene
un ancho inferior a 480px
Ipad en posición vertical
CSS
@media
screen and (min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : landscape){
.entry, .entry-content
{
font-size:1.2em;
line-height:1.5em;
}
}
Uniendo esta tres condiciones “and
(min-device-width : 768px) and (max-device-width : 1024px)” Estamos
limitando que los estilos sólo se apliquen a dispositivos que con una
resolución de entre 768px y 1024, y con “and (orientation : landscape)”
indicamos que se apliquen cuando estén en posición vertical.
Esta media query se aplicaría a Ipad.
Resolucion y dimensiones del Responsive Web Design
No hay comentarios:
Publicar un comentario