Responsive Design: The "other" way of doing mobile sites.
description
Transcript of Responsive Design: The "other" way of doing mobile sites.
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!