Course notes 3
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

HTML for Mobile Devices

HTML Standards and DOCTYPE:

HTML 1.0 - 4.01
XHTML 1.0, 1.1 (Strict - follow the standards and Transitional - allows some use of older methods)
XHTML Mobile 1.0, 1.1, 1.2
XHTML Basic 1.0, 1.1 (more limited)
cHTML (don't use it)

HTML 5.0 in discussion now - parts of it supported by some browsers

There are differences when rendering the different html standards on mobile devices:
• XHTML-MP will open zoomed into the web page on the iPhone
• XHTML Basic will open zoomed out on an iPhone
* Some phones ignore tags and attributes of the various standards


Choose one to put at the top of the document:

XHTML Mobile 1.2
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Strict Requirements:

All tags MUST be closed <br /> <hr /> <img src="dot.gif" /> - put a SPACE between the tag name and the / for compatibility with older browsers.

Attributes must be in quotes <p style="background-color: black">

Do all presentation specifications in the CSS not using html tags in the body

Does not allow the following attributes:
  • background
  • center
  • font
  • strike
  • u (underline)
  • noshade
  • nowrap
  • target
  • text
  • link
  • vlink
  • alink
  • name
  • vspace
The following attributes are only allowed in certain places:
  • align (only in tables)
  • border (allowed in table)
  • height (allowed on img)
  • width (allowed in table and img)

Text and images need to be inside of a block element (see block elements) like a <p> or <div>

blockquote and body can only contain block level elements - like <p> or <div> no text unless it is inside a block


Basic Structure with DOCTYPE when using XHTML Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <!--Put CSS here -->
</head>

<body>
    <p>Put contents here</p>
</body>

</html>


Extra things you need to do:

• Use all LOWERCASE when writing html tags
• Mobile phones have very little room for titles - make them short <title> </title> - 15 - 40 char.
• titles are used for bookmarks - don't use the same title on multiple pages.
• documents should be less than 25 kb for compatibility on a maximum number of devices
• keep contents of a single page limited so the user will not have to scroll too much
* do not use tables

Start with the Contents - <body> elements first then do the formatting - do CSS next


Creating HTML Pages for Mobile Devices:

• It is typical to use a <h1> for your header or use a logo
• Use h2, h3, h4 in the content area
• Use div and p tags around chunks of contents (blocks)
• keep number of navigation links limited to 5-6
• put navigation links in order of: most used to least used
• in the bottom of the page put links to go to main, go to top, copyright info, etc.

Basic structure:

<body>

    <div id="header">
    <a name="top"></a>
        <h1>Title of My Page</h1>
    </div>

    <ul id="nav">
        <li><a href="main.html">Main Menu</a></li>
        <li><a href="nextpage.html">Animation</a></li>
    </ul>

    <div id="contents">All the stuff that belongs in the main part of the web site goes here<br />
        <img src="icon1.png" height="20" width="20" alt="Animation icon" />
    </div>

    <div id="footer">
        Put footer stuff here
        <a href="#top">Go to TOP</a>
    </div>

</body>


Block-level and Inline elements

The body tag must contain block-level element - no inline elements unless they are embedded inside of block-level elements.

Block-level elements
can contain inline elements and other block elements. They typically start on a new line.

Block-level elements:

blockquote
dl - definition list
div
hi - h6
ol - ordered list
p - paragraph
ol - ordered list
table
there are more...

Inline elements can contain text or other inline elements. They typically do not start on a new line.

Inline elements:
a - anchor
br
img
span
 
there are more...

WRONG:
<body>
    <img src="logo.gif" height="100" width="40" alt="The Logo" /><br />
    The Title of This Page
</body>

CORRECT:
<body>
    <p><img src="logo.gif" height="100" width="40" alt="The Logo" />
    The Title of This Page</p>
</body>

OR

<body>
    <div>
        <img src="logo.gif" height="100" width="40" alt="The Logo" />
        The Title of This Page
    </div>
</body>

*************
WRONG:

<body>
    <p>
         <a href="go.html"><h1>Click Here</h1></a>
    </p>
</body>

CORRECT:
<body>
    <p>
        <h1>
             <a href="go.html">Click Here</a>
        </h1>
    </p>
</body>


Closing Tags

• always close your tags
• close tags in the correct order

WRONG:
<body>
     <p>
        <h1>
             <a href="go.html">Click Here</a>
        </p>
    </h1>
</body>

AND also wrong

<body>
     <p>
        <h1>
             <a href="go.html">Click Here</a>
        </p>
</body>

CORRECT:
<body>
    <p>
        <h1>
             <a href="go.html">Click Here</a>
        </h1>
    </p>
</body>


div and span tags

div tag:
• defines a section of the page
* it puts a line above and below it
* it is a block-level element
* used to apply styles to a section of html code
• a div tag cannot be inside a p tag
• label your div tags <div id="header"></div> - then you can apply styles to them in the CSS
* you may nest div tags inside each other

Examples:

<body>
    <div id="header">
        <h1>
             <a href="go.html">Click Here</a>
        </h1>
    </div>
</body>

<body>
    <div id="header">
        This is the stuff on top of the header div

        <div id="inner">
             <a href="go.html">This is inside the inner div</a>
        </div>
        This is the bottom of the header div

    </div>
</body>


Images

Recommendations:
• use sparingly
• don't use for buttons and do not bitmap fonts
* don't use for visual separators - use <hr />
• don't use for menus
• don't use for backgrounds
• don't use for titles

• Use images for the content not the design
• Do not use imagemaps
• All images MUST have height, width and alt

Image formats:
GIF (animated, transparency, or none - 8 bit)
JPG (24 bit, compressed, no transparency or animation)
PNG (8 bit or 24 bit, transparency)

Compression:
Make SURE you have chosen the LOWEST compression you can get away with without your image looking bad.

Other formats:
SVG - Scalable Vector Graphics - not fully compatible
Data URI - embedded into the html file (we will talk about this later)


Lists (all compatible with mobile devices)

ul - ordered lists
ol - ordered lists
dl - definition list


Links

• avoid using target because many phones cannot open separate pages. Also, browsers that do support it act differently.

target="_blank":
Safari opens in new window (maximum of 8 windows)
Android opens in new window
Symbian opens in new window (but the new windows are not easy to get to)
NetFront, Myriad, IE, Motorola, Opera, old Blackberry, old Nokia all open in the SAME window (not a new one)

• do not make small items a link (fingers are BIG and small targets are hard to get on touch screens).

To create navigation links that allow key presses (not compatible on all - no touch screen devices)

<ol>
    <li><a href="option1.html" accesskey="1"></a></li>
    <li><a href="option2.html" accesskey="2"></a></li>
    <li><a href="option3.html" accesskey="3"></a></li>
</ol>


Tables, Frames, iFrames, Flash

DO NOT USE them. They are not supported well on mobile devices.


Dreamweaver

DO NOT use Dreamweaver to write the code - use it for YOU to write your own code. Make sure you have specified the correct DOCTYPE so it does the correct validation. (I will be checking all validation when grading)

Use Dreamweaver to upload your files to the server and validate pages.
Click here for Instructions on Uploading using Dreamweaver.