A first aproach to responsive design.

1. Responsivewebdesign A QuickTech Tour Alexandre Marreiros, 2011

2. Agenda Alexandre Marreiros, 2011 Introduction Flexible Design Responsive Design Concept ResolutionThinking FlexibleThinking StructureThinking CSS3 Media Queries References

3. Introduction Alexandre Marreiros, 2011 “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” John Allsopp

4. Introduction Alexandre Marreiros, 2011 Nowadays we are faced with a great number of different devices, with different input modes All this devices had browsers and more than ever before using web is a reality in all this supports If the input way and user expectation isn´t always the same in all these devices, should the design deliver be equal?

5. Introduction Alexandre Marreiros, 2011 “I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomain’s separatesubdomains, spaces distinct and separate from “the non-iPhone website.Butwhat’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?” Ethan Marcotte

6. Flexible Design Alexandre Marreiros, 2011 In order to answer the different web devices navigation, some of us had use as a foundation of our Web Applications and sites a Flexible Design Our sites should scale in order to give to user a experience, that is independent from the device we are using

7. Flexible Design Alexandre Marreiros, 2011 In the article Fluid Grids, Ethan Marcotte explain us a way to get a Flexible design. With this kind of technics, we scale or design according to user device settings.

8. FlexibleDesign Demo Alexandre Marreiros, 2011 Demo of Flexible Design

9. Responsive Design Concept Alexandre Marreiros, 2011 One site, different devices, different behaviors, different resolutions. Be fluent? Or should we be responsive?

10. Responsive Design Concept Alexandre Marreiros, 2011 Is the web design approach here you try to address user’s behavior’s and environment's, considering screen size and platform orientation. When a user switches between devices his site should automatically accommodate contents responding to user’s expectation, based on his device. Applying a responsive behavior, enable us to address the different device issue without have to create hundred of layouts.

11. Responsive Design Demo Alexandre Marreiros, 2011 Demo of Responsive Design (http://colly.com/)

12. Resolution Alexandre Marreiros, 2011 One thing we have to think when we talk about being Responsive is resolutions. http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

13. Resolution Alexandre Marreiros, 2011 Devices Resolution Orientations Orientation and Resolution are also directly related, when we talk about Responsive. Portait Landscape

14. Flexible Alexandre Marreiros, 2011 On part of the solution is to make all layout more flexible Automatically adjust of images that make part of the layout Think Flexible not just in terms of adjusting for different resolutions but also a way to change things in different orientations.

15. Flexible Demo Alexandre Marreiros, 2011 Demo of Flexible Layout design (http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/) (http://unstoppablerobotninja.com/entry/fluid-images/ )

16. Structure Alexandre Marreiros, 2011 At a structure level we may think in 3 different ways to solve a the problems related to orientation and resolution: Have different HTML Layouts to each resolutions and deliver the right Layout according to the device ( this is not always implementable); Separated StyleSheets(this can be interesting for older briwsers); Using CSS Media Query (the more efficient and interesting); Using JavaScript Technics;

17. Structure Alexandre Marreiros, 2011

18. Structure Demo Alexandre Marreiros, 2011 Structure Examples

19. CSS3 Media Query Demo Alexandre Marreiros, 2011 Structure Examples

20. Alexandre Marreiros, 2011 CSS Media QueryWithJavaScriptDemo Structure Examples

21. Refrences Alexandre Marreiros, 2011 Responsive Web Design, EthanMarcotte CSS Media Query for Mobile isFool’s Gold, CloudFour Designing for a Responsive Web withHeuristicMethods, Design Reviver ExamplesOfFlexibleLayoutsWith CSS3 Media Queries, Zoe MickleyGillenwater FlexibleWeb Book, Zoe MickleyGillenwater (printedbook)

22. Contacts Alexandre Marreiros, 2011 Email: Amarreiros@gmail.com Twitter: @alexmarreiros Feel free to ask