Download - Native is easy. Mobile web is freaking hard
![Page 1: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/dnorman/3732851541/
![Page 2: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/2.jpg)
@grigs
bit.ly/grigs_wdx2011
![Page 3: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/gurana/3976626644/
I’m a mobile web advocate.
![Page 4: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/silipo/378476114/
21%of Google’s largest advertisers
have mobile web sites.
Only
![Page 5: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/silipo/378476114/
21%of Google’s largest advertisers
have mobile web sites.
Only
Why?
![Page 6: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/6.jpg)
I told myself it was the reality distortion !eld.
![Page 7: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/7.jpg)
I was fooling myself. Mobile web is freaking hard.
![Page 8: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/kjgarbutt/5586656028/
Reasons WhyNative is Easier
![Page 9: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/9.jpg)
1. Native is Easier to Sell
http://www.flickr.com/photos/vegaseddie/2668299674/
![Page 10: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/10.jpg)
Get a lot of email from this guy...http://www.flickr.com/photos/corbett3000/2327165138/in/set-72157604094629546/
![Page 11: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/11.jpg)
HTML5 apps
Right now nobody’s interested in a mobile solution that does notcontain the words “iPhone” and “app” and that is not submitted toa closed environment where it competes with approximately 2,437similar mobile solutions.
Compared to the current crop of mobile clients and developers, lemmingsmarching off a cliff follow a solid, sensible strategy. Startling them out of thisobsession requires nothing short of a new buzzword.
Therefore I’d like to re-brand standards-based mobile websites andapplications, definitely including W3C Widgets, as “HTML5 apps.” Peopleoutside our little technical circle are already aware of the existence ofHTML5, and I don’t think it needs much of an effort to elevate it to fullbuzzwordiness.
Technically, HTML5 apps would encompass all websites as well as all themyriads of (usually locally installed) web-standards-based applicationsystems on mobile. The guiding principle would be to write and maintain onesingle core application that uses web standards, as well as a mechanism thatdeploys that core application across a wide range of platforms.
What are HTML5 apps?
HTML5 apps
1. have one single core application;
2. are written with web standards, primarily HTML, CSS, and JavaScript;
3. and are deployed on more than one mobile platform.
Written on 8 March 2010
Categorized in HTML5, HTML5 apps
Previous entry: Fronteers 2010
Next entry: The payment argument isnonsense
This is the blog of Peter-Paul Koch, mobileplatform strategist, consultant, and trainer.You can also follow him on Twitter.
Atom RSS
Categories:
Homepage
Archives (1)
Browsers (7)
Coding techniques (14)
Conferences (80)
Content (51)
HTML5 (6)
Linkbait (1)
Mobile (23)
Site (23)
Theory (18)
show page contentsshow site navigation
Mobilism 2011, 12th and 13th of May, Amsterdam
Compatibility
QuirksBlog
Mobile
About
sitemap contact
Search QuirksMode.org Search
Page last changed 3 months ago
Maybe we should build buzz around HTML5 apps
![Page 12: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/12.jpg)
asymcoHorace Dediu
© 2011 Twitter About Us Contact Blog Status Resources API Business Help Jobs Terms Privacy
Login Join Twitter!
Impressed that the Web finds itnecessary to "fight back againstFlipboard" http://bit.ly/dZqxf97:13 AM Feb 27th via bitlyRetweeted by 8 people
Why are we !ghting native apps?
![Page 13: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/13.jpg)
NativeSellsItself
We remember when the web
was the source of irrational
exuberance.
![Page 14: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/pricklebush/224674200/
Let me share our secret for selling mobile web.
![Page 15: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/15.jpg)
Email Gallery Free Email Templates Email Marketing Companies Submit
Advertise Here Advertise Here
Column Type of Email Type of Business Color POPULARITY RESET
Hyundai USA Newsletter 3 Alertful Newsletter 2 Divine Chocolate Newsletter 2
Does your company send email to customers?
http://www.email-gallery.com
![Page 16: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/16.jpg)
Does your company participate in social media?
http://www.flickr.com/photos/intersectionconsulting/5177773774/
![Page 17: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/17.jpg)
Links don’t open apps
http://www.flickr.com/photos/mattimattila/4001221570/
![Page 18: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/18.jpg)
The ‘U’ in URL stands for Universal*
* it actually stands for ‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/
![Page 19: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/19.jpg)
2. Native is Easier to Design
![Page 20: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/20.jpg)
Lots of resources for native app design.
![Page 21: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/21.jpg)
Fewer for mobile web, but they exist.
![Page 22: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/22.jpg)
But the examples mostly look like iPhone apps.
![Page 23: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/23.jpg)
Does an Android user expect iPhone UI conventions?
![Page 24: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/24.jpg)
Do we adjust UI for different geographies?
![Page 25: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/25.jpg)
What is the uniquely mobile web experience?
http://www.flickr.com/photos/nickwheeleroz/2212101890/in/photostream/
![Page 26: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/26.jpg)
First uniquely mobile web UI? Pull down menus?
![Page 27: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/27.jpg)
![Page 28: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/28.jpg)
![Page 29: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/29.jpg)
Tools don’t make people designers.
![Page 30: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/30.jpg)
3. Native is Easier to Test
![Page 31: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/31.jpg)
From the beginning, we have wanted to make Angry Birds available for every feasible Android device... We tested the game extensively on a large number of devices, and gathered all the feedback we received from our beta testing to address every possible issue.
So far, we have hesitated to create multiple versions of Angry Birds for the Android platform. But judging by the feedback we have received, we feel that by providing a lightweight solution, we are doing a favour for our fans.
http://www.rovio.com/index.php?mact=Blogs,cntnt01,showentry,0&cntnt01entryid=47&cntnt01returnid=58
Even Most Successful Developers Facethe Challenge of Testing on Enough Devices
![Page 32: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/32.jpg)
Mobile web developers face:
OS fragmentation
Webkit fragmentation
Browser fragmentation
Inconsistent standards support
Carrier transcoding and other issues
Thousands of devices
![Page 33: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/33.jpg)
ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED
D E C E M B E R 14, 2010
Smartphone Browser Landscapeby P E T E R - P A U L K O C H
Published in: User Interface Design, Mobile, Mobile Design, Mobile Development
Discuss this article » | Share this article »
Users expect websites to work on their mobile phones. In two to three years, mobile support
will become standard for any site. Web developers must add mobile web development to their
skill set or risk losing clients.
How do you make websites mobile compatible? The answer is obvious: By testing them on all
mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s
impossible to test your designs on every mobile phone out there. Within the mobile phone
landscape, there are at least ten operating systems (OSs) and fifteen browsers that require
consideration. Mobile devices are expensive, and not every web developer can afford to buy
five to ten of them. Testing “on all mobile phones” is impossible for most web developers.
In this article, I’ll give you an overview of the mobile web market, as well as phone platforms
and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at
how to set up a mobile test bed.
Search ALA
include discussions
TopicsCode
Content
Culture
Design
Mobile
Process
User Science
SnapshotMost web designers and
developers (not to
mention the entire
blogosphere) fall
squarely in the high-end
market. A cultural bias
exists against OSs aimed
at any other market. As
a result, most people
focus on the struggle
between iOS and
Android, and ignore the
rest. This has to change.
Stay in better touch withcustomers with
No.
320
![Page 34: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/34.jpg)
“Testing on as many devices as possible is a great idea in theory, but in practice it is untenable. Even if we buy a few devices to try to cover more ground, they will be outdated in just a few months or a year at most. So are we supposed to buy multiple devices per year?”posted at 11:32 am on December 14, 2010 by klayon
“If that’s the mobile landscape, I want no part of it.”posted at 07:22 am on December 15, 2010 by Polsonby
http://www.alistapart.com/comments/smartphone-browser-landscape/
![Page 35: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/35.jpg)
Mobile Portland Community Device Lab
• Dedicated location within mobile community in central, downtown Portland.
• Adjacent event space to be used for hosting Mobile Portland events and other user groups. Also available for developer training sessions.
• Free and open to anyone. Run as a non-profit.
• Located in 25,000 sq. ft. building leased by VC-funded mobile start up Urban Airship
• Other tenants in building include mobile developers Cloud Four, Uncorked Studios and Bank Simple.
• We’re creating a central hub for mobile activity in the Portland area. The building is already becoming a magnet for mobile developers.
Building Lobby
Device Lab Glass Office
![Page 36: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/36.jpg)
4. Native is Easier to Build
http://www.flickr.com/photos/dunechaser/134672123/
![Page 37: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/37.jpg)
http://www.flickr.com/photos/mattcarman/1573507091/
We often compare checklists of technical features.
![Page 38: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/38.jpg)
http://www.flickr.com/photos/delta407/269540469/
![Page 39: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/39.jpg)
![Page 40: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/40.jpg)
![Page 41: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/41.jpg)
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]
Thanks Bryan and Stephanie
![Page 42: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/42.jpg)
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]
Device Detection
Thanks Bryan and Stephanie
![Page 43: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/43.jpg)
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]
Device Detection
Thanks Bryan and Stephanie
![Page 44: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/44.jpg)
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]
Device Detection Phone GapAdd Functionality
Thanks Bryan and Stephanie
![Page 45: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/45.jpg)
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]
Device Detection Phone GapAdd Functionality
Thanks Bryan and Stephanie
![Page 46: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/46.jpg)
http://www.flickr.com/photos/nickwheeleroz/2391631937/in/photostream/
Many Sites are Chaos Behind the Scenes
![Page 47: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/47.jpg)
http://www.flickr.com/photos/ionan/103646126/
Multiple Systems Taped Together
![Page 48: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/48.jpg)
Our existing systems are anchors holding us back.
http://www.flickr.com/photos/caffeinehit/186362735/
![Page 49: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/49.jpg)
Native Developers Start from a Clean Slate
http://www.flickr.com/photos/salendron/5569020488/
![Page 50: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/50.jpg)
What about RWD?
http://www.flickr.com/photos/londonannie/4904832807/
![Page 51: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/51.jpg)
What about RWD?
http://www.flickr.com/photos/londonannie/4904832807/
Jason, you’re doing it wrong!
![Page 52: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/52.jpg)
“One Web” is a Rorschach test for Mobile Webhttp://www.flickr.com/photos/misspointypants/5575075527/
![Page 53: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/53.jpg)
“Browser sniffing is a stupid, error-prone and reviled practice, ‘backed’ by a decade of failures. Doing it on the server side is completely clueless...”
http://davidwalsh.name/detect-android
![Page 54: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/4nton/5692328434/sizes/l/
User Agent Switching:Useful tool for developers or spawn of satan?
![Page 55: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/55.jpg)
![Page 56: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/56.jpg)
![Page 57: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/57.jpg)
![Page 58: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/58.jpg)
25 of 30 sites in Alexa Top 30 Uses Device Detection
Other !ve don’t offer mobile sites!
![Page 59: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/59.jpg)
![Page 60: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/60.jpg)
![Page 61: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/61.jpg)
Native iPhone App
Asked to make it feel similar in mobile web.
![Page 62: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/62.jpg)
Mobile Web
Built the way you would expect: lists and css $oats.
![Page 63: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/63.jpg)
Mobile Web
What about devices that don’t support $oats?
![Page 64: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/64.jpg)
We can deliver a great experience using tables.Should modern devices get the lowest
common denominator code?http://www.flickr.com/photos/stml/3625386561/
![Page 65: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/65.jpg)
Supporting those older devices made people happy.
![Page 66: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/66.jpg)
http://www.flickr.com/photos/arguez/2247369944/
!is isn’t religion.
![Page 67: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/67.jpg)
%ese are simply tools.
http://www.flickr.com/photos/bre/552152780/
![Page 68: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/68.jpg)
Don’t let religion blind you to tools you may need to
solve real problems.
http://www.flickr.com/photos/yamagatacamille/5434502250/
![Page 69: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/69.jpg)
Home About Us Services Blog Accolades Contact Us
« Mobile operating systems and browsersare headed in opposite directions
More on CSS Media Queries for Mobile »
Search
SubscribeRSS Feeds
All posts
All comments
Enter your email address:
Subscribe
Delivered by FeedBurner
April 2011
M T W T F S S
1 2 3
4 5 6 7 8 9 10
Expert Web and Mobiledesign, development and strategy
Cloud Four Blog
CSS Media Query for Mobile is Fool’s GoldAugust 3rd, 2010 by Jason Grigsby
Ethan Marcotte’s article Responsive Web Design has caught the imagination of webdevelopers. Several subsequent articles have touted the CSS media query feature asa way to build mobile-optimized web sites.
Even I’m guilty of contributing to this meme with my article on CSS orientation.
![Page 70: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/70.jpg)
%e way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.
![Page 71: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/71.jpg)
Original Resized K Saved % Saved
Holmes 34.7K 8.1K 26.6K 76.6%
Watson 39.0K 8.4K 30.6K 78.4%
Mycroft 30.5K 6.7K 23.8K 78.0%
Moriarty 43.4K 8.2K 35.2K 81.1%
Adler 26.0K 6.6K 19.4K 74.6%
Winter 34.7K 7.8K 26.9K 77.5%
Total 208.3K 45.8K 162.5K 78.0%
Media Queries Hide Problems
![Page 72: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/72.jpg)
Why the Sudden Interestin Speed?
Same problems on desktop.
![Page 73: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/73.jpg)
Why the Sudden Interestin Speed?
Same problems on desktop.
EXACTLY.
![Page 74: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/74.jpg)
We’ve remade the Internet in our image.
![Page 75: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/75.jpg)
Obese
![Page 76: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/76.jpg)
We’ve Become Bandwidth Gluttons
Since 2003:
• Web Page Size Tripled• # of Objects Doubled
Since 1995:
• Web Page Size: 22x• # of Objects: 21x
Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
![Page 77: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/77.jpg)
%e mobile context may not be what you expect.
Maybe they are on wi-!.
![Page 78: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/78.jpg)
Yes, given more time, we would address some issues on the back-end to keep large images from downloading for mobile users in the !rst place, but our site is fairly lightweight to begin with, so it wasn’t really worth the time it would take to mess around with that stuff. We may revisit the issue in the future, however.
Also, just to play devil’s advocate, Jeremy Keith pointed out that it’s a bad assumption that mobile devices always have limited bandwidth and desktops always have plenty.
![Page 79: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/79.jpg)
%at site took 53.8 seconds to download over WiFi on an iPhone 4.
![Page 80: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/80.jpg)
17% will wait no longer than 5 seconds for a site to load
http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf
![Page 81: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/81.jpg)
Can we simply agree that:
On average mobile is slower than desktop?
![Page 82: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/82.jpg)
http://www.flickr.com/photos/achimh/3264376846/
![Page 83: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/83.jpg)
RESPONSIVE WEB DESIGN
Mobile First
![Page 84: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/84.jpg)
Where are the mobile !rst responsive web designs?
![Page 85: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/85.jpg)
9%
4%
21%
38%
4%
25%
Comparison of Mobile & Desktop RWD Views
Mobile is Larger Same SizeLess than 10% Savings 11 to 50% Savings51% to 100% Savings Greater than 100% Savings
There are four good examples of mobile first RWD. Total.
![Page 86: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/86.jpg)
How do we handle img tag src?
How to handle embedded video?
How do we eliminate unnecessary assets?
How can we be smart about image and video resizing and converting?
How do we integrate with content management systems?
Mobile First RWD is Difficult
![Page 87: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/87.jpg)
yiibu articles projects search... go
Mobile Web Reference A Practical Guide to NokiaBrowsers
Workshops and Conferences
Are we there yet?This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web. Over the comingmonths, we will release articles covering our approach in detail. In the meantime why not discover how these
ideas came to be and how this site was developed.
This site works beautifully on most modern and legacy smartphones, tablets, and of course desktop browsers. Find out how we did it.
![Page 88: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/88.jpg)
by ETHAN MARCOTTE
From mobile browsers to netbooks and tablets, users are visiting yoursites from an increasing array of devices and browsers. Are yourdesigns ready? Learn how to think beyond the desktop and craftbeautiful designs that anticipate and respond to your users’ needs.Ethan Marcotte will explore CSS techniques and design principles,including fluid grids, flexible images, and media queries,demonstrating how you can deliver a quality experience to your usersno matter how large (or small) their display.
This book will be released in Spring 2011.
ABOUT THE AUTHOR
Ethan Marcotte is a web designer & developer whocares deeply about beautiful design, elegant code,and the intersection of the two. Over the years, Ethanhas enjoyed working with such clients as theSundance Film Festival, Stanford University, New York
Magazine, and The Today Show. He swears profusely on Twitter, andwould like to be an unstoppable robot ninja when he grows up. Beep.
RESPONSIVE WEB DESIGN CART
0 items $0.00
View Cart Checkout
HAVE A QUEST ION ?Read our FAQs
FEATURED BOOK
The Elements of ContentStrategy
“This brief,brilliant treatise isthe guidebookthe industry hasclamored for.” — JeffreyZeldman
NEWSLETTERKeep up to date with new book releases and announcements with our newsletter. Email address Subscribe
Brief books for people who make websites
Home Store About Contact abookapart on Twitter
![Page 89: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/89.jpg)
Enjoy our blog?You'll love our book.
For info and pre-order:
Visit the book site
Subscribe to our Lab
Atom
RSS 2.0
Recent Articles
Corresponding on Responsive Design
Building with jQuery Mobile: Slides froma talk by Todd Parker and Scott Jehl
Respond.js: Fast CSS3 Media Queriesfor Internet Explorer 6-8 and more
Responsive Images: Experimenting withContext-Aware Image Sizing
Dingbat Webfonts: Great potential, butwe see (and hear) accessibility issues
jQuery Custom File Upload Input: fromthe book Designing with ProgressiveEnhancement
Slides from Voices That Matter:Optimizing for the Mobile Web, ScottJehl
Slides from Voices That Matter:Designing with Progressive
What we do What we've done What we're thinking Who we are
Posted by Scott on 12/14/2010
Responsive Images: Experimenting with Context-Aware Image Sizing
Topics: javascript mobile progressive enhancement usability
Responsive Web Design has been avery hot topic this year, inspiringdevelopers who long for a “one
codebase serves all” future. Butcritics of the technique have pointedout several issues that need to beaddressed before it can scaleperfectly from handheld to desktop— specifically, while HTML, CSSand JavaScript can be light enoughto share across all experiences, desktop-optimized images are often tooheavy for mobile connections, and mobile-optimized images are too lowquality for desktop viewers.
Recently, we began work on a large-scale responsive design(collaborating with the incredibly talented Mr. Ethan Marcotte, who
notably got this whole "responsive" party started), in which we've set outto address this shortcoming of responsive design with a technique thatrequests an appropriate image size for a given context without resortingto tactics like User Agent sniffing. We feel strongly that these responsivetechniques present a most practical way forward in web development.This post documents our in-progress experiment with "ResponsiveImages."
What is this all about?
The goal of this technique is to deliver optimized, contextual image sizes for responsive
Contact UsContact Us
![Page 90: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/90.jpg)
![Page 91: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/91.jpg)
If responsible responsive web
design means mobile !rst
responsive web design, then
we’re all on the same team
facing the same challenges.
![Page 92: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/92.jpg)
@jonarneshttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
![Page 93: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/93.jpg)
Web Content Management Systems are the Mainframes of the Mobile Era
![Page 94: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/94.jpg)
Content& Services
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
![Page 95: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/95.jpg)
Content& Services
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
HTML
HTML
HTML
HTML HTML
HTML
HTMLHTML
![Page 96: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/96.jpg)
Content& Services
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
HTML
HTML
HTML
HTML HTML
HTML
HTMLHTML
NATIVE
NATIVE
NATIVE
![Page 97: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/97.jpg)
Features of New Platforms
Integrated image resizing
Video conversion and resizing
Separation of content from markup so content can be used in native apps
Prioritization of content based on context
Full-featured APIs
Synchronization
New Ways to Enable Content Editors
http://www.flickr.com/photos/expressmonorail/3046970004/sizes/l/
![Page 98: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/98.jpg)
What does WYSIWYG mean to multiple devices?
WYSIWTF
http://www.flickr.com/photos/ndm007/171398958/
![Page 99: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/99.jpg)
![Page 100: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/100.jpg)
![Page 101: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/101.jpg)
http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
![Page 102: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/102.jpg)
http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/
![Page 103: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/103.jpg)
![Page 104: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/104.jpg)
![Page 105: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/105.jpg)
http://www.flickr.com/photos/andresthor/3963368371/
![Page 106: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/106.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
One Possible Bridging Solution
![Page 107: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/107.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
One Possible Bridging Solution
![Page 108: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/108.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
Desktop Web Page
Desktop
Redirect
Mobile
m.example.com/products/[productID]
One Possible Bridging Solution
![Page 109: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/109.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
Desktop Web Page
Desktop
Redirect
Mobile
m.example.com/products/[productID]
Cloud Four Mobile Web
Server
Device Class Template A
Device Class Template B
Device Class Template C
Device Class Template D
Internet
One Possible Bridging Solution
![Page 110: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/110.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
Desktop Web Page
Desktop
Redirect
Mobile
m.example.com/products/[productID]
Cloud Four Mobile Web
Server
Device Class Template A
Device Class Template B
Device Class Template C
Device Class Template D
Internet
Web Services APIs
One Possible Bridging Solution
![Page 111: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/111.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
Desktop Web Page
Desktop
Redirect
Mobile
m.example.com/products/[productID]
Cloud Four Mobile Web
Server
Device Class Template A
Device Class Template B
Device Class Template C
Device Class Template D
Internet
Web Services APIs
One Possible Bridging Solution
APIs Necessary to Support App Development
![Page 112: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/112.jpg)
Desktop Web Server
Internet
example.com/products/[productID]
Desktop or Mobile
Desktop Web Page
Desktop
Redirect
Mobile
m.example.com/products/[productID]
Web Services APIs
One Possible Bridging Solution
Mobile WebServer w/ RWD
Platform
Internet
APIs Necessary to Support App Development
![Page 113: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/113.jpg)
http://www.flickr.com/photos/thebottomlesspaddlingpool/5085614383/sizes/l/
![Page 114: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/114.jpg)
No matter how you approach it, we have a lot of infrastructure to build
http://www.flickr.com/photos/wwworks/2942950081/
![Page 115: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/115.jpg)
thank you.
http://www.flickr.com/photos/24311566@N07/4697623122/
![Page 116: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/116.jpg)
http://www.flickr.com/photos/troyholden/5544097948/
![Page 117: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/117.jpg)
![Page 118: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/118.jpg)
![Page 119: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/119.jpg)
We’re building the future right now
http://www.flickr.com/photos/insightimaging/3545443883/
![Page 120: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/120.jpg)
Not easy, but this is where the opportunities are.
http://www.flickr.com/photos/donnagrayson/195244498/in/photostream/
![Page 121: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/121.jpg)
http://www.flickr.com/photos/eole/3215868087/
![Page 122: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/122.jpg)
Let’s get to work.
![Page 123: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/123.jpg)
http://www.flickr.com/photos/kwerfeldein/1447907224/
![Page 124: Native is easy. Mobile web is freaking hard](https://reader037.vdocuments.site/reader037/viewer/2022103114/5558a8b8d8b42a2a738b521c/html5/thumbnails/124.jpg)
[email protected] | cloudfour.com/blog | @grigs | slides: bit.ly/grigs_wdx2011
http://www.flickr.com/photos/polvero/4232984120/in/faves-grigs/