1. responsive design
a judy-chop to the face
_davidhudson | davidhudson.me
http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/

2. who am i?
≥ developer @ southern bancorp
≥ creator of TypeButter, jQuery Bacon, craigscounter,
WordChimp, Locatorade, blah blah blah blah!
≥ wannabe innovator
≥ political, religious, device, platform, language and
framework agnostic

3. I am passionate about developing on the web
and I want nothing less than to change the world
with my work.

7. why are we here?
≥ The web is changing
≥ We are changing
≥ Our websites need to change
≥ Change is good
http://www.flickr.com/photos/scingram/463720176/

8. the web is changing
http://www.flickr.com/photos/lord_dane/5988643349/

9. The control which designers know in the print medium,
and often desire in the web medium, is simply a function
of the limitation of the printed page. We should embrace
the fact that the web doesn’t have the same constraints,
and design for this flexibility. But first, we must “accept
the ebb and flow of things.”
~ John Allsopp, “A Dao of Web Design”

10. device check
≥ How many devices do you have in just your
household?
≥ Of those devices, what is the number of possible
display resolutions?
≥ Wikipedia lists 134 “common” resolutions for
computer and mobile devices. woah.

11. that’s alotta smartphones
≥ 80% of humans own a mobile phone
≥ 91.4 million smartphones in the U.S. alone
≥ Out of 5 billion phones in the world today, 1.08
billion are smartphones
≥ Android Market Share: 46.9%
≥ iPhone Market Share: 28.7%
Stats shamelessly stolen from: http://ansonalex.com/infographics/smartphone-usage-statistics-2012-infographic/

12. mobile first
“… the answer should always be mobile
first” – Eric Schmidt, CEO @ Google
≥ Most sites are developed
for resolutions of 1024px
wide and above. this kinda
sucks on a smartphone. so
much for mobile first, right?

13. we are changing
http://www.flickr.com/photos/georgebovard/6640404281/

14. don’t get pigeonholed
http://www.flickr.com/photos/0olong/80870498/

15. i’m not a php pimp
Or a(n)…
≥ ASP.NET ace
≥ Database diva
≥ Javascript joker
≥ Regex rockstar
≥ Graphic design god
≥ HTML … whatever

16. I am passionate about developing on the web
and I want nothing less than to change the world
with my work.
I’m a developer

17. This is probably copyright infringement but it’s totally worth it

18. love & marriage
♪ You can’t have one without the… other! ♪
≥ Just like love and marriage, a website won’t run
without the server-side and the client-side
≥ Traditionally, server-side developers usually know
just enough about HTML and CSS to get by until
they can pass off their work to the client-side
designer

19. love & marriage
≥ This used to be OK way back when the web was
basically just tables, font tags, Paint Shop Pro and Comic
Sans but now, we have HTML 5, complex CSS styles,
media queries, Javascript and Javascript libraries, AJAX,
JSON, bootstraps, content management systems,
typography and web standards to deal with
≥ Bottom line (literally):
The traditional approach won’t last much longer

20. a day in the life
The Hypothetical:
Client-side AJAX (Javascript/XML) request to an ASP.NET web service (on the
same server obvs), which connects to a vendors payment gateway on
another domain which runs on PHP and returns a JSON string of customer
information and payment status. The ASP.NET web service adds the
response to its own SQL database, encodes the results in a JSON string and
sends it back to the client-side which generates a receipt out of HTML, CSS
and images made by a designer.

21. I HAVE NO IDEA
WHAT YOU’RE
TALKING ABOUT
http://www.flickr.com/photos/notsogoodphotography/3115485369/

22. a day in the life
The Problem:
Assuming this is all custom coding with no set documentation available yet,
how much time will probably be lost in coordinating efforts between the
graphic designer, HTML/CSS developer, Javascript developer, ASP.NET
developer, database administrator and the vendor with the payment
gateway written in PHP?
How much time could have been saved with a single developer that knows
PHP, ASP.NET, HTML, CSS, Javascript, SQL and at least a bit of Photoshop?

23. deep thoughts
≥ Becoming a multi-language, multi-platform
developer isn’t all that difficult.
≥ The Next Generation is more than an awesome TV
show. In 10 years, the next generation will be our
direct workplace competitors and they’re starting
out with services we’re only just now beginning to
use.

24. deep thoughts
≥ Knowing multiple disciplines can save you the
frustration of hard-coding a paginator for your blog
that requires creating special links and database
queries when you could have just used a simple
AJAX request on the client-side. This has the added
benefit of further separating the view from the
controller, amiright?

25. our websites need to change
http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/

26. finally getting to the point
What is responsive web design?
≥ It’s more than just media queries and CSS3. It’s a
principle of design AND development.
≥ Responsive web design is all about creating websites
that respond to their environment by changing
themselves in a manner that benefits user-experience
the most, regardless of the user’s device, platform or
resolution.

27. who dun it? HINT: It was probably this guy →
Ethan Marcotte
≥ According to his awesome website Unstoppable Robot
Ninja: “Ethan is passionate about web standards, gorgeous
design, and how the two intersect.”
≥ Ethan wrote an article on A List Apart entitled, you guessed it,
Responsive Web Design on May 25th, 2010. Since then, it has
exploded in popularity.

28. HOWEVER!
the truth is…

29. it’s totally been around for a long time
Wait… What?
≥ Be prepared to venture back to the ancient
interwebs! Here’s a link from 1997 discussing fluid
website layouts for varying screen resolutions
including WebTV:
http://webtips.dan.info/tables.html
≥ And here’s a screenshot…

31. so it’s been around awhile. big deal right?
Yeah, it’s a really big deal… thanks for not being so sarcastic
about all this.
≥ This is not a newfangled technology that is going to upset the
“Committee of Redundancy, Compliance, and Hatred of New
Things Committee” at your office.
≥ You can sell your boss on doing a responsive design by telling
them that you’re going to use an old-school web practice to save
the company money and make your clients happier. Unlike the
last time you complimented Debbie in HR for her “excellent
collection of Christmas sweaters”, it will be the truth!

32. i don’t know how to tell you this,
but i’m kind of a big deal…
So why is responsive web design only just now
becoming popular?
≥ Well, like so many things on the web, a movement
without a cool trendy name is pretty much never going
to happen.
≥ Somewhat more important is that it doesn’t suck
anymore, thanks to our good pal CSS3 and/or
Javascript.

33. tl;dr
You want to see examples…

34. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-linearize.html
Example 1

35. http://elliotjaystocks.com/
Example 2

36. http://2012.newadventuresconf.com/D
Example 3

37. It’s a secret. Too bad.
Example 4

38. Let’s dive into some
code, shall we?

40. where to go next
≥ Make IE play nice with css3.mediaqueries.js:
http://code.google.com/p/css3-mediaqueries-js/
≥ Ethan Marcotte’s original article on Responsive Web Design:
http://www.alistapart.com/articles/responsive-web-design/
≥ Ethan Marcotte’s website:
http://unstoppablerobotninja.com/
≥ Bleeding edge design and development articles:
http://www.zeldman.com/
≥ Twitter Bootstrap
http://twitter.github.com/bootstrap/

41. This session was more than just learning responsive
design. We need to be responsive developers,
changing with the “ebb and flow” of the Internet and
our industry.
You are a developer