RWD in the Wild

RWD
in the wild
Please use the hash tag #p80n
@richquick

http://www.svethardware.cz/sh/media.nsf/v/93DDE20E82C52910C12572C1007F7915/$ﬁle/Jungle_DX10.jpg

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.ﬂickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/

2

Have a latte

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

Do some wireframes 3 (maybe)

http://www.ﬂickr.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 ﬁnal 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 ﬁnal 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?!!

Responsive Web Design*
* or adaptive, 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
responsive design

From a
design point of view

It doesn’t need to be
much harder

There’s no wrong or right
way to do responsive 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

Javascript Polyﬁlls (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

Responsive
Web Design
is...
1

Really,
really,
simple
1

There’s just 1 thing to learn

}

That’s it!

}

1 line

}

Make your next
website responsive

Make your next
/
website responsive
a bit

A little bit of
CSS
is better than
NONE

A little bit of
RESPONSIVENESS
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 responsive

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
media
width: 595px;
}

#widgets{
float:right;
width:275px;
}
query
}

It is just 1 line of code

}

The problem with

Simple
Things is

JAVASCRIPT POLYFILLS

Kill
Performance

Add a comment
@media only screen
and (max-height : 920px)
and (min-width : 790px) {

/*ends*/}

Some SED
sed -r -e 's/^@media[^^M]+//' -e 's/^and[^^M]+//' -e 's|/*ends
*/}||' /var/www/html/assets/styles/default.css > /var/www/html/
assets/styles/default-no-media.css

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 ﬁelds

<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.
But there’s
still a lot to learn

3. Gracefully
degrade your
designs

4. Progressively
enhance your
code

5. It’s just 1 line
of code!

1. It’s mind-numbingly easy
2. But there’s still a lot to learn
3. Gracefully degrade your designs
4. Progressively enhance your code
5. It’s just 1 line of code
6. Latte

Books
Adaptive Web Design
Aaron Gustafson

Responsive Web Design
Ethan Marcote

Thanks
Rich Quick
@richquick
rich@richquick.tv

http://www.richquick.tv/p80n

RWD in the Wild

More Related Content

What's hot (20)

Similar to RWD in the Wild (20)

Recently uploaded (20)

RWD in the Wild

Editor's Notes