How Mobile Web Pages Work

Mobile Web Site Technology

Small buttons and software-based keyboards on phones can make filling out forms on mobile Web sites tricky.
Small buttons and software-based keyboards on phones can make filling out forms on mobile Web sites tricky.

A mobile Web site is easy to identify thanks to its design, but someone, somewhere put a lot of clever engineering into that product. Modern Web design is typically built using cascading style sheets (CSS). As the name implies, style sheets control the style elements of a page -- fonts, text colors, page width, margins and so on. While the content of your Web site may be stored in a database or in HTML files, CSS determines how that content is presented. All of the design changes mentioned in the previous section are accomplished through CSS, and other tweaks can be made to optimize the browsing experience for mobile devices. Replacing a large image background with a simple solid color, for example, will make a mobile site load faster and use less bandwidth.

Building a mobile Web site is the first step. Once the site exists, visitors have to use it. There's no clear-cut right way to deliver a mobile site, but there are several viable options. The simplest is to have a link on the full site somewhere that says "View mobile site." Often developers use a subdomain -- usually -- to direct users to the mobile Web site. That's easy to understand. goes to the full site, goes to the mobile site. Some sites use instead due to the popularity of the iPhone, but the implementation is exactly the same. While many sites use a system to automatically shepherd mobile browsers to the mobile site (described below) sometimes the only way to get to that mobile site is to manually type in the address. For more information about how Web site addresses are handled, see our article on How Domain Name Servers Work.

Other techniques for serving up mobile pages are more complicated. Many Web sites automatically detect the kind of device you're using to decide which CSS file to serve up. This can be accomplished by querying the device and determining some identifying factor -- say, how many pixels wide the screen is -- or by reading the user agent string, which declares what browser is being used to load the Web page [source: Smashing Magazine]. "Media queries" are lines of code in cascading style sheets that reference the user agent string to pick out one of those identifying factors. If the user agent identifies itself as a mobile browser with a certain screen width, that information can be used to determine what kind of Web page to load. These methods don't always work perfectly -- some browsers allow you to "spoof" the user agent and new user agent strings are always coming out with new browsers -- but in general, Web servers will properly send out a mobile site to a mobile device assuming they have one to offer. This method of identification can be tied into another option: Give the user a choice. Navigating to on a mobile device will automatically load the mobile site, but offer users a prompt to download a mobile app that offers more features.

Those are the basics of building and serving up a mobile Web site. But there's a bit more to it than that. Because using a phone is so different than using a computer, there are challenges in bringing traditional Web elements to mobile sites. The next page will cover the advantages and disadvantages of mobile browsers and the interactive elements like password fields, forms and Flash videos that make up the modern Web.