1.
_ WordPress Mallorca Meetup _#PalmaActivaWPResponsive DesignPancho & Gabriel Pérez@lonchbox - @gabrielperezslonchbox.com & monok.es

2.
Responsive DesignEl Tamaño Importa

3.
Ratios

4.
User Agent Detection“El super agente”ChromeWindows VistaDesktopADSLSafariiOSTablet3GChromeAndroidSmartphone3G

5.
Combine & MinifyComprimir muchos archivos a uno solo

6.
NavegadoresSeñores IE6 a muerto! :)

7.
Dimensiones1440 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 screenand (min-device-width : 320px)and (max-device-width : 480px) {}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {}/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {}/* Large screens ----------- */@media only screenand (min-width : 1824px) {}/* Large screens ----------- */@media tv and (min-device-width: 1152px) {}@media tv and (min-device-width: 1728px) {}/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

10.
Responsive DesignUn diseño para dominar a todos?

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

12.
Interlineado

13.
Bocetos

14.
Responsive grid

15.
Responsive.Smartphone | 320 x 480 pxDesktop | 1440 x 900 pxTablet | 1024 x 768 pxFluid.Fix.

16.
Desde, Hacía, Como

17.
Ratón vs Dedo vs TrackpadWheel/ScrollWheel/ZoomClickMouse HoverSlidePinchTapSwipeDos Dedos (Arriba-Abajo)PinchClickDos Dedos (Izq-Der)Mouse Hover

18.
Responsive DesignEscoje como nacer, el caso de FlipboardTabletTablet

19.
Responsive DesignNi tan cerca ni tan lejosTVTV

20.
Cositas útilesPlugins, Extenciones, WebtoolsHerramientashttp://responsive.is/typecast.comhttp://resizemybrowser.com/https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfhhttp://resizesafari.com/http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.htmlPluginshttp://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/