_ WordPress Mallorca Meetup _#PalmaActivaWP

Responsive DesignPancho & Gabriel Pérez

@lonchbox - @gabrielperezs

lonchbox.com & monok.es

Responsive DesignEl Tamaño Importa

Ratios

User Agent Detection“El super agente”

ChromeWindows Vista

DesktopADSL

SafariiOS

Tablet3G

ChromeAndroid

Smartphone3G

Combine & MinifyComprimir muchos archivos a uno solo

NavegadoresSeñores IE6 a muerto! :)

Dimensiones

1440 x 900 px (screen size)

1440 x 828 px (viewport)

1280 x 828 px (design space)

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) {}

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 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Responsive DesignUn diseño para dominar a todos?

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

Interlineado

Bocetos

Responsive grid

Responsive.

Smartphone | 320 x 480 px

Desktop | 1440 x 900 px

Tablet | 1024 x 768 px

Fluid.Fix.

Desde, Hacía, Como

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

Responsive DesignEscoje como nacer, el caso de Flipboard

TabletTablet

Responsive DesignNi tan cerca ni tan lejos

TVTV

Cositas útilesPlugins, Extenciones, Webtools

Herramientas

http://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.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/