Download - Responsive web design - frontenders Valencia
![Page 1: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/1.jpg)
RESPONSIVE WEB DESIGN
<frontenders/> VALENCIA
Javier Arques11 abril 2013
![Page 2: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/2.jpg)
artvisual http://www.artvisual.net/
twitter @javiarques
ejemplo https://github.com/frontenders/responsive-talk
presentación http://www.slideshare.net/JavierArquesHernndez
![Page 3: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/3.jpg)
![Page 4: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/4.jpg)
TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
![Page 5: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/5.jpg)
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
![Page 6: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/6.jpg)
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
![Page 7: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/7.jpg)
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
![Page 8: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/8.jpg)
*imagen: http://bradfrostweb.com/blog/post/this-is-the-web/
RESPONSIVE WEB DESIGN
![Page 9: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/9.jpg)
![Page 10: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/10.jpg)
![Page 11: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/11.jpg)
http://alistapart.com/article/responsive-web-design
![Page 12: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/12.jpg)
ETHAN MARCOTTE
http://unstoppablerobotninja.com/entry/on-being-responsive/
1FLEXIBLE LAYOUT
2FLEXIBLE MEDIA
3MEDIA QUERIES
![Page 13: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/13.jpg)
1 FLEXIBLE LAYOUT
![Page 14: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/14.jpg)
![Page 15: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/15.jpg)
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+)
![Page 16: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/16.jpg)
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
![Page 17: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/17.jpg)
TIPOGRAFÍA
Usar em, rem, %
body{ font-size: 100%} // 16px
em = tamaño en px / 16px
24px / 16px = 1.5em
![Page 18: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/18.jpg)
servidordeprueba.net/webs/responsive-talk/v1/
![Page 19: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/19.jpg)
960px
465px
300px
217px
30px
300px 660px
![Page 20: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/20.jpg)
48.4375%
31.25%
22.60%
3.125%
31.25% 68.75%
.wrapper{! max-width: 960px;! width: 90%;}
![Page 21: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/21.jpg)
http://servidordeprueba.net/webs/responsive-talk/v2/
![Page 22: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/22.jpg)
2 FLEXIBLE MEDIA
![Page 23: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/23.jpg)
FLEXIBLE IMAGES CSS
Imagen se ajusta al ancho del contendor
img, embed, object, video { max-width: 100%; overflow: hidden; height: auto;}
![Page 24: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/24.jpg)
http://servidordeprueba.net/webs/responsive-talk/v3/
![Page 25: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/25.jpg)
JS RESPONSIVE IMAGES
picturefill.js
https://github.com/scottjehl/picturefill
![Page 26: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/26.jpg)
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/
![Page 27: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/27.jpg)
RESPONSIVE VIDEO
https://github.com/davatron5000/FitVids.js
Plugin de jQuery que adapta el tamaño de los embeds de Youtube, Vimeo, Blip.tv, ..
![Page 28: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/28.jpg)
3 MEDIA QUERIES
![Page 29: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/29.jpg)
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">
![Page 30: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/30.jpg)
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
![Page 31: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/31.jpg)
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) { ... }
![Page 32: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/32.jpg)
RESOLUCIONES
320 < 480 < 720 < 768 < 900 < 1024 < 1200
![Page 33: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/33.jpg)
MEDIA QUERY SUPPORT
IE >= 9
SOPORTADO POR TODOS LOS
NAVEGADORES MÓVILES
respond.jshttps://github.com/scottjehl/Respond
![Page 34: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/34.jpg)
NUESTRO EJEMPLOCON MEDIA QUERIES
![Page 35: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/35.jpg)
HTTP://SERVIDORDEPRUEBA.NET/WEBS/RESPONSIVE-TALK/V4/
![Page 36: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/36.jpg)
TABLET PORTRAIT (MAX-WIDTH: 768)
![Page 37: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/37.jpg)
SMARTPHONE (MAX-WIDTH: 480)
![Page 38: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/38.jpg)
HEADER (MAX-WIDTH: 480)
![Page 39: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/39.jpg)
GRID (MAX-WIDTH: 480PX)
![Page 40: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/40.jpg)
MÁS COSASRECURSOS Y OTRAS MOVIDAS
![Page 41: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/41.jpg)
VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1">
los navegadores de los smartphone emulan la resolución del escritorio (800-980px)
![Page 42: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/42.jpg)
MOBILE FIRST
![Page 44: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/44.jpg)
BRAD FROST
http://bradfrost.github.io/this-is-responsive/
![Page 45: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/45.jpg)
http://jasonweaver.name/lab/flexiblenavigation/
![Page 46: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/46.jpg)
“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/
![Page 47: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/47.jpg)
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
![Page 48: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/48.jpg)
![Page 49: Responsive web design - frontenders Valencia](https://reader037.vdocuments.net/reader037/viewer/2022103016/555e2690d8b42a6a4c8b4f50/html5/thumbnails/49.jpg)