responsive webdesign
DESCRIPTION
A first aproach to responsive design.TRANSCRIPT
RESPONSIVE WEB DESIGN
A Quick Tech Tour
Alexandre Marreiros, 2011
Agenda Introduction Flexible Design Responsive Design Concept Resolution Thinking Flexible Thinking Structure Thinking CSS3 Media Queries References
Alexandre Marreiros, 2011
Introduction
“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
Alexandre Marreiros, 2011
Introduction 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?
Alexandre Marreiros, 2011
Introduction“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 separate subdomains, spaces distinct and separate from “the non-iPhone website.But what’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
Alexandre Marreiros, 2011
Flexible Design 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
Alexandre Marreiros, 2011
Flexible Design 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.
Alexandre Marreiros, 2011
Flexible Design Demo
Demo of Flexible Design
Alexandre Marreiros, 2011
Responsive Design Concept
One site, different devices, different behaviors, different resolutions.
Be fluent? Or should we be responsive?
Alexandre Marreiros, 2011
Responsive Design Concept 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.
Alexandre Marreiros, 2011
Responsive Design Demo
Demo of Responsive Design
(http://colly.com/)
Alexandre Marreiros, 2011
Resolution 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
Alexandre Marreiros, 2011
Resolution Devices Resolution Orientations Orientation and Resolution are also directly
related, when we talk about Responsive.
Portait
Landscape
Alexandre Marreiros, 2011
Flexible 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.
Alexandre Marreiros, 2011
Flexible Demo
Demo of Flexible Layout design
(http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/)
(http://unstoppablerobotninja.com/entry/fluid-images/ )
Alexandre Marreiros, 2011
Structure
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;
Alexandre Marreiros, 2011
StructureAlexandre Marreiros, 2011
Structure Demo
Structure Examples
Alexandre Marreiros, 2011
CSS3 Media Query Demo
Structure Examples
Alexandre Marreiros, 2011
CSS Media Query With JavaScript Demo
Structure Examples
Alexandre Marreiros, 2011
Refrences Responsive Web Design, Ethan Marcotte CSS Media Query for Mobile is Fool’s Gold, Cloud Four Designing for a Responsive Web with Heuristic Methods,
Design Reviver Examples Of Flexible Layouts With CSS3 Media Queries,
Zoe Mickley Gillenwater Flexible Web Book, Zoe Mickley Gillenwater (printed
book)
Alexandre Marreiros, 2011
