Mobile Web Resources | Mobile Web Best Practices.

1. There are more mobile devices than there are people in the world.
2. 1.3 billion mobile page views a year.
3. Facebook says a few years form now “almost everyone at Facebook will focus exclusively on mobile.”
4. 1 in 10 mobile smartphones are iPhones. But one iPhone is responsible for twice the traffic of an Android phone (its nearest competitor).
5. 27% of all Yelp usage currently comes from mobile.
6. Web vs. Native: Facebook has 350 Million mobile users. 50% of that access is via the web. The other 50% is native (all platforms). All native apps put together equal the same usage as web.
7. “People will do stuff on the closest screen near them that is good enough.”
8. 50% of Africa and Asia only access the internet on mobile.
9. “Clinging to desktop experience and ignoring mobile is like a record company clinging to CDs while digital passes them by.” Luke W.
10. An entire generation of people starting to use the internet on mobile in Asia, Africa, etc. Kenya 20% of GDP happens on mobile devices. Mobile phones will overtake desktops as the most common web access devices worldwide by 2013.

And why mobile web (vs. native)?

1. Rapidly growing “real” businesses.
2. Access across multiple platforms and without apps.
3. Instant updates, fixes, and testing.
4. No plying in anyone else’s backyard.
5. Great way to get started with mobile.

WE ARE THRILLED to present the two newest volumes from A Book Apart (“brief books for people who make websites”):

• Make your users fall in love with your site or application via the precepts packed into Aarron Walter’s new Designing for Emotion. From classic psychology to case studies, highbrow concepts to common sense, DfE demonstrates accessible strategies and memorable methods to help you make a human connection through design.
• Learn data-driven techniques that will make you a master of mobile with Mobile First. Former Yahoo! design architect and co-creator of Bagcheck, Luke Wroblewski knows more about mobile experience than the rest of us, and packs all he knows into this entertaining, to-the-point guidebook.

For a limited time, save 15% when you buy both together!

A Book Apart, Designing for Emotion & Mobile First Bundle.

THE ORGANIZATION OF MOBILE web experiences must align with how people use their mobile devices and why; emphasize content over navigation; provide relevant options for exploration and pivoting; maintain clarity and focus; and align with mobile behaviors. In this excerpt from his brand new A Book Apart book, Luke Wroblewski explains how.

A List Apart: Articles: Organizing Mobile.

HERE IS a fine collection of articles, frameworks, and other tools for a “mobile first” approach to (mainly responsive) web design. Well done, Mr Haidara. The Multi-Size Web: a Computing bag by Eric Haidara at Bagcheck.

Jeffrey Zeldman – The Medium Comes of Age from Codeworks Ltd on Vimeo.

A FEW QUICK NOTES from the first hour of A Day Apart: Mobile Web Design, an all-day learning session led by Luke Wroblewski (aka Day III of An Event Apart Seattle), Bell Harbor Conference Center, Seattle, WA:

Audience questions for Luke

1. How to take a website for desktop to mobile?
2. Do we need to care about non-Webkit?
3. Trade-offs between native and web
4. How to navigate differences between different versions of Webkit?
5. Mobile e-commerce: best practices
6. Challenges with different cultures/languages
7. Media queries
8. If no budget, what can focus on web to make mobile ok?
9. How to take a website for desktop to mobile?
10. Mobile e-commerce best practices
11. Multiple screen sizes and pixel densities
12. Time for one project: go mobile or tablet (in e-commerce)
13. CMSes and mobile—sigh
14. Best practices for page load

WHY MOBILE? Convincing clients/bosses to care

• Of the 50% of total mobile commerce in the US, 70% of it is coming from one iPhone application (eBay).
• eBay: global mobile sales $2 billion in 2010, $600 million in 2009. Real commercial opportunities emerging on mobile.
• Best Buy: mobile web users doubling every year: 30M (2010), 17M (2009), 6M (2008).
• PayPal: mobile transactions increased six-fold in 2009: $25M to $141M.

SOCIAL

• Double-digit (28%) rise in social networking on mobile web.
• Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile.
• Facebook: 200 million active mobile users.
• Instagram: iPhone only app took three months to hit one million users. Six weeks later they hit two million users.
• Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago.

PRODUCTIVITY AND MEDIA

• Google: mobile searches grew 130% in Q3 2010
• Pandora: 50% of total user base subscribes to the service on mobile
• Email: 70% of smartphone users have accessed email on mobile device

“I don’t want to be the record executive clinging to CD sales.”

ADDITIONAL USAGE

Yelp: every other second a consumer calls a local business and generates driving directions from a Yelp mobile app.]]27% of all Yelp searches come from their iPhone application, which had 1.4 million unique users in May 2010.

Zillow.com: Viewing active listings 45% more often from mobile devices (audience is primarily active buyers, on location or scoping out neighborhoods)

Facebook: People who use Facebook on their mobile devices (200M active) are twice as active on Facebook as non-mobile users.

Shift in Usage

Let’s look at Gmail:

• Visitors to web-based emails sites declined 7%.
• Visitors accessing email on mobile devices increased 36%.

But what about mobile web usage?

Twitter Usage

40% of tweets sent via mobile.

16% of new users start on mobile.

Mobile web usage

• Mobile phones will overtake PCs as the most common web access devices worldwide by 2013.
• 600% growth in traffic to mobile websites in 2010.
• Facebook and Twitter access via mobile browser grows by triple digits in 2010.
• Average smartphone user visits up to 24 websites per day.
• Top 50 websites constitute only 40% of mobile visits.
• Opera Mini traffic up 200% year/year.

For more…

Follow the live tweets at afeedapart.com.

I’m enjoying An Event Apart Seattle 2011 and you’re not. Despair not, help is available:

• For real-time Twitter aggragation, watch afeedapart.com.
• Enjoy AEA Seattle photos in our Flickr group.
• Watch Luke Wroblewski dance.
• Watch An Event Apart dance for Luke Wroblewski.
• Nod along to the interstitial audio playlist.

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 simple answer is to test on all mobile devices and fix any problems you encounter. But with at least ten operating systems and fifteen browsers out there, it is impossible to do that. Nor can we test only in iPhone and Android and expect to serve our market. PPK surveys the mobile web market, as well as phone platforms and their browsers, and shows how to set up a mobile test bed that works.

A List Apart: Smartphone Browser Landscape by Peter-Paul Koch

Illustration by Kevin Cornell for A List Apart

As always, Luke Wroblewski nails it:  

When kids interact with software they explore and engage with anything that looks interesting. Especially if it looks like content. Graphical user interface components don’t.

Consider the example of Dr. Seuss’s ABC book on the iPad. The intro screen uses colorful blobs to bring attention to large hit targets. But tap on one of these elements and up pops a standard modal menu asking you to select from one of three options. Modal menu dialogs and kids don’t mix.

More at lukew.com.

Update! Episode 14 is now available for your listening and viewing pleasure at 5by5.tv.

Josh Williams, founder of Gowalla, is our guest at 1:00 PM ET today, July 29, in Episode 14 of The Big Web Show. Whether you’re a social media user/creator, an entrepreneur, an application developer, an iconist or illustrator, a freelancer with big dreams, an API wizard, a devotee of marketing 2.0, a web designer, a Gowalla fan, or what, you won’t want to miss this episode.

The Big Web Show is taped in front of a live internet audience, and you can be part of it. Join co-host Dan Benjamin and me at 1:00 PM ET today to participate in the live taping of Episode 14.

If you miss the live taping, you can watch the show on our website or via iTunes later tonight.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards (often within hours of taping) via iTunes (audio feed | video feed) and the web.

Photo: Keegan Jones.

Update! Final audio and video are now available for your listening and viewing pleasure at 5by5.tv.

This Thursday, June 3, 2010, at 1:00 PM EDT, join Dan Benjamin and me for the taping of The Big Web Show Episode Six, as we chat with leading interaction designer Luke Wroblewski about designing for the mobile space, and learn why the mobile experience for a web application or site should be designed before the PC version.

Designing for 700 million people

Luke Wroblewski is an internationally recognized digital product design leader who has designed or contributed to software used by more than 700 million people worldwide. He is the author of Web Form Design (“That rare book capable of transforming the way an entire field does its business.”—Communication Arts) and Functioning Form, and an extremely popular speaker at leading web design conferences. After long stints as Chief Design Architect at Yahoo! and Lead User Interface Designer of eBay Inc.’s platform team, he is currently Chief Design Officer and co-founder of a stealth start-up.

Watch, Listen, Participate

Participate in the live taping by sharing your questions for Luke via chatroom or phone.

Soon after taping, video and audio versions of the Episode 6 podcast will be posted in the iTunes store and on our website and announced here and via Twitter. (The complete schedule of 5by5 podcasts is available for your pleasure.)

5by5 is an Internet broadcasting network, home to podcasts like The Pipeline, The Big Web Show, The Conversation, The Dev Show, and more, with over 120,000 downloads per week. The Big Web Show features special guests and topics like the future of publishing, art direction online, content strategy, web fonts and typography, CMS shootouts, HTML5 and CSS3, building an audience, and more. Previous episodes are available for your listening and viewing pleasure.

Note Steve’s concluding paragraph:

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Sounds familiar.

Except Steve Jobs’s subtext isn’t “web standards, web standards, web standards, told you so.”

Except it kind of is.

With a Little Help: The Price Is Right – 2010-02-15 05:00:00 | Publishers Weekly

Return of the Mobile Style Sheet

by DOMINIQUE HAZAËL-MASSIEUX

At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they’ll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.

Semantics in HTML 5

by JOHN ALLSOPP

The BBC’s dropping of hCalendar because of accessibility and usability concerns demonstrates that we have pushed the semantic capability of HTML far beyond what it can handle. The need to clearly and unambiguously add rich, meaningful semantics to markup is a driving goal of the HTML 5 project. Yet HTML 5 has two problems: it is not backward compatible because its semantic elements will not work in 75% of our browsers; and it is not forward compatible because its semantics are not extensible. If “making up new elements” isn’t the solution, what is?

[tags]HTML5, mobileCSS, webstandards, alistapart, johnallsopp, W3C, Dominique Hazael-Massieux[/tags]