Responsive Design            ux     martin.b@batanga.com
Responsive Design
Responsive Design
mobile first - Para crear una mejor UX necesitamos crear nuestro contenido desde el diseño, haciendo funcionalidades mas s...
mobile firstno son cuatro diseños, es solo uno (tener cuatro diseños sería una muy malaidea) lo que realmente se hace en l...
MEDIA QUERIES                Responsive Design
crossbrowsing ? Soporte robusto entre los navegadores modernos. Todos los navegadores de escritorio como Safari 3+, Chrome...
Test:http://www.responsinator.com/http://responsive.is/grillroyal.com/en                                         Responsiv...
Responsive Design
Responsive Design
1.Column  Drop     2.Layout shifter     3.Tiny tweaks     4.Off canvas5.                        Responsive Design
1.Column  Drop     2.Layout shifter     3.Tiny tweaks     4.Off canvas5.                        Responsive Design
1.Column  Drop     2.Layout shifter     3.Tiny tweaks     4.Off canvas5.                        Responsive Design
1.Column  Drop     2.Layout shifter     3.Tiny tweaks     4.Off canvas5.                        Responsive Design
1.Column  Drop     2.Layout shifter     3.Tiny tweaks     4.Off canvas5.                        Responsive Design
FYI:http://mobile.smashingmagazine.com/tag/media-queries/http://mobile.smashingmagazine.com/tag/responsive-design/http://w...
Upcoming SlideShare
Loading in …5
×

Responsive design

1,072 views

Published on

  • Be the first to comment

Responsive design

  1. 1. Responsive Design ux martin.b@batanga.com
  2. 2. Responsive Design
  3. 3. Responsive Design
  4. 4. mobile first - Para crear una mejor UX necesitamos crear nuestro contenido desde el diseño, haciendo funcionalidades mas simple y asegurandonos que andara en cualquier entorno. - luego agregar estas variaciones al contenido usando media queries - Declarar /* Display:none; a un elemento que contiene un background image, no evitara que carguemos esa imagen, para evitar la carga se debera aplicar al elemento padre. Responsive Design
  5. 5. mobile firstno son cuatro diseños, es solo uno (tener cuatro diseños sería una muy malaidea) lo que realmente se hace en los “diseños” adicionales es soloreacomodar el contenido que ya mostraba el “diseño” principal, esto es uncorrecto responsive design.@cristalab@ Responsive Design
  6. 6. MEDIA QUERIES Responsive Design
  7. 7. crossbrowsing ? Soporte robusto entre los navegadores modernos. Todos los navegadores de escritorio como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ parsean nativamente las media queries, como también lo hacen navegadores mobile más recientes como Opera Mobile y WebKit mobile. Por supuesto, las versiones más viejas de esos navegadores de escritorio no soportan media queries. http://code.google.com/p/css3-mediaqueries-js/ http://archive.plugins.jquery.com/project/MediaQueries Responsive Design
  8. 8. Test:http://www.responsinator.com/http://responsive.is/grillroyal.com/en Responsive Design
  9. 9. Responsive Design
  10. 10. Responsive Design
  11. 11. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas5. Responsive Design
  12. 12. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas5. Responsive Design
  13. 13. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas5. Responsive Design
  14. 14. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas5. Responsive Design
  15. 15. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas5. Responsive Design
  16. 16. FYI:http://mobile.smashingmagazine.com/tag/media-queries/http://mobile.smashingmagazine.com/tag/responsive-design/http://www.alistapart.com/articles/responsive-web-design/http://focusdesigner.com/web-design/responsive-web-design/http://www.slideshare.net/leolanesehttp://www.cristalab.com/tutoriales/responsive-design-diseno-receptivo-y-adaptivo-en-la-web-c105160l/ Responsive Design

×