_ 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/
Top Related