Übung 6 œ Netzbasierte Informationssysteme
Accessibility(Mobile)
Dr. Lyndon J B Nixon FreieUniversität Berlin Institut für Informatik Netzbasierte Informationssysteme mailto: [email protected] http://page.mi.fu-berlin.de/nixon Zeitplan
Aufgabe Übungsblatt Abgabe Präsentationen 1. Website 23. Okt 30. Okt 31. Okt
2. Suche 6. Nov 13. Nov 20. Nov
3. Crawler 20. Nov 27. Nov 28. Nov
4. Web 2.0 4. Dez 11. Dez 12. Dez
5. Internation- 18. Dez 8. Jan 11. Jan alisierung 6. Accessibility 15. Jan 22. Jan 23. Jan
7. Metadata 29. Jan 5. Feb 6. Feb
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 2 Übung 6
• Übungsblatt 6 ist online auf der Website der Veranstaltung http://www.ag-nbi.de/lehre/0708/V_NBI/
• Thema: Accessibility • Aufgabe: Website zugänglich über Handy machen
• Heute haben wir diesen Struktur • Rückblick: The Mobile Web • Hintergrund: Mobile Standards • Hintergrund: Serving Mobile Content • Aufgabe: Website für Mobilgeräte anpassen • Aufgabe: Website prüfen
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 3 Mobile Web: ups and downs
Courtesy http://www.w3.org/2006/Talks/0419-MWI-Analysts
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 4 Mobile Web: the beginnings
• HDML • originally developed in about 1996 by the company that becameOpenwave. It was replaced by WML. • WAP • WAP was hyped at the time of its introduction, leading users to expect WAP to havethe performanceof the Web • In terms of speed, easeof use, appearance, and interoperability, the reality fellfar short of expectations. This led to the wideusageof sardonicphrases such as "Worthless Application Protocol", "Wait And Pay", and so on. • WML cut users off from the HTML Web tyingthem to a smallselection of native WAP content or converted Web- to-WAPcontent • Devices had limited capabilities and werepoorly profiled
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 5 Mobile Web: the deathof WAP
• The wireless carriers killed WAP however • Didn”t support the production of WAP content • Charged users by the data accessed, discouragingsurfing • Offerings werea ‚walled garden—, often withthe carrier”s own portalas homepageand availablecontent restricted to what other sites the carrier madedeals with
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 6 Mobile Web: enter i-mode
• launched in Japan on 22 February 1999 • i-modeborrows from fixed Internet data formats such as C-HTML based on HTML in constrast to WAP/WML • It becamea runaway success becauseof the well- designed services and business model, as well as the strongdemand for mobile emailservices whicharepart of i-mode. • As of June30, 2006, i-modehas 46.8 million customers in Japan and over 5 million in the rest of the world
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 7 Mobile Web: i-mode, a fallingstar
• Telstra (Australia) and O2 (United Kingdom) on the 18th of July 2007, announced that they weredropping support for i-modeservices. • KPN (Netherlands) on the 19th of July 2007, announced that it will no longer belaunchingnew i-modeservices or mobile phones geared towards i-modesupport. • Citinglow subscriber numbers
• Compact HTML has been overtaken by the more standards friendly XHTML, promoted by the W3C and Open Media Alliance • The iModebusiness modelcan not competewithan open, non-restricted Web access modelbeingoffered by carriers today
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 8 Mobile Web: towards open standards
• Open Mobile Alliance launched June2002 as an answer to the proliferation of industry forums eachdealingwith a few application protocols • W3C launched Mobile Web Initiative withheavy industry support
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 9 Mobile Web: what changed?
• Rapid evolution of capabilities of mobile phones • 1.1 billion Web-capablemobile phones worldwideœ 63% of all handsets (Informa, 2005) • Growinguseof Internet on the mobile device
Source: Nokia study, 2005 Browsingis the Number One data packet generating service
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 10 Mobile Web = mobile browsers
• Opera Mini • Two million users • Four million web pages per day • 38 to 76 Gbdata trafficdaily
(Opera, April 2006)
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 11 Mobile Web: growth potential
• 74% of Web capablephones not used to access the Web (Informa, 2005) • W3C has set up the Mobile Web Initiative (MWI) to promotemobile deviceaccess to the Web • Requirement: solvethe usability problem • Mobile Web Best Practices • ‚mobileOK— trustmarkfor content • Requirement: providedeviceinformation • Currently expensive(devicemanufacturer databases) or buggy (user generated databases) • MWI workingon a Shared Repository • Requirement: agreeon standards for Web content • See next!
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 12 Mobile Standards
• A number of specificmarkuplanguages specified for the Mobile Web led to initialconfusion and poor uptake • Wireless MarkupLanguage(WML) • Handheld DeviceMarkupLanguage(HDML) • Compact HTML (cHTML) -> was used by iModephones
• Thanks to W3C efforts, XHTML Basic is emergingas the standard for Web content on mobile phones. As a simplified version of HTML 4.0 • Non-modified Web sites can still bedisplayed, although they will potentially bepoorly organised or navigable • Web sites can bemoreeasily modified to support the XHTML Basic subset
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 13 Mobile Standards: WML / WAP 1.0
• Wireless MarkupLanguage(WML) • WML content is delivered by a normal HTTP server like Apache • Delivery mechanism is known as Wireless Application Protocol(WAP) • A gateway deviceis positioned between the phoneand the server whichacts likea proxy • The gateway takes a request from the phoneand fetches the WML pagefrom the server • The WML pageis binary encoded and passed to the phone(to minimisebandwidthand enablephone companies to monitor usage) • WML 1.0 supported monochrome and limited layout
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 14 Mobile Standards: WAP 2.0
• WML/WAP 1.0 was tied to the limitations of bandwidth and display encountered by mobile phones • As the hardwareevolved, the specification was superceded and the WAP Forum moved to supportinga subset of XHTML for Mobile Phones (XHTML MP) • XHTML MP is a superset of XHTML Basic which, along withCSS, has been approved by the WAP Forum as the markup languagefor mobile Web content • The delivery mechanism also evolved to WAP 2.0 • XHTML MP content is passed directly to the phone without binary encoding • The roleof the gateway is reduced to monitoringusage
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 15 Mobile Standards: XHTML
• Convert your HTML 4.0 documents to XHTML 1.0 using the followingsteps: • makesurethat all your tags arenested correctly ie. ifyouput a bold tag and then italic, closethe italic beforeyouclosethe bold: bold and italic • convert all your tags to lowercase XHTML is case-sensitive • includeall end tags, and closesingleton tags ie. and
• quoteall your attributes ie.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 16 Mobile Standards: XHTML Basic
• Makesureyour XHTML does not includeany elements not part of the followingmodules:
• StructureModule body, head, html, title • Text Module abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var • Hypertext Module a • List Module dl, dt, dd, ol, ul, li • Basic Forms Module form, input, label, select, option, textarea • Basic Tables Module caption, table, td, th, tr • Image Module img • Object Module object, param • Meta Information Module meta • Link Module link • Base Module base
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 17 Mobile Standards: XHTML Basic
• What youdefinitely shouldn”t have
• style element Ifyouneed to useCSS, youshould useexternalstyle sheets withthe link element
• script and noscript elements most smalldevices havelimited memory, and scripting may not besupported
• frames frames depend upon a screen interfacethat may or may not bepresent in a smalldevice
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 18 Mobile Standards: XHTML MP
• derived from XHTML 1.1 Basic Profile by addingXHTML Modules • later versions of the standard added moremodules. • However, for certain modules, XHTML-MP does not mandatea completeimplementation so a XHTML-MP browser may not befully conformingon all modules. • The MIMEtypefor XHTML Mobile Profile is "application/vnd.wap.xhtml+xml". Conforminguser agents should also accept "application/xhtml+xml" and "text/html".
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 19 Mobile Standards: XHTML MP
Rob's Transport Cafe
Greasy food cooked to perfection, then cooked some more
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 20 Mobile Standards: XHTML MP
This XHTML MP pagewill looksomethinglikethis:
Two differences to regular XHTML: 1. Required DOCTYPE identifyingcontent as XHTML MP 1.0 2.accesskey attributeon anchors to providekeypad shortcuts (but: how to tellthe user whichkey?)
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 21 Mobile Standards: MP vs Basic
• See http://pc.dev.mobi/?q=node/119
• In short: XHTML Basic will conform to XHTML MP 1.0 !
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 22 Mobile Standards: CSS handheld
• Providea CSS stylesheet for a handheld deviceand use the linkmethod to attachyour style sheets css" media="handheld"> • Removeall elements of the pagethat wireless devices can't useor don't support well (usedisplay:none) • Ifyou‘renot already usingrelative measures, switchto ems or percentages rather than pixels • Reducemargins, paddings and borders to suit the small screen • Usesmaller font sizes for headings and paragraphtext • Makesureyour color combinations providegood contrast between foreground and background colors, particularly for devices withfewer color options.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 23 Mobile standards uptake
Today, XHTML Basic (+ CSS) is the safest choicefor mobile content
Courtesy mr.devi.mobi
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 24 ServingMobile Content
• Tell Apache what to do withmobile content by specifyinga set of MIME types that associatea filename suffix witha specificfiletype • Youcan explicitly add theseto the httpd.conf fileusing the followingblock of codeat the end of the file:
AddType text/vnd.wap.wml wml AddType text/vnd.wap.wmlscript wmls AddType application/vnd.wap.wmlc wmlc AddType application/vnd.wap.wmlscriptc wmlsc AddType image/vnd.wap.wbmp wbmp AddType application/xhtml+xml xhtml
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 25 ServingMobile Content (2)
• chances aremost or all of thesearealready in your /etc/mime.types file • TypicalApache configurations will automatically import thesetypes from the file. • Look for theselines and add any that arenot present.
text/vnd.wap.wml wml text/vnd.wap.wmlscript wmls application/vnd.wap.wmlc wmlc application/vnd.wap.wmlscriptc wmlsc image/vnd.wap.wbmp wbmp application/xhtml+xml xhtml
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 26 Identifyingthe User
• In any request for a pagefrom a web server, thereare two pieces of information wecan use. • The HTTP_ACCEPT header contains the MIME types that a browser can accept. This tells us the typeof information that wecan return. • The HTTP_USER_AGENT header tells us the identity of the browser and, typically, the phone. • Witha databasethat maps identity to things likescreen size, then wecan infer how to best display our content.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 27 Server Redirection
• Usethe HTTP_ACCEPT header of a request to figureout ifa browser is a mobile phoneand whether it can handle XHTML MP or just WML • Mobile users don”t want to enter longURLs, henceit is preferableto provideserver redirection from an index page • Withthe Apache web server, weaccomplishthis using the URL rewritingcapabilities of the mod_rewrite module
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 28 Server Redirection (2)
• Take a lookat your Apache configuration file (/etc/httpd/conf/httpd.conf) for thesetwo lines: LoadModule rewrite_module modules/mod_rewrite.so AddModule mod_rewrite.c • They should bothbethere, but youmight need to uncomment them. These load the rewritefunctions into the Apache.
• Next, weneed a Directory block that defines what happens when a specificpageis requested. • Set the directory pathand filenames to thoseappropriateto your siteand enter all the statements. • Rewritestatements workby defininga set of conditions and a rulethat is applied to files that matchthe conditions. • The first "block" of conditions and rules that arematched to a browser request areused, and subsequent blocks are skipped.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 29 Server Redirection (3)
# This next block will catch WML browsers RewriteCond %{HTTP_ACCEPT} text/vnd\.wap\.wml RewriteRule index.html$ index.wml [L]
# Default on browsers which do not match the above rules.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 30 DeviceIdentity
• Wecan get the device's identity from the HTTP_USER_AGENT header • However weneed to know what that phone/browser is capableof displayingbeforewecan really tailor our content. • Weneed information such as the screen sizeand depth, and the navigation keys that areavailableto us. • What is required is a databaseof information about every phoneon the market that wecan interrogateand useto tailor our responseto a specificdevice.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 31 DeviceIdentity (2)
• The Wireless Universal ResourceFile (WURFL) project is a brave attempt to do exactly this, withthe databasetakingthe form of a XML file. • The WURFL is an open sourceeffort relyingon the community at large to ensureit is completeand accurate. • Currently it tracks morethan 100 features across morethan 400 devices. That is a lot of information to maintain or to searchthrough. • WURFL realizes two important things: first, that contemporary phones from a given manufacturer tend to bevery similar to eachother, so that for many purposes, all youneed is a singleprofilefor that family of devices. • Second, that most developers will not tailor their response down to the fine detail of eachphone. Just knowingthe main featureset and the screen sizeis sufficient for most of us.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 32 WURFL
• XML fileand further details at http://wurfl.sourceforge.net/ • Provides libraries for Java, PHP, Perl, Ruby , Python… • WURFL consists of devices
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 33 UAProfvs WURFL
• Similar effort by the Open Mobile Alliance • UAProfseems to rely too muchon someoneelse's settingup the infrastructureto request profiles. This does not happen. Youstill need expensive'blackboxes' to useUAprofin practice • Thereis no guaranteethat the info in UAProfareaccurate. Therearecases of manufacturers just associatingthe profile of a different phones into a new one. • WURFL lets us modelany featureor capability of whatever phone, no matter what the phonemanufacturer does or say. Youarenot limited to the properties in UAProf. • The WURFL can beinstalled at your siteand does not need to grab deviceprofiles off a repository on the net. • Last, but not least, WURFL is about developers cooperating, whileUAProfhas littleor no developer community behind it.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 34 Website anpassen
• Designingfor a mobile devicemeans takingmany variables into account • Somedevices aremonochromatic, somehavecolor • Somedevices support CSS, somedo not • Somedevices understand tables, frames, JavaScript, and dynamicmenus, but many do not. • Most devices don‘t support cookies. • Devices at the high end of the mobile market such as BlackBerry, Palm, or the iPhonearehighly capableand support nearly as muchas a standard computer.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 35 Display tips
• Eliminatefloats and frames • Eliminatecolumns œ onecolumn withthe content first is the best option • Eliminatescripted effects such as popups or popout menus in favor of plain old HTML and simple text menus • Eliminatedecorativeimages that slow down the loading process. Usedisplay:noneto removeanythingthat isn‘t absolutely necessary, such as links to externalresources. • Remember, however, that devices that don‘t understand CSS won‘t do anythingwithdisplay: none. Any essential images need to bereworked for the smallscreen and the widthand height attributes need to beincluded in the HTML. • Eliminatenested tables and layout tables. Ifyouhavetabular data, consider findinga way to present it in a linearized alternatedisplay.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 36 Usability guideline1
• 1. Meetusers' needsquickly
Mobile users aremorelikely to want information to help them at thatlocationor time, such as finding directions or findingout what's goingon nearby.
Also, they might want quick entertainmentto pass away a short period of time, likesomethingto read on the bus or whilewaitingto meet a friend.
For your site, predict users' needs and fulfiltheseas quickly as possible.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 37 Example1
• Yahoo! does this effectively withits new mobile oneSearchTM service. • Searchingfor 'Cinema' produces a list of cinemas near users' location showingtheir address and phone numbers. • Clickingthe 'Call' link next to a number opens a calldialoguebox on the phone.
Yahoo!'s oneSearchpredicts what users aresearchingfor and tailors results to their location.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 38 Usability guideline2
• 2. Don'trepeatthe navigationon everypage screenspace ispreciouson a mobile screen and navigation can push content off screen
On a mobile, only display the navigation on the homepage.
On other pages only includelinks back to the homepage and back to the last important point alongthe path users havetaken.
Show theselinks at the topand bottom of the pageso they'renever too far away.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 39 Example2
• BBC Mobile does this effectively witha clickable ‚breadcrumbtrail— at the topand a list of links at the bottom.
The BBC's ‚breadcrumbtrail‚ saved spaceand was an effectivesubstitute for repeatingthe navigation.
BBC Home > BBC News > Technology
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 40 Usability guideline3
• Clearlydistinguishselecteditems
Mobile phoneusers tend to havepoor cursor control.
This is becausemovingthe direction button down scrolls the pageand highlights links, buttons and form fields.
Dueto this lack of controlit's important to clearly feedbackto users what item is in focus.
This can bedoneby changingthe appearance of an item to makeit stand out from everythingelse. For example, youcan changethe font and background colour of links and buttons.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 41 Example3
• TOh2o'sm msoonb iLleo cpaolrotanllydodeisstnin'tghuigshhelisghfot rbmu tftioenldsswbeyll.m Iatkaindgds tah ebilruebobrodredresrliognh tae rligthhitcekrebr.lu Ien bcaocnktgrarostu,n tdhethirahtigishnl'itghted lninoktisc esatoboled. oUuste brse chaauvseettoh me foovnet tahned j obyasctkicgkroaurnoduncdolotou r wfinads cthhea ncguersdoar.n d contrasted strongly against the page's overallwhitebackground.
O2's highlighting needs to be stronger to be noticeable.
Simple page designs allow for moreeffective highlightingon Thomson Local.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 42 Usability guideline4
• 4. Make userinputas simple as possible
Allow users to input information by makingselections instead of enteringfreetext (or at least providethis as an alternative method).
Entering text on a mobile phonecan bepainfully slow and error-proneon the typical12 button mobile keypad.
Mobile users aremorelikely to makemistakes (dueto misspellingor mistyping) or takeshortcuts.
Sets of well thought out links on quick loadingpages can bevery usable.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 43 Example4
•• TOhne TOhdoemonso'snm Lobcaille, sfoitre eaxlalomwpsleu,s ietrissnto't fpinods saib cleinteom a bybsroeawrscehibnugsoinrebsrsoews soirnglo. cUastieornss t.h at searchoftenmake •mUorseerms tiesntadkteos atbhbarnetvhioastee tsheaatrbcrhowtesrem, tshe(i .lea.t tbeur siness ustuyaplely) fwinhdiicnhglewahdast ttoh einya'rpeparoftperriabtyeosnealyrcshelreecstuinltgs.2 links.
Users makeerrors when tryingto typelongtext on Thomson Local.
Users can however quickly browseto the right cinema usingOdeon's Cinema List.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 44 Usability guideline5
• 5. Onlyshow essential information
Mobile phonescreensare of course tinyand have only a fraction of the area of PC monitors. Be sureto identify pagerequests comingfrom mobiles and only send down the most essential of information. Otherwise, important content might bepushed down or difficult to find amongst everythingelseon the page. Also, most mobile phoneusers aren't on flat rate data packages so the larger the pagethe moreusers haveto pay. Users becomefrustrated ifthey haveto pay to download pagecontent they don't want.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 45 Example5
• Header links on the BAA and Thomson Localwebsites takeup lots of screen spaceand makeimportant information hard to find. 'About BAA', 'Help' and 'Advertisewithus' aren't priorities for mobile users.
Unnecessary content pushes down Thomson Local's searchbox and BAA's main content below the fold.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 46 Usability guideline6
• 6. Place basicbrowsingcontrols on the page
To save screen space, mobile browsers often don't display basiccontrols such as 'Back' or they display the web pagein fullscreen mode.
As such, always include a 'Back' buttonon everypage other than the homepage.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 47 Example6
• Transport for London's mobile journey planner places basiccontrols, such as 'Next page', 'Back to results' and 'New journey', at the bottom of eachpage.
Transport for London's sitewas easy to navigate becausebasic controls appear on the page.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 48 Usability guideline7
• 7. Design mobile-friendlypage layouts
• On your website, makesureyoudesign the pageto presentcontentin the right orderand render well on mobile screens. • Website layouts for large landscapePC screens usually don't workwell on smallportrait mobile phonescreens. • Furthermore, mobile browsers and pagetranscoders usually vertically stackpages suitablefor portrait display. • It's often best to havecompletely different pagedesigns to meet mobile users' needs.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 49 Example7
• BCAoAn'vsewrseeblys,it eTrraennsdpeorrst vfoerr yLopnodoorlny'somn oab mileo bhiolem secpreaegne. Pcaogneta sinesctsioimnspldeo cna'tteagpopreisaerdwlhisetsreoifn ltiennkds.e dUsreerlas tfivined t toh is eeaacshy oatnhde rquanicdk ptoa guesse.lo okpoorly designed. Single word link text can bewrapped over 4 lines makingit difficult to read TFL's mobile site renders well on mobile screens. BAA's sitedoesn't appear to be designed for mobiles and renders poorly.
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 50 Website prüfen
• How to seethe websiteas seen by a mobile device?
• One possibility: your mobile phone/PDA and a wireless Internet connection!
• The other: emulatea mobile deviceon a PC
• Web based mobile devicesimulators • Not freeto use
• Then?
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 51 Mobile phonesimulator
• Nokia Mobile Internet Toolkit 4.1 • From www.forum.nokia.com/tools > Tools and SDKs > BrowsingTools • Includes Nokia Mobile Browser Simulator 4.0 • NMB 4.0 is a mobile Internet browser SDK • Supports XHTML, WML, and WAP Push messages from the Internet or from the localfilesystem. • Requires to run the WAP Gateway simulator • No fullphonekeypad but screen sizeand color support can beset AG Netzbasierte Informationssysteme http://www.ag-nbi.de 52 Mobile phonesimulator
• OpenwavePhone Simulator from http://developer.openwave.com/dvl/tools_and_sdk/ phone_simulator/ • OpenwaveMobile Browser supports • WAP and HTTP gateways • Supports WML and XHTML-MP 1.0 withCSS • Direct access to content by typingin a URL • Simulates entirephoneallowing access to all keys availableto the user
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 53 Opera browser
• On the standard Opera browser, chooseView > Small Screen to seean approximation of a mobile screen size • Opera web developer bar has a button called Display allowingyouto toggle CSS on and off
• Opera provides a freebrowser that can bedownloaded and installed on handheld devices called Opera Mini. • An online Opera Mini browser demo is availableat http://www.operamini.com/demo/ • Youcan operatethe simulated phoneby mouseor keyboard, input an URL and view the content • Supports images and CSS
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 54 Opera Mini demo
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 55 Firefox
• Usethe Web Developer extension https://addons.mozilla.org/en-US/firefox/addon/60 • Disableimages, JavaScript and CSS • Gives a good idea ifthe content will beusableand navigableon a mobile device!
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 56 Firefox: CSS handheld
• Youcan test handheld CSS stylesheets in the Firefox Web Developer Toolbar • ChooseCSS > View CSS by Media Type > Handheld
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 57 MobileOKbasictests
• Tests defined by W3C to check content suitability for delivery to and display on mobile devices • Based on the Mobile Web Initiative Mobile Best Practices • Availableat http://www.w3.org/TR/mobileOK-basic10-tests • Thereis a sitechecker availableat http://validator.w3.org/mobile/alpha but it is ALPHA
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 58 Mobi.readiness
• Your mobi.readiness scorewill becalculated by http://mr.dev.mobi
• After the exerciseis done, I will maila tableof how eachof your mobile websites scored ;)
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 59 Mobile content validation
• Check for valid usageof mobile standards at http://validator.w3.org
• Withthecorrect DOCTYPE, XHTML Basic 1.0 will be recognised automatically • Otherwiseyoucan select XHTML Basic 1.0 from the Document Type menu
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 60 Tasks
• Createmobile websiteas mirror of original website • Restrict markupto XHTML Basic 1.0 (optional: declare as XHTML MP 1.0, modify CSS to handheld devices) • Alter layout and navigation as necessary to ensurea good mobile user experience • Check mobileOKconformance • Check XHTML Basic conformance
• Hand in a pagenamingat least threeUsability Guidelines and how your websitewas altered to meet them • Hand in a pagenamingat least threemobileOKBasic Tests and explain why your websitepasses them
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 61 Outlook
• AccelerateWeb access in developingcountries • Towards an ubiquitous Web (the ‚Web on Everything—) • See the Web popup in the most unlikely places
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 62 Outlook
• Better mobile Web-compliant devices and flatrate broadband mobile Web access will empower the mobile Web • Does the iPhonesignal‚the beginningof the end of the Mobile Web— (Forrestor Report, 2007) ?
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 63 Mobile Web vs iPhone
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 64 The futurewill tell
• Forrester states threeprimary barriers to the mobile Webs success: 1) poor usability; 2) hard-to-find content; and 3) costly access. • Forrester's contention is that the iPhoneknocks down the first two barriers, by "bringingfull-featured Web sites to a devicethat can handle them". • iPhonedata access modelfails to remedy point (3) • Usagealready overtookWindows CE and Symbian
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 65 ‚"Even the iPhone‘s browsercan disappoint. It has a version of the Apple (AAPL) Safari browserthat doesn‘t support Flash, a programminglanguagewidelyused on Web sites, so users arelimited in what theycan seeon the Web. And, youpaya lot to experiencethe pain of surfingthe mobile Web. Lewis Ward, an analyst at the International Data Corporation, compares the mobile Web todayto AOL (TWX) beforeit went with flat-rate pricingin the early1990s. Most peoplesurf on a pay- per-kilobytemodel, which encourages them to surf as fast as theycan, he says."
·Mobile Web: so closeso far”, New York Times, Nov 2007
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 66 References
• YouAlreadyWrite for CellPhones, courtesy Jennifer Kyrnin and about.com http://webdesign.about.com/cs/xhtmlxml/a/aa073001a.htm • 7 usabilityguidelinesfor websiteson mobile devices, courtesy Abid Warsi and wedcridible.co.uk http://www.webcredible.co.uk/user-friendly-resources/web- usability/mobile-guidelines.shtml • Creating Web Contentfor Mobile Phone Browsers, courtesy Robert Jones and oreilly.net http://www.oreillynet.com/pub/a/wireless/2004/02/06/mobile _browsing.html http://www.oreillynet.com/pub/a/wireless/2004/02/20/mobile _browsing.html • Make yoursite mobile friendly, courtesy Virginia DeBolt and webteacher.ws http://www.thinkvitamin.com/features/css/make-your-site- mobile-friendly AG Netzbasierte Informationssysteme http://www.ag-nbi.de 67 Übung 6: Was noch?
• Abgabe (per Email) • 22. Januar 2008, 14 Uhr
• Präsentationen der Gruppen am 23. Januar 2008
AG Netzbasierte Informationssysteme http://www.ag-nbi.de 68