Professional Documents
Culture Documents
Diseño Responsive
Diseño responsive (I)
El diseño web responsive o diseño web adaptativo es una
técnica de diseño web que prioriza la correcta visualización de
una misma página en en distintos dispositivos: Desde
ordenadores de escritorio a tablets o móviles.
El diseño responsive se basa en proporcionar a todos los
usuarios de una web los mismos contenidos y una
experiencia de usuario lo más similar posible, frente a otras
aproximaciones al desarrollo web móvil como la creación de
apps, el cambio de dominio o webs servidas dinámicamente en
función del dispositivo.
Diseño responsive (II)
Aunque todas tienen pros y contras, la web responsive es
considerada por muchos expertos como la mejor práctica
posible, al unificar la web, reducir tiempos de desarrollo y
ofrecer grandes ventajas para SEO.
- Mejora la experiencia de usuario dado que la estructura de
menús y contenidos es la misma para todos dispositivos.
- Se reducen costes de desarrollo con una sola web en lugar
de desarrollar varias webs o varias APPs.
- De cara a posicionamiento tener una sola web y URL
favorece que todas las visitas se concentren sin distinguir entre
dispositivos.
Diseño responsive (III)
No existe una resolución que sea dominante en el desarrollo
web, por lo que nos deberemos de basar en las estadísticas y
los requerimientos de nuestro proyecto.
http://en.wikipedia.org/wiki/Display_resolution
http://www.w3schools.com/browsers/browsers_display.asp
Diseño responsive (IV)
Sin embargo a la hora de trabajar con responsive sí existen
unas resoluciones “límite” que establecen la forma de concebir
los diseños para los distintos tipos de dispositivos.
http://responsivetest.net/
http://mobiletest.me/
Diseño responsive (y VI)
Algunos ejemplos de diseños adaptables o de
ideas para realizar una página adaptable:
http://mediaqueri.es/
http://www.awwwards.com/
Mobile First (I)
En los primeros años del desarrollo responsive (hasta
2012) generalmente el proceso de diseño ha sido el de
“adaptación” de la versión de escritorio a móvil con la
técnica “Graceful Degradation”.
Sin embargo desde 2012 se emplea un enfoque “Mobile
First” en lo que se opera a la inversa. La experiencia de
usuario debe de ser la misma desde la version móvil.
http://www.samueldiosdado.com/10/el-concepto-de-
mobile-first/
Mobile First (y II)
Unidades en Responsive
Dado que vamos a trabajar con múltiples dispositivos, resoluciones,
etc lo más adecuado suele ser trabajar siempre que sea posible NO
con píxeles o unidades fijas, sino relativas, como em o rem.
http://www.desarrolloweb.com/articulos/unidades-medida-css-responsive.html
em: Es una unidad de medida relativa que fija el tamaño en
referencia al tamaño de tipo de letra de su contenedor.
rem: Es una unidad de medida relativa que fija su tamaño siempre en
referencia al tamaño del tipo de letra del raíz (html o body) de la
página.
Media Queries (I)
La implementación técnica del Responsive Design se
realiza por las media queries.
Se trata de un recurso añadido en CSS3 y que permite
cargar unas u otras declaraciones CSS en función de las
características del dispositivo.
Tiene soporte mayoritario de todos los navegadores web
(IE9+). En el caso de IE8 se puede añadir una librería .JS
que permite usarlas (respond.js)
Media Queries (II)
Las Media queries consisten de un @media type y una o
mas expresiones las cuales se resuelve como verdadera
o falsa. Los estilos contenidos se aplican si el
resultado de la consulta es verdadera.
Se pueden especificar múltiples media queries y pueden
ser verdaderas varias a la vez.
Media Queries (III)
https://developer.mozilla.org/es/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/
http://www.genbetadev.com/desarrollo-
web/introduccion-a-las-reglas-media-de-css3
Media Queries (IV)
div { width: 150px; height: 150px }
.caja1 { background-color: purple}
.caja2 { background-color: blue }
/* Media query */
@media (min-width: 600px) {
.caja1 { background-color: green }
.caja2 { background-color: orange }
}
Media Queries (V)
También es posible expresarlo como una hoja de estilos
diferenciada:
<link rel="stylesheet" media="(min-width:
600px)" href="example.css" />
Y dentro de dicha hoja CSS:
.caja1 { background-color: green }
.caja2 { background-color: orange }
Media Queries (VI)
Las funciones multimedia es como se conoce a las
distintas características o propiedades que podemos
consultar para aplicar unos estilos u otros.
Las más utilizadas son las relacionadas con las
dimensiones de visualización de la página para adaptar el
contenido al espacio visible.
La mayoría de las funciones multimedia pueden ser
precedidas por "min-" o "max-" para expresar "mayor que"
o igual o "menor que o igual".
Media Queries (y VII)
Estas son algunas de las consultas más útiles en el
diseño responsive:
height, device-height, width, device-width,
orientation, aspect-ratio, device-aspect-
ratio, color, color-index, monochrome,
resolution, scan, grid, monochrome
http://www.w3.org/TR/css3-mediaqueries/
Imágenes responsive (I)
Uno de los problemas más importantes es el de las
imágenes y videos. ¿Cómo adaptar el tamaño de las
imágenes en función de la resolución del dispositivo? Para
ello utilizaremos CSS y las propiedades width: y max-
width:
http://www.genbetadev.com/desarrollo-web/responsive-
design-adaptar-imagenes-y-videos
Imágenes responsive (II)
1. Cuando queremos que una imagen ocupe siempre
todo el ancho de pantalla. Una imagen de cabecera por
ejemplo. Forzamos que siempre ocupe todo el ancho del
contenedor.
.imagen {
width: 100%;
}
Imágenes responsive (III)
2. Cuando queremos que una imagen ocupe todo el
ancho de pantalla pero no supere su tamaño original.
Una fotografía del contenedor. Forzamos que siempre
ocupe todo el ancho del contenedor pero no supere el
tamaño original.
.imagen {
width: 100%;
max-width: 800px;
}
Imágenes responsive (y IV)
3. Cuando queremos que una imagen ocupe todo el
ancho de pantalla pero no supere su tamaño original.
Una fotografía del contenedor. (Otro método).
.imagen {
max-width: 100%;
}
Retina Display
Con la aparición de dispositivos con alta densidad de píxeles
en pantalla (DPI) lo que deberemos de hacer es guardar las
imágenes con una mayor de densidad de píxeles
(ocupando más espacio).
En general las imágenes se suelen almacener con una
densidad de 96 DPI. Para retina display se suelen guardar con
300 DPI.
http://marcpampols.com/post/19912647535/adapta-los-
graficos-de-tu-web-para-las-pantallas-con
Meta viewport (I)
Es una meta o etiqueta que permite especificar entre otros
elementos cual va a ser la proporción o dimensiones en la que
se va a mostrar una página en un dispositivo.
Por defecto los navegadores móviles muestran con un ancho
determinado la página (en el caso del iPhone, 980px). Por lo
tanto la página no sólo se mostrará reducida, sino que además
no se aplicarán nunca nuestras @media queries.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://emiliocobos.net/meta-viewport-html/
Meta viewport (y II)
Los dispositivos móviles suelen asignar esa directiva de forma
diferente según el dispositivo, por lo que lo primero que
deberemos de hacer es que todos se comporten de igual
modo.
https://miiquel.com/tutorial/crear-un-menu-responsive-basico/
Frameworks Responsive (I)
Un Framework es un entorno de trabajo avanzado sobre el cual
basarnos para evitarnos tareas repetitivas de trabajo y diseño,
basándonos en soluciones ya probadas y testeadas por un equipo
de desarrollo.