Topsy Turvy Design

Iopsy
Turvy
Design 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/

Iopsy
Turvy
Design 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/

Rich Quick

(before you ask)

Here’s my passport to prove it

Very traditional site

Designed for desktop



Traditional design process



Traditional design process

Looks “so so”

The

Traditional
Design
Process

The Traditional Design Process

The Traditional Design Process

1

Big
Fat
Cheque
http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/

2

Have a latte

http://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/

Do some wireframes 3 (maybe)

http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/

4

Give to the
(ultra cool)
designer

5

Then the client / your boss sees it

5

and loves it 1 st
TIME

5

and loves it 91st
TIME

6

Next, 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
Final
Cheque

1 Big fat deposit cheque
2 Have a latte
3 Do some wireframes
4 Photoshop comps
5 Sign off
6 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 5

HTML Monkey Printer does voodoo 6

Big fat final cheque 7

THE MORE YOU
ASK PEOPLE TO
CHANGE

Go to the gym twice a day,
eat celery,
run 60 miles a week

var ageOfWebDesignProcess; // in years

if (webDesignProcess == printDesignProcess) {
echo(‘wtf!’);
ageOfWebDesignProcess = 572;
}

PEOPLE HATE CHANGE

THAT MUCH }

Get asked to change
more than most

First I learnt tables.. then that was wrong
Then I learnt Flash.. then that wasnʼt cool
Then 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

there’s just

1 thing
you need to learn

Media Queries

@media screen and (min-width:1025px) {

/* your CSS here */
}

At least from a
technical point of view

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

From a
design point of view

It doesnʼt need to be
much harder

There’s no wrong or right
way to do adaptive design

But hereʼs how I do it...

Remember the cutlery
in Titanic?

Just start from the outside,
Jack, and work in

Start in
the “traditional” way

Cheque,
latte,
wireframes,
Photoshop

“What if it was
a bit thinner?”

“What if it was
thinner still?”

When youʼre designing

Start from the outside

and work in

When coding

Start from the inside

and work out

It’s way easier

and there’s a hidden

IE gift

Gracefully degrade your design

Progressively enhance your code

IE <8 doesn’t support @media

Use conditional comments
or javascript (modernizr.js, respond.js, css3-media-queries.js)

http://code.google.com/p/css3-mediaqueries-js/
https://github.com/scottjehl/Respond

Learn to let go

Safari, Chrome, Firefox,
Opera, your fridge

IE

remember
1
If you thing

Adaptive
Web Design
is...
1

Really,
really,
simple
1

There’s just 1 thing to learn


/* your CSS here */
}

That’s it!


/* your CSS here */
}

1 line


/* your CSS here */
}

Make your next
website adaptive

Make your next
/
website adaptive
a bit

As Patrick
mentioned

Image courtesy of Jeremy Keith / @adactio
http://www.flickr.com/photos/adactio/39958802/sizes/z/in/photostream/

A little bit of
CSS
is better than
NONE

A little bit of
RESPONIVENESS
is better than
NONE

Fixed-width
Layout

http://frontrowconf.com/speakers/

<div class="columns">
<section id="content" class="main">
...
</section>
<aside id="widgets">
...
</aside>
</div>

there’s some
HTML

.columns{
padding-top:70px; and some
}

#content{
float:left;
CSS
width:595px;
margin: 0 25px;
}

#widgets{
float:right;
width:275px;
margin-right:18px;
}

to make your site adaptive
just add media queries

.container{
width:940px;
} take the
#content {
float: left;
width: 595px;
CSS
} that does
#widgets{
float:right;
width:275px;
layout
}

Pull it out
plonk it at the end

@media screen and (min-width:970px) { and
.container{
width:940px;
} whack it
#content {
float: left;
in a
width: 595px;
} media
#widgets{
float:right;
width:275px;
}
query
}

It is just 1 line of code


/* your CSS here */
}

Some stuff for iPhones (mainly)

<meta name="viewport" content="width=500" />

Viewport

<meta name="viewport" content="width=500" />

iPhones adjust text size

body {
-webkit-text-size-adjust: none;
}

HTML5 form fields

<input type="text" name="name" />
<input type="telephone" name="phone" />
<input type="email" name="email" />
<input type="search" name="search" />
<input type="url" name="website" />

Why bother?

<input type="telephone" name="phone" />

Why bother?

Because it’s there

<input type="tel" name="phone" />

Why bother?

Because it’s there

phones can change the keyboard


support in “older browsers”*


* cough - IE - cough

treated like type="text"

<input type="text" name="email" />

Safari changes it

-webkit-appearance: textfield;

1.
It’s
stupidly
easy

2. Gracefully
degrade your
designs

3. Progressively
enhance your
code

4. It’s just 1 line of
code!

1. It’s mind-numbingly easy
2. Gracefully degrade your designs
3. Progressively enhance your code
4. It’s just 1 line of code
5. Latte

Books
Adaptive Web Design
Aaron Gustafson

Responsive Web Design
Ethan Marcote

Thanks
Rich Quick
@richquick
rich@richquick.tv

Topsy Turvy Design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Topsy Turvy Design

Similar to Topsy Turvy Design (20)

Recently uploaded

Recently uploaded (20)

Topsy Turvy Design

Editor's Notes