No Gravatar

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.

Historical Evolution of Mobile Markup

The mobile web is the Wild, Wild West. Here is a summary of the evolution of mobile markup languages:

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.

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?

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Getting Started, 5.0 out of 5 based on 1 rating