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.

7. Dude. That sounds great. Friday, November 5, 2010

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

10. Most mobile phones are terrible HTTP://WWW.FLICKR.COM/PHOTOS/NOTIONSCAPITAL/869847216 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 speciﬁcally targeting Webkit and you’re trying to use ﬂoats 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 speciﬁcally targeting Webkit and you’re trying to use ﬂoats 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 speciﬁcally targeting Webkit and you’re trying to use ﬂoats 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 speciﬁcally targeting Webkit and you’re trying to use ﬂoats 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 snifﬁng. 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 snifﬁng. 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 snifﬁng. 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 snifﬁng. 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://wurﬂ.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: Proﬁt 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 ﬁnd, 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 ﬁnd, 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 ﬁnd, 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 ﬁnd, 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 ﬁnd, 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 ﬁgure 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-preﬁxed awesomeness to the iPhone, Android, etc.

59. Conclusion: Simple steps to mobile glory Know your audience. Friday, November 5, 2010 Take the time to ﬁgure 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-preﬁxed 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 ﬁgure 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-preﬁxed 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 ﬁgure 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-preﬁxed 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 ﬁgure 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-preﬁxed awesomeness to the iPhone, Android, etc.

63. Thanks. xoxo, matt. http://spkr8.com/t/4994 Friday, November 5, 2010

The Agony and Ecstasy of the Mobile Web

You are reading a preview.

Check these out next

The Agony and Ecstasy of the Mobile Web

More Related Content

Viewers also liked (10)

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

Recently uploaded (20)