SlideShare a Scribd company logo
The Agony & Ecstasy of the
Mobile Web
Matt Henry
Viget Labs
Friday, November 5, 2010
O Hai.
‣ Senior front-end developer at Viget Labs
‣ Ex-Yahoo! mobile
‣ @greenideas
‣ Friend to animals
Friday, November 5, 2010
Why develop for
mobile?
Friday, November 5, 2010
When you have a mobile site, users can access it wherever they are. If you make something
great--something that people want to use--your site or app can be a part of your users daily
lives in a way that a desktop webapp could never be. Where would Twitter be if people
couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF.
And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a
Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but
they don’t need to be. Anybody could build the browser-based Gowalla, and it would be
immedately usable by anybody on any device that supported geolocation.
And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you
had a great mobile site, you were ahead of the game. Now it’s status quo.
Why develop for
mobile?
‣ Your site in users’ pockets at all times
Friday, November 5, 2010
When you have a mobile site, users can access it wherever they are. If you make something
great--something that people want to use--your site or app can be a part of your users daily
lives in a way that a desktop webapp could never be. Where would Twitter be if people
couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF.
And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a
Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but
they don’t need to be. Anybody could build the browser-based Gowalla, and it would be
immedately usable by anybody on any device that supported geolocation.
And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you
had a great mobile site, you were ahead of the game. Now it’s status quo.
Why develop for
mobile?
‣ Your site in users’ pockets at all times
‣ You can do awesome things
Friday, November 5, 2010
When you have a mobile site, users can access it wherever they are. If you make something
great--something that people want to use--your site or app can be a part of your users daily
lives in a way that a desktop webapp could never be. Where would Twitter be if people
couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF.
And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a
Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but
they don’t need to be. Anybody could build the browser-based Gowalla, and it would be
immedately usable by anybody on any device that supported geolocation.
And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you
had a great mobile site, you were ahead of the game. Now it’s status quo.
Why develop for
mobile?
‣ Your site in users’ pockets at all times
‣ You can do awesome things
‣ You probably don’t have a choice at this point
Friday, November 5, 2010
When you have a mobile site, users can access it wherever they are. If you make something
great--something that people want to use--your site or app can be a part of your users daily
lives in a way that a desktop webapp could never be. Where would Twitter be if people
couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF.
And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a
Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but
they don’t need to be. Anybody could build the browser-based Gowalla, and it would be
immedately usable by anybody on any device that supported geolocation.
And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you
had a great mobile site, you were ahead of the game. Now it’s status quo.
Dude. That sounds
great.
Friday, November 5, 2010
Dude. That sounds
great.
‣ Yeah, it is. But it’s not all unicorns and rainbows...
Friday, November 5, 2010
YOU THOUGHT IE6 WAS BAD
HTTP://WWW.FLICKR.COM/PHOTOS/VOLANTRA/3406410663/
Friday, November 5, 2010
Most mobile
phones are
terrible
HTTP://WWW.FLICKR.COM/PHOTOS/NOTIONSCAPITAL/869847216
Friday, November 5, 2010
Developing for the mobile web
can be painful
*IE4 < 6.1.4 <= IE6
Friday, November 5, 2010
Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers,
you will literally wish you were working on IE6.
And if the browsers don’t get you, the carriers will.
AT&T & Rogers Tidy shenanigans.
Developing for the mobile web
can be painful
Most Windows phones ship with IE4. FOUR!*
*IE4 < 6.1.4 <= IE6
Friday, November 5, 2010
Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers,
you will literally wish you were working on IE6.
And if the browsers don’t get you, the carriers will.
AT&T & Rogers Tidy shenanigans.
Developing for the mobile web
can be painful
Most Windows phones ship with IE4. FOUR!*
Windows Phone 7 ships with (basically) IE7
*IE4 < 6.1.4 <= IE6
Friday, November 5, 2010
Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers,
you will literally wish you were working on IE6.
And if the browsers don’t get you, the carriers will.
AT&T & Rogers Tidy shenanigans.
Developing for the mobile web
can be painful
Most Windows phones ship with IE4. FOUR!*
Windows Phone 7 ships with (basically) IE7
Many Blackberries have CSS/JS turned off by
default
*IE4 < 6.1.4 <= IE6
Friday, November 5, 2010
Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers,
you will literally wish you were working on IE6.
And if the browsers don’t get you, the carriers will.
AT&T & Rogers Tidy shenanigans.
Developing for the mobile web
can be painful
Most Windows phones ship with IE4. FOUR!*
Windows Phone 7 ships with (basically) IE7
Many Blackberries have CSS/JS turned off by
default
Openwave and Symbian and Netfront, oh my.
*IE4 < 6.1.4 <= IE6
Friday, November 5, 2010
Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers,
you will literally wish you were working on IE6.
And if the browsers don’t get you, the carriers will.
AT&T & Rogers Tidy shenanigans.
Standards vs. Pragmatism
Friday, November 5, 2010
Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see
them, but they’re out there.
If you can get away with using tables for layout, do it! If you’re not specifically targeting
Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If
tables work in the browsers your working on, use them and get on with your life.
We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection
to target code only to browsers that can use it. But some devices (such as some old Sony-
Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of
your code on every request and let the browser sort it out: best case scenario, you’re sending
too much code to browsers that can’t use it, and making page loads way longer than they
need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old
page.
Standards vs. Pragmatism
Mobile development means doing a lot of things
you've previously considered icky and wrong.
Friday, November 5, 2010
Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see
them, but they’re out there.
If you can get away with using tables for layout, do it! If you’re not specifically targeting
Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If
tables work in the browsers your working on, use them and get on with your life.
We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection
to target code only to browsers that can use it. But some devices (such as some old Sony-
Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of
your code on every request and let the browser sort it out: best case scenario, you’re sending
too much code to browsers that can’t use it, and making page loads way longer than they
need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old
page.
Standards vs. Pragmatism
Mobile development means doing a lot of things
you've previously considered icky and wrong.
Really simple markup just doesn’t work on some
old devices.
Friday, November 5, 2010
Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see
them, but they’re out there.
If you can get away with using tables for layout, do it! If you’re not specifically targeting
Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If
tables work in the browsers your working on, use them and get on with your life.
We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection
to target code only to browsers that can use it. But some devices (such as some old Sony-
Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of
your code on every request and let the browser sort it out: best case scenario, you’re sending
too much code to browsers that can’t use it, and making page loads way longer than they
need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old
page.
Standards vs. Pragmatism
Mobile development means doing a lot of things
you've previously considered icky and wrong.
Really simple markup just doesn’t work on some
old devices.
Tables. For layout. Srsly.
Friday, November 5, 2010
Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see
them, but they’re out there.
If you can get away with using tables for layout, do it! If you’re not specifically targeting
Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If
tables work in the browsers your working on, use them and get on with your life.
We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection
to target code only to browsers that can use it. But some devices (such as some old Sony-
Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of
your code on every request and let the browser sort it out: best case scenario, you’re sending
too much code to browsers that can’t use it, and making page loads way longer than they
need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old
page.
Standards vs. Pragmatism
Mobile development means doing a lot of things
you've previously considered icky and wrong.
Really simple markup just doesn’t work on some
old devices.
Tables. For layout. Srsly.
User-agent sniffing is the only thing that works
Friday, November 5, 2010
Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see
them, but they’re out there.
If you can get away with using tables for layout, do it! If you’re not specifically targeting
Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If
tables work in the browsers your working on, use them and get on with your life.
We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection
to target code only to browsers that can use it. But some devices (such as some old Sony-
Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of
your code on every request and let the browser sort it out: best case scenario, you’re sending
too much code to browsers that can’t use it, and making page loads way longer than they
need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old
page.
So how do I do it right?
Friday, November 5, 2010
Know your audience
Friday, November 5, 2010
Know your audience
Who uses your site?
Friday, November 5, 2010
Know your audience
Who uses your site?
Who doesn't use your site?
Emerging markets?
People with accessibility needs?
Friday, November 5, 2010
Know your audience
Who uses your site?
Who doesn't use your site?
Emerging markets?
People with accessibility needs?
Are they not using it because they can’t?
Friday, November 5, 2010
Know your audience
Who uses your site?
Who doesn't use your site?
Emerging markets?
People with accessibility needs?
Are they not using it because they can’t?
Always know what you’re leaving on the table.
Friday, November 5, 2010
Know Your Audience’s Phone
Friday, November 5, 2010
So once you have a good idea of who you’re targeting, you want to try to get a sense for what
kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay
to get data that may or may not be more relevant to you.
Once you know what phones your users have, you might want to try to get a sense for how
bad the browsers are on those phones, so you can begin to map out your development
strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short
version is basically anything that’s not a Webkit phone is going to be a total nightmare.
Know Your Audience’s Phone
What devices do your users have? http://
metrics.admob.com/
Friday, November 5, 2010
So once you have a good idea of who you’re targeting, you want to try to get a sense for what
kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay
to get data that may or may not be more relevant to you.
Once you know what phones your users have, you might want to try to get a sense for how
bad the browsers are on those phones, so you can begin to map out your development
strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short
version is basically anything that’s not a Webkit phone is going to be a total nightmare.
Know Your Audience’s Phone
What devices do your users have? http://
metrics.admob.com/
How bad do those devices suck? http://
jquerymobile.com/gbs/
Friday, November 5, 2010
So once you have a good idea of who you’re targeting, you want to try to get a sense for what
kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay
to get data that may or may not be more relevant to you.
Once you know what phones your users have, you might want to try to get a sense for how
bad the browsers are on those phones, so you can begin to map out your development
strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short
version is basically anything that’s not a Webkit phone is going to be a total nightmare.
TAILOR THE EXPERIENCE TO THE DEVICE
HTTP://WWW.FLICKR.COM/PHOTOS/BLMURCH/335988192/
Friday, November 5, 2010
FLICKR, TWO WAYS
Friday, November 5, 2010
Targeting Devices
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
Targeting Devices
Media queries?
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
Targeting Devices
Media queries?
User agent sniffing.
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
Targeting Devices
Media queries?
User agent sniffing.
On mobile, it pretty much works.
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
Targeting Devices
Media queries?
User agent sniffing.
On mobile, it pretty much works.
Also, it’s not like you have a choice.
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
Targeting Devices
Media queries?
User agent sniffing.
On mobile, it pretty much works.
Also, it’s not like you have a choice.
Lastly, there are tools out there that take (some) of
the pain out of this stuff.
Friday, November 5, 2010
So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that,
during the browser wars, there was a user-agent arms race between browser vendors that
resulted in all of the vendors having pretty similar user-agent strings (hence IE having
“Mozilla” in its user-agent string. WTH?).
The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about
differentiating them, even between different versions of a single browser.
The right tool for the job
WURFL (http://wurfl.sourceforge.net/)
DeviceAtlas (http://deviceatlas.com/)
Yahoo! BluePrint (http://mobile.yahoo.com/
devcenter)
Friday, November 5, 2010
WURFL: FOSS, updated regularly, pretty good data
DeviceAtlas: Not free, but cool if you don’t want to host your own data or build your own
http://www.flickr.com/photos/sergemelki/2612516723/
Friday, November 5, 2010
So there are these great tools out there, how do you leverage them?
WHAT DOES
IT MEAN?
http://www.flickr.com/photos/sergemelki/2612516723/
Friday, November 5, 2010
So there are these great tools out there, how do you leverage them?
Now what?
Friday, November 5, 2010
It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now
come up with the minimum viable site that can render on pretty much any device, and
because we’re using WURFL or equivalent, we can always know that our content is visible on
every device we care about. So what’s next?
Now what?
1.Get the user agent
Friday, November 5, 2010
It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now
come up with the minimum viable site that can render on pretty much any device, and
because we’re using WURFL or equivalent, we can always know that our content is visible on
every device we care about. So what’s next?
Now what?
1.Get the user agent
2.Look up the device capabilities
Friday, November 5, 2010
It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now
come up with the minimum viable site that can render on pretty much any device, and
because we’re using WURFL or equivalent, we can always know that our content is visible on
every device we care about. So what’s next?
Now what?
1.Get the user agent
2.Look up the device capabilities
3.Serve up the right content for the right device
Friday, November 5, 2010
It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now
come up with the minimum viable site that can render on pretty much any device, and
because we’re using WURFL or equivalent, we can always know that our content is visible on
every device we care about. So what’s next?
if (device.doesntSuck) {
<script src=”hottness.js” type=”text/
javascript”></script>
} else {
// Don’t send scripts that old/bad phones
// can’t use
}
Friday, November 5, 2010
Step 3: Profit
Friday, November 5, 2010
WebKit. Also, WebKit.
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
WebKit. Also, WebKit.
HTML5, CSS3, OMG!1!
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
WebKit. Also, WebKit.
HTML5, CSS3, OMG!1!
Geolocation
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
WebKit. Also, WebKit.
HTML5, CSS3, OMG!1!
Geolocation
Accessibility
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
WebKit. Also, WebKit.
HTML5, CSS3, OMG!1!
Geolocation
Accessibility
Basically, the life of the world to come.
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
WebKit. Also, WebKit.
HTML5, CSS3, OMG!1!
Geolocation
Accessibility
Basically, the life of the world to come.
Friday, November 5, 2010
Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and
for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously
iOS and Android are based on WebKit, and those make up a huge part of the smartphone
market. But pretty much every phone that isn’t made by Microsoft these days is betting on
WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone
with a Mozilla browser installed.
$(‘.mobile-framework’).die()
Friday, November 5, 2010
If you’re a developer or a designer or even a project manager who has to work with
developers and designers, you’re probably saying “so what’s the framework I use for making
great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right
question, in case you were wondering, is “do I even need a framework at all”, and the answer
I think is almost always “no”. Think about the things we usually use frameworks to handle in
desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t
problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra
javascript that you’re not using, and is duplicating functionality that’s already built into the
browser, you lose and your users who have to sit around waiting for jQuery to download lose.
If anything, grab the lightest weight framework you can find, one that gives you just the
tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your
own. It’s easy now.
$(‘.mobile-framework’).die()
Fancy selector engine? Try querySelector();
Friday, November 5, 2010
If you’re a developer or a designer or even a project manager who has to work with
developers and designers, you’re probably saying “so what’s the framework I use for making
great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right
question, in case you were wondering, is “do I even need a framework at all”, and the answer
I think is almost always “no”. Think about the things we usually use frameworks to handle in
desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t
problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra
javascript that you’re not using, and is duplicating functionality that’s already built into the
browser, you lose and your users who have to sit around waiting for jQuery to download lose.
If anything, grab the lightest weight framework you can find, one that gives you just the
tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your
own. It’s easy now.
$(‘.mobile-framework’).die()
Fancy selector engine? Try querySelector();
Effects? How about -webkit-transition
Friday, November 5, 2010
If you’re a developer or a designer or even a project manager who has to work with
developers and designers, you’re probably saying “so what’s the framework I use for making
great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right
question, in case you were wondering, is “do I even need a framework at all”, and the answer
I think is almost always “no”. Think about the things we usually use frameworks to handle in
desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t
problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra
javascript that you’re not using, and is duplicating functionality that’s already built into the
browser, you lose and your users who have to sit around waiting for jQuery to download lose.
If anything, grab the lightest weight framework you can find, one that gives you just the
tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your
own. It’s easy now.
$(‘.mobile-framework’).die()
Fancy selector engine? Try querySelector();
Effects? How about -webkit-transition
Iron out X-browser quirks? Srsly, it’s all WebKit
Friday, November 5, 2010
If you’re a developer or a designer or even a project manager who has to work with
developers and designers, you’re probably saying “so what’s the framework I use for making
great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right
question, in case you were wondering, is “do I even need a framework at all”, and the answer
I think is almost always “no”. Think about the things we usually use frameworks to handle in
desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t
problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra
javascript that you’re not using, and is duplicating functionality that’s already built into the
browser, you lose and your users who have to sit around waiting for jQuery to download lose.
If anything, grab the lightest weight framework you can find, one that gives you just the
tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your
own. It’s easy now.
$(‘.mobile-framework’).die()
Fancy selector engine? Try querySelector();
Effects? How about -webkit-transition
Iron out X-browser quirks? Srsly, it’s all WebKit
What else?
Friday, November 5, 2010
If you’re a developer or a designer or even a project manager who has to work with
developers and designers, you’re probably saying “so what’s the framework I use for making
great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right
question, in case you were wondering, is “do I even need a framework at all”, and the answer
I think is almost always “no”. Think about the things we usually use frameworks to handle in
desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t
problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra
javascript that you’re not using, and is duplicating functionality that’s already built into the
browser, you lose and your users who have to sit around waiting for jQuery to download lose.
If anything, grab the lightest weight framework you can find, one that gives you just the
tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your
own. It’s easy now.
Conclusion: Simple
steps to mobile glory
Friday, November 5, 2010
Take the time to figure out who’s using your site and who isn’t using it that you’d like to be.
Everything else starts from those data.
Once you start building, target the right content to the right device.
Send the bare minimum markup & style for your site to low-end phones.
Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone,
Android, etc.
Conclusion: Simple
steps to mobile glory
Know your audience.
Friday, November 5, 2010
Take the time to figure out who’s using your site and who isn’t using it that you’d like to be.
Everything else starts from those data.
Once you start building, target the right content to the right device.
Send the bare minimum markup & style for your site to low-end phones.
Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone,
Android, etc.
Conclusion: Simple
steps to mobile glory
Know your audience.
Browsers: Divide & Conquer.
Friday, November 5, 2010
Take the time to figure out who’s using your site and who isn’t using it that you’d like to be.
Everything else starts from those data.
Once you start building, target the right content to the right device.
Send the bare minimum markup & style for your site to low-end phones.
Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone,
Android, etc.
Conclusion: Simple
steps to mobile glory
Know your audience.
Browsers: Divide & Conquer.
Make awesome things with WebKit.
Friday, November 5, 2010
Take the time to figure out who’s using your site and who isn’t using it that you’d like to be.
Everything else starts from those data.
Once you start building, target the right content to the right device.
Send the bare minimum markup & style for your site to low-end phones.
Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone,
Android, etc.
Conclusion: Simple
steps to mobile glory
Know your audience.
Browsers: Divide & Conquer.
Make awesome things with WebKit.
Bonus: ditch your framework.
Friday, November 5, 2010
Take the time to figure out who’s using your site and who isn’t using it that you’d like to be.
Everything else starts from those data.
Once you start building, target the right content to the right device.
Send the bare minimum markup & style for your site to low-end phones.
Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone,
Android, etc.
Thanks.
xoxo, matt. http://spkr8.com/t/4994
Friday, November 5, 2010

More Related Content

Viewers also liked

Group project.weeks.blake.johnson
Group project.weeks.blake.johnsonGroup project.weeks.blake.johnson
Group project.weeks.blake.johnson
mblake67
 
Faktor risiko persalinan preterm
Faktor risiko persalinan pretermFaktor risiko persalinan preterm
Faktor risiko persalinan preterm
Sofie Krisnadi
 
Clase: Introducción a la Filogenia 2016
Clase: Introducción a la Filogenia 2016Clase: Introducción a la Filogenia 2016
Clase: Introducción a la Filogenia 2016
jpcachile
 
Bv dalam kehamilan
Bv dalam kehamilanBv dalam kehamilan
Bv dalam kehamilan
Sofie Krisnadi
 
Top 10-violations-fy-16
Top 10-violations-fy-16Top 10-violations-fy-16
Top 10-violations-fy-16
John Newquist
 
The business of safety
The business of safetyThe business of safety
The business of safety
John Newquist
 
Diagnosis dan manajemen toksoplasmosis pada ibu hamil
Diagnosis dan manajemen toksoplasmosis pada ibu hamilDiagnosis dan manajemen toksoplasmosis pada ibu hamil
Diagnosis dan manajemen toksoplasmosis pada ibu hamil
Sofie Krisnadi
 
Fall Protection OSHA NEW General Industry 2017 standard
Fall Protection OSHA NEW General Industry 2017 standardFall Protection OSHA NEW General Industry 2017 standard
Fall Protection OSHA NEW General Industry 2017 standard
John Newquist
 
Osha update 2017
Osha update 2017Osha update 2017
Osha update 2017
John Newquist
 

Viewers also liked (10)

Group project.weeks.blake.johnson
Group project.weeks.blake.johnsonGroup project.weeks.blake.johnson
Group project.weeks.blake.johnson
 
Infeksi perinatal
Infeksi perinatalInfeksi perinatal
Infeksi perinatal
 
Faktor risiko persalinan preterm
Faktor risiko persalinan pretermFaktor risiko persalinan preterm
Faktor risiko persalinan preterm
 
Clase: Introducción a la Filogenia 2016
Clase: Introducción a la Filogenia 2016Clase: Introducción a la Filogenia 2016
Clase: Introducción a la Filogenia 2016
 
Bv dalam kehamilan
Bv dalam kehamilanBv dalam kehamilan
Bv dalam kehamilan
 
Top 10-violations-fy-16
Top 10-violations-fy-16Top 10-violations-fy-16
Top 10-violations-fy-16
 
The business of safety
The business of safetyThe business of safety
The business of safety
 
Diagnosis dan manajemen toksoplasmosis pada ibu hamil
Diagnosis dan manajemen toksoplasmosis pada ibu hamilDiagnosis dan manajemen toksoplasmosis pada ibu hamil
Diagnosis dan manajemen toksoplasmosis pada ibu hamil
 
Fall Protection OSHA NEW General Industry 2017 standard
Fall Protection OSHA NEW General Industry 2017 standardFall Protection OSHA NEW General Industry 2017 standard
Fall Protection OSHA NEW General Industry 2017 standard
 
Osha update 2017
Osha update 2017Osha update 2017
Osha update 2017
 

Similar to The Agony and Ecstasy of the Mobile Web

Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
Scotty Logan
 
UXPA Dallas - Google Analytics and What's Before Mobile First
UXPA Dallas - Google Analytics and What's Before Mobile FirstUXPA Dallas - Google Analytics and What's Before Mobile First
UXPA Dallas - Google Analytics and What's Before Mobile First
Ken Tabor
 
Opera Mini
Opera MiniOpera Mini
Opera Mini
Wired Media
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4
cherihoke33
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
Peter-Paul Koch
 
Head first android_development
Head first android_developmentHead first android_development
Head first android_development
Karthika Srinivasan
 
Responsive Web Design 101
Responsive Web Design 101Responsive Web Design 101
Responsive Web Design 101
jonnymilano
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle Desramaults
 
01 Mobile Jungle
01 Mobile Jungle01 Mobile Jungle
01 Mobile Jungle
Arief Gunawan
 
What I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard Way
Josh Jeffryes
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
Jonathan Stark
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
Future Insights
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
Deimantas Brandišauskas
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
Mark Meeker
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Kevin Powell
 
Johnson stephanie mobile_presentation
Johnson stephanie mobile_presentationJohnson stephanie mobile_presentation
Johnson stephanie mobile_presentation
Stephanie Johnson
 
Henry mader project4_week4
Henry mader project4_week4Henry mader project4_week4
Henry mader project4_week4
Henry Mader
 
Future insights
Future insightsFuture insights
Future insights
Scott Jenson
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
X.commerce
 

Similar to The Agony and Ecstasy of the Mobile Web (20)

Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
UXPA Dallas - Google Analytics and What's Before Mobile First
UXPA Dallas - Google Analytics and What's Before Mobile FirstUXPA Dallas - Google Analytics and What's Before Mobile First
UXPA Dallas - Google Analytics and What's Before Mobile First
 
Opera Mini
Opera MiniOpera Mini
Opera Mini
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
 
Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
 
Head first android_development
Head first android_developmentHead first android_development
Head first android_development
 
Responsive Web Design 101
Responsive Web Design 101Responsive Web Design 101
Responsive Web Design 101
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
01 Mobile Jungle
01 Mobile Jungle01 Mobile Jungle
01 Mobile Jungle
 
What I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard Way
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
 
Johnson stephanie mobile_presentation
Johnson stephanie mobile_presentationJohnson stephanie mobile_presentation
Johnson stephanie mobile_presentation
 
Henry mader project4_week4
Henry mader project4_week4Henry mader project4_week4
Henry mader project4_week4
 
Future insights
Future insightsFuture insights
Future insights
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
 

Recently uploaded

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
LINUS PROJECTS (INDIA)
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 

Recently uploaded (20)

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 

The Agony and Ecstasy of the Mobile Web

  • 1. The Agony & Ecstasy of the Mobile Web Matt Henry Viget Labs Friday, November 5, 2010
  • 2. O Hai. ‣ Senior front-end developer at Viget Labs ‣ Ex-Yahoo! mobile ‣ @greenideas ‣ Friend to animals Friday, November 5, 2010
  • 3. Why develop for mobile? Friday, November 5, 2010 When you have a mobile site, users can access it wherever they are. If you make something great--something that people want to use--your site or app can be a part of your users daily lives in a way that a desktop webapp could never be. Where would Twitter be if people couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF. And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but they don’t need to be. Anybody could build the browser-based Gowalla, and it would be immedately usable by anybody on any device that supported geolocation. And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you had a great mobile site, you were ahead of the game. Now it’s status quo.
  • 4. Why develop for mobile? ‣ Your site in users’ pockets at all times Friday, November 5, 2010 When you have a mobile site, users can access it wherever they are. If you make something great--something that people want to use--your site or app can be a part of your users daily lives in a way that a desktop webapp could never be. Where would Twitter be if people couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF. And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but they don’t need to be. Anybody could build the browser-based Gowalla, and it would be immedately usable by anybody on any device that supported geolocation. And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you had a great mobile site, you were ahead of the game. Now it’s status quo.
  • 5. Why develop for mobile? ‣ Your site in users’ pockets at all times ‣ You can do awesome things Friday, November 5, 2010 When you have a mobile site, users can access it wherever they are. If you make something great--something that people want to use--your site or app can be a part of your users daily lives in a way that a desktop webapp could never be. Where would Twitter be if people couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF. And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but they don’t need to be. Anybody could build the browser-based Gowalla, and it would be immedately usable by anybody on any device that supported geolocation. And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you had a great mobile site, you were ahead of the game. Now it’s status quo.
  • 6. Why develop for mobile? ‣ Your site in users’ pockets at all times ‣ You can do awesome things ‣ You probably don’t have a choice at this point Friday, November 5, 2010 When you have a mobile site, users can access it wherever they are. If you make something great--something that people want to use--your site or app can be a part of your users daily lives in a way that a desktop webapp could never be. Where would Twitter be if people couldn’t tweet about the guy they just saw throwing up during the Giants “riots” in SF. And then there are the apps that simply couldn’t *be* without mobile. There wouldn’t be a Foursquare or Gowalla without mobile devices and geolocation. Yes those are native apps, but they don’t need to be. Anybody could build the browser-based Gowalla, and it would be immedately usable by anybody on any device that supported geolocation. And lastly, you can’t afford not to be doing mobile work at this point. Three years ago if you had a great mobile site, you were ahead of the game. Now it’s status quo.
  • 8. Dude. That sounds great. ‣ Yeah, it is. But it’s not all unicorns and rainbows... Friday, November 5, 2010
  • 9. YOU THOUGHT IE6 WAS BAD HTTP://WWW.FLICKR.COM/PHOTOS/VOLANTRA/3406410663/ Friday, November 5, 2010
  • 11. Developing for the mobile web can be painful *IE4 < 6.1.4 <= IE6 Friday, November 5, 2010 Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers, you will literally wish you were working on IE6. And if the browsers don’t get you, the carriers will. AT&T & Rogers Tidy shenanigans.
  • 12. Developing for the mobile web can be painful Most Windows phones ship with IE4. FOUR!* *IE4 < 6.1.4 <= IE6 Friday, November 5, 2010 Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers, you will literally wish you were working on IE6. And if the browsers don’t get you, the carriers will. AT&T & Rogers Tidy shenanigans.
  • 13. Developing for the mobile web can be painful Most Windows phones ship with IE4. FOUR!* Windows Phone 7 ships with (basically) IE7 *IE4 < 6.1.4 <= IE6 Friday, November 5, 2010 Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers, you will literally wish you were working on IE6. And if the browsers don’t get you, the carriers will. AT&T & Rogers Tidy shenanigans.
  • 14. Developing for the mobile web can be painful Most Windows phones ship with IE4. FOUR!* Windows Phone 7 ships with (basically) IE7 Many Blackberries have CSS/JS turned off by default *IE4 < 6.1.4 <= IE6 Friday, November 5, 2010 Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers, you will literally wish you were working on IE6. And if the browsers don’t get you, the carriers will. AT&T & Rogers Tidy shenanigans.
  • 15. Developing for the mobile web can be painful Most Windows phones ship with IE4. FOUR!* Windows Phone 7 ships with (basically) IE7 Many Blackberries have CSS/JS turned off by default Openwave and Symbian and Netfront, oh my. *IE4 < 6.1.4 <= IE6 Friday, November 5, 2010 Seriously, a lot of the time you spend troubleshooting front-end issues in mobile browsers, you will literally wish you were working on IE6. And if the browsers don’t get you, the carriers will. AT&T & Rogers Tidy shenanigans.
  • 16. Standards vs. Pragmatism Friday, November 5, 2010 Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see them, but they’re out there. If you can get away with using tables for layout, do it! If you’re not specifically targeting Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If tables work in the browsers your working on, use them and get on with your life. We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection to target code only to browsers that can use it. But some devices (such as some old Sony- Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of your code on every request and let the browser sort it out: best case scenario, you’re sending too much code to browsers that can’t use it, and making page loads way longer than they need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old page.
  • 17. Standards vs. Pragmatism Mobile development means doing a lot of things you've previously considered icky and wrong. Friday, November 5, 2010 Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see them, but they’re out there. If you can get away with using tables for layout, do it! If you’re not specifically targeting Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If tables work in the browsers your working on, use them and get on with your life. We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection to target code only to browsers that can use it. But some devices (such as some old Sony- Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of your code on every request and let the browser sort it out: best case scenario, you’re sending too much code to browsers that can’t use it, and making page loads way longer than they need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old page.
  • 18. Standards vs. Pragmatism Mobile development means doing a lot of things you've previously considered icky and wrong. Really simple markup just doesn’t work on some old devices. Friday, November 5, 2010 Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see them, but they’re out there. If you can get away with using tables for layout, do it! If you’re not specifically targeting Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If tables work in the browsers your working on, use them and get on with your life. We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection to target code only to browsers that can use it. But some devices (such as some old Sony- Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of your code on every request and let the browser sort it out: best case scenario, you’re sending too much code to browsers that can’t use it, and making page loads way longer than they need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old page.
  • 19. Standards vs. Pragmatism Mobile development means doing a lot of things you've previously considered icky and wrong. Really simple markup just doesn’t work on some old devices. Tables. For layout. Srsly. Friday, November 5, 2010 Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see them, but they’re out there. If you can get away with using tables for layout, do it! If you’re not specifically targeting Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If tables work in the browsers your working on, use them and get on with your life. We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection to target code only to browsers that can use it. But some devices (such as some old Sony- Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of your code on every request and let the browser sort it out: best case scenario, you’re sending too much code to browsers that can’t use it, and making page loads way longer than they need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old page.
  • 20. Standards vs. Pragmatism Mobile development means doing a lot of things you've previously considered icky and wrong. Really simple markup just doesn’t work on some old devices. Tables. For layout. Srsly. User-agent sniffing is the only thing that works Friday, November 5, 2010 Some phones will fail on rendering unordered lists. You’ll probably (hopefully!) never see them, but they’re out there. If you can get away with using tables for layout, do it! If you’re not specifically targeting Webkit and you’re trying to use floats and junk for layout, then you should GIVE UP NOW. If tables work in the browsers your working on, use them and get on with your life. We all know that user-agent sniffing is bad. So in desktop browsers we use feature detection to target code only to browsers that can use it. But some devices (such as some old Sony- Ericsson phones) will just crash if you send them a page bigger than 12k. If you send all of your code on every request and let the browser sort it out: best case scenario, you’re sending too much code to browsers that can’t use it, and making page loads way longer than they need to be. Worst case, you’re crashing some old Sony-Ericsson phone with your big old page.
  • 21. So how do I do it right? Friday, November 5, 2010
  • 22. Know your audience Friday, November 5, 2010
  • 23. Know your audience Who uses your site? Friday, November 5, 2010
  • 24. Know your audience Who uses your site? Who doesn't use your site? Emerging markets? People with accessibility needs? Friday, November 5, 2010
  • 25. Know your audience Who uses your site? Who doesn't use your site? Emerging markets? People with accessibility needs? Are they not using it because they can’t? Friday, November 5, 2010
  • 26. Know your audience Who uses your site? Who doesn't use your site? Emerging markets? People with accessibility needs? Are they not using it because they can’t? Always know what you’re leaving on the table. Friday, November 5, 2010
  • 27. Know Your Audience’s Phone Friday, November 5, 2010 So once you have a good idea of who you’re targeting, you want to try to get a sense for what kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay to get data that may or may not be more relevant to you. Once you know what phones your users have, you might want to try to get a sense for how bad the browsers are on those phones, so you can begin to map out your development strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short version is basically anything that’s not a Webkit phone is going to be a total nightmare.
  • 28. Know Your Audience’s Phone What devices do your users have? http:// metrics.admob.com/ Friday, November 5, 2010 So once you have a good idea of who you’re targeting, you want to try to get a sense for what kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay to get data that may or may not be more relevant to you. Once you know what phones your users have, you might want to try to get a sense for how bad the browsers are on those phones, so you can begin to map out your development strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short version is basically anything that’s not a Webkit phone is going to be a total nightmare.
  • 29. Know Your Audience’s Phone What devices do your users have? http:// metrics.admob.com/ How bad do those devices suck? http:// jquerymobile.com/gbs/ Friday, November 5, 2010 So once you have a good idea of who you’re targeting, you want to try to get a sense for what kinds of devices they’re using. Admob has decent data up on its blog for free, or you can pay to get data that may or may not be more relevant to you. Once you know what phones your users have, you might want to try to get a sense for how bad the browsers are on those phones, so you can begin to map out your development strategy. The jQuery Mobile Graded Browser Support chart is actually pretty good. The short version is basically anything that’s not a Webkit phone is going to be a total nightmare.
  • 30. TAILOR THE EXPERIENCE TO THE DEVICE HTTP://WWW.FLICKR.COM/PHOTOS/BLMURCH/335988192/ Friday, November 5, 2010
  • 31. FLICKR, TWO WAYS Friday, November 5, 2010
  • 32. Targeting Devices Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 33. Targeting Devices Media queries? Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 34. Targeting Devices Media queries? User agent sniffing. Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 35. Targeting Devices Media queries? User agent sniffing. On mobile, it pretty much works. Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 36. Targeting Devices Media queries? User agent sniffing. On mobile, it pretty much works. Also, it’s not like you have a choice. Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 37. Targeting Devices Media queries? User agent sniffing. On mobile, it pretty much works. Also, it’s not like you have a choice. Lastly, there are tools out there that take (some) of the pain out of this stuff. Friday, November 5, 2010 So one of the reasons we don’t do user-agent sniffing in desktop browsers anymore is that, during the browser wars, there was a user-agent arms race between browser vendors that resulted in all of the vendors having pretty similar user-agent strings (hence IE having “Mozilla” in its user-agent string. WTH?). The thing is, mobile user-agent strings are pretty rock-solid. Vendors are pretty good about differentiating them, even between different versions of a single browser.
  • 38. The right tool for the job WURFL (http://wurfl.sourceforge.net/) DeviceAtlas (http://deviceatlas.com/) Yahoo! BluePrint (http://mobile.yahoo.com/ devcenter) Friday, November 5, 2010 WURFL: FOSS, updated regularly, pretty good data DeviceAtlas: Not free, but cool if you don’t want to host your own data or build your own
  • 39. http://www.flickr.com/photos/sergemelki/2612516723/ Friday, November 5, 2010 So there are these great tools out there, how do you leverage them?
  • 40. WHAT DOES IT MEAN? http://www.flickr.com/photos/sergemelki/2612516723/ Friday, November 5, 2010 So there are these great tools out there, how do you leverage them?
  • 41. Now what? Friday, November 5, 2010 It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now come up with the minimum viable site that can render on pretty much any device, and because we’re using WURFL or equivalent, we can always know that our content is visible on every device we care about. So what’s next?
  • 42. Now what? 1.Get the user agent Friday, November 5, 2010 It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now come up with the minimum viable site that can render on pretty much any device, and because we’re using WURFL or equivalent, we can always know that our content is visible on every device we care about. So what’s next?
  • 43. Now what? 1.Get the user agent 2.Look up the device capabilities Friday, November 5, 2010 It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now come up with the minimum viable site that can render on pretty much any device, and because we’re using WURFL or equivalent, we can always know that our content is visible on every device we care about. So what’s next?
  • 44. Now what? 1.Get the user agent 2.Look up the device capabilities 3.Serve up the right content for the right device Friday, November 5, 2010 It’s that easy. So what have we just done? We’ve solved the bad browser problem. We can now come up with the minimum viable site that can render on pretty much any device, and because we’re using WURFL or equivalent, we can always know that our content is visible on every device we care about. So what’s next?
  • 45. if (device.doesntSuck) { <script src=”hottness.js” type=”text/ javascript”></script> } else { // Don’t send scripts that old/bad phones // can’t use } Friday, November 5, 2010
  • 46. Step 3: Profit Friday, November 5, 2010
  • 47. WebKit. Also, WebKit. Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 48. WebKit. Also, WebKit. HTML5, CSS3, OMG!1! Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 49. WebKit. Also, WebKit. HTML5, CSS3, OMG!1! Geolocation Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 50. WebKit. Also, WebKit. HTML5, CSS3, OMG!1! Geolocation Accessibility Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 51. WebKit. Also, WebKit. HTML5, CSS3, OMG!1! Geolocation Accessibility Basically, the life of the world to come. Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 52. WebKit. Also, WebKit. HTML5, CSS3, OMG!1! Geolocation Accessibility Basically, the life of the world to come. Friday, November 5, 2010 Now that we’ve dealt with the lame browsers, we can focus on the fun ones. Right now, and for the long-foreseeable future, the “fun” browsers all run WebKit under the hood. Obviously iOS and Android are based on WebKit, and those make up a huge part of the smartphone market. But pretty much every phone that isn’t made by Microsoft these days is betting on WebKit. And that includes Nokia, who so far have been the only manufacturer to ship a phone with a Mozilla browser installed.
  • 53. $(‘.mobile-framework’).die() Friday, November 5, 2010 If you’re a developer or a designer or even a project manager who has to work with developers and designers, you’re probably saying “so what’s the framework I use for making great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right question, in case you were wondering, is “do I even need a framework at all”, and the answer I think is almost always “no”. Think about the things we usually use frameworks to handle in desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra javascript that you’re not using, and is duplicating functionality that’s already built into the browser, you lose and your users who have to sit around waiting for jQuery to download lose. If anything, grab the lightest weight framework you can find, one that gives you just the tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your own. It’s easy now.
  • 54. $(‘.mobile-framework’).die() Fancy selector engine? Try querySelector(); Friday, November 5, 2010 If you’re a developer or a designer or even a project manager who has to work with developers and designers, you’re probably saying “so what’s the framework I use for making great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right question, in case you were wondering, is “do I even need a framework at all”, and the answer I think is almost always “no”. Think about the things we usually use frameworks to handle in desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra javascript that you’re not using, and is duplicating functionality that’s already built into the browser, you lose and your users who have to sit around waiting for jQuery to download lose. If anything, grab the lightest weight framework you can find, one that gives you just the tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your own. It’s easy now.
  • 55. $(‘.mobile-framework’).die() Fancy selector engine? Try querySelector(); Effects? How about -webkit-transition Friday, November 5, 2010 If you’re a developer or a designer or even a project manager who has to work with developers and designers, you’re probably saying “so what’s the framework I use for making great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right question, in case you were wondering, is “do I even need a framework at all”, and the answer I think is almost always “no”. Think about the things we usually use frameworks to handle in desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra javascript that you’re not using, and is duplicating functionality that’s already built into the browser, you lose and your users who have to sit around waiting for jQuery to download lose. If anything, grab the lightest weight framework you can find, one that gives you just the tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your own. It’s easy now.
  • 56. $(‘.mobile-framework’).die() Fancy selector engine? Try querySelector(); Effects? How about -webkit-transition Iron out X-browser quirks? Srsly, it’s all WebKit Friday, November 5, 2010 If you’re a developer or a designer or even a project manager who has to work with developers and designers, you’re probably saying “so what’s the framework I use for making great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right question, in case you were wondering, is “do I even need a framework at all”, and the answer I think is almost always “no”. Think about the things we usually use frameworks to handle in desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra javascript that you’re not using, and is duplicating functionality that’s already built into the browser, you lose and your users who have to sit around waiting for jQuery to download lose. If anything, grab the lightest weight framework you can find, one that gives you just the tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your own. It’s easy now.
  • 57. $(‘.mobile-framework’).die() Fancy selector engine? Try querySelector(); Effects? How about -webkit-transition Iron out X-browser quirks? Srsly, it’s all WebKit What else? Friday, November 5, 2010 If you’re a developer or a designer or even a project manager who has to work with developers and designers, you’re probably saying “so what’s the framework I use for making great WebKit sites?” In my opinion, that’s the totally wrong question to ask. The right question, in case you were wondering, is “do I even need a framework at all”, and the answer I think is almost always “no”. Think about the things we usually use frameworks to handle in desktop web applications: Selectors, Effects, and Cross-browser bugs. These just aren’t problems in today’s mobile webkit browsers. When you add 22 or even 12k of extra javascript that you’re not using, and is duplicating functionality that’s already built into the browser, you lose and your users who have to sit around waiting for jQuery to download lose. If anything, grab the lightest weight framework you can find, one that gives you just the tiniest bit of sugar around making ajax calls and using CSS transitions. Better yet, write your own. It’s easy now.
  • 58. Conclusion: Simple steps to mobile glory Friday, November 5, 2010 Take the time to figure out who’s using your site and who isn’t using it that you’d like to be. Everything else starts from those data. Once you start building, target the right content to the right device. Send the bare minimum markup & style for your site to low-end phones. Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone, Android, etc.
  • 59. Conclusion: Simple steps to mobile glory Know your audience. Friday, November 5, 2010 Take the time to figure out who’s using your site and who isn’t using it that you’d like to be. Everything else starts from those data. Once you start building, target the right content to the right device. Send the bare minimum markup & style for your site to low-end phones. Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone, Android, etc.
  • 60. Conclusion: Simple steps to mobile glory Know your audience. Browsers: Divide & Conquer. Friday, November 5, 2010 Take the time to figure out who’s using your site and who isn’t using it that you’d like to be. Everything else starts from those data. Once you start building, target the right content to the right device. Send the bare minimum markup & style for your site to low-end phones. Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone, Android, etc.
  • 61. Conclusion: Simple steps to mobile glory Know your audience. Browsers: Divide & Conquer. Make awesome things with WebKit. Friday, November 5, 2010 Take the time to figure out who’s using your site and who isn’t using it that you’d like to be. Everything else starts from those data. Once you start building, target the right content to the right device. Send the bare minimum markup & style for your site to low-end phones. Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone, Android, etc.
  • 62. Conclusion: Simple steps to mobile glory Know your audience. Browsers: Divide & Conquer. Make awesome things with WebKit. Bonus: ditch your framework. Friday, November 5, 2010 Take the time to figure out who’s using your site and who isn’t using it that you’d like to be. Everything else starts from those data. Once you start building, target the right content to the right device. Send the bare minimum markup & style for your site to low-end phones. Send your bleeding-edge HTML5, CSS3, vendor-prefixed awesomeness to the iPhone, Android, etc.