Responsive design

Responsive Designux

martin.b@batanga.com

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/