Wikis for Collaboration


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This is a discussion of trends in the mobile industry with regards to web use and adoption, with a bit of discussion regarding web development, usability, security, and the potential applicability of mobile web apps in Sandia’s public-facing web properties as well as the work we do for others.
  • This is the basic definition.
  • Before June 2007, web use from mobile was nominal. What changed? iPhone. iPhone legitimized the idea of surfing the web from a mobile device. Apple prevented client app development for a year before allowing developers to build non-web applications. This fueled massive growth of mobile web development and forced developers to stretch the capabilities of what was possible with mere client-side technologies such as XHTML, CSS, and JavaScript. Check out the original web version of Bejeweled. In his book, “Mobile as the 7th of the Mass Media” (2008, futuretext Ltd.), Tomi T. Ahonen makes the case that mobile media is nothing to be ignored: 31% of consumer spending in the music industry is spent on mobile purchases, while in the gaming industry the number is 20%. It has been deduced that—as of today—approximately one and a half billion Internet connections being generated from mobile phones, and 63% of the global population has a potentially Internet-capable mobile phone. Over 60 countries around the world have mobile phone penetration exceeding 100% of the population—which means many people own not one but two mobile devices—And finally, Nielsen in May of 2008 reported that leading Internet sites increased their usage by 13% over desktop-based traffic alone, and in certain cases such as for weather and entertainment up to 20%. These are significant trend indicators for mobile web growth, which will undoubtedly continue to increase in the coming years. In February of 2008 Google reported that they were seeing 50 times more search queries coming from iPhone than from any other mobile handset at that time. While this snapshot statistic is not necessarily representative of the entire mobile Web, it is an auspicious metric considering the iPhone had been out for only seven or eight months and constituted a tiny fraction of the mobile handset hardware market at the time. Nevertheless, despite its limited market share, the iPhone’s Mobile Safari browser was clearly already on its way to becoming the dominant player in the mobile web market space. What was the key to the mobile Web’s adoption on the iPhone? The answer is usability. So much attention to detail was placed on the iPhone and its Mobile Safari web browser that users and developers alike were suddenly able to create and consume traditional Web content with very little additional effort.
  • Instant broadcasting/publishing or data collection platform for the field
  • Small screen size - This makes it difficult or impossible to see text and graphics dependent on the standard size of a desktop computer screen. Lack of windows - On a desktop computer, the ability to open more than one window at a time allows for multi-tasking and for easy revert to a previous page. On mobile web, only one page can be displayed at a time, and pages can only be viewed in the sequence they were originally accessed. Navigation - Mobile devices do not use a mouselike pointer, but rather simply an up and down function for scrolling, thereby limiting the flexibility in navigation. Lack of Javascript and cookies - Most devices do not support client-side scripting and storage of cookies (smartphones and iPhone excluded), which are now widely used in most Web sites for enhancing user experience, facilitating the validation of data entered by the page visitor, etc. This also results in web analytics tools (like Google Analytics) not being suitable for uniquely identifying visitors using mobile devices. Types of pages accessible - Many sites that can be accessed on a desktop cannot on a mobile device. Many devices cannot access pages with a secured connection, Flash or other similar software, PDFs, or video sites, although recently this has been changing. Speed - On most mobile devices, the speed of service is very slow, often slower than dial-up Internet access. Broken pages - On many devices, a single page as viewed on a desktop is broken into segments, which are each treated as a separate page. Paired with the slow speed, navigation between these pages is slow. Compressed pages - Many pages, in their conversion to mobile format, are squeezed into an order different from how they would customarily be viewed on a desktop computer. Size of messages - Many devices have limits on the number of characters that can be sent in an email message.
  • IE: comes installed on all Windows Mobile devices. Often vendors insist on bundling Opera due to IE’s limitations. IE Mobile has nothing to do with IE desktop – separate code bases. NetFront: Blazer (palm), Kindle Basic Web. Supports SVG and JavaScript Openwave: Used to be a dominant player, development is currently on hold. Gecko (Fennec): Promising initiative from Mozilla to put Firefox on mobiles. Currently no implementations for industry as a default yet.
  • This small sampling demonstrates the wide range of default browser rendering engines and screen capabilities between the various models and vendors. Even among the same vendor there is wide variance in browser support. Opera has the largest numbers for support, WebKit has the highest momentum for adoption.
  • Use desktop emulators for previewing content.
  • We will quickly look at the UA sniffing and separate site approaches, and then focus on media targets as a quick enhancement you can implement today for existing sites.
  • Maintenance can be a chore with UA detection. However, it does allow you to deliver trimmed content and save bandwidth. . UAs change all the time and there’s little standard. Plan on maintenance.
  • Screenshot showing mapped routes for the mobile version of an application in Ruby on Rails, invoking special controllers and actions for specific URLs in the mobile format.
  • Of these, the link method has the widest support. Things start to fail in older browsers and you go down the list. We will focus on this method as a quick and easy add-on to many existing sites. No reason not to.
  • The sidebar information may be getting in the way of the mobile user experience. Simple CSS rules can be used to hide or move the content. Given a sidebar has been floated to create a two column layout, simply kill the float.
  • Say an image is too wide for most mobile screens and is causing layout problems. Reset it to the alt attribute and give the heading some typography! Reset long text buttons with content property. Résumé becomes CV, Upcoming Events becomes Events, and Multimedia becomes A/V
  • More examples in source code examples
  • CSS3 works great on iPhone!
  • Wikis for Collaboration

    1. 1. Refactoring for the Mobile Web Joseph R. Lewis — Sandia National Laboratories
    2. 2. Some questions to keep in mind: <ul><li>What is the mobile web? </li></ul><ul><li>Why is this important to us now? </li></ul><ul><li>What trends are driving this importance? </li></ul><ul><li>What should we be doing as web developers for our mobile audience? </li></ul><ul><li>How can I make this happen in my web sites now? </li></ul>
    3. 3. What is the mobile web <ul><li>Web access via handheld and wireless devices: </li></ul><ul><ul><li>Smartphones </li></ul></ul><ul><ul><ul><li>iPhone </li></ul></ul></ul><ul><ul><ul><li>Palm Prē </li></ul></ul></ul><ul><ul><ul><li>Android </li></ul></ul></ul><ul><ul><ul><li>Blackberry </li></ul></ul></ul><ul><ul><li>PDAs & Other gadgetry (Kindle, iPod Touch, etc) </li></ul></ul><ul><ul><li>Forget about low-end phones with claimed web access. </li></ul></ul>
    4. 4. Mobile Web Use Trends <ul><li>Explosive growth: </li></ul><ul><ul><li>Bango : Mobile web use in the US experienced three fold increase in 2007 </li></ul></ul><ul><ul><li>Juniper : Mobile web users will grow from 577 million in 2008 to more than 1.7 billion in 2013 </li></ul></ul><ul><li>iPhone leading the way since launch of June 2007: </li></ul><ul><ul><li>AdMob : iPhone in 11/2008 became single most-used web device over any other handset </li></ul></ul><ul><ul><li>Google 2/2008: Apple iPhone generates 50 times more searches than any other device </li></ul></ul><ul><li>Opera is most widely deployed mobile browser: ~54% market share </li></ul>
    5. 5. Expect increased mobile web use <ul><li>Some major sites reporting over 13% of their traffic coming from mobile devices </li></ul><ul><ul><li>Weather & Entertainment: often over 20% </li></ul></ul><ul><li>Web-enabled client apps are critical to the market. </li></ul><ul><ul><li>~100,000 apps for iPhone </li></ul></ul><ul><ul><li>~10,000 for Android </li></ul></ul><ul><ul><li>~300 for Prē </li></ul></ul><ul><li>Social networking dominates web+app use </li></ul><ul><ul><li>Global use > 40% for social networking </li></ul></ul><ul><ul><li>USA, South Africa, and Indonesia register > 60% use (Opera, 5/2008) </li></ul></ul>
    6. 6. Advantages for mobile web apps <ul><li>Convenience : Always on, always near the owner. </li></ul><ul><ul><li>60% of mobile users keep their phones bedside at night (Ahonen, 2008) </li></ul></ul><ul><li>Ubiquitous, omnipresent information streams : Don’t need to return to a desk to input data </li></ul><ul><li>Location aware : GPS, accelerometers widely available </li></ul><ul><li>Media input : Most smartphones have built-in camera, microphone, and speaker in addition to keyboard input </li></ul>
    7. 7. Mobile Web Challenges <ul><li>Small screen size </li></ul><ul><li>Navigation </li></ul><ul><li>Reduced functionality </li></ul><ul><ul><li>Do not rely on JavaScript, Java, Flash, etc. </li></ul></ul><ul><li>Slow Networks </li></ul><ul><ul><li>City congestion/canyons </li></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>No 3G </li></ul></ul><ul><li>Lower processing capability </li></ul><ul><ul><li>Less CPU power </li></ul></ul><ul><ul><li>Less RAM </li></ul></ul>
    8. 8. Embedded Browsers <ul><li>Mobile web not just about the default web browser </li></ul><ul><li>SDKs allow embedding of rendering engine in software </li></ul><ul><li>For iPhone OS – WebKit is the only option </li></ul><ul><li>Entire applications can be built on skinning a web interface </li></ul><ul><li>Might only need HTML, CSS, JavaScript, and/or some simple server-side language such as Ruby or PHP to build an app </li></ul>
    9. 9. Opera <ul><li>Two flavors: </li></ul><ul><ul><li>Opera Mini – works on just about any phone, most common version </li></ul></ul><ul><ul><li>Opera Mobile – more full-featured, works w/ PDAs running Windows Mobile and Symbian UIQ Touch </li></ul></ul><ul><li>Now defaults to ‘screen’ media instead of ‘handheld’ media type rendering, following WebKit </li></ul><ul><li>Supports CSS3 media queries: </li></ul>
    10. 10. WebKit <ul><li>Open source, lightweight codebase </li></ul><ul><li>Strong deployment </li></ul><ul><ul><li>Safari on iPhone OS </li></ul></ul><ul><ul><li>Android OS </li></ul></ul><ul><ul><li>WebOS (Palm Prē) </li></ul></ul><ul><ul><li>Nokia S60 </li></ul></ul><ul><li>No support for media type = ‘handheld’ </li></ul><ul><li>Instead uses media queries </li></ul>
    11. 11. Other rendering engines to consider <ul><li>Internet Explorer Mobile </li></ul><ul><li>NetFront </li></ul><ul><li>Gecko (Fennec) </li></ul><ul><li>Obigo </li></ul><ul><li>Polaris </li></ul>
    12. 12. Browsers vs. Screen Sizes
    13. 13. Developing on the desktop for mobile <ul><li>Use Opera in Small Screen mode for developing for handheld media </li></ul><ul><li>Use iPhone SDK & Android SDK emulators for developing for WebKit </li></ul><ul><li>Opera has a menu item to switch to handheld media. </li></ul><ul><li>Firefox users can install the Web Developer Toolbar to switch to handheld media easily. </li></ul>
    14. 14. Strategies for mobile web delivery <ul><li>User-agent sniffing </li></ul><ul><li>CSS media types </li></ul><ul><li>Separate site ( or </li></ul><ul><li>Combinations of the above usually are most effective </li></ul>
    15. 15. User-agent detection
    16. 16. Separate sites or codebases <ul><li>Might mean a lot more code to maintain </li></ul><ul><ul><li>Improve situation in MVC using modified routes, controllers & views </li></ul></ul><ul><li>Can more effectively address constrained bandwidth through ruthless optimization </li></ul>
    17. 17. Delivering mobile style <ul><li>The link method: </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;mobile.css&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; > </li></ul><ul><li>Applying handheld to an embedded stylesheet: </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;handheld&quot; > </li></ul><ul><li> { color: red; } </li></ul><ul><li></style> </li></ul><ul><li>Using @media handheld to target handheld styles in embedded or external CSS: </li></ul><ul><li>@media handheld { { color: red; } } </li></ul><ul><li>Using @media handheld to import a mobile stylesheet: </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>@import url(mobile.css) handheld; </li></ul><ul><li></style> </li></ul>
    18. 18. Viewport and media queries <ul><li>WebKit assumes 960 pixels </li></ul><ul><li>Reset that assumption: </li></ul><ul><ul><li><meta name=&quot;viewport” content=&quot;width=640&quot; /> </li></ul></ul><ul><li>As mentioned, Opera and WebKit default to screen media but support media queries </li></ul><ul><li>Use media query to reset width: </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;only screen and (max-device-width: 480px)&quot; > </li></ul><ul><li>div.layout { </li></ul><ul><li>width:100%; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul>
    19. 19. Combine handheld and media query targets <ul><li>Add the handheld value to your media string: </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot; handheld, only screen and (max-device-width: 480px)&quot;> </li></ul>
    20. 20. Mobile Refactoring Rule No.1 <ul><li>Hide unneeded sections </li></ul><ul><li>div#sidebar { display:none; } </li></ul><ul><li>Or move them </li></ul><ul><li>div#sidebar { float:none; } </li></ul>
    21. 21. Mobile Refactoring Rule No.2 <ul><li>Reset the content width </li></ul><ul><li>div#layout { width:100%; } </li></ul>
    22. 22. Abbreviate <ul><li>Reset wide text using the content property: </li></ul><ul><li>img#masthead { </li></ul><ul><li>content: attr(alt); </li></ul><ul><li>font-family: cursive; </li></ul><ul><li>} </li></ul><ul><li>#sitenav a[href=&quot;;] { </li></ul><ul><li>content: &quot;CV&quot;; </li></ul><ul><li>} </li></ul><ul><li>#sitenav a[href=&quot;;] { </li></ul><ul><li>content: &quot;Events&quot;; </li></ul><ul><li>} </li></ul><ul><li>#sitenav a[href=&quot;;] { </li></ul><ul><li>content: &quot;A/V&quot;; </li></ul><ul><li>} </li></ul>
    23. 23. Design for a touch screen <ul><li>div#sitenav a { </li></ul><ul><li>width:100%; </li></ul><ul><li>font-size:2em; </li></ul><ul><li>margin:0; </li></ul><ul><li>border:1px solid #333; </li></ul><ul><li>text-align:center; </li></ul><ul><li>} </li></ul>
    24. 24. Nifty WebKit Tricks: Transforms & CSS3 <ul><li>dl { </li></ul><ul><li>opacity:0.25; </li></ul><ul><li>-webkit-transform: skew(-30deg) rotate(-8deg) translate(-5em,-10em) scale(1.5); </li></ul><ul><li>-webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5); </li></ul><ul><li>-webkit-transition-duration: 2s; </li></ul><ul><li>-webkit-transition-timing-function: ease-in; </li></ul><ul><li>} </li></ul><ul><li>dl:hover { </li></ul><ul><li>-webkit-transform: skew(0deg) rotate(0deg) translate(0,0) scale(1); </li></ul><ul><li>opacity: 1; </li></ul><ul><li>-webkit-border-radius: 20px; </li></ul><ul><li>} </li></ul>
    25. 25. Use cases for mobile refactoring <ul><li>Public web presence </li></ul><ul><li>Mobile users on your intranet (travel, time, information) </li></ul><ul><li>Scientific applications </li></ul><ul><ul><li>Lab notes </li></ul></ul><ul><ul><li>Collaboration </li></ul></ul><ul><ul><li>Status & project management </li></ul></ul><ul><ul><li>Mobile data distribution to field users, first responders </li></ul></ul><ul><ul><li>Research using mobile data gathering </li></ul></ul>
    26. 26. What about mobile apps? <ul><li>Apps require installation – web pages are instantly accessible, instantly updated </li></ul><ul><li>No app store approval waiting </li></ul><ul><li>Not platform dependent – no need to compile for iPhone/Android/Pre/Blackberry/WinMobile </li></ul><ul><li>Database storage support in HTML5 </li></ul><ul><ul><li>Users leverage this in Safari for iPhone via “Add to home screen” feature </li></ul></ul>
    27. 27. Questions?
    28. 28. Resources <ul><li>A List Apart – Return of the Mobile Style Sheet: </li></ul><ul><li>Mobile Web Best Practices: </li></ul><ul><li>Google Android: </li></ul><ul><li>Apple iPhone Developer: </li></ul><ul><li>Designing with Opera Mini in mind: </li></ul><ul><li>Opera Mini emulator: </li></ul>
    29. 29. Thanks! <ul><li>Joseph R. Lewis </li></ul><ul><li>Sandia National Laboratories </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.