responsive design a 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 weband 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/
the web is changing http://www.flickr.com/photos/lord_dane/5988643349/
The control which designers know in the print medium,and often desire in the web medium, is simply a functionof the limitation of the printed page. We should embracethe fact that the web doesn’t have the same constraints,and design for this flexibility. But first, we must “acceptthe 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 mobilefirst” – 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?
we are changing http://www.flickr.com/photos/georgebovard/6640404281/
don’t get pigeonholed http://www.flickr.com/photos/0olong/80870498/
I am passionate about developing on the weband 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
I HAVE NO IDEA WHAT YOU’RETALKING ABOUT http://www.flickr.com/photos/notsogoodphotography/3115485369/
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?
our websites need to change http://www.flickr.com/photos/kaibara/1448734963/sizes/l/in/photostream/
finally getting to the pointWhat 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 → 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.
HOWEVER! the truth is…
it’s totally been around for a long timeWait… 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 sarcasticabout 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!
tl;drYou want to see examples…
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-linearize.html Example 1
It’s a secret. Too bad.Example 4
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