How Mobile Web Pages Work

Mobile Web Site Design

Facebook uses multiple mobile site designs, and serves up the one that best fits the device accessing the popular social app.
Facebook uses multiple mobile site designs, and serves up the one that best fits the device accessing the popular social app.

Technology and Internet speed play a major role in distinguishing mobile platforms from full computers, but in the end it all comes down to size. Even the largest smart phone screens that measure more than four inches (10.2 centimeters) diagonally are tiny compared to computer monitors. While the image resolutions of these displays continue to grow, they're physically too small to legibly display whole Web sites. Reading on them requires zooming in, and often the multi-column layouts of modern sites make navigation and content consumption difficult. Optimal Web site usability comes from an understanding of a platform's defining characteristics. For mobile, that begins with screen size.

Mobile Web design must focus on single-column layouts that condense all of the content into one compact arrangement. This may entail re-arranging navigation links, removing less important page elements, and making the primary column narrower to account for a phone's dimensions. While monitors are wider than they are tall, most phone screens are designed for a portrait orientation -- you can always turn the phone on its side to browse a site, but mobile layouts need to account for the narrowness of that default orientation. Layout isn't the only concern -- since mobile devices don't use a mouse like a PC, "mouseover states" like drop-down menus have to be redesigned to work with touch inputs or phone buttons [source: Smashing Magazine].

That last point leads into another challenge of mobile Web site design: browser and hardware variety. It's hard enough to build full Web sites that take into account the idiosyncrasies of browsers like Internet Explorer, Mozilla Firefox and Google Chrome. In the mobile world, some people browse the Web on "dumb" phones with tiny low-resolution screens; others use smart phones with far higher-res displays and touch screens! Sometimes one mobile site isn't enough -- it makes sense to design separate mobile interfaces for various devices. Facebook, for example, serves up a tailored site to smart phone visitors by detecting the capabilities of the device they're using [source: PC World]. We'll cover the technology behind that in the next section.

Though mobile Web design requires a simplified interface, it doesn't necessarily result in a dumbed-down Web site. On the contrary, smart phones offer advanced features unavailable on computers. QR Codes scanned by phone cameras can instantly launch Web sites or download applications. Maps can tie into GPS data to give you directions or recommendations for nearby restaurants. It takes a smart use of technology behind the scenes to create an efficient mobile site. Let's look at how tech and design are two sides of the same coin.