Embed Size (px)
DESCRIPTION
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.
Citation preview
Responsive DesignThe "other" way of doing mobile sites.
Why Responsive?More appropriately: Why mobile?
Creating Mobile Websites 5-7 years ago:
In 2007, web designers everywhere said, "Oh, (bleep)."
"By 2013, mobile phones will overtake PCs as the most common Web access device worldwide."
Garter Research, 2010http://www.gartner.com/it/page.jsp?id=1278413
Tweetable Stats:http://goo.gl/4uy66
It takes 90 minutes for the average person to respond to an email. It takes 90 seconds for the average person to respond 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 of traditional coupons. (Source: Borrell Associates) 91% of all U.S. citizens have their mobile device within reach 24/7. (Source: Morgan Stanley)
Reality hits you hard, bro.
What's the solution?
"Responsive" vs "Adaptive"
CSS vs jQuery Mobile?
jQuery Mobile
Pros:● Easy & Fast● Familiar Framework● Native-ish UI● Consistent UI● Stable & Ongoing
Cons:● Too familiar?● Design restrictions● Doesn't push innovation
CSS-based Responsive Design
Pros:● Based on browser-size● Provides consistent UI across all devices.● IE bugs don't matter! (yet)
CSS-based Responsive Design
Cons:There are NO CONS. Responsive Design rawks and anyone who disagrees can go die in a fire.
CSS-based Responsive Design
Cons:● New territory in CSS.● Requires a lot more research.● Forced to attempt to solve an infinite number
of scenarios.
Responsive Design Defined
The idea behind a responsive design is to create a pleasant experience for your website or web-app across all devices.
Responsive Design Defined
You are not trying to create a *unique* experience on any one device (except possibly the desktop).
Responsive Design Defined
The goal of a responsive design should be to optimize the experience for as many devices as you can.
Developing a strategy.
Mobile first?Depends.
"Who's your audience?"Which platform has the most value?
"If I had eight hours to chop down a tree, I'd spend six sharpening my axe."Abraham Lincoln
Re-learning bad habits.Sorry, that should've been re-learning OLD habits. Old, not bad.
Percentage based 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.It's either mobile or it's not.
The God AdAKA: The thing that almost killed the project.
You mean the user has to see an ad every time a new page loads?
It scrolls down to the first listing!
Click the "next" button...
The CodeIt's 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: block; margin: 0 auto; } .pencilHeader {display: none} .right.container {display: none}
CSS (cont'd):
.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;}
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 great examples.And best practices.
The day is coming where Responsive will be the standardand not the exception.
Questions?(Speak up, plz.)
[email protected] you on Facebook!
