Getting Started
This is Lesson 01 in the Mobile Web Development curriculum.
Student Introductions
Take some time to consider why you want to learn about the mobile web. Considering these questions will help to frame your desired outcomes:
- What is your professional background on the web?
- Why are you interested in the mobile web?
- What knowledge and skills do you hope to achieve?
Your Impression of the Mobile Web
Describe your current impressions of the mobile web.
- Do you currently own a mobile phone or similar device?
- Have you ever surfed the mobile web on your device? The desktop web?
- What was the experience like for you? How could it be improved?
- What are your most and least favorite mobile web sites?
- Do you think the mobile web and desktop web are inherently different
(I am interested in your responses! Please add yours in the page comments.)
Mobile Web vs. Desktop Web
| Mobile Web | Desktop Web | |
| Average Session Length | 3 minutes | 10 -15 minutes |
| Min Screen Size | 90×60 | 800×600 |
| Max Screen Size | 240×400+ | Unlimited |
| Num Browser Manufacturers | 12+ | 4 (effectively 2) |
| Browser Bugs | Frequent and permanent | Rare and patchable |
| W3C Standards | Spotty. Most are unsupported recommendations. | Mature |
| Popular Markup Languages | WML 1.1, WML 1.3, XHTML-MP, XHTML-Basic, cHTML | HTML |
| Scripting Support | ~10% of clients | 100% of clients |
| Addressable Clients | 3.3 billion | 1 billion (desktops and servers) |
Curriculum Overview
The purpose of the course is to teach students to build standards-compliant and usable web sites for mobile devices.
This curriculum contains written lectures and hands-on practical content. Each lesson is a mix of learning concepts by reading or listening to lectures and applying concepts by implementing them in a computer lab. Students are expected to understand desktop web development paradigms. See the Mobile Web Development curriculum home page for a syllabus.
Beginning lessons in the curriculum cover these topics in mobile web development and design:
- Mobile Markup Languages
- Mobile Web Design Principles
- Content Adaptation for Mobile Devices (aka Device Adaptation)
- Markup Optimization
- Markup Validation
- Mobile Testing Strategies
- Mobile Web Deployment Strategies
- Acquiring Mobile Web Traffic
- Monetizing Mobile Web Traffic
- Analyzing Mobile Web Traffic
Advanced lessons dive more deeply into advanced mobile development topics:
- Optimizing Markup for Advanced Mobile Browsers
- Mobile Javascript and AJAX
- Mobile Development Frameworks
- Playing Well in Mobile Ecosystems
- Advocating for the Rights of Mobile Developers and Mobile Content
Questions and comments about the curriculum are strongly encouraged! Please add page comments or contact me directly.
Let’s Communicate!
Questions, comments, suggestions and feedback are encouraged! This curriculum evolves with advances in mobile browsers and mobile web technologies. Please leave comments on the appropriate website pages or contact me directly.
Course Project
The curriculum suggests a course project to encourage you to gain practical implementation experience with mobile web technologies and best practices. The course project is:
- Build a content-adapted mobile web site in XHTML-MP using design and development principles from this curriculum.
This lesson’s assignment for the course project is:
- Choose a project topic. Make the topic achievable in the duration of the course.
- Identify and acquire data sources for your project.
- Brainstorm and storyboard the mobile web site.
This class doesn’t cover web templating languages (PHP, JSP, ASP.NET, etc). The course project may be implemented as static markup or using a template language. Static sites and web apps are both encouraged! The most important goal is to increase your understanding of mobile web design and technologies.
Here are a few suggested project topics:
- Create a mobile version of your personal or professional web site.
- Build a mobile client for a public web service. (i.e. search results, weather, stock quotes, etc.)
- Mobilize a component of an existing web application.
History of Mobile Markup
This chart, courtesy of Little Sprints Design, tracks the evolution of mobile markup languages over time.
The mobile web is the Wild, Wild West. Here is a summary of the evolution of mobile markup languages:
- Standard Generalized Markup Language (SGML). Circa 1986. Metalanguage for defining markup languages. Originally developed to make large documents machine readable. Used in the printing and publishing industries. See this W3C document on the relationship between SGML and HTML.
- Handheld Device Markup Language (HDML). Circa 1996. Developed by a company that would become Openwave. HDML was submitted to W3C but not standardized. Considered a strong influence on WML standardization. Still in use in Japan for mobile banking.
- Wireless Markup Language (WML). Circa 1998. Developed by WAPForum. XML-based language for mobile devices that implements the Wireless Application Protocol (WAP) version 1.1. WML 1.3 is still in use today in many geographies.
- Compact HTML (CHTML). Circa 1998. Developed by ACCESS and NTT/DoCoMo. Subset of HTML. Generally considered superior to WML. Deployed only on i-mode networks in Japan.
- XHTML Basic. Circa 2000. Defines the minimum functionality considered to be XHTML. Targeted to mobile devices, PDAs and other resource-constrained devices. Here is a useful comparison of XHTML Basic and XHTML -MP.
- XHTML Mobile Profile (XHTML-MP). Circa 2001. Builds on XHTML Basic as a markup language targeted for mobile phones. Implements WAP 2.0. Considered the strongest markup language on the Mobile Web.
Using Mobile Browser Emulators
Please install and learn to use the mobile browser emulators and Firefox add-ons recommended for this course. Many emulators support switching the User-Agent and other request header values to fully impersonate a mobile device. Use the sample User-Agents for mobile devices to experiment with setting these values in an emulator.
Browsing the Mobile Web using an Emulator
Once you have learned how to emulate a mobile browser, use the emulators to browse some popular mobile web sites. Enter the links manually or surf to http://learnto.mobi/01/index.php on your mobile browser.
- Yahoo
http://us.m.yahoo.com/
- Google
http://m.google.com/ - New York Times
http://mobile.nytimes.com/ - ABC News
http://m.abcnews.com/ - E! Online
http://eonline.mobi/ - Flight Stats
http://www.flightstats.com/go/Mobile/ - Travelocity
http://www.travelocity.com/ - Weather Underground
http://m.wund.com/ - Accuweather
http://accuweather.com/
As you are using these mobile web sites, consider these questions:
- Does the site function in an emulator?
- Consider use cases for the mobile web site. Mobile users are extremely goal-directed. What tasks are possible to accomplish quickly on the site? Are these tasks optimized for mobile access?
- How much scrolling is required to use the site? (One scroll down = one thumbpress on a featurephone)
- How is the mobile web site similar and different from the desktop version?
- If the page contains advertising, is the advertising relevant? Positioned well for click-throughs?
Subscribe to
*I have no professional background
*I’m interested in general in programming, but there is a need at work for a mobile friendly site
*I hope to gain enough skills to be fairly proficient at this
*Yes
*Yes and Yes
*It was great sometimes, sometimes sucked. It really depended on the website I needed to visit. For example, some were desktop only and while on my mobile I would pinch zoom, but this would cause the body to move over and be placed on top of the directory on the left side.
*Favorite – m.slimroms.com and none of the negative do I visit on a regular basis to pinpoint one
*I do to a degree, server side not a whole lot, but client side, at least the users interface is totally or at least should be from what I see