ResponsiveDesignThe "other" way of doing mobile sites.
WhyResponsive?More appropriately: Why mobile?
Creating Mobile Websites 5-7 years ago:
In 2007, web designers everywhere said, "Oh, (bleep)."
"By 2013, mobile phones will overtakePCs as the most common Web accessdevice worldwide."Garter Research, 2010http://www.ga...
Tweetable Stats:http://goo.gl/4uy66It takes 90 minutes for the average person to respond to anemail. It takes 90 seconds f...
Reality hits you hard, bro.
Whats thesolution?
"Responsive" vs"Adaptive"
CSS vs jQueryMobile?
jQuery MobilePros:                    Cons:●   Easy & Fast          ● Too familiar?●   Familiar Framework   ● Design restr...
CSS-based Responsive DesignPros:● Based on browser-size● Provides consistent UI across all devices.● IE bugs dont matter! ...
CSS-based Responsive DesignCons:There are NO CONS. Responsive Designrawks and anyone who disagrees can go die ina fire.
CSS-based Responsive DesignCons:● New territory in CSS.● Requires a lot more research.● Forced to attempt to solve an infi...
Responsive Design DefinedThe idea behind a responsive design is tocreate a pleasant experience for your websiteor web-app ...
Responsive Design DefinedYou are not trying to create a *unique*experience on any one device (except possiblythe desktop).
Responsive Design DefinedThe goal of a responsive design should be tooptimize the experience for as many devices asyou can.
Developing astrategy.
Mobile first?Depends.
"Whos youraudience?"Which platform has the most value?
"If I had eight hours to chop downa tree, Id spend six sharpeningmy axe."Abraham Lincoln
Re-learning badhabits.Sorry, that shouldve been re-learning OLDhabits. Old, not bad.
Percentagebased design.Ah, the good old days.
Font-sizing.Everything you know is wrong.
Font-sizing options:● Use pixels (good.)● Use EMs (meh.)● Use REMs (best?)
Layout options.Its either mobile or its not.
The God AdAKA: The thing that almost killed the project.
You mean the user has tosee an ad every time anew page loads?
It scrolls down to               the first listing!Click the "next"button...
The CodeIts not as hard as you might think...
The CSS:.god.ad {display: none} /*Hide God Ad by default*/@media screen and (max-width:980px) {  .god.ad {     display: bl...
CSS (contd):.wrapper {width: auto !important;}.left.container {float: none;margin: 0 auto;width: 95%}.header {width: 100%;...
The tools.Some are better than others.
The Tools:● Mobilizer● Your browser (Chrome is Better than FF)
The Tools:●   Mobilizer●   Your browser (Chrome is Better than FF)●   Twitter Bootstrap 2.0●   www.responsinator.com
Some greatexamples.And best practices.
The day iscoming whereResponsive willbe the standardand not the exception.
Questions?(Speak up, plz.)
Thanks!@meetmicahwww.meetmicah.comSee you on Facebook!
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Responsive Design: The "other" way of doing mobile sites.
Upcoming SlideShare
Loading in …5
×

Responsive Design: The "other" way of doing mobile sites.

762 views

Published on

A lot of folks are using jQuery Mobile for mobile websites, but are there better ways? Responsive design has taken the web world by storm the last couple of years, and here we compare the two methods and give examples of how Responsive Design using HTML and CSS shines.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
762
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design: The "other" way of doing mobile sites.

  1. 1. ResponsiveDesignThe "other" way of doing mobile sites.
  2. 2. WhyResponsive?More appropriately: Why mobile?
  3. 3. Creating Mobile Websites 5-7 years ago:
  4. 4. In 2007, web designers everywhere said, "Oh, (bleep)."
  5. 5. "By 2013, mobile phones will overtakePCs as the most common Web accessdevice worldwide."Garter Research, 2010http://www.gartner.com/it/page.jsp?id=1278413
  6. 6. Tweetable Stats:http://goo.gl/4uy66It takes 90 minutes for the average person to respond to anemail. It takes 90 seconds for the average person torespond to a text message. (Source: CTIA.org)70% of all mobile searches result in action within 1 hour.(Source: Mobile Marketer)Mobile coupons get 10 times the redemption rate oftraditional coupons. (Source: Borrell Associates)91% of all U.S. citizens have their mobile device withinreach 24/7. (Source: Morgan Stanley)
  7. 7. Reality hits you hard, bro.
  8. 8. Whats thesolution?
  9. 9. "Responsive" vs"Adaptive"
  10. 10. CSS vs jQueryMobile?
  11. 11. jQuery MobilePros: Cons:● Easy & Fast ● Too familiar?● Familiar Framework ● Design restrictions● Native-ish UI ● Doesnt push innovation● Consistent UI● Stable & Ongoing
  12. 12. CSS-based Responsive DesignPros:● Based on browser-size● Provides consistent UI across all devices.● IE bugs dont matter! (yet)
  13. 13. CSS-based Responsive DesignCons:There are NO CONS. Responsive Designrawks and anyone who disagrees can go die ina fire.
  14. 14. CSS-based Responsive DesignCons:● New territory in CSS.● Requires a lot more research.● Forced to attempt to solve an infinite number of scenarios.
  15. 15. Responsive Design DefinedThe idea behind a responsive design is tocreate a pleasant experience for your websiteor web-app across all devices.
  16. 16. Responsive Design DefinedYou are not trying to create a *unique*experience on any one device (except possiblythe desktop).
  17. 17. Responsive Design DefinedThe goal of a responsive design should be tooptimize the experience for as many devices asyou can.
  18. 18. Developing astrategy.
  19. 19. Mobile first?Depends.
  20. 20. "Whos youraudience?"Which platform has the most value?
  21. 21. "If I had eight hours to chop downa tree, Id spend six sharpeningmy axe."Abraham Lincoln
  22. 22. Re-learning badhabits.Sorry, that shouldve been re-learning OLDhabits. Old, not bad.
  23. 23. Percentagebased design.Ah, the good old days.
  24. 24. Font-sizing.Everything you know is wrong.
  25. 25. Font-sizing options:● Use pixels (good.)● Use EMs (meh.)● Use REMs (best?)
  26. 26. Layout options.Its either mobile or its not.
  27. 27. The God AdAKA: The thing that almost killed the project.
  28. 28. You mean the user has tosee an ad every time anew page loads?
  29. 29. It scrolls down to the first listing!Click the "next"button...
  30. 30. The CodeIts not as hard as you might think...
  31. 31. The CSS:.god.ad {display: none} /*Hide God Ad by default*/@media screen and (max-width:980px) { .god.ad { display: block; margin: 0 auto; } .pencilHeader {display: none} .right.container {display: none}
  32. 32. CSS (contd):.wrapper {width: auto !important;}.left.container {float: none;margin: 0 auto;width: 95%}.header {width: 100%;margin: 0 auto;float: none;background-position: right 8px;}
  33. 33. The tools.Some are better than others.
  34. 34. The Tools:● Mobilizer● Your browser (Chrome is Better than FF)
  35. 35. The Tools:● Mobilizer● Your browser (Chrome is Better than FF)● Twitter Bootstrap 2.0● www.responsinator.com
  36. 36. Some greatexamples.And best practices.
  37. 37. The day iscoming whereResponsive willbe the standardand not the exception.
  38. 38. Questions?(Speak up, plz.)
  39. 39. Thanks!@meetmicahwww.meetmicah.comSee you on Facebook!

×