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