A lot of folks are using jQuery Mobile for mobile websites, but are there better ways? Responsive design has taken the web world by storm the last couple of years, and here we compare the two methods and give examples of how Responsive Design using HTML and CSS shines.

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

2. Why
Responsive?
More appropriately: Why mobile?

3. Creating Mobile Websites 5-7 years ago:

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

5. "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

6. 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)

7. Reality hits you hard, bro.

8. What's the
solution?

10. "Responsive" vs
"Adaptive"

11. CSS vs jQuery
Mobile?

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

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

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

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

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

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

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

19. Developing a
strategy.

20. Mobile first?
Depends.

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

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

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

27. Percentage
based design.
Ah, the good old days.

28. Font-sizing.
Everything you know is wrong.

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

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

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

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

38. It scrolls down to
the first listing!
Click the "next"
button...

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

40. 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}

41. 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;
}

42. The tools.
Some are better than others.

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

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

46. Some great
examples.
And best practices.

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

48. Questions?
(Speak up, plz.)

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