Responsive Design: The "other" way of doing mobile sites.

Responsive
Design
The "other" way of doing mobile sites.

Why
Responsive?
More appropriately: Why mobile?

Creating Mobile Websites 5-7 years ago:

In 2007, web designers everywhere said, "Oh, (bleep)."

"By 2013, mobile phones will overtake
PCs as the most common Web access
device worldwide."

Garter Research, 2010
http://www.gartner.com/it/page.jsp?id=1278413

Tweetable Stats:
http://goo.gl/4uy66

It takes 90 minutes for the average person to respond to an
email. It takes 90 seconds for the average person to
respond to a text message. (Source: CTIA.org)

70% of all mobile searches result in action within 1 hour.
(Source: Mobile Marketer)

Mobile coupons get 10 times the redemption rate of
traditional coupons. (Source: Borrell Associates)

91% of all U.S. citizens have their mobile device within
reach 24/7. (Source: Morgan Stanley)

jQuery Mobile
Pros: Cons:
● Easy & Fast ● Too familiar?
● Familiar Framework ● Design restrictions
● Native-ish UI ● Doesn't push innovation
● Consistent UI
● Stable & Ongoing

CSS-based Responsive Design
Pros:
● Based on browser-size
● Provides consistent UI across all devices.
● IE bugs don't matter! (yet)

Cons:
There are NO CONS. Responsive Design
rawks and anyone who disagrees can go die in
a fire.

Cons:
● New territory in CSS.
● Requires a lot more research.
● Forced to attempt to solve an infinite number
of scenarios.

Responsive Design Defined
The idea behind a responsive design is to
create a pleasant experience for your website
or web-app across all devices.

You are not trying to create a *unique*
experience on any one device (except possibly
the desktop).

The goal of a responsive design should be to
optimize the experience for as many devices as
you can.

"Who's your
audience?"
Which platform has the most value?

"If I had eight hours to chop down
a tree, I'd spend six sharpening
my axe."
Abraham Lincoln

Re-learning bad
habits.
Sorry, that should've been re-learning OLD
habits. Old, not bad.

Percentage
based design.
Ah, the good old days.

Font-sizing.
Everything you know is wrong.

Font-sizing options:
● Use pixels (good.)
● Use EMs (meh.)
● Use REMs (best?)

Layout options.
It's either mobile or it's not.

The God Ad
AKA: The thing that almost killed the project.

You mean the user has to
see an ad every time a
new page loads?

It scrolls down to
the first listing!

Click the "next"
button...

The Code
It's not as hard as you might think...

The CSS:
.god.ad {display: none} /*Hide God Ad by default*/
@media screen and (max-width:980px) {
.god.ad {
display: block;
margin: 0 auto;
}
.pencilHeader {display: none}
.right.container {display: none}

CSS (cont'd):
.wrapper {width: auto !important;}
.left.container {
float: none;
margin: 0 auto;
width: 95%
}
.header {
width: 100%;
margin: 0 auto;
float: none;
background-position: right 8px;
}

The tools.
Some are better than others.

The Tools:
● Mobilizer
● Your browser (Chrome is Better than FF)

The Tools:
● Mobilizer
● Your browser (Chrome is Better than FF)
● Twitter Bootstrap 2.0
● www.responsinator.com

Some great
examples.
And best practices.

The day is
coming where
Responsive will
be the standard
and not the exception.

Thanks!
@meetmicah
www.meetmicah.com
See you on Facebook!

Responsive Design: The "other" way of doing mobile sites.

More Related Content

Similar to Responsive Design: The "other" way of doing mobile sites.

Recently uploaded

Responsive Design: The "other" way of doing mobile sites.