Presentación WPmallorca PalmaActiva responsive design

1,193 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,193
On SlideShare
0
From Embeds
0
Number of Embeds
466
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Presentación WPmallorca PalmaActiva responsive design

  1. 1. _ WordPress Mallorca Meetup _#PalmaActivaWPResponsive DesignPancho & Gabriel Pérez@lonchbox - @gabrielperezslonchbox.com & monok.es
  2. 2. Responsive DesignEl Tamaño Importa
  3. 3. Ratios
  4. 4. User Agent Detection“El super agente”ChromeWindows VistaDesktopADSLSafariiOSTablet3GChromeAndroidSmartphone3G
  5. 5. Combine & MinifyComprimir muchos archivos a uno solo
  6. 6. NavegadoresSeñores IE6 a muerto! :)
  7. 7. Dimensiones1440 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 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. 10. Responsive DesignUn diseño para dominar a todos?
  11. 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. 12. Interlineado
  13. 13. Bocetos
  14. 14. Responsive grid
  15. 15. Responsive.Smartphone | 320 x 480 pxDesktop | 1440 x 900 pxTablet | 1024 x 768 pxFluid.Fix.
  16. 16. Desde, Hacía, Como
  17. 17. Ratón vs Dedo vs TrackpadWheel/ScrollWheel/ZoomClickMouse HoverSlidePinchTapSwipeDos Dedos (Arriba-Abajo)PinchClickDos Dedos (Izq-Der)Mouse Hover
  18. 18. Responsive DesignEscoje como nacer, el caso de FlipboardTabletTablet
  19. 19. Responsive DesignNi tan cerca ni tan lejosTVTV
  20. 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/

×