Topsy Turvy Design: Adapting your design process for adaptive layout

IopsyTurvyDesign Adapting your design process for adaptive design @richquick Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/

IopsyTurvyDesign Adapting your design process for adaptive design Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/

Who am I?

Rich Quick

Rich Quick(before you ask)

Yes(it is my real name)

Here’s my passport to prove it

WebDesigner

Front endDeveloper

12Years

Just started working for

Very traditional site

Very traditional siteDesigned for desktop

Very traditional siteDesigned for desktopTraditional design process

Very traditional siteDesigned for desktopTraditional design processLooks “so so”

TheTraditionalDesignProcess

The Traditional Design Process

The Traditional Design Process 1 Big FatCheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/

2 Have a lattehttp://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/

Do some wireframes 3

Do some wireframes 3 (maybe)http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/

Do some wireframes 3

4Give to the(ultra cool) designer

Who does some Photoshop magic

5Then the client / your boss sees it

5Then the client / your boss sees it and loves it 1 st TIME

5Then the client / your boss sees it and loves it 91st TIME

6Next, the design gets handed over to this guy

6 The geek* / techie* / HTML monkey** delete as applicable

He* does a load of geekytechienerdy stuff * It a he, obviously.

7 Big Fat FinalCheque

1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque

Traditional Print Process

Big fat deposit cheque 1 Have a latte cappuccino 2 Do some wireframes 3 Photoshop Indesign comps 4 Sign off 5HTML Monkey Printer does voodoo 6 Big fat final cheque 7

1 2 3 5 4 6 7

CHANGE

DONʼT MAKE MECHANGE

THE MORE YOUASK PEOPLE TOCHANGE

THE LESS OF THEMWILL

var ageOfWebDesignProcess; // in yearsif (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572;}

PEOPLE HATE CHANGETHAT MUCH }

Web Designers

Get asked to changemore than most

First I learnt tables.. then that was wrongThen I learnt Flash.. then that wasnʼt coolThen I learnt CSS..Then it was accessibility..Then it was XHTML..Then it was HTML5..Now what?!!

Adaptive Web Design** or responsive, depending on what book you read

Aww crap!

can I be bothered?

some good news

itʼs really easy

there’s just 1 thing you need to learn

Media Queries@media screen and (min-width:1025px) { /* your CSS here */}

That’s it (pretty much)

At least from atechnical point of view

From atechnical point of view Learn 1 line of code and you know how to do adaptive design

From adesign point of view It doesnʼt need to be much harder

There’s no wrong or rightway to do adaptive design But hereʼs how I do it...

Remember the cutleryin Titanic?

Just start from the outside, Jack, and work in

Start inthe “traditional” way

Cheque, latte,wireframes,Photoshop

Then ask “what if”?

“What if it wasa bit thinner?”

“What if it was thinner still?”

When youʼre designingStart from the outside and work in

When codingStart from the inside and work out

It’s way easierand there’s a hidden IE gift

Codethinnestfirst

Then codeoutwards

Gracefully degrade your designProgressively enhance your code

 A word about IE

IE <8 doesn’t support @mediaUse conditional commentsor javascript (modernizr.js, css3-media-queries.js) http://code.google.com/p/css3-mediaqueries-js/

Learn to let go Safari, Chrome, Firefox, Opera, your fridge IE

The IEGift

jQuery

Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote

Thanks Rich Quick @richquickrich@richquick.tv

Topsy Turvy Design: Adapting your design process for adaptive layout

by Rich Quick on Oct 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 139

Statistics

Topsy Turvy Design: Adapting your design process for adaptive layout — Presentation Transcript