responsive design

13
RESPONSIVE DESIGN Marcos Alves Christophe Marchal

Upload: marcos-alves

Post on 30-Jun-2015

47 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Responsive Design

RESPONSIVE DESIGN

Marcos AlvesChristophe Marchal

Page 2: Responsive Design

What is it?

Page 3: Responsive Design

Advantages X Negatives● Save time and money;● Unique URL;● Social Sharing;● Don’t care user agent.

● Hard to change content;● Rewrite existent site;● Big scripts and style;● High network download;

Page 4: Responsive Design

When use this?

Page 5: Responsive Design

Approaches to Mobile and Web

Page 6: Responsive Design

Separated sites

Page 7: Responsive Design

Hybrid approach

Page 8: Responsive Design

Native

Page 9: Responsive Design

Mobile First

Page 10: Responsive Design

Getting started

Page 11: Responsive Design

How to test it?

Page 12: Responsive Design

Referencehttps://developer.mozilla.org/en-US/Apps/Design/Responsive_Navigation_Patterns (Como gerenciar os menus)

https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_design (Pros and Cons, problema que resolve)

https://developer.mozilla.org/en-US/Apps/app_layout/Responsive_design_versus_adaptive_design (Responsive design vs Adaptive Design)

https://developer.mozilla.org/en-US/Apps/app_layout/responsive_design_building_blocks (Responsive design building blocks)

https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Mobile-friendliness (3 Goals of mobile dev)

https://developer.mozilla.org/en-US/Apps/Design/Graphics_for_responsive_sites (Graphics for responsive sites)

http://www.linkedin.com/today/post/article/20121002130448-2970266-how-to-approach-mobile-and-responsive-web-design-part-1

Page 13: Responsive Design

RESPONSIVE DESIGN

Marcos AlvesChristophe Marchal