Responsive Design


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. responsive design a judy-chop to the face _davidhudson |
  2. 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. 3. I am passionate about developing on the weband I want nothing less than to change the world with my work.
  4. 4. why are we here?≥ The web is changing≥ We are changing≥ Our websites need to change≥ Change is good
  5. 5. the web is changing
  6. 6. 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”
  7. 7. 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.
  8. 8. 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:
  9. 9. 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?
  10. 10. we are changing
  11. 11. don’t get pigeonholed
  12. 12. i’m not a php pimpOr a(n)…≥ ASP.NET ace≥ Database diva≥ Javascript joker≥ Regex rockstar≥ Graphic design god≥ HTML … whatever
  13. 13. I am passionate about developing on the weband I want nothing less than to change the world with my work. I’m a developer
  14. 14. This is probably copyright infringement but it’s totally worth it
  15. 15. 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
  16. 16. 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
  17. 17. a day in the lifeThe Hypothetical:Client-side AJAX (Javascript/XML) request to an ASP.NET web service (on thesame server obvs), which connects to a vendors payment gateway onanother domain which runs on PHP and returns a JSON string of customerinformation and payment status. The ASP.NET web service adds theresponse to its own SQL database, encodes the results in a JSON string andsends it back to the client-side which generates a receipt out of HTML, CSSand images made by a designer.
  19. 19. a day in the lifeThe Problem:Assuming this is all custom coding with no set documentation available yet,how much time will probably be lost in coordinating efforts between thegraphic designer, HTML/CSS developer, Javascript developer, ASP.NETdeveloper, database administrator and the vendor with the paymentgateway written in PHP?How much time could have been saved with a single developer that knowsPHP, ASP.NET, HTML, CSS, Javascript, SQL and at least a bit of Photoshop?
  20. 20. 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.
  21. 21. 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?
  22. 22. our websites need to change
  23. 23. 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.
  24. 24. 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.
  25. 25. HOWEVER! the truth is…
  26. 26. 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:≥ And here’s a screenshot…
  27. 27. 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!
  28. 28. 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 nowbecoming 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.
  29. 29. tl;drYou want to see examples…
  30. 30. Example 1
  31. 31. 2
  32. 32. 3
  33. 33. It’s a secret. Too bad.Example 4
  34. 34. Let’s dive into some code, shall we?
  35. 35. where to go next≥ Make IE play nice with css3.mediaqueries.js:≥ Ethan Marcotte’s original article on Responsive Web Design:≥ Ethan Marcotte’s website:≥ Bleeding edge design and development articles:≥ Twitter Bootstrap
  36. 36. 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