1. October 16, 2007HighEdWebDev2007 Single Source Website for Full Spectrum Access Rick Ells University of Washington rells@cac.washington.edu http://staff.washington.edu/rells/

2. October 16, 2007HighEdWebDev2007 Across the spectrum People can access your Web content with a wide range of devices. Can they read it? Is it useful to them?

3. October 16, 2007HighEdWebDev2007 UW Home Page on FireFox

4. October 16, 2007HighEdWebDev2007 Single source How far can you go with a single source store in supporting the growing range of access devices? How far do you want to go in supporting the growing range of access devices?

5. October 16, 2007HighEdWebDev2007 Device independence Standards based designs are flexible –separation of content and presentation –CSS control of presentation Device independence has been a basic principle Web technology since the beginning

6. October 16, 2007HighEdWebDev2007 WAP and XHTML MP Wireless Application Protocol (WAP) –WAP 1 Wireless Markup Language (WML) Dying rapidly, no new WML development –WAP 2 XHTML Mobile Profile “Nearly all devices sold today are WAP 2.0 devices and they can access ‘ordinary’ sites, not just XHTML-MP and WML sites” - Cameron Moll

7. October 16, 2007HighEdWebDev2007 The mobile context Photo from cs4fn.org Is the phone mobile, or the user? When you are mobile, what kinds of tasks do you want to do? Tasks immediately relevant to now, here, what’s happening

8. October 16, 2007HighEdWebDev2007 Miniaturized or mobilized? SouthWest Airlines Mobile Check In Page

9. October 16, 2007HighEdWebDev2007 One design for all? Full size graphical browsers Small screen mobile devices Valid, standards based code Semantic markup Structure content Separate content and presentation Control presentation with CSS Avoid know hazards Do not rely on cookies Do not rely on embedded objects or scripts Do not use tables for layout Do not nest tables Do not use frames Organize content so that it may be read without stylesheets Keep page size within memory limitations of the accessing device W3C Mobile Web Initiative (http://www.w3.org/Mobile/) Strongly contrasting design approaches!

10. October 16, 2007HighEdWebDev2007 UW Home Page on a Palm TX Flex design flowing into a small space

11. October 16, 2007HighEdWebDev2007 Technology will fix things? The capabilities of mobile devices are rapidly improving Standards-based sites will be usable on more and more devices –Standards compliant –Validated –Div and semantic structure –Separation of content and presentation

12. October 16, 2007HighEdWebDev2007 What iPhones want SupportedNot supported HTML 4.01 XHTML 1.0 CSS 2.1 and partial CSS3 ECMAScript 3 (JavaScript) W3C DOM Level 2 AJAX technologies, including XMLHTTPRequest WML Mouse-over events Hover styles Java applets Flash Plug-in installation

13. October 16, 2007HighEdWebDev2007 UW Home Page on an iPhone Just pinch open to zoom in

14. October 16, 2007HighEdWebDev2007 Use “media” to target formatting? Stylesheet with a media type of handheld Styling appropriate to a mobile device, including turning off display of some divisions #ads {display: none; } Seems to offer a simple way to sense device type

15. October 16, 2007HighEdWebDev2007 Problems with “Handheld” Spotty implementation (not widely or consistently used) Too general –Wide variety of mobile devices identify themselves as “handheld” –iPhone identifies itself as “screen” –Apple recommends basing conditional styles for the iPhone on screen size, not media type

16. October 16, 2007HighEdWebDev2007 Device detection Check user agent string from mobile device Compare to table of device types –Wireless Universal Resource File (http://wurfl.sourceforge.net/)http://wurfl.sourceforge.net/ –Contains XML data of device characteristics –Generate page appropriate to device abilities

17. October 16, 2007HighEdWebDev2007 Emerging Strategy Standards based single source for conventional browsers and newer PDAs and smartphones Use device detection to send appropriate pages to less capable devices and small screens Device Detection

18. October 16, 2007HighEdWebDev2007 Alternative strategy Maintain two separate stores? –When is it appropriate to develop an independent set of pages for small devices? Device Detection

19. October 16, 2007HighEdWebDev2007 What pages should be full- spectrum functional? Auth/auth Directory Calendar News Contacts Emergency information

20. October 16, 2007HighEdWebDev2007 Google Calendar on a Palm TX

21. October 16, 2007HighEdWebDev2007 Weblogin on a Palm TX

22. October 16, 2007HighEdWebDev2007 Conclusions Standards-based methods cover a wide range of devices Mobiles are used in a different context, requiring different designs –Frequent use during the day for brief periods each time –Provide services for here, now, and what’s happening Small mobiles may require separate pages to support their different function

23. October 16, 2007HighEdWebDev2007 Thoughts Single source for full spectrum access is possible, but it will get complicated if you are to fully support the best role of services delivered on small devices Key pages should be usable by the full spectrum of devices –Core interactive services (directories, calendars, auth/auth pages) Rich media and rich applications are designed for specific parts of the spectrum or families of devices –Apps provide higher interactivity, but are tailored to specific devices

24. October 16, 2007HighEdWebDev2007 Tri-spectrum thinking Screen size is only one dimension of the design space of Web delivered information and services.

25. October 16, 2007HighEdWebDev2007 Deeper thoughts Mobile devices are about users who are mobile –The devices will keep changing and improving The browser is not the Web –Applications can connect to the APIs of services, delivering information without the use of a browser