Curso de Responsive Web Design de BEEVA

[+34] 902 20 25 52
hablemos@beeva.com
www.beeva.com
Clara del Rey 26 - 4ª planta. [28002] Madrid!
RESPONSIVE WEB DESIGN
hector.mateos@beeva.com

2!
INDICE
Curso Responsive Web Design | BEEVA!
INDICE
Intro
Arquitectura
Ventajas e inconvenientes
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Responsive en Bootstrap
Caso práctico
Imágenes Responsive
Responsive Email
Recursos y herramientas

Curso Responsive Web Design | BEEVA! 3!
INTRO
Apps

na'vas

Apps
na'vas
basadas
en

framework

común

Web
especíﬁca
para
móviles

Web
sensible
a
disposi'vos

Web
convencional

COSTE

RENDIMIENTO

Aplicaciones vs.dispositivos

INTRO
Comparativa de enfoques

5!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

ARQUITECTURA
Misma UI en distintos dispositivos

7!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

VENTAJAS E INCONVENIENTES
Pros

• UI
única
(mantenibilidad)

• Gran
capacidad
de
personalización
para

disAntos
disposiAvos

• Móviles

• Tablets

Contras

• Riesgo
de
desperdicio
de
recursos

• Complejidad
alta
en
en
apps
de
media
y
gran

escala

9!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

EJEMPLOS REALES
hHp://www.noupe.com/showcases/let-‐it-‐ﬂow-‐26-‐awesome-‐examples-‐of-‐
responsive-‐web-‐design-‐75368.html

hHp://mediaqueri.es/

hHp://www.designyourway.net/blog/inspiraAon/responsive-‐web-‐designs-‐for-‐
inspiraAon-‐40-‐examples/

hHp://socialdriver.com/2013/06/50-‐best-‐responsive-‐website-‐design-‐examples-‐
of-‐2013/

11!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

REPASO CSS3
Media queries
•  Capacidad
que
puede
tener
un
siAo
web
de
uAlizar
CSS3
con
las
extensiones
@media para
adaptar
la

disposición
gráﬁca
al
entorno
de
visualización

–  Ejemplos:
monitores,
móviles,
tablets,
impresoras,
orientación
verAcal
y
horizontal,
etc.

<link ref="stylesheet" media="screen and (max-device-width: 480px)" href="smartphone.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="screen.css" />

–  Otra
forma:
bloques
@media en
un
mismo
CSS

@media only screen and (min-width: 320px) and (max-width: 400px) {
body {background: blue;}
}
@media only screen and (min-width: 401px) and (max-width: 1024px) {
body {background: red;}
}

•  Conveniente
excepto
si
supone
desperdicio
de
recursos
en
consultas
-‐>
SiAo
independiente

–  Ejemplos:
Facebook,
YouTube,
etc.

•  Autoajuste
en
navegadores
móviles

<meta name="viewport" content="width=device-width; initial-scale=1.0;”/>

13!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

PUNTOS DE RUPTURA

15!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

CASO PRACTICO
1.  IdenAficar
capas
a
rediseñar

–  Candidatas
principales:
dimensiones
fijas

2.  Redefinir
capas
en
cada
@media query

–  Propiedades
CSS
candidatas

•  Disposición
(display, align, float …)

•  Dimensiones
(width, height, max-* …)

Ideas esenciales

CASO PRACTICO
“Fluid
grids,
ﬂexible
images,
and
media
queries
are
the
three
technical
ingredients
for

responsive
web
design,
but
it
also
requires
a
diﬀerent
way
of
thinking.”

Más guías básicas

CASO PRACTICO
Sobre la plantilla de la tienda de camisetas diseña y desarrolla adaptaciones RWD para la
página de las camisetas

19!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

RESPONSIVE EN BOOTSTRAP
Bootstrap incluye un sistema de grid fluido y responsive que se autoajusta para 12 columnas
según el tamaño del área de visión

Ejemplo
Así
se
vería
en
un
disposiAvo
pequeño
(xs):

Más clases útiles

Ejemplo 1 – Prestad por favor atención a las etiquetas y campos del formulario, así como al
botón de envío

Ejemplo 1 – vistas según dispositivo
dimensiones
lg,
md,
sm
dimensiones
xs

Ejemplo 2 – Prestad por favor atención a las columnas fundamentalmente

Ejemplo 2 – vistas según dispositivo
dimensiones
lg

dimensiones
md,
sm

dimensiones
xs

27!
INDICE
INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

CASO PRACTICO CON BOOTSTRAP
Sobre la plantilla de la tienda de camisetas diseña y desarrolla adaptaciones RWD para la
página de las camisetas utilizando las clases de ayuda de Bootstrap

INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

IMAGENES RESPONSIVE
• 
E'queta
picture
en
HTML
-‐
hHp://responsiveimages.org/

• 
Algunas
formas
de
op'mizar
la
carga

• 
Propiedades
background
en
CSS
-‐

hHp://www.smashingmagazine.com/2013/07/22/simple-‐responsive-‐
images-‐with-‐css-‐background-‐images

• 
Lazy-‐load
-‐
hHp://www.appelsiini.net/projects/lazyload

INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

RESPONSIVE EMAIL
La importancia del email, los números lo dejan claro

INDICE
Intro
Arquitectura
Ejemplos reales
Repaso CSS3
Puntos de ruptura
Caso práctico
Caso práctico
Responsive Email

RECURSOS Y HERRAMIENTAS
• 
Fastclick
-‐
hHp://elabs.github.io/fastclick

Biblioteca
que
elimina
el
retardo
de
300
ms
que
existe
entre
el
toque
de
la
pantalla

y
la
acAvación
del
evento
click
en
los
navegadores
de
smartphones.
El
objeAvo
es

que
la
aplicación
web
se
comporte
de
forma
ágil
y
natural.

• 
Patrones
-‐
hHp://bradfrost.github.io/this-‐is-‐responsive/paHerns.html

• 
Algunas
herramientas
para
desarrollo/pruebas

• hHps://chrome.google.com/webstore/detail/dimensions/
hdmihohhdcbejdkidbﬁjmfehjbnmih

• hHps://chrome.google.com/webstore/detail/responsive-‐web-‐design-‐tes/
objclahbaimlfnbjdeobicmmlnbhamkg

• 
Las
herramientas/consolas
(F12)
de
desarrollador
de
los
navegadores
también

traen
uAlidades
responsive
muy
potentes

RESPONSIVE WEB DESIGN
hector.mateos@beeva.com

Curso de Responsive Web Design de BEEVA

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Similar a Curso de Responsive Web Design de BEEVA

Similar a Curso de Responsive Web Design de BEEVA (20)

Más de BEEVA_es

Más de BEEVA_es (20)

Último

Último (20)

Curso de Responsive Web Design de BEEVA