Mobile Web Design For Dummies

The Code You Need (without typing): just copy and paste

In this page you'll find many code samples from the book, iPhone & iPad Web Design For Dummies.

iPhone & iPad Web Design For Dummies was created by Janine Warner and David LaFontaine

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>

Simple site design Click here to download this sample mobile web page code in a zipped html file (from Mobile Web Design For Dummies Chapter 3)

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:

Learn more in the Mobile Web Design Training Center