There are a number of key differences between a regular site (designed for viewing on a regular PC/Mac, with a full-sized monitor) and a mobile Web site (designed for viewing on a mobile device, running a mobile browser of some description).
Because of the significant differences between the viewing platforms for these different types of content it is not sufficient to expect mobile browsers to take your existing content and reproduce it appropriately for a mobile device. Want proof? Check out your existing site using the tool below:
Click here to view your site using Google's Mobile Web Emulator
Some of the main differences between these two types of site include:
Screen Resolution - Perhaps the most obvious, screen resolution is of course hugely different for a mobile browser than for a regular PC/Mac browser. The typical screen resolution is anywhere from around 120pixels wide for a mobile device whereas the most popular resolution is a minimum of 1024pixels wide for regular monitors. Content designed for a regular browser simply will not display properly in a mobile browser 'out of the box'. Changes have to be made if the browsing experience is to be any good at all.
Navigation - Navigation links are more often than not consigned to the left vertical portion of the screen when viewing a Web site on a PC/Mac-based browser. In Mobile web browsing this is not the case - the 'norm' is to have page navigation near to, or right at the very top of each page, for ease of navigation using a mobile browser. Given the limited page width, the key to viewing page content on a mobile browser lies in the vertical axis - everything has to flow vertically, rather than horizontally.
Image sizes - Images that are designed for viewing on large monitors can of course look garishly large on a mobile device screen. Although image sizes can of course be resized on-the-fly by some modern mobile web browsers (in dimensional terms) this often leads to distorted images and, again, a poor quality browsing experience.
Bandwidth - Images and other page elements can contribute an unnecessarily high amount to the overall page size. This might not seem much of an issue in today's high-bandwidth world, but for mobile web browsers this can be a real problem, particularly given the fact that many mobile users pay a premium fee for data transfer to their mobile. Every byte counts, so ensuring a mobile site treats elements such as images appropriately can make a huge difference.
Contrast/Color Schemes - When looking at a regular site using a large, well lit, quality LCD screen all of the subtleties and color shades used in a Web site can be appreciated. Conversely, when bustling along a busy street, one hand holding a mobile phone, eyes squinting at a small screen, a whole new set of issues come into play. Suddenly design elements become less important - the clarity of the information becomes paramount (simply to be able to read it!).
All of the above considerations have to be borne in mind when creating a mobile Web site. These, and more, are all taken care of for you when you use the XSitePro Mobile Site wizard - we'll take a look in the following section at just how easy it is to get our mobile site up and running.