1. _ WordPress Mallorca Meetup _
#PalmaActivaWP
Responsive Design
Pancho & Gabriel Pérez
@lonchbox - @gabrielperezs
lonchbox.com & monok.es

2. Responsive Design
El Tamaño Importa

3. Ratios

4. User Agent Detection
“El super agente”
Chrome
Windows Vista
Desktop
ADSL
Safari
iOS
Tablet
3G
Chrome
Android
Smartphone
3G

5. Combine & Minify
Comprimir muchos archivos a uno solo

6. Navegadores
Señores IE6 a muerto! :)

7. Dimensiones
1440 x 900 px (screen size)
1440 x 828 px (viewport)
1280 x 828 px (design space)

8. Viewport & @media queries
/* Todos */
@media only screen { }
/* De Tablet a Smartphone */
@media only screen and (min-width: 768px) {}
/* Hasta 1280px de ancho */
@media only screen and (min-width: 1280px) {}
/* Hasta 1440px de ancho */
@media only screen and (min-width: 1440px) {}
/* Orientación apaisada */
@media only screen and (orientation: landscape) {}
/* Orientación Vertical */
@media only screen and (orientation: portrait) {}

9. Viewport & @media queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {}
/* Large screens ----------- */
@media tv and (min-device-width: 1152px) {}
@media tv and (min-device-width: 1728px) {}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}

10. Responsive Design
Un diseño para dominar a todos?

11. 1 2 3 4 5 6 7 8 9 10 11 12
Columnas
1440 x 900 px
= 20 px10 px 10 px
%
1280 x 720 px
1280 x 828 px

12. Interlineado

13. Bocetos

14. Responsive grid

15. Responsive.
Smartphone | 320 x 480 px
Desktop | 1440 x 900 px
Tablet | 1024 x 768 px
Fluid.Fix.

16. Desde, Hacía, Como

17. Ratón vs Dedo vs Trackpad
Wheel/Scroll
Wheel/Zoom
Click
Mouse Hover
Slide
Pinch
Tap
Swipe
Dos Dedos (Arriba-Abajo)
Pinch
Click
Dos Dedos (Izq-Der)
Mouse Hover

18. Responsive Design
Escoje como nacer, el caso de Flipboard
TabletTablet

19. Responsive Design
Ni tan cerca ni tan lejos
TVTV

20. Cositas útiles
Plugins, Extenciones, Webtools
Herramientas
http://responsive.is/typecast.com
http://resizemybrowser.com/
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
http://resizesafari.com/
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
Plugins
http://wordpress.org/plugins/rss-responsive-caption/
http://wordpress.org/plugins/wp-retina-2x/
http://wordpress.org/plugins/wp-fluid-images/
http://wordpress.org/plugins/user-agent-theme-switcher/
http://wordpress.org/plugins/responsive-gallery-grid/