single source website for full spectrum access

October 16, 2007 HighEdWebDev2007

Single Source Website for Full Spectrum Access

Rick EllsUniversity of [email protected]

http://staff.washington.edu/rells/


Across the spectrum

People can access your Web content with a wide range of devices. Can they read it? Is it useful to them?


UW Home Page on FireFox


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?


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


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


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 immediatelyrelevant to now, here, what’s happening


Miniaturized or mobilized?

SouthWest Airlines Mobile Check In Page


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 deviceW3C Mobile Web Initiative

(http://www.w3.org/Mobile/)

Strongly contrasting design approaches!


UW Home Page on a Palm TX

Flex design flowing into a small space


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


What iPhones want

Supported Not 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


UW Home Page on an iPhone

Just pinch open to zoom in


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


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


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

http://wurfl.sourceforge.net/


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 screensD

evi

ce D

ete

ctio

n


Alternative strategy

• Maintain two separate stores?– When is it appropriate to develop an

independent set of pages for small devices?D

evi

ce D

ete

ctio

n


What pages should be full-spectrum functional?

• Auth/auth• Directory• Calendar• News• Contacts• Emergency information


Google Calendar on a Palm TX


Weblogin on a Palm TX


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


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


Tri-spectrum thinking

Screen size is only onedimension of the designspace of Web deliveredinformation and services.


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

single source website for full spectrum access

Documents