responsive design
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/1.jpg)
responsive designa judy-chop to the face
_davidhudson | davidhudson.me
http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/
![Page 2: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/3.jpg)
I am passionate about developing on the web
and I want nothing less than to change the world
with my work.
![Page 4: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/4.jpg)
![Page 5: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/5.jpg)
![Page 6: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/6.jpg)
![Page 7: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/7.jpg)
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/
![Page 8: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/lord_dane/5988643349/
the web is changing
![Page 9: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/9.jpg)
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”
![Page 10: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/10.jpg)
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.
![Page 11: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/11.jpg)
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/
![Page 12: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/12.jpg)
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?
![Page 13: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/georgebovard/6640404281/
we are changing
![Page 14: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/14.jpg)
don’t get pigeonholed
http://www.flickr.com/photos/0olong/80870498/
![Page 15: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/15.jpg)
i’m not a php pimp
Or a(n)…
≥ ASP.NET ace
≥ Database diva
≥ Javascript joker
≥ Regex rockstar
≥ Graphic design god
≥ HTML … whatever
![Page 16: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/17.jpg)
This is probably copyright infringement but it’s totally worth it
![Page 18: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/18.jpg)
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
![Page 19: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/19.jpg)
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
![Page 20: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/20.jpg)
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.
![Page 21: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/21.jpg)
I HAVE NO IDEA WHAT YOU’RE
TALKING ABOUT
http://www.flickr.com/photos/notsogoodphotography/3115485369/
![Page 22: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/22.jpg)
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?
![Page 23: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/23.jpg)
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.
![Page 24: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/24.jpg)
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?
![Page 25: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/
our websites need to change
![Page 26: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/27.jpg)
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
![Page 28: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/28.jpg)
HOWEVER!the truth is…
![Page 29: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/29.jpg)
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…
![Page 30: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/30.jpg)
![Page 31: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/31.jpg)
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!
![Page 32: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/32.jpg)
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.
![Page 33: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/33.jpg)
tl;drYou want to see examples…
![Page 34: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/34.jpg)
Example 1
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-linearize.html
![Page 35: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/35.jpg)
Example 2
http://elliotjaystocks.com/
![Page 36: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/36.jpg)
Example 3
http://2012.newadventuresconf.com/D
![Page 37: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/37.jpg)
Example 4
It’s a secret. Too bad.
![Page 38: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/38.jpg)
Let’s dive into some
code, shall we?
![Page 39: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/39.jpg)
![Page 40: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/40.jpg)
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/
![Page 41: Responsive Design](https://reader034.vdocuments.site/reader034/viewer/2022051609/54770810b4af9f0b108b47f8/html5/thumbnails/41.jpg)
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