|
Web Design  This website demonstrates using wikis as teaching and learning tool. The course instructor is happy to share the teaching materials here with those who find it readable. |
Lecture /
Mobile Web DesignA Web Design Lecture by Steven Choy Overview: Markup for mobile web sites - Mobile Devices - Domain Names for mobile Web sites - Implement Mobile Stylesheets - Mobile META Tags - Case Studies - Tutorials Markup for mobile web sites
"In the early days of mobile web devices, the only way to surf the mobile web was to browse WAP (Wireless Application Protocol) sites. A WAP site uses WML (Wireless Markup Language) as its primary markup language. WML is an XML markup language based on the card-and-deck metaphor."
Here are the steps involved in serving WML content:
1 When a mobile phone submits a page request, it gets sent to the WAP Gateway that acts like a proxy;
2 The gateway fetches the WML page from the regular web server;
3 It then binary-encodes the content and passes the binary version of the page to the phone. The binary-encoding reduces the file size and makes the most of the limited bandwidth available to the phone; then
4 The gateway provides the phone company with the usage history of customers so they can be billed properly for their bandwidth usage.
Figure: Infrastructure of WAP (Source: http://www.tml.tkk.fi/Studies/Tik-110.300/1998/Essays/wap.html)
How does WML look like?
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card1" title="Greeting">
<p align="center">
This is The first Wml Program!
</p>
<p align="center">
From PerfectXML
</p>
</card>
</wml>
"The goal of XHTML Mobile Profile is to bring together the technologies for mobile Internet browsing and that for the World Wide Web. Before the coming out of XHTML Mobile Profile, WAP developers make use of WML and WMLScript to create WAP sites, while web developers use HTML / XHTML and CSS style sheets to build web sites."
"The difference between these two languages is that XHTML-MP consists of slightly fewer elements and tighter restrictions. These differences exist to make it easier for the mobile device to parse and render a web document, but writing XHTML-MP markup shouldn't introduce any significant changes to your process for writing regular XHTML."
It is the same, basic XHTML rendered by desktop web browsers
Mobile Devices
128 x 160 pixels
176 x 220 pixels
240 x 320 pixels
320 x 480 pixels
Reference: Mobile browser - Wikipedia
Domain Names for mobile Web site
Example: stepwise-mobile.hk
Example: m.stepwise.hk
Explore yourself: type the following in Google: site:m.*.hk
Example: stepwise.mobi
More information: http://mtld.mobi/
Serving Mobile Stylesheets
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)"
href="iphone.css" type="text/css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen, handheld" />
Mobile META Tags
The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers.
<meta name="viewport"
content="width=240, height=320,
user-scalable=yes, initial-scale=2.5,
maximum-scale=5.0, minimum-scale=1.0" />
<meta name="viewport" content="width=240,user-scalable=no" />
<meta name="viewport" content="width=320;" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/filename.png" /> Responsive Web Design
Case Studies
References and Resources
Thanks for ReadingIf you would rather like to have this lecture note in printed format, please click the print action link in the top right corner. If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk. |