The challenges for mobile web aren't html, javascript or css. It is the legacy of the past decade of web development systems.

1. Native is
Native is
http://www.flickr.com/photos/raster/5462062551/in/photostream/ Web is Essential.

2. Tweets: @grigs
Slides: bit.ly/grigs_bdc2011
http://www.flickr.com/photos/31878512@N06/4417969770/

3. http://
www.flickr.com/
photos/gurana/
3976626644/

4. http://www.flickr.com/photos/silipo/378476114/

5. Expert Web and Mobile
design, development and strategy
Home About Us Services Blog Accolades Contact Us
Cloud Four Blog
« Mobile operating systems and browsers More on CSS Media Queries for Mobile »
are headed in opposite directions
Search
CSS Media Query for Mobile is Fool’s Gold
August 3rd, 2010 by Jason Grigsby
Ethan Marcotte’s article Responsive Web Design has caught the imagination of web Subscribe
developers. Several subsequent articles have touted the CSS media query feature as RSS Feeds
a way to build mobile-optimized web sites. 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
Even I’m guilty of contributing to this meme with my article on CSS orientation.

6. 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.

7. Login Join Twitter!
@wiifm palm. forehead. one of these
days this shit will get easy. that cloud
four article is depressing.
3:22 PM Mar 19th via web in reply to wiifm
_Nathan_W_
Nathan Wall
© 2011 Twitter About Us Contact Blog Status Resources API Business Help Jobs Terms Privacy

8. Native is
http://www.flickr.com/photos/raster/5462062551/in/photostream/

10. http://www.flickr.com/photos/kjgarbutt/5586656028/
Reasons Why
Native is Easier

11. 1. Native is Easier to Sell
http://www.flickr.com/photos/vegaseddie/2668299674/

12. Get a lot of email from this guy...
http://www.flickr.com/photos/corbett3000/2327165138/in/set-72157604094629546/

13. Mobilism 2011, 12th and 13th of May, Amsterdam
Compatibility
QuirksBlog Page last changed 3 months ago sitemap contact
Mobile Search QuirksMode.org Search
About
show site navigation HTML5 apps show page contents
Right now nobody’s interested in a mobile solution that does not
contain the words “iPhone” and “app” and that is not submitted to Written on 8 March 2010
a closed environment where it competes with approximately 2,437 Categorized in HTML5, HTML5 apps
similar mobile solutions. Previous entry: Fronteers 2010
Compared to the current crop of mobile clients and developers, lemmings Next entry: The payment argument is
marching off a cliff follow a solid, sensible strategy. Startling them out of this nonsense
obsession requires nothing short of a new buzzword.
Therefore I’d like to re-brand standards-based mobile websites and This is the blog of Peter-Paul Koch, mobile
applications, definitely including W3C Widgets, as “HTML5 apps.” People platform strategist, consultant, and trainer.
outside our little technical circle are already aware of the existence of You can also follow him on Twitter.
HTML5, and I don’t think it needs much of an effort to elevate it to full
buzzwordiness.
Atom RSS
Technically, HTML5 apps would encompass all websites as well as all the
myriads of (usually locally installed) web-standards-based application
Categories:
systems on mobile. The guiding principle would be to write and maintain one
single core application that uses web standards, as well as a mechanism that Homepage
deploys that core application across a wide range of platforms.
Archives (1)
Browsers (7)
What are HTML5 apps? Coding techniques (14)
Conferences (80)
HTML5 apps
Content (51)
1. have one single core application; HTML5 (6)
Linkbait (1)
2. are written with web standards, primarily HTML, CSS, and JavaScript;
Mobile (23)
3. and are deployed on more than one mobile platform. Site (23)
Theory (18)

14. Login Join Twitter!
Impressed that the Web finds it
necessary to "fight back against
Flipboard" http://bit.ly/dZqxf9
7:13 AM Feb 27th via bitly
Retweeted by 8 people
asymco
Horace Dediu
© 2011 Twitter About Us Contact Blog Status Resources API Business Help Jobs Terms Privacy

15. Native
Sells
Itself

16. http://www.flickr.com/photos/pricklebush/224674200/

17. 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

18. Does your company participate in social media?
http://www.flickr.com/photos/intersectionconsulting/5177773774/

19. Links
don’t
open
apps
http://www.flickr.com/photos/mattimattila/4001221570/

20. The ‘U’ in URL stands
for Universal*
* it actually stands for
‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/

21. 2. Native is Easier
to Design For

22. Mobile UI Patterns
Activity Feeds
Check-in Screens
Comment Detail
Dashboard Navigation
Edu Walk Throughs
Empty Data Sets
Lists
Notifications
Settings
Sign Up Flows
Splash Screens
UI that I Heart
User Profiles
Venue Detail
© 2011 — Mari Sheibley
foursquare Facebook Twitter for iphon
friends check-in feed Activity Feed recent tweets fe
http://mobile-patterns.com

23. Android or iPhone Conventions?

25. What is the uniquely mobile web experience?

27. 3. Native is Easier to Test

28. Even Most Successful Developers Face
the Challenge of Testing on Enough Devices
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

29. Mobile web developers face:
OS fragmentation
Webkit fragmentation
Browser fragmentation
Inconsistent standards support
Carrier transcoding and other issues
Thousands of devices

30. No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED
320
DECEMBER 14, 2010 Search ALA
Smartphone Browser Landscape include discussions
by P E T E R - P A U L K O C H
Published in: User Interface Design , Mobile , Mobile Design , Mobile Development
Topics
Discuss this article » | Share this article » Code
Content
Culture
Design
Mobile
Process
User Science
Snapshot
Most web designers and
developers (not to
mention the entire
blogosphere) fall
squarely in the high-end
market. A cultural bias
Users expect websites to work on their mobile phones. In two to three years, mobile support
exists against OSs aimed
will become standard for any site. Web developers must add mobile web development to their at any other market. As
skill set or risk losing clients. a result, most people
focus on the struggle
How do you make websites mobile compatible? The answer is obvious: By testing them on all between iOS and
mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s Android, and ignore the
rest. This has to change.
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. Stay in better touch with
customers with

31. “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/

32. 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.
Building Lobby
• 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
Device Lab Glass Office becoming a magnet for mobile developers.

33. 4. Native is Easier to Build
http://www.flickr.com/photos/dunechaser/134672123/

34. We often compare checklists of
technical features.
http://www.flickr.com/photos/mattcarman/1573507091/

35. http://www.flickr.com/photos/delta407/269540469/

38. Mobile Progressive Enhancement
[content]
Thanks Bryan and Stephanie
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

39. Mobile Progressive Enhancement
[content]
Device Detection
Thanks Bryan and Stephanie
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

40. Mobile Progressive Enhancement
[content]
Device Detection
Thanks Bryan and Stephanie
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

41. Mobile Progressive Enhancement
[content]
Device Detection Phone Gap
Add Functionality
Thanks Bryan and Stephanie
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

42. Mobile Progressive Enhancement
[content]
Device Detection Phone Gap
Add Functionality
Thanks Bryan and Stephanie
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

43. Many Sites are Chaos Behind the Scenes
http://www.flickr.com/photos/nickwheeleroz/2391631937/in/photostream/

44. Multiple Systems Taped Together
http://www.flickr.com/photos/ionan/103646126/

45. Our existing systems are
anchors holding us back.
http://www.flickr.com/photos/caffeinehit/186362735/

46. Native Developers Start from a Clean Slate
http://www.flickr.com/photos/salendron/5569020488/

47. What about RWD?
http://www.flickr.com/photos/londonannie/4904832807/

48. Media Queries Hide Problems
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%

49. Why the
Sudden
Interest
in Speed?
Same problems
on desktop.

50. Why the
Sudden
Interest
in Speed?
Same problems
on desktop.
EXACTLY.

51. We’ve remade the Internet in our image.

52. Obese

53. 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/

54. 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.

55. at site took 53.8 seconds to
download over WiFi on an iPhone 4.

56. 17% will wait no longer than 5 seconds for a site to load
http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf

57. Can we simply agree that:
On average mobile is slower than desktop?

58. http://www.flickr.com/photos/achimh/3264376846/

59. Mobile
First
RESPONSIVE WEB DESIGN

60. Where are the mobile rst responsive web designs?

61. Comparison of Mobile & Desktop RWD Views
9%
4% 25%
21%
4%
38%
Mobile is Larger Same Size
Less than 10% Savings 11 to 50% Savings
51% to 100% Savings Greater than 100% Savings
There are four good examples of mobile first RWD. Total.

62. Mobile First RWD is Difficult
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?

63. Contact Us
What we do What we've done What we're thinking Who we are
Responsive Images: Experimenting with Context- Enjoy our blog?
You'll love our book.
Aware Image Sizing
For info and pre-order:
Posted by Scott on 12/14/2010
Topics: javascript mobile progressive enhancement usability Visit the book site
Responsive Web Design has been a
very hot topic this year, inspiring
developers who long for a “one
codebase serves all” future. But
critics of the technique have pointed Subscribe to our Lab
out several issues that need to be Atom
addressed before it can scale RSS 2.0
perfectly from handheld to desktop
— specifically, while HTML, CSS
and JavaScript can be light enough Recent Articles
to share across all experiences, desktop-optimized images are often too Corresponding on Responsive Design
heavy for mobile connections, and mobile-optimized images are too low Building with jQuery Mobile: Slides from
quality for desktop viewers. a talk by Todd Parker and Scott Jehl
Recently, we began work on a large-scale responsive design Respond.js: Fast CSS3 Media Queries
for Internet Explorer 6-8 and more
(collaborating with the incredibly talented Mr. Ethan Marcotte, who
notably got this whole "responsive" party started), in which we've set out Responsive Images: Experimenting with
Context-Aware Image Sizing
to address this shortcoming of responsive design with a technique that
requests an appropriate image size for a given context without resorting Dingbat Webfonts: Great potential, but
we see (and hear) accessibility issues

64. yiibu articles projects search... go
Are we there yet?
This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web. Over the coming
months, 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.
Mobile Web Reference A Practical Guide to Nokia Workshops and Conferences
Browsers

65. Home Store About Contact abookapart on Twitter
Brief books for people who make websites
RESPONSIVE WEB DESIGN CART
0 items $0.00
by E T H A N M A R C O T T E
From mobile browsers to netbooks and tablets, users are visiting your View Cart Checkout
sites from an increasing array of devices and browsers. Are your
designs ready? Learn how to think beyond the desktop and craft
beautiful designs that anticipate and respond to your users’ needs.
Ethan Marcotte will explore CSS techniques and design principles, HAVE A QUESTION?
including fluid grids, flexible images, and media queries, Read our FAQs
demonstrating how you can deliver a quality experience to your users
no matter how large (or small) their display.
FEATURED BOOK
This book will be released in Spring 2011.
The Elements of Content
Strategy
“This brief,
brilliant treatise is
the guidebook
the industry has
clamored for.”
— Jeffrey
Zeldman
ABOUT THE AUTHOR
Ethan Marcotte is a web designer & developer who
cares deeply about beautiful design, elegant code,
and the intersection of the two. Over the years, Ethan
has enjoyed working with such clients as the
Sundance Film Festival, Stanford University, New York
Magazine , and The Today Show. He swears profusely on Twitter, and
would like to be an unstoppable robot ninja when he grows up. Beep.
NEWSLETTER
Keep up to date with new book releases and announcements with our newsletter. Email address Subscribe

66. If responsible responsive web
design means mobile rst
responsive web design, then
we’re all on the same team
facing the same challenges.

67. http://www.flickr.com/photos/jannalauren/279685521

68. http://www.flickr.com/photos/caffeinehit/186362735/

69. Web Content Management Systems
are the Mainframes of the Mobile Era

70. Content
& Services
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/

71. HTML
HTML
HTML
HTML
Content HTML
& Services
HTML
HTML HTML
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/

72. HTML
HTML
NATIVE
HTML
HTML
Content NATIVE
HTML
& Services
NATIVE
HTML
HTML HTML
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/

73. 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
New Ways to Enable Content Editors
http://www.flickr.com/photos/expressmonorail/3046970004/sizes/l/

74. What does WYSIWYG
mean to multiple devices?
WYSIWTF
http://www.flickr.com/photos/ndm007/171398958/

77. http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

78. http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/

81. http://www.flickr.com/
photos/andresthor/
3963368371/

82. One Possible Bridging Solution
example.com/products/[productID]
Internet
Desktop
Web Server

83. One Possible Bridging Solution
example.com/products/[productID]
Internet
Desktop or
Desktop Mobile
Web Server

84. One Possible Bridging Solution
example.com/products/[productID]
Desktop Web m.example.com/
Redirect
Internet Page products/[productID]
Desktop Mobile
Desktop or
Desktop Mobile
Web Server

85. One Possible Bridging Solution
example.com/products/[productID]
Desktop Web m.example.com/ Internet
Redirect
Internet Page products/[productID]
Desktop Mobile Device Class
Template A
Device Class
Template B
Desktop or Cloud Four
Desktop Mobile Mobile Web
Web Server Server Device Class
Template C
Device Class
Template D

86. One Possible Bridging Solution
example.com/products/[productID]
Desktop Web m.example.com/ Internet
Redirect
Internet Page products/[productID]
Desktop Mobile Device Class
Template A
Device Class
Template B
Desktop or Cloud Four
Desktop Mobile Mobile Web
Web Server Server Device Class
Template C
Device Class
Template D
Web Services
APIs

87. One Possible Bridging Solution
example.com/products/[productID]
Desktop Web m.example.com/ Internet
Redirect
Internet Page products/[productID]
Desktop Mobile Device Class
Template A
Device Class
Template B
Desktop or Cloud Four
Desktop Mobile Mobile Web
Web Server Server Device Class
Template C
Device Class
Template D
Web Services
APIs
APIs Necessary to Support App Development

88. One Possible Bridging Solution
example.com/products/[productID]
Desktop Web m.example.com/ Internet
Redirect
Internet Page products/[productID]
Desktop Mobile
Desktop or Mobile Web
Desktop Mobile Server w/ RWD
Web Server Platform
Web Services
APIs
APIs Necessary to Support App Development

89. http://www.flickr.com/photos/thebottomlesspaddlingpool/5085614383/sizes/l/

90. No matter how you approach it, we
have a lot of infrastructure to build
http://www.flickr.com/photos/wwworks/2942950081/

91. thank you.
http://www.flickr.com/photos/24311566@N07/4697623122/

92. http://www.flickr.com/
photos/troyholden/
5544097948/

95. We’re building the future right now
http://www.flickr.com/photos/insightimaging/3545443883/

96. Not easy, but this is where the opportunities are.
http://www.flickr.com/photos/donnagrayson/195244498/in/photostream/

97. http://www.flickr.com/photos/eole/3215868087/

98. Let’s get to work.

99. http://www.flickr.com/photos/kwerfeldein/1447907224/

100. jason@cloudfour.com | cloudfour.com/blog | @grigs | slides: bit.ly/grigs_bdc2011
http://www.flickr.com/photos/polvero/4232984120/in/faves-grigs/