Download - Responsive Design
![Page 1: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/1.jpg)
RESPONSIVE DESIGN
Marcos AlvesChristophe Marchal
![Page 2: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/2.jpg)
What is it?
![Page 3: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/4.jpg)
When use this?
![Page 5: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/5.jpg)
Approaches to Mobile and Web
![Page 6: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/6.jpg)
Separated sites
![Page 7: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/7.jpg)
Hybrid approach
![Page 8: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/8.jpg)
Native
![Page 9: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/9.jpg)
Mobile First
![Page 10: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/10.jpg)
Getting started
![Page 11: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/11.jpg)
How to test it?
![Page 12: Responsive Design](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022060120/5591c2f11a28ab37408b45ae/html5/thumbnails/13.jpg)
RESPONSIVE DESIGN
Marcos AlvesChristophe Marchal