Mobile Web Design For Dummies
By Janine Warner and David LaFontaine
Get the code you need (without typing).
In this page you’ll find code samples from the book, Mobile Web Design For Dummies.
Find the code below that corresponds to the book, and then copy and paste the code from this page into your favorite code editor.
Scroll down the to section you’re looking for:
Chapter 3: Here’s the code for a simple mobile Web page design that will display well in most mobile devices
Note that the example used in the book and shown here features a real company. In the code below, the text, links, address, and phone number have been altered to remove specific information.
To create your own simple mobile-optimized Web page, simply enter your own details as indicated into the code below:
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN”
“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”HandheldFriendly” content=”True” />
<title>Enter Title Here</title>
</head>
<body>
<div><h2><a href=”Enter your URL here;, make sure to include the full URL
http://domain.com”>View Full Web Site</a></h2>
</div>
<div><img src=”Enter image name and path here” alt=”Enter Alternative Text here” width=”95%” height=”50″ /></div>
<div><img src=”Enter image name and path here” alt=”Enter Alternative Text here ” width=”125″ height=”116″ /></div>
<div><p><strong>Click to Call: <a
href=”tel:555-555-555″>555-555-5555</a> </strong> </p></div>
<div><a href=”enter link to Google map here”>View Map on Google</a></div>
<div><a href=”http://m.mapquest.com/”>Search
Directions on MapQuest</a></div>
<div>
<h2>Your Name Here</h2>
<p>Street Address<br />
City, State Zip</p>
</div>
<div><h3><a href=”http://m.youtube.com/”>Watch Our Demo Video on YouTube</a></h3></div>
</body>
</html>
Make Phone Numbers Easy to Dial
Also note, this is the correct way to turn a phone number into a link that can be touch-dialed from nearly any phone:
<a href=”tel:18001234567″>+1-800-123-4567</a>
Chapter 5: Mobile-Specific Doctypes
The doctype, or Document Type Definition (DTD), is a declaration that should appear at the very top of any Web page, even before the open <html> tag. Essentially, the doctype tells the Web browser which markup language was used to write the page so that the browser knows how to render the page.
Web browsers struggle to provide support for all the different ways Web pages are written. If you leave off the doctype or use a doctype that doesn’t match the code in your Web page, many browsers will resort to what’s called Quirksmode and take a best-guess approach to rendering your page. As you might imagine, the results are not very pretty sometimes. Don’t let this happen to your pages, especially after you’ve spent so much time making sure that your mobile pages were designed with the right markup language.
Following are some of the most common doctypes and what they tell a Web browser:
* By default, Dreamweaver adds the XHTML 1.0 Transitional docytpe to its pages. Although you can change this setting in the preferences in Dreamweaver, by default, all pages are created using the XHMTL 1.0 transitional markup language. This doctype is a common choice for Web pages designed for the desktop Web. The following complies with the W3C recommendation:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
* Three versions of XHTML MP are available: version 1.0, 1.1, and 1.2. Most designers use versions 1.1 or 1.2. The doctype for 1.1 is
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
And the doctype for version 1.2 is
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.2//EN”
“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
* For pages designed with WML version 1.3, use the following:
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
Chapter 8: Using Images and Multimedia in Mobile Designs
Here’s the code you need in order to insert video from YouTube so that it will play within your Web page:
<OBJECT width=”140″ height=”105″>
<param name=”movie” value=”http://www.youtube.com/v/
YOURVIDEOCODEHERE”></param>
<param name=”wmode” value=”transparent”></param>
<embed src=”http://www.youtube.com/v/YOURVIDEOCODEHERE” type=”application/x-shockwave-flash” wmode=”transparent” width=”140″ height=”105″></embed>
</OBJECT>