responsive web design - frontenders valencia
DESCRIPTION
Presentación de Javier Arques para el Frontenders Valencia del 11 de abril de 2013. Una introducción al Responsive Web Design con ejemplos prácticos. Web de ejemplo: http://servidordeprueba.net/webs/responsive-talk/ Ficheros de ejemplo: https://github.com/frontenders/responsive-talk Frontenders: http://valencia.frontenders.me/TRANSCRIPT
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
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
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