Download Single Source Website for Full Spectrum Access

Single Source Website
for Full Spectrum Access
Rick Ells
University of Washington
[email protected]
http://staff.washington.edu/rells/
October 16, 2007
HighEdWebDev2007
Across the spectrum
People can access your Web content with a
wide range of devices. Can they read it? Is
it useful to them?
October 16, 2007
HighEdWebDev2007
UW Home Page on FireFox
October 16, 2007
HighEdWebDev2007
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?
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
The mobile context
• Is the phone mobile,
or the user?
• When you are mobile,
what kinds of tasks do
you want to do?
Photo from cs4fn.org
October 16, 2007
• Tasks immediately
relevant to now,
here, what’s
happening
HighEdWebDev2007
Miniaturized or mobilized?
SouthWest Airlines Mobile Check In Page
October 16, 2007
HighEdWebDev2007
One design for all?
Full size graphical
browsers
•
•
•
•
•
Valid, standards based code
Semantic markup
Structure content
Separate content and presentation
Control presentation with CSS
Small screen mobile
devices
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!
October 16, 2007
HighEdWebDev2007
UW Home Page on a Palm TX
Flex design flowing into a small space
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
What iPhones want
Supported
• HTML 4.01
• XHTML 1.0
• CSS 2.1 and partial
CSS3
• ECMAScript 3
(JavaScript)
• W3C DOM Level 2
• AJAX technologies,
including
XMLHTTPRequest
October 16, 2007
Not supported
•
•
•
•
•
•
WML
Mouse-over events
Hover styles
Java applets
Flash
Plug-in installation
HighEdWebDev2007
UW Home Page on an iPhone
Just pinch open to zoom in
October 16, 2007
HighEdWebDev2007
Use “media” to target formatting?
• Stylesheet with a media type of handheld
<link href=“mobile.css”
rel=“stylesheet” type=“text/css”
media=“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
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
Device detection
• Check user agent string from mobile
device
• Compare to table of device types
– Wireless Universal Resource File
(http://wurfl.sourceforge.net/)
– Contains XML data of device
characteristics
– Generate page appropriate to device
abilities
October 16, 2007
HighEdWebDev2007
Emerging Strategy
Device Detection
• 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
October 16, 2007
HighEdWebDev2007
Alternative strategy
• Maintain two separate stores?
Device Detection
– When is it appropriate to develop an
independent set of pages for small devices?
October 16, 2007
HighEdWebDev2007
What pages should be fullspectrum functional?
• Auth/auth
• Directory
• Calendar
• News
• Contacts
• Emergency information
October 16, 2007
HighEdWebDev2007
Google Calendar on a Palm TX
October 16, 2007
HighEdWebDev2007
Weblogin on a Palm TX
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007
Tri-spectrum thinking
Screen size is only one
dimension of the design
space of Web delivered
information and services.
October 16, 2007
HighEdWebDev2007
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
October 16, 2007
HighEdWebDev2007