Download U4 – Hojas de Estilo Web – Diseño Responsive

DESARROLLO DE APLICACIONES
CON TECNOLOGÍAS WEB
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.
Deberemos de determinar nuestro “target” para saber cuales
van a ser las resoluciones a las que preparar el diseño.
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.
- Movil pequeño: (QVGA) 320x240px
- Móvil: (WVGA) 480x800px
- Tablet: 768x1024 / 768x1280px
- Ordenador pequeño: 1024x768px (960px)
- Ordenador doméstico: Más de 1280px
Diseño responsive (V)
Es IMPOSIBLE realizar el testeo de una aplicación web móvil
dado que no es posible tener todos los dispositivos reales para
realizar pruebas. Existen webs más o menos fiables para
realizar dichas pruebas.
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-demobile-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/desarrolloweb/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-aspectratio, 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 maxwidth:
http://www.genbetadev.com/desarrollo-web/responsivedesign-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-losgraficos-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.
<meta name="viewport" content="width=devicewidth, initial-scale=1">
Tipografías en Responsive (I)
Generalmente el tamaño base de los tipos de letra es de 14px o 16px.
Esto se puede cambiar desde la configuración del navegador web. Sin
embargo para una página podemos establecer un tamaño de letra fijo:
html { font-size: 16px; }
Sin embargo en responsive lo que deberemos de hacer es adaptar
nuestro tamaño de tipo de letra a las distintas resoluciones para
que se vean de forma similar.
Tipografías en Responsive (y II)
/* Por defecto para móviles */
html { font-size: 100%; } // equivalente en em ó rem
/* Tablets */
@media (min-width: 768px) {
html { font-size: 112%; } // equivalente en em ó rem
}
/* Ordenador */
@media (min-width: 960px) {
html { font-size: 120%; } // equivalente en em ó rem
}
Grid (I)
Uno de los métodos más extendidos para trabajar en
responsive es el uso de rejillas (Grid) o trabajo en
columnas (Columns).
El dividir nuestro diseño en una rejilla en la que se
“encajan” los elementos HTML por medio de CSS facilita
el desarrollo de sitios responsive.
http://www.adamkaplan.me/grid/
Grid (II)
Para componer un GRID lo más sencillo es componer un
modelo de rejilla que nos permite incluir todos los elementos
de una caja dentro de la misma y mantener sólo fuera el
margen con la propiedad box-sizing a todos los elementos
de la página.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Grid (III)
A continuación necesitaremos componer un elemento contenedor
para todos los elementos de la web. Este elemento generalmente
está centrado y tiene una anchura determinada según la anchura
del dispositivo.
.container {
margin: 0 auto;
width: 90%
}
Grid (IV)
Crearemos un elemento fila (row), para contener las columnas,
como si una tabla se tratara. En este caso nos aseguraremos que
ningún elemento flote alrededor de estas filas y se comporten como
tablas.
.row {
clear: both;
display: table;
}
Grid (V)
Luego asignaremos estilos comunes a todos los
elementos columna. Esta clase se la asignaremos a
todos los elementos columna.
.col {
float: left;
padding: 1em;
}
Grid (y VI)
Por último asignaremos los distintos anchos de columna que
queramos utilizar para las distintas resoluciones.
@media (min-width: 768px) {
.one-third-md { width: 33.333333%; }
.two-third-md { width: 66.666666%; }
.one-quarter-md { width: 25%;}
.half-md { width: 50%; }
.three-quarter-md { width: 75%;}
.full { width: 100%; }
}
Menús responsive (I)
Aparte de las imágenes y los contenidos uno de los elementos
más complejos de trabajar en Responsive es el tema de los
meńus de navegación.
Al igual que otros elementos de la web se pueden resolver sólo
con CSS y media queries aunque cada vez son más populares el
emplo de plugins con JS que permiten resultados más
espectaculares y sencillos de implementar.
Menús responsive (y II)
Algunos ejemplos:
http://responsive-nav.com/
http://responsivemobilemenu.com/en/
http://jasonweaver.name/lab/flexiblenavigation/
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.
Existen varias soluciones o herramientas dentro del Diseño
Responsive. Todas ellas facilitan la tarea del diseñador pero
necesitan de conocimientos avanzados de HTML, CSS y JS.
Frameworks Responsive (II)
Skeleton. Fue uno de los primeros en aparecer y también de los más
sencillos y por lo tanto menos potentes.
http://www.getskeleton.com/
Twitter Bootstrap. Desarrollado por Twitter está muy extendido entre los
desarrolladores y programadores por su potencia y sencillez. Permite la
personalización y el uso de precompiladores CSS como LESS y SASS.
http://getbootstrap.com/
Foundation. Es el preferido por los diseñadores por su potencia y
versalitidad. También es uno de los más radicales en sus planteamientos.
http://foundation.zurb.com/