Native is easy. Mobile web is freaking hard

http://www.flickr.com/photos/dnorman/3732851541/

@grigs

bit.ly/grigs_wdx2011

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

I’m a mobile web advocate.

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

21%of Google’s largest advertisers

have mobile web sites.

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

21%of Google’s largest advertisers

have mobile web sites.

I told myself it was the reality distortion !eld.

I was fooling myself. Mobile web is freaking hard.

http://www.flickr.com/photos/kjgarbutt/5586656028/

Reasons WhyNative is Easier

1. Native is Easier to Sell

http://www.flickr.com/photos/vegaseddie/2668299674/

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

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

sitemap contact

Search QuirksMode.org Search

Page last changed 3 months ago

Maybe we should build buzz around HTML5 apps

asymcoHorace Dediu

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?

NativeSellsItself

We remember when the web

was the source of irrational

exuberance.

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

Let me share our secret for selling mobile web.

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

Does your company participate in social media?

http://www.flickr.com/photos/intersectionconsulting/5177773774/

Links don’t open apps

http://www.flickr.com/photos/mattimattila/4001221570/

The ‘U’ in URL stands for Universal*

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

2. Native is Easier to Design

Lots of resources for native app design.

Fewer for mobile web, but they exist.

But the examples mostly look like iPhone apps.

Does an Android user expect iPhone UI conventions?

Do we adjust UI for different geographies?

What is the uniquely mobile web experience?

http://www.flickr.com/photos/nickwheeleroz/2212101890/in/photostream/

First uniquely mobile web UI? Pull down menus?

Tools don’t make people designers.

3. Native is Easier to Test

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

Mobile web developers face:

OS fragmentation

Webkit fragmentation

Browser fragmentation

Inconsistent standards support

Carrier transcoding and other issues

Thousands of devices

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

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

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

4. Native is Easier to Build

http://www.flickr.com/photos/dunechaser/134672123/

http://www.flickr.com/photos/mattcarman/1573507091/

We often compare checklists of technical features.

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

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

Thanks Bryan and Stephanie

[content]

Device Detection

[content]

Device Detection

[content]

Device Detection Phone GapAdd Functionality

[content]

Device Detection Phone GapAdd Functionality

http://www.flickr.com/photos/nickwheeleroz/2391631937/in/photostream/

Many Sites are Chaos Behind the Scenes

http://www.flickr.com/photos/ionan/103646126/

Multiple Systems Taped Together

Our existing systems are anchors holding us back.

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

Native Developers Start from a Clean Slate

http://www.flickr.com/photos/salendron/5569020488/

What about RWD?

http://www.flickr.com/photos/londonannie/4904832807/

What about RWD?

http://www.flickr.com/photos/londonannie/4904832807/

Jason, you’re doing it wrong!

“One Web” is a Rorschach test for Mobile Webhttp://www.flickr.com/photos/misspointypants/5575075527/

“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

http://www.flickr.com/photos/4nton/5692328434/sizes/l/

User Agent Switching:Useful tool for developers or spawn of satan?

25 of 30 sites in Alexa Top 30 Uses Device Detection

Other !ve don’t offer mobile sites!

Native iPhone App

Asked to make it feel similar in mobile web.

Mobile Web

Built the way you would expect: lists and css $oats.

Mobile Web

What about devices that don’t support $oats?

We can deliver a great experience using tables.Should modern devices get the lowest

common denominator code?http://www.flickr.com/photos/stml/3625386561/

Supporting those older devices made people happy.

http://www.flickr.com/photos/arguez/2247369944/

!is isn’t religion.

%ese are simply tools.

http://www.flickr.com/photos/bre/552152780/

Don’t let religion blind you to tools you may need to

solve real problems.

http://www.flickr.com/photos/yamagatacamille/5434502250/

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

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.

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

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

Why the Sudden Interestin Speed?

Same problems on desktop.

Why the Sudden Interestin Speed?

Same problems on desktop.

EXACTLY.

We’ve remade the Internet in our image.

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/

%e mobile context may not be what you expect.

Maybe they are on wi-!.

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.

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

17% will wait no longer than 5 seconds for a site to load

http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf

Can we simply agree that:

On average mobile is slower than desktop?

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

RESPONSIVE WEB DESIGN

Mobile First

Where are the mobile !rst responsive web designs?

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.

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

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.

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

Enjoy our blog?You'll love our book.

For info and pre-order:

Visit the book site

Subscribe to our Lab

RSS 2.0

Native is easy. Mobile web is freaking hard

Technology

Cloud Native Development - Ramiro Berrelleza · Agenda •Current state of application development •Developing cloud native applications is hard •Cloud Native Development makes

HPWREN LIVE Live Interactive Virtual Explorationshpwren.ucsd.edu/news/20120919/images/LIVE.pdf · 9/19/2012 · Explorations Involving a Hard-to-Reach Native American Earth Lodge

Freaking Investments

The Foreclosure MESS: Why Bank of America, GMAC/Ally and others are FREAKING OUT. Presented by Chris McLaughlin Attorney at Law

Native polycyclic aromatic hydrocarbons (PAH) in coals …€¦ · hardly recognized source of environmental contamination ... unburnt hard coal/ bituminous coal is considered only

WE ARE HARD-WORKING PASSIONATE … ARE HARD-WORKING PASSIONATE OPTIMISTIC INCLUSIVE FUN ... Dr. Jose Rizal Park, ... through native tree and shrub planting

Lord, Liar, Lunatic . . . or Just Freaking Awesome

7 Reasons Your Skin Is Freaking Out Right Now

101 best sports bars in the U.S.: Every state, every game, every freaking hot wing

Which Freaking Database Should I Use?

Scala Native Documentation - Scala Native — Scala Native

Koalas! I freaking love them!

Native or Non-native

Cloud Native Applications Workshop What is Cloud Native ...Usually deployed on an Enterprise ESB which is hard to manage and scale. Early 10’s ... • Use DockerfileMaven, Gradle,

The Oceans or: Why It’s So Freaking Cold Down There

Jarus Health Mobile Benefit sheetjarushealth.com/Content/downloads/Jarus-Health-Mobile-Benefit-Sheet.pdfMobile App Platform Highlights * Configurable, not hard-coded * Native Apps

Serial ATA II Native Command Queuing Overview ATA II Native Command Queuing Overview 6 Application Note 2.0 Command Queuing Overview Command queuing enables a hard drive to accept

Speaking Up Without Freaking Out - 10 Insights from Matt Abrahams

Native VHD Boot: A Walkthrough of Common Scenarios · Native VHD boot enables a physical computer to be booted directly from a virtual hard disk (VHD) ... for recovery purposes.

Parent pack - City of Campbelltown · List 5 foods we eat that native bees pollinate ... In Sydney alone there are over 200 native bee species that are hard at work pollinating all