Child pages
  • Web Council Meeting - November 19, 2009
Skip to end of metadata
Go to start of metadata

Introduction

  • 2010 Meeting dates are now up on the UW Web Council Web site
  • Topics of Interest list collected in the fall are also available on the site
  • Mobile Web Group being added to the working group list
  • Central Web Team's blog is now up and available http://depts.washington.edu/uweb/blog
    • Updates to the templates will be posted on the blog
    • Many changes on the new homepage that will affect navigation schemes
  • Tim and Chris are still working on the header/footer template generator
    • very good response
    • feedback is welcome, want to make it as good and trouble free as possible

Creating a Mobile Web

David Morton, Director, Mobile Communications, UW Technology
dmorton@uw.edu

  • Web Content To Go
    • From hard to read to easily digested and "snackable"
    • Why mobilely optimized Web
    • Some example sites
    • Basic principles
    • Overview
  • Mobile landscape is changing rapidly
    • We are not in Kansas anymore
    • More and more people are using mobile communications
    • WiFi stats shows about 13000 devices on our network in October
    • WiFi enabled phones will surpass PCs by 2011
    • 50% of undergrads have Web enabled phones
  • Native versus Web
    • Native Apps
      • Optimize experience
      • Tightly integrared
      • Performance, controls
      • Must download app, well document pains getting through Apple approval process
    • Web App (market seems to be converging on WebKit)
      • Ubiquity of devices
      • Layer platform customization
      • Widely available skills
      • Less optimized experience
      • Less convenient, less sticky
    • Which Web experience?
      • Full Web
      • Full web with columns
      • Separate mobile URL?
      • Auto-detect mobile?
      • Customize experience?
  • Examples
    • www.cnn.com
    • amazon.com
    • www.ocean.washington.edu
    • uw.edu
    • nytimes.com
    • Discussion
      • NY Times shows whole page, you then zoom in to a column
        • Optimized mobile experience is not apparent; mobile.nytimes.com
        • One idea is that there should be easy ways to move between the mobile and desktop experience
      • Newsweek - senses you are mobile, goes to m.newsweek.com with 'View Full Site' button to see whole page; mobile version makes index easy to get to, search easy to use
      • Amazon detects browser, sends you to a highly optimized site with a lot of functionality; has 'PC Site' button to get to the whole site
      • Gmail detects browser, gives you optimized display; gradually adding capability
      • Many of these sites also offer native apps you can download
        • Native apps may have monetization motivation; can collect more information about user and his device; some native apps may have monthly subscription fees (Conde Nast seems to be going that way)
        • Not clear which is the way to go; both are likely to be around for quite a while
        • HTML5 will make new functionality possible
      • You want native app stickiness; NY Times, when you bookmark it, just gives you a miniature icon of the Web page; UW page gives you a nice UW logo, relatively easy to do; May want working group to talk about iconography should work here at the UW
      • UW main page displays pretty well, pictures are easy to see, text harder to read; double tap on particular area it zooms in and text becomes easier to read
        • How can we work toward more seamless movement among UW sites
      • Oceanography - most content in clean two column layout; can easily zoom in
        or rotate to get to particular stories
        • Menus rely on Javascript, which did not work in iPhone simulator
      • Daily - video on home page about the m.uw app is in Flash, which does not show up on the iPhone
        • Adobe is working on making Flash work, but not likely to be available for iPhone for a long time
      • YouTube content is in MPEG4, which Apple does support
        • Older videos have not been converted. YouTube often offers content in multiple formats
      • UWeek formatted to go fairly well over email, limited use of columns, views fairly well on iPhone; can easily doubletap to zoom in;
        • Column widths on many pages are fixed and fairly wide, which can easily force back and forth scrolling
      • UW News not very readable, partly because of small font sizes and fixed widths; tweaking design and layout to improve experience might be relatively easy
      • wptouch is a plugin for WordPress blogs that optimizes the skin for use on mobiles; go into WordPress admin, download it, turn it on; automatically senses visitor is on a mobile device
    • Form factor - we are going backwards into small screen sizes
      • We are going to have the full range of screen sizes around for a long time
      • Some new technologies are coming in that provide new ways to present and use content
        • Mobile and desktop are two very different use cases
        • In developing world, mobile is primary device people have for connecting to Internet
        • People want largely different things in desktop versus mobile context
        • What are the top things people want to do when they are mobile, work on making them "snackable" (mobilely doable)
      • Not all devices are created equal; From flipphones to smartphones
        • Full featured mobiles are converging on WebKit
        • Limited feature devices are varied
  • Some guidelines
    • Use standards
      • HTML 4&5
      • CSS 2.1 & 3
      • Well structured HTML
      • Browser independent
        • Check capabilities rather than user agent
      • Smaller files faster over slow networks
    • Practice good web design
    • Limit file size and number of files
    • Avoid use of framesets
      • Much harder to scroll
    • Use columns
      • Facilitates zooming in
      • Viewport metatag enables you to tell how wide your primary content is, as opposed to page width, which you might have set to a value such as  940px
    • Advertise mobile URL (if you have one)
      • We are using m.
      • Minimal redirects, slows things down
      • Take advantage of new features
        • cache where appropriate
    • Plan for lowest common denominator
    • Optimize for WebKit where you can
    • Sources
      • developer.apple.com/safari
      • www.w3.org/TR/mwabp/ - building for the lowest common denominator
  • How many apps should the UW have
    • Current app provides opportunity to assemble things under one roof
      • Would be nice to have the minimum number of UW apps
      • Good to have a master app that makes it easy to get to the info you want
      • Want it customizable by the user to focus on what they are interested in
      • Mobile app content is in the form of RSS feeds, XML data; looking for more content
      • UW native app capabilities are available to all departments
        • We bought a large license with many components
  • Testing
    • Emulators are tricky and complicated to get going
    • Android and Palm are easy to get set up to work, others are difficult
    • Emulators not always an accurate characterization of what you will see on the device
      • Maybe we can work together to set up some kind of testing suite
    • Debugging scripting on the iPhone is difficult

HTML5: Mobile Elements & APIs

Shawn Medero, Web Developer, ORIS/TechTransfer
smedero@uw.edu

The slides for this talk are available at http://staff.washington.edu/smedero/presentations/html5-mobile/

  • "The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work" Tim Berners-Lee
  • HTML5 is and effort to reformat all the various HTML and XHTML versions into one
  • 95% of HTML on the Web is Invalid
    • Browsers reinterpret HTML/XHTML if it does not agree withit
    • The code we write is often not what the browser sends to the device
  • Backward compatibility is important to vendors
    • There will always be a lot of invalid HTML out there
    • Recovery mechanisms in browsers need definition; browsers do different things
  • HTML5 - Rethinks HTML as a DOM language, a serialization format compatible with legacy HTML use agents and APIs
  • New elements;
    • media: audio, canvas, video, embed, (maybe math, svg)
    • sectioning: article, aside, footer, header, nav, section
    • interactive: Web Forms 2 (set of new form inputs), command, details, menu
    • text level: progress, meter
  • New APIs
    • XHTMLHttpRequest
    • canvas 2D drawing
    • contenteditable
    • drag & drop
    • geolocation (actually not part of HTML5 working group scope, WebAps WG)
    • storage: session, local, web
  • Web Forms 2
    • provides client side validation, will not have do a lot of the validation we now do for initial validation
    • some provide patterns you can define
  • Canvas
    • Lets mobile devices do a lot of what Flash can do
    • Programmable img with no DOM presence
    • Primary use cases are customized widgets, data visualizations, and gaming
    • An accessibility nightmare because no tree exists in DOM that assistive/adaptive technologies can access
    • Implemented in Opera, Mozilla, Safari
  • Offline Applications
    • Interact with Web apploications and documents even when the network is unavailable
    • Can define a manifest attribute that caches everything in the app
    • iPhones "Add to Home Screen" feature; once downloaded never have to go on Web again
  • Web Storage
    • Client-side key-value pair storage at a window (session) or long-term level (local)
    • iPhone, Android implement Web Storage, IE8 sorta does
  • Geolocation
    • Often lumped with HTML5, but is a separate project
  • Using HTML5
    • DOCTYPE only declares what version of HTML/XHTML you are using
      • Helps get you into standards mode
    • Feature detection is better approach; devices have different subsets of HTML5 features
      • diveintohtml5.org/detect.html
    • Target Android (2.0), iphone 2+, Palm Pre devices
      • WebKit ecosystem is highly divergent
    • Coming: Fennec (Mozilla), Mobile Opera (not Opera Mini)
  • Who is using HTML5
    • Apple (Dashboard, ipHone Web Apps SDK)
    • Google (Gmail, Latitude, Wave)
    • Operate (Unite)
    • Palm (WebOS, Mojo SDK)
    • W3C (Validator)
    • Others: An Event Apart, Heap, Torch
  • HTML5-Aware Frameworks for Mobile Devices (generally iPhone specific)
    • iUI
    • JQTouch
    • Palm Mojo SDK
    • Phone GAP
  • No labels