ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Developing the MIT Mobile Web

?
?
shu beta
shu beta

The document discusses the process of building the MIT Mobile Web. It describes selecting modules based on usefulness and availability of data sources. A technical architecture was developed using browser detection and a content generator to optimize content for different device categories. Key modules like the people directory, shuttle schedules, maps and 3DOWN status were integrated using standards like LDAP, RSS, XML and WMS. The system was designed to provide a useful mobile experience by displaying essential information tailored for each device.

1 of 49
Downloaded 684 times
3: Building the MIT Mobile Web MIT Mobile Project Team Albert Chow, Sonya Huang, Eric Kim, and Brian Patt
Agenda ?? Introduction ?? Designing the MIT Mobile Web ?? Building the MIT Mobile Web ?? Technical architecture ?? Browser detection ?? Content generator ?? Sample modules ?? Q&A 2
Designing the MIT Mobile Web
The mobile web? 4
Designing for the mobile context 5
Designing for the mobile context ?? Physical constraints ?? Small, dense screens ?? Limited input and feedback ?? Technical constraints ?? Data is still relatively slow and expensive ?? Limited security and personalization ?? Wide variety of physical form factors ?? Screens: from 128x160 up to 480x640 pixels ?? Input: touchscreen, numeric keypad, full QWERTY keypad ?? Data speed: 3G ¡°high-speed¡±, low-speed (dialup-class) ?? Limited web browsers with very wide range of capabilities and standards compliance 6
Device and browser differences Nokia N70 Sony Ericsson K750i Motorola RAZR v3i BlackBerry 8830 Palm Treo 755p Motorola Q9h (Windows Mobile) 7
Device and browser differences 8
Designing for the mobile context ?? Attention considerations ?? Seconds vs. minutes ?? Sovereign vs. transient tasks ?? In situ activities ?? Mobile = new opportunity ?? Reach your community where they are most of the day ?? Meet low-level needs in an unexpectedly useful and fun way 9
Early design decisions at MIT ?? Carefully curated content and functionality ?? Narrow and shallow structure ?? Simple navigation with as many accelerators as possible ?? Consistent global navigation ?? Consistent application-level navigation ?? Accesskeys ?? Segmentation and adaptation 10
Segmentation and adaptation ?? Impossible to design for every device ?? Didn?t want lowest-common-denominator experience ?? Solution: device segmentation Feature phones Smartphones iPhone/iPod touch Flip, bar, slider phones with relatively basic browsers and BlackBerry, Windows Mobile, 11 smaller screens PalmOS
Segmentation and adaptation Same content & functionality across device classes Different presentation and navigation for each device class 12
Key differences between ¡°buckets¡± ?? Level of: ?? Rich, semantic structure (HTML) ?? Style (CSS) ?? Interactivity (Javascript) ?? Amount of content shown per page (pagination) ?? Image sizes ?? Location, organization and presentation of navigation 13
General design principles ?? Feature phone and smartphone: converged on a simple, robust, text-centric design optimized for keypad navigation ?? iPhone and iPod touch: take advantage of unique capabilities of the touch-driven platform ?? Minimize distance to user goals ?? Be great where we can ?? Don?t suck anywhere 14
iPhone-speci?c design features ?? Best standards compliance ¨C things work the way they?re supposed to ?? Support for advanced CSS, including absolute positioning, layering, rounded corners, PNGs, transparency ?? Full-screen mode ?? Asynchronous data loading ?? Layout re-?owing on device orientation change ?? Apple's guides, HIG, code samples 15
iPhone-speci?c design features 16
iPhone-speci?c design features 17
Segmentation and adaptation ?? Challenge: Devices are always changing, previous category lines blurring and shifting ?? Future: segment by browser capability, not hardware category ?? Better exploit strengths of emerging advanced devices and platforms 18
Design process 1.? User-experience (UX) mapping > 19
Design process 1.? User-experience (UX) mapping 2.? Visual design and prototyping 3.? Initial implementation 4.? Usability testing 5.? Remaining implementation and testing 6.? Ongoing design and development 20
Conclusion ?? Mobile web provides real-world daily utility for the college and university community ?? Comes with unique and constantly evolving challenges ?? Strategies for success: ?? Design for the mobile context ?? Segment target devices and adapt content, navigation and functionality ?? Test and re?ne ?? Continue to track, re-think, re-design and re-test your site as the mobile market evolves 21
Further reading ?? Mobile Web Design: http://mobilewebbook.com/ ?? dotMobi Mobile Web Developer?s Guide: http://dev.mobi ?????? ?? Global Authoring Practices for the Mobile Web: ? http://www.passani.it/gap ?? WURFL: http://wur?.sourceforge.net ?? Device Atlas: http://deviceatlas.com ?? Device Anywere: http://deviceanywhere.com ?? Apple iPhone web and application guidelines (free Apple Developer Connection account required):? http://developer.apple.com/documentation/ AppleApplications/Reference/SafariWebContent ? http://developer.apple.com/webapps 22
Building the MIT Mobile Web
Building the MIT Mobile Web How to start building a mobile web site: 1.? Select modules 2.? Find data sources 3.? Select devices to support 4.? Set up server ¡­or use the MIT Mobile Web, which will be open sourced 24
MIT Mobile Web modules 25
Criteria for module selection ?? What?s most useful on the go ?? Most readily available data sources ?? Avoided ¡°screen scraping¡± ?? Takes more development time ?? Not robust 26
System architecture Browser Detection iPhone Smartphone Feature Phone Other Content Generator People Campus Shuttle Events Student Emergency Stellar 3Down Directory Map Schedule Calendar Careers Info MIT MIT MIT MIT Careers? Emergency 3Down LDAP IMS NextBus Events Stellar .mit.edu Of?ce .mit.edu Server Server Server Server 27
System con?guration ?? Hardware (Virtual Server): ?? CPU: Intel Xeon 3GHz ?? Memory allocation: 2 GB ?? Storage: 15 GB ?? VMWare ?? Software: ?? Operating system: Red Hat Enterprise Linux 4 ?? Web server: Apache 2.0.52 ?? PHP 5.2.5, MySQL 5.0.18, Python 2.4.4 28
Browser detection Browser Detection Feature iPhone Smartphone Computer Spider phone 29
WURFL Wireless Universal Resource File (WURFL) ?? Open source data source ?? Attempts to catalog all mobile devices ?? Initial goals: ?? Determine screen size ?? Determine phone features ?? Current implementation: ?? Distinguishes phones from computers ?? Updated database of User-Agent strings ?? Keywords to pick smart phones (iPhone, iPod, BlackBerry, ¡­) 30
User agent strings Complicated and non-standardized ?? iPhone:? Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+(KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3 ?? BlackBerry:? BlackBerry8130/4.3.0 Pro?le/MIDP-2.0 Con?guration/ CLDC-1.1 VendorID/105 ?? Search for closest match 31
Content generator ?? Three different HTML templates ¨C one for each ¡°bucket¡± of devices ?? Each HTML template includes its own CSS (style sheets) and images Content generator Module Data Selects Web Generates page Device data Smart Feature type iPhone phone phone template template template 32
People Directory 33
People Directory mobile backend ?? LDAP (Lightweight Directory Access Protocol) ?? Uses standard query language ?? Widely used ?? PHP has a built in interface Mobile Query Request People MIT Directory LDAP Module Server Mobile Site Results 34
Optimized for mobile experience ?? Dif?cult/slow to type on mobile devices ?? Optimize search results: ?? Single letter = ?rst initial of ?rst or last name ?? Default sub string search ?? Exact email matches at the top 35
3DOWN ?? Status of major services at MIT, such as internet, email, and telephone ?? Backend: RSS (Rich Site Summary) Feed ?? Contains title and content ?? Widely used, such as Wordpress and New York Times 36
RSS good for mobile devices ?? RSS is list oriented ?? Phones are good at displaying lists ?? Easy to reformat content for mobile devices 37
Stellar ¨C?web version 38
Stellar ¨C?mobile version 39
Stellar backend ?? Stellar uses several different data sources ?? Aggregate into a custom XML (eXtensible Markup Language) feed ?? Course guide is an XML feed ?? One RSS per class for course announcements ?? Not given access to protected information ?? Why use XML? ?? Easy to inspect ?? Easy to expand to any text based data ?? Widely used for internet applications 40
Campus Maps ¨C?web version 41
Campus Maps ¨C backend Web Map Services (WMS) ?? Generates a map ?? Based on picture size, frame size, and map elements to display ?? Parameters passed via URL ?? Widely used standard ?? Requires a two step process: ?? Request frame ?? Request picture 42
Campus Maps ¨C backend ?? Example: Map of W20 (Student Center) ?? Parameters : ?request=getmap&version=1.1.1& image size width=220&height=160& building selectvalues=W20& frame bbox=708882,495087,709896,495825& map elements to layers=Greenspace,Roads,Parking, display Buildings 43
Campus Map ¨C mobile version 44
Shuttle Schedules ?? Created a data ?le of the published bus schedule ?? Stored in MySQL database 45
Shuttle Schedules ?? Route maps hand-drawn for different screen sizes 46
Summary of MIT Mobile Web ?? Module selection: 1.? Usefulness (e.g., People Directory, shuttle, etc.) 2.? Easy to integrate data sources = less interface code ?? Open data standards (e.g., LDAP, RSS, and XML) ?? Device optimization / selection: ?? UI optimized for three categories (¡°buckets¡±) ?? iPhone, smartphone, and feature phone ?? Optimized mobile experience ?? Only display essential information (device dependent) ?? Code to reduce the amount of input needed 47
Q&A
Thank you! Design: Eric J. Kim eric@chemicalcreative.com Development: Albert Chow, Sonya Huang, and Brian Patt MangoText mangotext@mit.edu 49

More Related Content

Developing the MIT Mobile Web

  • 1. 3: Building the MIT Mobile Web MIT Mobile Project Team Albert Chow, Sonya Huang, Eric Kim, and Brian Patt
  • 2. Agenda ?? Introduction ?? Designing the MIT Mobile Web ?? Building the MIT Mobile Web ?? Technical architecture ?? Browser detection ?? Content generator ?? Sample modules ?? Q&A 2
  • 3. Designing the MIT Mobile Web
  • 5. Designing for the mobile context 5
  • 6. Designing for the mobile context ?? Physical constraints ?? Small, dense screens ?? Limited input and feedback ?? Technical constraints ?? Data is still relatively slow and expensive ?? Limited security and personalization ?? Wide variety of physical form factors ?? Screens: from 128x160 up to 480x640 pixels ?? Input: touchscreen, numeric keypad, full QWERTY keypad ?? Data speed: 3G ¡°high-speed¡±, low-speed (dialup-class) ?? Limited web browsers with very wide range of capabilities and standards compliance 6
  • 7. Device and browser differences Nokia N70 Sony Ericsson K750i Motorola RAZR v3i BlackBerry 8830 Palm Treo 755p Motorola Q9h (Windows Mobile) 7
  • 8. Device and browser differences 8
  • 9. Designing for the mobile context ?? Attention considerations ?? Seconds vs. minutes ?? Sovereign vs. transient tasks ?? In situ activities ?? Mobile = new opportunity ?? Reach your community where they are most of the day ?? Meet low-level needs in an unexpectedly useful and fun way 9
  • 10. Early design decisions at MIT ?? Carefully curated content and functionality ?? Narrow and shallow structure ?? Simple navigation with as many accelerators as possible ?? Consistent global navigation ?? Consistent application-level navigation ?? Accesskeys ?? Segmentation and adaptation 10
  • 11. Segmentation and adaptation ?? Impossible to design for every device ?? Didn?t want lowest-common-denominator experience ?? Solution: device segmentation Feature phones Smartphones iPhone/iPod touch Flip, bar, slider phones with relatively basic browsers and BlackBerry, Windows Mobile, 11 smaller screens PalmOS
  • 12. Segmentation and adaptation Same content & functionality across device classes Different presentation and navigation for each device class 12
  • 13. Key differences between ¡°buckets¡± ?? Level of: ?? Rich, semantic structure (HTML) ?? Style (CSS) ?? Interactivity (Javascript) ?? Amount of content shown per page (pagination) ?? Image sizes ?? Location, organization and presentation of navigation 13
  • 14. General design principles ?? Feature phone and smartphone: converged on a simple, robust, text-centric design optimized for keypad navigation ?? iPhone and iPod touch: take advantage of unique capabilities of the touch-driven platform ?? Minimize distance to user goals ?? Be great where we can ?? Don?t suck anywhere 14
  • 15. iPhone-speci?c design features ?? Best standards compliance ¨C things work the way they?re supposed to ?? Support for advanced CSS, including absolute positioning, layering, rounded corners, PNGs, transparency ?? Full-screen mode ?? Asynchronous data loading ?? Layout re-?owing on device orientation change ?? Apple's guides, HIG, code samples 15
  • 18. Segmentation and adaptation ?? Challenge: Devices are always changing, previous category lines blurring and shifting ?? Future: segment by browser capability, not hardware category ?? Better exploit strengths of emerging advanced devices and platforms 18
  • 20. Design process 1.? User-experience (UX) mapping 2.? Visual design and prototyping 3.? Initial implementation 4.? Usability testing 5.? Remaining implementation and testing 6.? Ongoing design and development 20
  • 21. Conclusion ?? Mobile web provides real-world daily utility for the college and university community ?? Comes with unique and constantly evolving challenges ?? Strategies for success: ?? Design for the mobile context ?? Segment target devices and adapt content, navigation and functionality ?? Test and re?ne ?? Continue to track, re-think, re-design and re-test your site as the mobile market evolves 21
  • 22. Further reading ?? Mobile Web Design: http://mobilewebbook.com/ ?? dotMobi Mobile Web Developer?s Guide: http://dev.mobi ?????? ?? Global Authoring Practices for the Mobile Web: ? http://www.passani.it/gap ?? WURFL: http://wur?.sourceforge.net ?? Device Atlas: http://deviceatlas.com ?? Device Anywere: http://deviceanywhere.com ?? Apple iPhone web and application guidelines (free Apple Developer Connection account required):? http://developer.apple.com/documentation/ AppleApplications/Reference/SafariWebContent ? http://developer.apple.com/webapps 22
  • 23. Building the MIT Mobile Web
  • 24. Building the MIT Mobile Web How to start building a mobile web site: 1.? Select modules 2.? Find data sources 3.? Select devices to support 4.? Set up server ¡­or use the MIT Mobile Web, which will be open sourced 24
  • 25. MIT Mobile Web modules 25
  • 26. Criteria for module selection ?? What?s most useful on the go ?? Most readily available data sources ?? Avoided ¡°screen scraping¡± ?? Takes more development time ?? Not robust 26
  • 27. System architecture Browser Detection iPhone Smartphone Feature Phone Other Content Generator People Campus Shuttle Events Student Emergency Stellar 3Down Directory Map Schedule Calendar Careers Info MIT MIT MIT MIT Careers? Emergency 3Down LDAP IMS NextBus Events Stellar .mit.edu Of?ce .mit.edu Server Server Server Server 27
  • 28. System con?guration ?? Hardware (Virtual Server): ?? CPU: Intel Xeon 3GHz ?? Memory allocation: 2 GB ?? Storage: 15 GB ?? VMWare ?? Software: ?? Operating system: Red Hat Enterprise Linux 4 ?? Web server: Apache 2.0.52 ?? PHP 5.2.5, MySQL 5.0.18, Python 2.4.4 28
  • 29. Browser detection Browser Detection Feature iPhone Smartphone Computer Spider phone 29
  • 30. WURFL Wireless Universal Resource File (WURFL) ?? Open source data source ?? Attempts to catalog all mobile devices ?? Initial goals: ?? Determine screen size ?? Determine phone features ?? Current implementation: ?? Distinguishes phones from computers ?? Updated database of User-Agent strings ?? Keywords to pick smart phones (iPhone, iPod, BlackBerry, ¡­) 30
  • 31. User agent strings Complicated and non-standardized ?? iPhone:? Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+(KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3 ?? BlackBerry:? BlackBerry8130/4.3.0 Pro?le/MIDP-2.0 Con?guration/ CLDC-1.1 VendorID/105 ?? Search for closest match 31
  • 32. Content generator ?? Three different HTML templates ¨C one for each ¡°bucket¡± of devices ?? Each HTML template includes its own CSS (style sheets) and images Content generator Module Data Selects Web Generates page Device data Smart Feature type iPhone phone phone template template template 32
  • 34. People Directory mobile backend ?? LDAP (Lightweight Directory Access Protocol) ?? Uses standard query language ?? Widely used ?? PHP has a built in interface Mobile Query Request People MIT Directory LDAP Module Server Mobile Site Results 34
  • 35. Optimized for mobile experience ?? Dif?cult/slow to type on mobile devices ?? Optimize search results: ?? Single letter = ?rst initial of ?rst or last name ?? Default sub string search ?? Exact email matches at the top 35
  • 36. 3DOWN ?? Status of major services at MIT, such as internet, email, and telephone ?? Backend: RSS (Rich Site Summary) Feed ?? Contains title and content ?? Widely used, such as Wordpress and New York Times 36
  • 37. RSS good for mobile devices ?? RSS is list oriented ?? Phones are good at displaying lists ?? Easy to reformat content for mobile devices 37
  • 40. Stellar backend ?? Stellar uses several different data sources ?? Aggregate into a custom XML (eXtensible Markup Language) feed ?? Course guide is an XML feed ?? One RSS per class for course announcements ?? Not given access to protected information ?? Why use XML? ?? Easy to inspect ?? Easy to expand to any text based data ?? Widely used for internet applications 40
  • 41. Campus Maps ¨C?web version 41
  • 42. Campus Maps ¨C backend Web Map Services (WMS) ?? Generates a map ?? Based on picture size, frame size, and map elements to display ?? Parameters passed via URL ?? Widely used standard ?? Requires a two step process: ?? Request frame ?? Request picture 42
  • 43. Campus Maps ¨C backend ?? Example: Map of W20 (Student Center) ?? Parameters : ?request=getmap&version=1.1.1& image size width=220&height=160& building selectvalues=W20& frame bbox=708882,495087,709896,495825& map elements to layers=Greenspace,Roads,Parking, display Buildings 43
  • 44. Campus Map ¨C mobile version 44
  • 45. Shuttle Schedules ?? Created a data ?le of the published bus schedule ?? Stored in MySQL database 45
  • 46. Shuttle Schedules ?? Route maps hand-drawn for different screen sizes 46
  • 47. Summary of MIT Mobile Web ?? Module selection: 1.? Usefulness (e.g., People Directory, shuttle, etc.) 2.? Easy to integrate data sources = less interface code ?? Open data standards (e.g., LDAP, RSS, and XML) ?? Device optimization / selection: ?? UI optimized for three categories (¡°buckets¡±) ?? iPhone, smartphone, and feature phone ?? Optimized mobile experience ?? Only display essential information (device dependent) ?? Code to reduce the amount of input needed 47
  • 48. Q&A
  • 49. Thank you! Design: Eric J. Kim eric@chemicalcreative.com Development: Albert Chow, Sonya Huang, and Brian Patt MangoText mangotext@mit.edu 49