Solid mobile HTML development

Before I even get started, the word “Solid” in the title implies that the HTML should work on pretty much all mobile phones. So no fancy smart-phone tricks, just a few good old wholesome HTML and CSS tips.

Use an internal-stylesheet

This is very important. Some mobile browsers’ don’t support external-stylesheets. So if you have created the mobile site with one stylesheet (Like I would), just remember to migrate the stylesheet onto each page as an internal-stylesheet. I find it easiest to open all the pages and do a find/replace throughout open documents. This saves a lot of copying/pasting work. If you’re using windows and your editor doesn’t support the ‘find/replace throughout open documents’ option, have a look at Notepad++. Dreamweaver also has this option.

Mobile Doctype and Charset

First of all, mobile devices have their own DOCTYPE.

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

You can declare the charset by either adding the following before the DOCTYPE:

<?xml version="1.0" encoding="UTF-8"?>

Or by adding the following within the <head> section:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Mobile devices are smarter than you think

I feel that developing for older mobile devices lies somewhere between developing for email-clients and relatively advanced browsers.
For example: The child and attribute selectors are well supported, however the position property should be avoided.

Here is an extremely useful website regarding mobile css properties and selector support

Fluid width – 140px to 320px

There are different sized mobile screens, just like there are different sized monitors. Design and develop for a minimum width of about 140px. This is very tiny, but there are very old mobile screens that are actually this small and we should do everything we can to avoid users from having to scroll horizontally.

I generally wrap everything within a #page-wrap div with a max-width limit to achieve this. The CSS would look something like this:

#page-wrap{margin: 0 auto; max-width: 320px }

Pixels are your enemy

Pixels should be avoided as much as possible.
You might be wondering to yourself: ‘What exactly does he mean?’.
Well, everything should be as fluid as possible since the device’s display will vary in resolution.

Alternatively, if something is given a fixed width, it should not exceed the ‘minimum’ width. (In this case, it’s 140px)

Get your logo to remain constant

The only way to keep things fair and constant, is to work with ratio. I believe that applies to everything in life, including mobile devices.

The following is an example of how logos could be displayed by mobile devices.
Mobile Devices Sizes
This is achieved by setting the width of the <img> element to 100% within the CSS.

#logo{width: 100%;}

This will grow and shrink proportionally as required thanks to the #page-wrap div.

Font-size

Set the body’s font size to small medium or large and work with font-size percentages for the other elements.
For example:

body{font-size: medium;}
h1{font-size: 80%;}
h2{font-size: 70%;}
p{font-size: 60%;}

Clearing floats

.clear{clear: both;}

<br class=”clear” /> and <div class=”clear”></div> is well supported, so use it as often as you would like.
It’s helped me get out of a few sticky situations, especially when developing forms.

Relax when designing/styling

Keep in mind that there are elements that certain mobile devices won’t allow you to style.
For example:

  • Form elements, such as <input />.
  • The :hover pseudo class.
  • And sometimes even the <a> links.

Things to remember

Remember to add some form of CSS reset.

// Hard reset
*{margin: 0; padding: 0;}

I hope you’ve taken something useful from this article. If you have any questions or comments, feel free to leave a comment below.

Any questions or comments?

  1. rajnish says:

    Hello sir
    This is a web designer i need your help, now i m making smart phone completable html css, i have seen my html page in pocket pc its look good but when i seen it in iphone and android it doesnt look compatable with iphon and android ..please suggest me any css for all smart phone compatable ..pls reply

    thanks

    Rajnish Sharma
    (India)

    1. Jamy Golden says:

      Hi Rajnish, I still haven’t developed a proper android/iphone website yet, however if I had the intention I would definitely have a look around at Mobile Tuts Plus. Good Luck