Responsive design allows content to adapt to different screen sizes and devices. It has advantages like saving time and money by using a single responsive site instead of separate mobile and desktop sites. Responsive design can be challenging to implement for existing sites and requires large scripts and downloads. Developers must test responsiveness across devices and browser sizes. The document provides references on responsive navigation patterns, pros and cons, responsive versus adaptive design, building blocks, mobile friendliness, graphics, and approaches to mobile and responsive design.

1. RESPONSIVE DESIGN
Marcos Alves
Christophe Marchal

2. What is it?

3. 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;

4. When use this?

5. Approaches to Mobile and Web

6. Separated sites

7. Hybrid approach

8. Native

9. Mobile First

10. Getting started

11. How to test it?

12. Reference
https://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

13. RESPONSIVE DESIGN
Marcos Alves
Christophe Marchal