Responsive webdesign
Download as PPTX, PDF5 likes840 views
Responsive web design is an approach that makes web content adapt to different screen sizes and devices. It uses flexible grids, images and CSS media queries to automatically adjust layouts. A responsive design delivers an optimized viewing and interaction experience across a wide range of devices without the need for separate websites or content. Media queries allow styling elements differently depending on characteristics of the device like width, height, and orientation.
Responsive webdesign
- 1. Responsivewebdesign A QuickTech TourAlexandre Marreiros, 2011
- 2. AgendaAlexandre Marreiros, 2011IntroductionFlexible DesignResponsive Design ConceptResolutionThinkingFlexibleThinkingStructureThinkingCSS3 Media QueriesReferences
- 3. IntroductionAlexandre 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. IntroductionAlexandre Marreiros, 2011Nowadays 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 supportsIf the input way and user expectation isn´t always the same in all these devices, should the design deliver be equal?
- 5. IntroductionAlexandre 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 DesignAlexandre Marreiros, 2011In order to answer the different web devices navigation, some of us had use as a foundation of our Web Applications and sites a Flexible DesignOur sites should scale in order to give to user a experience, that is independent from the device we are using
- 7. Flexible DesignAlexandre Marreiros, 2011In 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 DemoAlexandre Marreiros, 2011 Demo of Flexible Design
- 9. Responsive Design ConceptAlexandre Marreiros, 2011One site, different devices, different behaviors, different resolutions. Be fluent? Or should we be responsive?
- 10. Responsive Design ConceptAlexandre Marreiros, 2011Is 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 DemoAlexandre Marreiros, 2011 Demo of Responsive Design (http://colly.com/)
- 12. ResolutionAlexandre Marreiros, 2011One 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. ResolutionAlexandre Marreiros, 2011 Devices Resolution OrientationsOrientation and Resolution are also directly related, when we talk about Responsive.Portait Landscape
- 14. FlexibleAlexandre Marreiros, 2011On part of the solution is to make all layout more flexibleAutomatically adjust of images that make part of the layoutThink Flexible not just in terms of adjusting for different resolutions but also a way to change things in different orientations.
- 15. Flexible DemoAlexandre Marreiros, 2011Demo of Flexible Layout design (http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/)(http://unstoppablerobotninja.com/entry/fluid-images/ )
- 16. StructureAlexandre Marreiros, 2011At 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;
- 18. Structure DemoAlexandre Marreiros, 2011Structure Examples
- 19. CSS3 Media Query DemoAlexandre Marreiros, 2011Structure Examples
- 20. Alexandre Marreiros, 2011CSS Media QueryWithJavaScriptDemoStructure Examples
- 21. RefrencesAlexandre Marreiros, 2011Responsive Web Design, EthanMarcotteCSS Media Query for Mobile isFool’s Gold, CloudFourDesigning for a Responsive Web withHeuristicMethods, Design ReviverExamplesOfFlexibleLayoutsWith CSS3 Media Queries, Zoe MickleyGillenwaterFlexibleWeb Book, Zoe MickleyGillenwater (printedbook)
- 22. ContactsAlexandre Marreiros, 2011Email: Amarreiros@gmail.comTwitter: @alexmarreirosFeel free to ask