Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Presentación WPmallorca PalmaActiva responsive design

  1. 1. _ WordPress Mallorca Meetup _ #PalmaActivaWP Responsive Design Pancho & Gabriel Pérez @lonchbox - @gabrielperezs lonchbox.com & monok.es
  2. 2. Responsive Design El Tamaño Importa
  3. 3. Ratios
  4. 4. User Agent Detection “El super agente” Chrome Windows Vista Desktop ADSL Safari iOS Tablet 3G Chrome Android Smartphone 3G
  5. 5. Combine & Minify Comprimir muchos archivos a uno solo
  6. 6. Navegadores Señores IE6 a muerto! :)
  7. 7. Dimensiones 1440 x 900 px (screen size) 1440 x 828 px (viewport) 1280 x 828 px (design space)
  8. 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. 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. 10. Responsive Design Un diseño para dominar a todos?
  11. 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. 12. Interlineado
  13. 13. Bocetos
  14. 14. Responsive grid
  15. 15. Responsive. Smartphone | 320 x 480 px Desktop | 1440 x 900 px Tablet | 1024 x 768 px Fluid.Fix.
  16. 16. Desde, Hacía, Como
  17. 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. 18. Responsive Design Escoje como nacer, el caso de Flipboard TabletTablet
  19. 19. Responsive Design Ni tan cerca ni tan lejos TVTV
  20. 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/

×