Responsive Design

responsive designa judy-chop to the face

_davidhudson | davidhudson.me

http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/

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

I am passionate about developing on the web

and I want nothing less than to change the world

with my work.

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/

http://www.flickr.com/photos/lord_dane/5988643349/

the web is changing

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”

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.

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/

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?

http://www.flickr.com/photos/georgebovard/6640404281/

we are changing

don’t get pigeonholed

http://www.flickr.com/photos/0olong/80870498/

i’m not a php pimp

Or a(n)…

≥ ASP.NET ace

≥ Database diva

≥ Javascript joker

≥ Regex rockstar

≥ Graphic design god

≥ HTML … whatever

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

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

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

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

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.

I HAVE NO IDEA WHAT YOU’RE

TALKING ABOUT

http://www.flickr.com/photos/notsogoodphotography/3115485369/

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?

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.

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?

http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/

our websites need to change

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.

who dun it? HINT: It was probably this guy →

≥ 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.

Ethan Marcotte

HOWEVER!the truth is…

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…

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!

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.

tl;drYou want to see examples…

Example 1

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

Example 2

http://elliotjaystocks.com/

Example 3

http://2012.newadventuresconf.com/D

Example 4

It’s a secret. Too bad.

Let’s dive into some

code, shall we?

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/

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