Recomendados
Más contenido relacionado
Similar a RWD UX Mobile First
Similar a RWD UX Mobile First (20)
RWD UX Mobile First
- 1. Responsive Design ux martin.b@batanga.com
- 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. mobile first no son cuatro diseños, es solo uno (tener cuatro diseños sería una muy mala idea) lo que realmente se hace en los “diseños” adicionales es solo reacomodar el contenido que ya mostraba el “diseño” principal, esto es un correcto responsive design. @cristalab @ Responsive Design
- 6. MEDIA QUERIES Responsive Design
- 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. Test: http://www.responsinator.com/ http://responsive.is/grillroyal.com/en Responsive Design
- 11. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas 5. Responsive Design
- 12. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas 5. Responsive Design
- 13. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas 5. Responsive Design
- 14. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas 5. Responsive Design
- 15. 1.Column Drop 2.Layout shifter 3.Tiny tweaks 4.Off canvas 5. Responsive Design