responsive web design - frontenders valencia

RESPONSIVE WEB DESIGN

<frontenders/> VALENCIA

Javier Arques11 abril 2013

artvisual http://www.artvisual.net/

twitter @javiarques

ejemplo https://github.com/frontenders/responsive-talk

presentación http://www.slideshare.net/JavierArquesHernndez

TIPOS DE WEB MÓVIL

DEDICADA RDW RESS

TIPOS DE WEB MÓVIL

DEDICADA RDW RESS

Más rápidas Mejor UX/UI

Múltiples URL’s Redirecciones Contenido duplicado Diferente UX/UI

URL y HTML propio

TIPOS DE WEB MÓVIL

DEDICADA RDW RESS

Más rápidas Mejor UX/UI

Múltiples URL’s Redirecciones Contenido duplicado Diferente UX/UI

Google ❤ RWDUn sitio para todo, sin

redirecciones

Peor optimizadasPeor UI/UX

URL y HTML propio misma URL y HTML

TIPOS DE WEB MÓVIL

DEDICADA RDW RESS

Más rápidas Mejor UX/UI

Múltiples URL’s Redirecciones Contenido duplicado Diferente UX/UI

Google ❤ RWDUn sitio para todo, sin

redirecciones

Peor optimizadasPeor UI/UX

URL y HTML propio misma URL y HTML misma URL HTML&CSS propio

Igual que DEDICADA

Más código Detección del

dispositivo en el servidor

*imagen: http://bradfrostweb.com/blog/post/this-is-the-web/

RESPONSIVE WEB DESIGN

http://alistapart.com/article/responsive-web-design

ETHAN MARCOTTE

http://unstoppablerobotninja.com/entry/on-being-responsive/

1FLEXIBLE LAYOUT

2FLEXIBLE MEDIA

3MEDIA QUERIES

1 FLEXIBLE LAYOUT

FLEXIBILIZA TU LAYOUT

Contenido fluido (%)

Tamaño en porcentaje = tamaño/total x 100

300px / 960px x 100 = 31.25%

box-sizing: border-box. Incluye el padding y el borde en el ancho total (IE8+)

RESPONSIVE FRAMEWORKS

Foundation http://foundation.zurb.com/

Bootstrap http://twitter.github.io/bootstrap/

Skeleton http://www.getskeleton.com/

Gumby http://gumbyframework.com/

http://responsive.vermilion.com/compare.php

TIPOGRAFÍA

Usar em, rem, %

body{ font-size: 100%} // 16px

em = tamaño en px / 16px

24px / 16px = 1.5em

servidordeprueba.net/webs/responsive-talk/v1/

960px

465px

300px

217px

30px

300px 660px

48.4375%

31.25%

22.60%

3.125%

31.25% 68.75%

.wrapper{! max-width: 960px;! width: 90%;}

http://servidordeprueba.net/webs/responsive-talk/v2/

2 FLEXIBLE MEDIA

FLEXIBLE IMAGES CSS

Imagen se ajusta al ancho del contendor

img, embed, object, video { max-width: 100%; overflow: hidden; height: auto;}

http://servidordeprueba.net/webs/responsive-talk/v3/

JS RESPONSIVE IMAGES

picturefill.js

https://github.com/scottjehl/picturefill

SERVER RESPONSIVE IMAGES

.htaccesspara redireccionar todas las imágenes a adaptive-images.php

adaptive-images.phpcreará las imágenes y las cacheará

javascriptcreará una cookie que guarde el tamaño de tu pantalla

http://adaptive-images.com/

RESPONSIVE VIDEO

https://github.com/davatron5000/FitVids.js

Plugin de jQuery que adapta el tamaño de los embeds de Youtube, Vimeo, Blip.tv, ..

3 MEDIA QUERIES

MEDIA QUERIES

CSS 2.1@media {media type: screen, handheld, print, all, tv, ...} {media features: width, orientation, ...}

@media print { * { font-family: serif}}

HTML

<link rel="stylesheet" media="{media type} {media features}" href="example.css" />

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

width (permite min,max)

@media screen and (min-width: 400px) and (max-width: 700px) { … }

device width (permite min,max)

@media screen and (device-width: 800px) { … }

orientation@media all and (orientation:portrait) { … }@media all and (orientation:landscape) { … }

MEDIA TYPES MEDIA FEATURES

all

braille

embossed

handheld

print

projection

screen

speech

tty

tv

TAMAÑOS BÁSICOS

/* Landscape phones and down */@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */@media (min-width: 1200px) { ... }

RESOLUCIONES

320 < 480 < 720 < 768 < 900 < 1024 < 1200

MEDIA QUERY SUPPORT

IE >= 9

SOPORTADO POR TODOS LOS

NAVEGADORES MÓVILES

respond.jshttps://github.com/scottjehl/Respond

NUESTRO EJEMPLOCON MEDIA QUERIES

HTTP://SERVIDORDEPRUEBA.NET/WEBS/RESPONSIVE-TALK/V4/

TABLET PORTRAIT (MAX-WIDTH: 768)

SMARTPHONE (MAX-WIDTH: 480)

HEADER (MAX-WIDTH: 480)

GRID (MAX-WIDTH: 480PX)

MÁS COSASRECURSOS Y OTRAS MOVIDAS

VIEWPORT

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

los navegadores de los smartphone emulan la resolución del escritorio (800-980px)

MOBILE FIRST

http://mobitest.akamai.com/

BRAD FROST

http://bradfrost.github.io/this-is-responsive/

http://jasonweaver.name/lab/flexiblenavigation/

“INSPIRACIÓN”

Awwwards www.awwwards.com/

Mediaqueri.es

Speckyboy speckyboy.com/

Hongkiat www.hongkiat.com/blog/

Codrops ympanus.net/codrops/

Smashing Magazine www.smashingmagazine.com/

Themeforest themeforest.net/

Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-design

SIXREVISIONS: A comparison of Methods for Building Mobile-Opimized Websites http://sixrevisions.com/mobile/methods-mobile-websites/

MASHABLE: 85 Top Responsive Web Design Tools de Mashable http://mashable.com/2013/03/18/web-design-tools/

The Responsinator (testing): http://www.responsinator.com/

RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?1392

RECURSOS