Embed Size (px)
DESCRIPTION
Citation preview
Responsive Design
Responsive Design
Responsive Design
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
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
MEDIA QUERIES
Responsive Design
crossbrowsing ?
http://code.google.com/p/css3-mediaqueries-js/
http://archive.plugins.jquery.com/project/MediaQueries
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.
Responsive Design
Test:
http://www.responsinator.com/
http://responsive.is/grillroyal.com/en
Responsive Design
Responsive Design
Responsive Design
1.Column Drop2.Layout shifter3.Tiny tweaks4.Off canvas
5.
Responsive Design
1.Column Drop2.Layout shifter3.Tiny tweaks4.Off canvas
5.
Responsive Design
1.Column Drop2.Layout shifter3.Tiny tweaks4.Off canvas
5.
Responsive Design
1.Column Drop2.Layout shifter3.Tiny tweaks4.Off canvas
5.
Responsive Design
1.Column Drop2.Layout shifter3.Tiny tweaks4.Off canvas
5.
Responsive Design
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/leolanese
http://www.cristalab.com/tutoriales/responsive-design-diseno-receptivo-y-adaptivo-en-la-web-c105160l/
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.dokumen.tips/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
