Now teaching Mobile Web Development at Portland Community College

Register now for Mobile Web Development and Advanced Mobile Web Development for Smartphones for Fall 2009. Classes meet 5:30pm - 9:30pm once a week for six weeks in Portland, Oregon.

See the Mobile Web Development curriculum or contact me for details.

how to develop standards-compliant and usable mobile web applications

Tag: Mobile Web

No Gravatar

Capturing HTTP request headers from Web browsers on mobile devices gives you the information required to simulate the device in Firefox or a mobile device or browser emulator.

Here is a handy tool that allows you to easily view, cut and paste the HTTP headers sent by a Web browser on a mobile device. Follow these steps to capture HTTP headers from a mobile browser:

  1. Browse to http://learnto.mobi using the mobile browser.
  2. Select the View Request Headers link.
  3. Notice the HTTP request headers on the displayed Mobile Web page.
  4. Remember the four-digit number shown at the top and bottom of the page. (i.e. Viewing Request Headers #1234)
  5. Browse to the same View Request Headers page in a desktop browser (i.e. Firefox, Chrome, Safari or IE).
  6. Enter the saved number into the textbox at the bottom of the page. Press the Go button to view the HTTP request headers from the mobile device. (i.e. enter “1234″ into the textbox.)
  7. Copy and save the HTTP headers for use in Firefox and mobile emulators.

Let’s look at some screenshots of this process. The following screenshot shows the location of the View Request Headers link that is clicked in Step 2 to display the HTTP headers.

View HTTP Request Headers

The following screenshot shows the location of the four-digit number mentioned in Step 4 that is (temporarily) associated with the HTTP request headers. In this screenshot, the headers are from Firefox 3.5.

Four-Digit Number associated with HTTP Request Headers

The screenshot below shows the location of the textbox from Step 6 into which the four-digit number from Step 4 is entered to call up a (recently) previously-viewed set of HTTP request headers. The HTTP request headers displayed in the screenshot are from a Motorola MB200 Cliq Android smartphone.

HTTP Request Headers from Motorola MB200 Cliq

Once you are viewing a request headers from a mobile device in a desktop browser, simply copy and paste the headers to save them.

NOTE: The four-digit numbers assigned to HTTP request headers are temporary. They are re-assigned over time to new sets of headers. It’s important to complete the process of viewing headers on a mobile device and capturing headers using a desktop browser over a short time period, say 5 to 15 minutes.

Bookmark and Share
VN:F [1.5.2_773]
Rating: 0.0/5 (0 votes cast)
No Gravatar

A reader from Minnesota recently emailed me to ask which markup language is best used for a Mobile Web site targeting smartphones:

My company is building an academic iPhone application (showing completed classes, current classes, grades, etc.). We also want to build a Mobile Web site that surfaces this information. If we only want to support smartphone Web browsers, should we use HTML or XHTML-MP?



My preference is to always use XHTML-MP (XHTML Mobile Profile). HTML is too unstructured for mobile devices. XHTML is a better choice, but can be considered "desktop markup" by some services in the mobile ecosystem, potentially subjecting the site to transcoding and exclusion from indexes of Mobile Web sites.

Web browsers in iPhone, Palm webOS, Android and other smartphones will render HTML and XHTML without problems, but if you stick with XHTML-MP, you also achieve built-in compatibility with a greater variety of Internet-capable mobile devices. Using XHTML-MP also allows crawlers for mobile search engines to easily recognize your content as mobile-optimized. In my experience, the Web development goal of "only supporting smartphones" almost always broadens to "supporting all Web-savvy mobile browsers", which are installed on a rapidly increasing percentage of low-end and free featurephones. You set your Mobile Web site up for broader compatibility if you stick with XHTML-MP.

If you must use XHTML or HTML for a Mobile Web site targeting smartphones, then be sure to embed mobile META tags into the markup. The Viewport, HandheldFriendly and MobileOptimized META tags identify Web documents authored in desktop-optimized markup languages as optimized and intended for mobile devices.



Bookmark and Share
VN:F [1.5.2_773]
Rating: 5.0/5 (1 vote cast)
No Gravatar

I am seeking interviews with real-world Mobile Web developers for a series of articles about what it really takes to build and deploy a high-traffic, content adaptive and standards-compliant Mobile Web site. Volunteers are encouraged!

Are you an in-the-trenches Mobile Web developer? Have you successfully navigated technology and deployment challenges to release a Mobile Web site? Do you have advice and strategies that you’d like to share with the mobile developer community? Please contact me and include a link to the mobile site.

The articles will be posted here and possibly re-published at other technical blogs and magazines.

Bookmark and Share
VN:F [1.5.2_773]
Rating: 0.0/5 (0 votes cast)