Supporting Handout - The Mobile Web: keep up if you can!

IWMW2009 The Mobile Web – Keep up if you can! PCs: http://iphonetester.com/ | http://bit.ly/dK8yN (winksite) | http://bit.ly/4DSJB (question form) Phones: http://winksite.mobi/ssteeples/iwmw University Mobile Sites UK • http://www.brad.ac.uk/mobile/ • http://m.warwick.ac.uk/ • http://www.shef.ac.uk/union/mobile/ (Sheffield Students union) USA • http://mobi.mit.edu/home/ • http://m.acu.edu/acu-mobile/ (Exceptional on an iPhone. Can’t be viewed on a PC) • http://www.bsu.edu/libraries/mobile/ (Try searching the catalogue) • http://www.uis.edu/m/ • http://www.utexas.mobi/ (Nice computing lab feature) • http://m.moreheadstate.edu/ • http://www.apu.edu/m/ • http://mobile.virginia.edu/ • http://m.uiowa.edu (Can’t be viewed on a PC) • http://www3.lehigh.edu/mobile/ • http://www.umsystem.edu/m/ • http://www.library.upenn.edu/m/ • http://www.iep.ucr.edu/m/index.html (International Programmes) • http://uc2go.mobi/ • http://mobile.usablenet.com/mt/illinois.edu/mobile/?un_jtt_redirect • http://ublib.buffalo.edu/hsl/mobile/mobilecircinfo.html (Library site) http://libweb.uoregon.edu/mobile/ (Library site) Australia http://m.unimelb.edu.au/ Page 1 of 5

IWMW2009 The Mobile Web – Keep up if you can! Italy http://www.m.aspeninstitute.it/mwt/ (English version link at top) Japan http://www.wul.waseda.ac.jp/m/index-e.html Page 2 of 5

IWMW2009 The Mobile Web – Keep up if you can! QR Codes This is the title of the session. This is the URL of the IWMW2009 social events page. This is the URL for Sharon’s WinkSite This should take you to Google map for the University of Essex This is a text message Page 3 of 5

IWMW2009 The Mobile Web – Keep up if you can! Example XHTML-MP (Mobile Profile) Code Things to note about the mark-up: The character <?xml version="1.0" encoding="UTF-8"?> encoding is UTF-8 for maximum compatibility. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> The DOCTYPE is essential. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Mobile Site</title> <link rel="stylesheet" type="text/css" href="mobile.css" /> <meta name="description" content="My Mobile Site" /> The cache control <meta http-equiv="Cache-Control" content="max-age=600" /> header is important because it instructs </head> the browser to use a local cached copy <body > instead of a requesting a new <div> copy from the server if the local copy <img alt="Smiley" src="smiley.gif" width="30" height="30" /> hasn’t expired. This <h1 class="title">Welcome to My Mobile Site</h1> example is set to 10 <p>Page content goes here<p /> mins expiry (600 <p>[1] <a accesskey="4" href="http://m.site.com">Link One</a> seconds). Cache <p /> control can be helpful for downloads on </div> slower networks, and </body> it may save your </html> users money in data download charges. More help  While you code keep this website open: http://www.developershome.com/wap/xhtmlmp/ (it is an ugly site, but replete with great advice!)  A complete list of XHTML-MP tags can be found at: http://htmllint.itc.keio.ac.jp/htmllint/tagslist.cgi?HTMLVersion=XHTML-MP Page 4 of 5

IWMW2009 The Mobile Web – Keep up if you can! Recommended Resources Development Building an HE microsite: http://blogs.warwick.ac.uk/saralever/entry/development_of_the/ MobiThinking: http://mobithinking.com/ MobiForge: http://mobiforge.com/ Mobile Usability: http://www.useit.com/alertbox/mobile-usability.html W3C: Mobile Web Best Practices (http://www.w3.org/TR/mobile-bp/) Apple iPhone Dev Center (http://developer.apple.com/iphone/ ) Mobile Usability Best Practice: http://mobithinking.com/sites/mobithinking.com/files/dotMobi_Mobile_Usability_Best_Practice.pdf Phone Use in Cambridge University m-Libraries study: http://arcadiaproject.lib.cam.ac.uk/docs/M-Libraries_report.pdf Coding for the mobile web: http://carsonified.com/blog/features/css/coding-for-the-mobile-web/ Validation W3C Mobile Validator: http://validator.w3.org/mobile ReadyMobi: http://ready.mobi/ Emulators iPhone Emulator: http://iphonetester.com Nokia Phone Emulator download: http://tinyurl.com/2b657r OpenWave Phone Simulator: http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/ iPhoney: http://sourceforge.net/projects/iphonesimulator/ Blackberry simulators: (http://na.blackberry.com/eng/developers/resources/simulators.jsp ) Advertising and SEO Google Mobile Adwords: http://services.google.com/adwords/mobile_ads Google Webmasters Tools: https://www.google.com/webmasters/tools/ Matrix Codes QR Code Generator : http://qrcode.kaywa.com/ Seven Things You Should Know About QR Codes: http://net.educause.edu/ir/library/pdf/ELI7046.pdf QuickMark: http://www.quickmark.cn/ BeeTagg: http://www.beetagg.com/ SMS To register a Short Code go to: http://www.short-codes.com Books Mobile Web Design, Cameron Moll Designing the Mobile User Experience, Barbara Ballard Mobile Interaction Design, Matt Jones & Gary Marsden Other How Teenagers Consume Media by Matthew Robson (Aged 15 yrs & 7 months) http://media.ft.com/cms/c3852b2e-6f9a-11de-bfc5-00144feabdc0.pdf Training Introduction to W3C's Mobile Web Best Practices, (online course, 9 weeks at 99 Euros, 2hrs a week) http://www.w3.org/2009/03/mobitrain_course_description.html Video Mobile Phone Evolution: http://www.youtube.com/watch?v=x0DrncbhoeM Page 5 of 5

Supporting Handout - The Mobile Web: keep up if you can!

0 comments

Notes on slide 1

1 Event