Web browsers of mobile phones are getting more and more sophisticated, but there are some important differences between them and desktop browsers, like screen size and horizontal scrolling. Most mobile phone browsers do not support horizontal scrolling, and even if they do it can be a bit awkward. Another problem is memory size, some mobile phone browsers cannot access HTML documents larger than 10kBytes. Usually mobile phone browsers access web pages via gateways which adapt content for mobile phone browsers, like reducing image size. If mobile phone browsers fail to access web pages because they are above a memory size limit, this might not show in server access logs, because the gateway accesses the web page successfully before passing it to the mobile phone browser.
The photo above is just to illustrate image resizing for mobile phones. It has a width of 600 pixels, but mobile phone gateways resize it to the smaller width of the mobile phone screen. If the width and height attributes of the image are included in the <img> tag, then mobile phone web browsers or proxies can usually resize the image to have the width of the screen, but some mobile phone browsers do not resize images if they are contained in absolutely positioned <div> elements.
Google WAP Proxy, or the Google Wireless Transcoder google.com/gwt/n, converts URLs to a format accessible to all WAP enabled mobile phones, by changing the MIME type the doctype, stripping out style, serving URL content in smaller separate pages, resizing images, there is also the option of hiding images. The width and height attributes of the <img> tag are changed such that all images have the same widths of 172 pixels, of course maintaining the original width/height ratio. All the links in the adapted page are changed to adapted URLs by passing the original URL to google.com/gwt/n for example like http://google.com/gwt/n?u=http%3A%2F%2Fwww.domain.com%2Fsomeurl
The MIME type is changed by the Google Wireless Transcoder to application/xhtml+xml and the doctype is changed to the XHTML MP doctype, so the start of the document becomes
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
An adapted page starts with a table of contents generated by using the <h> headings, so it helps if the original document has a clear HTML syntactical structure using headings <h1>, <h2> etc. Another useful feature is collapsed site navigation.
Web pages for mobile phones have to consider the small size screen and the fact that many mobile phone web browsers do not have full Flash players (most have no Flash player at all) and have problems with JavaScript.
The layout for a page designed for a small mobile phone screen is better if single-column and without large margins or paddings. Absolute positioning becomes a problem, it is better to use relative positioning to better allow the mobile phone browser to adapt the look of the page. The media attribute of the link tag can be used in principle to present different external stylesheets files according to the type of browser, with media="handheld" for hand-held devices, but different mobile phone browsers deal with this attribute in different ways, so it is not very reliable.
The WAPFORUM doctype for XHTML MP is an extension of XHTML Basic 1.0, a doctype to be used for simple content authoring. Some elements are not supported by XHTML Basic, like style element (external style sheets are recommended, included with the link element). Other elements not supported are script and noscript and frames.
XHTML Basic consists of the following XHTML modules
Opera Mini has a great browser for mobile phones, that makes accessible larger memory size URLs and adapts almost any page layout to a small screen. Opera Mini 4 beta 2 has horizontal scrolling. A Java applet simulator of Opera Mini 4 beta 2 is at www.operamini.com/beta/simulator/. Some useful features are collapsed lists of links (like site navigation) and page information with the page URL and memory size. The Opera website has very good advice for designing for mobiles.