SlideShare una empresa de Scribd logo
1 de 49
Descargar para leer sin conexión
RESPONSIVE WEB DESIGN
<frontenders/> VALENCIA
Javier Arques
11 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 ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor 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 ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor 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/
1
FLEXIBLE LAYOUT
2
FLEXIBLE MEDIA
3
MEDIA 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
.htaccess
para redireccionar todas las
imágenes a adaptive-images.php
adaptive-images.php
creará las imágenes y las cacheará
javascript
creará 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 deYoutube, 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.js
https://github.com/scottjehl/Respond
NUESTRO EJEMPLO
CON 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 COSAS
RECURSOS 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
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia

Más contenido relacionado

Similar a Responsive web design - frontenders Valencia

Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web DesignNadal Soler
 
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHernan Beati
 
Estandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y UsabilidadEstandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y Usabilidadricardogil
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigosIreneF
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminariojustina galoc gomez
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminariojustina galoc gomez
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminariojustina galoc gomez
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminariojustina galoc gomez
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front endDavid Hurtado
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVABEEVA_es
 
Diplomado edumatica sesión #2
Diplomado edumatica   sesión #2Diplomado edumatica   sesión #2
Diplomado edumatica sesión #2Juan Cardona
 
Parcial programación para ingenieros
Parcial programación para ingenierosParcial programación para ingenieros
Parcial programación para ingenierosDaniella Castillo
 

Similar a Responsive web design - frontenders Valencia (20)

Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 
Estandares web 2.0
Estandares web 2.0Estandares web 2.0
Estandares web 2.0
 
En 20 minutos ... Responsive Design
En 20 minutos ... Responsive DesignEn 20 minutos ... Responsive Design
En 20 minutos ... Responsive Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web Responsive
 
Estandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y UsabilidadEstandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y Usabilidad
 
dreamweaver
dreamweaverdreamweaver
dreamweaver
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigos
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminario
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminario
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminario
 
PresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De SeminarioPresentacióN Para Exposicion De Seminario
PresentacióN Para Exposicion De Seminario
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front end
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVA
 
Diplomado edumatica sesión #2
Diplomado edumatica   sesión #2Diplomado edumatica   sesión #2
Diplomado edumatica sesión #2
 
Parcial programación para ingenieros
Parcial programación para ingenierosParcial programación para ingenieros
Parcial programación para ingenieros
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 

Responsive web design - frontenders Valencia