responsive webdesign

Download Responsive webdesign

Post on 25-Jan-2015




1 download

Embed Size (px)


A first aproach to responsive design.


  • 1. Responsivewebdesign
    A QuickTech Tour
    Alexandre Marreiros, 2011

2. Agenda
Alexandre Marreiros, 2011
Flexible Design
Responsive Design Concept
CSS3 Media Queries
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 doesnt 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 isnt 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 subdomains separatesubdomains, spaces distinct and separate from the non-iPhone website.Butwhats 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 weand our designsadapt?
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 users behaviors and environment's, considering screen size and platform orientation.
When a user switches between devices his site should automatically accommodate contents responding to users 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
12. Resolution
Alexandre Marreiros, 2011
One thing we have to think when we talk about being Responsive is resolutions.
13. Resolution
Alexandre Marreiros, 2011
Devices ResolutionOrientations
Orientation and Resolution are also directly related, when we talk about Responsive.
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
( )
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 eachresolutions 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 isFools 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
Twitter: @alexmarreiros
Feel free to ask