Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@grigs bit.ly/grigs_wdx2011

Slide 3

Slide 3 text

http:// www.flickr.com/ photos/gurana/ 3976626644/ I’m a mobile web advocate.

Slide 4

Slide 4 text

http://www.flickr.com/photos/silipo/378476114/ 21% of Google’s largest advertisers have mobile web sites. Only

Slide 5

Slide 5 text

http://www.flickr.com/photos/silipo/378476114/ 21% of Google’s largest advertisers have mobile web sites. Only Why?

Slide 6

Slide 6 text

I told myself it was the reality distortion eld.

Slide 7

Slide 7 text

I was fooling myself. Mobile web is freaking hard.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

HTML5 apps Right now nobody’s interested in a mobile solution that does not contain the words “iPhone” and “app” and that is not submitted to a closed environment where it competes with approximately 2,437 similar mobile solutions. Compared to the current crop of mobile clients and developers, lemmings marching off a cliff follow a solid, sensible strategy. Startling them out of this obsession requires nothing short of a new buzzword. Therefore I’d like to re-brand standards-based mobile websites and applications, definitely including W3C Widgets, as “HTML5 apps.” People outside our little technical circle are already aware of the existence of HTML5, and I don’t think it needs much of an effort to elevate it to full buzzwordiness. Technically, HTML5 apps would encompass all websites as well as all the myriads of (usually locally installed) web-standards-based application 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 deploys 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 is nonsense This is the blog of Peter-Paul Koch, mobile platform 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 contents show 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

Slide 12

Slide 12 text

asymco Horace Dediu © 2011 Twitter About Us Contact Blog Status Resources API Business Help Jobs Terms Privacy 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 Why are we ghting native apps?

Slide 13

Slide 13 text

Native Sells Itself We remember when the web was the source of irrational exuberance.

Slide 14

Slide 14 text

http://www.flickr.com/photos/pricklebush/224674200/ Let me share our secret for selling mobile web.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

2. Native is Easier to Design

Slide 20

Slide 20 text

Lots of resources for native app design.

Slide 21

Slide 21 text

Fewer for mobile web, but they exist.

Slide 22

Slide 22 text

But the examples mostly look like iPhone apps.

Slide 23

Slide 23 text

Does an Android user expect iPhone UI conventions?

Slide 24

Slide 24 text

Do we adjust UI for different geographies?

Slide 25

Slide 25 text

What is the uniquely mobile web experience? http://www.flickr.com/photos/nickwheeleroz/2212101890/in/photostream/

Slide 26

Slide 26 text

First uniquely mobile web UI? Pull down menus?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Tools don’t make people designers.

Slide 30

Slide 30 text

3. Native is Easier to Test

Slide 31

Slide 31 text

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 Face the Challenge of Testing on Enough Devices

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED D E C E M B E R 14, 2010 Smartphone Browser Landscape by 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 Topics 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 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 with customers with No. 320

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

What about RWD? http://www.flickr.com/photos/londonannie/4904832807/ Jason, you’re doing it wrong!

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

“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

Slide 53

Slide 53 text

http://www.flickr.com/photos/4nton/5692328434/sizes/l/ User Agent Switching: Useful tool for developers or spawn of satan?

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

25 of 30 sites in Alexa Top 30 Uses Device Detection Other ve don’t offer mobile sites!

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Native iPhone App Asked to make it feel similar in mobile web.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Mobile Web What about devices that don’t support oats?

Slide 63

Slide 63 text

We can deliver a great experience using tables. Should modern devices get the lowest common denominator code? http://www.flickr.com/photos/stml/3625386561/

Slide 64

Slide 64 text

Supporting those older devices made people happy.

Slide 65

Slide 65 text

http://www.flickr.com/photos/arguez/2247369944/ is isn’t religion.

Slide 66

Slide 66 text

ese are simply tools. http://www.flickr.com/photos/bre/552152780/

Slide 67

Slide 67 text

Don’t let religion blind you to tools you may need to solve real problems. http://www.flickr.com/photos/ yamagatacamille/5434502250/

Slide 68

Slide 68 text

Home About Us Services Blog Accolades Contact Us « Mobile operating systems and browsers are headed in opposite directions More on CSS Media Queries for Mobile » Search Subscribe RSS 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 Mobile design, development and strategy Cloud Four Blog 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 developers. Several subsequent articles have touted the CSS media query feature as a way to build mobile-optimized web sites. Even I’m guilty of contributing to this meme with my article on CSS orientation.

Slide 69

Slide 69 text

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.

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

We’ve remade the Internet in our image.

Slide 74

Slide 74 text

Obese

Slide 75

Slide 75 text

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/

Slide 76

Slide 76 text

e mobile context may not be what you expect. Maybe they are on wi- .

Slide 77

Slide 77 text

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.

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

RESPONSIVE WEB DESIGN Mobile First

Slide 83

Slide 83 text

Where are the mobile rst responsive web designs?

Slide 84

Slide 84 text

9% 4% 21% 38% 4% 25% Comparison of Mobile & Desktop RWD Views 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.

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

yiibu articles projects search... go Mobile Web Reference A Practical Guide to Nokia Browsers 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 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.

Slide 87

Slide 87 text

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 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, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. This book will be released in Spring 2011. A B O U T T H E A U T H O R 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. RESPONSIVE WEB DESIGN C A R T 0 items $0.00 View Cart Checkout H A V E A Q U E S T I O N ? Read our FAQs F E A T U R E D B O O K The Elements of Content Strategy “This brief, brilliant treatise is the guidebook the industry has clamored for.” — Jeffrey Zeldman N E W S L E T T E R Keep 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

Slide 88

Slide 88 text

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 from a talk by Todd Parker and Scott Jehl Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more Responsive Images: Experimenting with Context-Aware Image Sizing Dingbat Webfonts: Great potential, but we see (and hear) accessibility issues 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 a very hot topic this year, inspiring developers who long for a “one codebase serves all” future. But critics of the technique have pointed out several issues that need to be addressed before it can scale perfectly from handheld to desktop — specifically, while HTML, CSS and JavaScript can be light enough to share across all experiences, desktop-optimized images are often too heavy for mobile connections, and mobile-optimized images are too low quality 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 out to address this shortcoming of responsive design with a technique that requests an appropriate image size for a given context without resorting Contact Us Contact Us

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

@jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

Slide 92

Slide 92 text

Web Content Management Systems are the Mainframes of the Mobile Era

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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/

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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 Web Server w/ RWD Platform Internet APIs Necessary to Support App Development

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

Let’s get to work.

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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