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.
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
:hoverpseudo 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.