Responsive webdesign

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

Contacts

Alexandre Marreiros, 2011

Email: Amarreiros@gmail.comTwitter: @alexmarreiros

Feel free to ask