Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive webdesign


Published on

A first aproach to responsive design.

Published in: Technology, Design

Responsive webdesign

  1. 1. Responsivewebdesign <br />A QuickTech Tour<br />Alexandre Marreiros, 2011<br />
  2. 2. Agenda<br />Alexandre Marreiros, 2011<br />Introduction<br />Flexible Design<br />Responsive Design Concept<br />ResolutionThinking<br />FlexibleThinking<br />StructureThinking<br />CSS3 Media Queries<br />References<br />
  3. 3. Introduction<br />Alexandre Marreiros, 2011<br />“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.” <br />John Allsopp<br />
  4. 4. Introduction<br />Alexandre Marreiros, 2011<br />Nowadays we are faced with a great number of different devices, with different input modes <br />All this devices had browsers and more than ever before using web is a reality in all this supports<br />If the input way and user expectation isn´t always the same in all these devices, should the design deliver be equal?<br />
  5. 5. Introduction<br />Alexandre Marreiros, 2011<br />“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?”<br />Ethan Marcotte<br />
  6. 6. Flexible Design<br />Alexandre Marreiros, 2011<br />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<br />Our sites should scale in order to give to user a experience, that is independent from the device we are using<br />
  7. 7. Flexible Design<br />Alexandre Marreiros, 2011<br />In the article Fluid Grids, Ethan Marcotte explain us a way to get a Flexible design.<br />With this kind of technics, we scale or design according to user device settings.<br />
  8. 8. FlexibleDesign Demo<br />Alexandre Marreiros, 2011<br /> Demo of Flexible Design <br />
  9. 9. Responsive Design Concept<br />Alexandre Marreiros, 2011<br />One site, different devices, different behaviors, different resolutions. <br />Be fluent? Or should we be responsive?<br />
  10. 10. Responsive Design Concept<br />Alexandre Marreiros, 2011<br />Is the web design approach here you try to address user’s behavior’s and environment's, considering screen size and platform orientation.<br />When a user switches between devices his site should automatically accommodate contents responding to user’s expectation, based on his device.<br />Applying a responsive behavior, enable us to address the different device issue without have to create hundred of layouts.<br />
  11. 11. Responsive Design Demo<br />Alexandre Marreiros, 2011<br /> Demo of Responsive Design <br />(<br />
  12. 12. Resolution<br />Alexandre Marreiros, 2011<br />One thing we have to think when we talk about being Responsive is resolutions. <br /><br />
  13. 13. Resolution<br />Alexandre Marreiros, 2011<br /> Devices Resolution Orientations<br />Orientation and Resolution are also directly related, when we talk about Responsive.<br />Portait<br /> Landscape<br />
  14. 14. Flexible<br />Alexandre Marreiros, 2011<br />On part of the solution is to make all layout more flexible<br />Automatically adjust of images that make part of the layout<br />Think Flexible not just in terms of adjusting for different resolutions but also a way to change things in different orientations.<br />
  15. 15. Flexible Demo<br />Alexandre Marreiros, 2011<br />Demo of Flexible Layout design <br />(<br />( )<br />
  16. 16. Structure<br />Alexandre Marreiros, 2011<br />At a structure level we may think in 3 different ways to solve a the problems related to orientation and resolution:<br />Have different HTML Layouts to each resolutions and deliver the right Layout according to the device ( this is not always implementable);<br />Separated StyleSheets(this can be interesting for older briwsers);<br />Using CSS Media Query (the more efficient and interesting);<br />Using JavaScript Technics;<br />
  17. 17. Structure<br />Alexandre Marreiros, 2011<br />
  18. 18. Structure Demo<br />Alexandre Marreiros, 2011<br />Structure Examples<br />
  19. 19. CSS3 Media Query Demo<br />Alexandre Marreiros, 2011<br />Structure Examples<br />
  20. 20. Alexandre Marreiros, 2011<br />CSS Media QueryWithJavaScriptDemo<br />Structure Examples<br />
  21. 21. Refrences<br />Alexandre Marreiros, 2011<br />Responsive Web Design, EthanMarcotte<br />CSS Media Query for Mobile isFool’s Gold, CloudFour<br />Designing for a Responsive Web withHeuristicMethods, Design Reviver<br />ExamplesOfFlexibleLayoutsWith CSS3 Media Queries, Zoe MickleyGillenwater<br />FlexibleWeb Book, Zoe MickleyGillenwater (printedbook)<br />
  22. 22. Contacts<br />Alexandre Marreiros, 2011<br />Email:<br />Twitter: @alexmarreiros<br />Feel free to ask<br />