How Mobile Web Pages Work

news displayed on smartphone
To make their pages easy to access on mobile devices, some Web developers pare their content down to just the basics.
©iStockphoto/Thinkstock

Do you remember the Internet circa 1997? Pages were designed for low-resolution CRT monitors and slow modems. Text ruled the Web, and occasional JPEG and GIF images decorated pages here and there. Most of the time we didn't see them, since turning off images was one sure way to eke a little extra speed out of a dial-up modem. More than a decade later, the entire Internet landscape has changed. Broadband Internet via cable and DSL connections is the standard in the developed world, and Web pages can use more complex elements -- tons of images, transparency effects and even video -- to deliver content. We can even stream entire movies from the Internet to our computers without waiting for files to download!

As huge as the shift to higher resolution monitors, broadband speeds and fancy graphical options has been, a second trend has had a major impact on the World Wide Web as it exists today. As phone technology has grown more advanced and less expensive, smartphones have become an integral part of the Internet experience. Mobile devices represent a key gateway to the Web for millions and millions of users who don't own PCs. For example, in India, usage of popular Web browser Opera Mini grew by 300 percent between March 2010 and March 2011 [source: Real Time News]. In many parts of the world, the window to the Internet is not on a 23-inch monitor. It's on a 3-inch phone screen. Even cheap "dumb" phones without touch screens or powerful hardware can surf the Web.

Advertisement

Enter the mobile Web site. Because the popularity of mobile Internet usage has arrived side-by-side with high-speed Internet service and more powerful computer hardware, developers of online content have a unique challenge. Web sites designed for big monitors, fast computers and fast Internet lean heavily on graphics and cutting-edge programming that doesn't always work on the smaller screens and slower networks of mobile devices. The solution lies in mobile Web sites -- pages specifically tailored to work on smaller devices and deliver important content while cutting down on the graphics that slow page loading. Though mobile Web sites are intentionally simpler than full sites, that doesn't mean they're easy to build. Mobile Web sites still require attention to design and technology, and the strict limitations of mobile hardware don't make things any easier.

Mobile Web Site Design

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

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].

Advertisement

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.

Advertisement

Mobile Web Site Technology

user typing on smartphone
Small buttons and software-based keyboards on phones can make filling out forms on mobile Web sites tricky.
Photos.com/Thinkstock

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 m.website.com -- to direct users to the mobile Web site. That's easy to understand. Website.com goes to the full site, m.website.com goes to the mobile site. Some sites use i.website.com 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 m.website.com address. For more information about how Web site addresses are handled, see our article on How Domain Name Servers Work.

Advertisement

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 IMDB.com 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.

Advertisement

Advantages and Disadvantages of Mobile Sites

Mobile Web sites inevitably work better than their full-site counterparts on smart phones because they're tailor-made for small devices. "One size fits all" is never the best solution. That said, mobile sites aren't always "better" than full sites on mobile devices. Because the sites are designed for easy browsing on phones, they take into account the limitations of those devices and offer a limited experience as a result. Mobile site navigation, for example, won't always be accessible as regular navigation since there's not enough screen space to keep it visible at all times.

Interacting with a Web site may be the most difficult part of the mobile browsing experience. It takes far longer to scroll through an input form, select the individual fields and type into them on a phone than it does on a computer. This problem is exacerbated by touch screens and software keyboards. Thankfully, phone browsers can store cookies and remember passwords just like desktop browsers, making the mobile experience just a little bit easier. Some browsers built for phones that have desktop equivalents, like Firefox for Android and Opera Mobile, can sync passwords and other saved data from the browser settings on your computer. This is a great way to carry over your data and simplify the browsing experience in both mobile and full sites. Modern smart phones also have a couple tricks up their sleeves that make navigation enjoyable: Pinch-to-zoom can easily enlarge an area of text, and most browsers use a "tap-to-zoom" action that zooms to the exact width of a paragraph.

Advertisement

When mobile Web browsing is the topic at hand, Flash inevitably enters into the discussion. Flash video is demanding on processors and battery life but has improved over the years and now works on many mobile devices -- but not on any device manufactured by Apple. Apple does not allow Flash video to play on iOS and instead supports HTML5 video, which is already used by many video sites like YouTube. While Flash videos can be embedded in mobile Web pages, that practice flies in the face of mobile design's greatest strength: simplicity. Lightweight mobile sites load quickly because they're primarily text and small images. Additionally, putting Flash on your mobile site means limiting how iPhone users can interact with your Web page.

Though Web designers have to make careful choices about what content they display and how they arrange a mobile page, the mobile Web experience really isn't that different from the real thing. Advertising works on mobile Web sites, too, though obviously systems like Google AdSense are better suited to small sites than giant pop-up ads. Browsing on smart phones will never be quite as efficient as using a mouse, keyboard, and large monitor, but they're always close at hand. Good mobile design makes the experience as painless as possible.

Advertisement

Frequently Answered Questions

What is a mobile page design?
A mobile page design is a type of web page design that is specifically optimized for mobile devices. Mobile page designs take into account the smaller screen sizes and touch-based input of mobile devices and are typically simpler and easier to use than traditional desktop-based web pages.
What are mobile websites?
Mobile websites are websites that are specifically designed to be viewed on mobile devices, such as smartphones and tablets. They often have a simplified design and layout, and may omit certain features that are not optimised for mobile devices.
What are the benefits of mobile website?
Some benefits of mobile websites include: -They are easier to navigate than traditional websites because they are designed for smaller screens and touch-based input. -They load faster because they are optimized for mobile devices. -They use less data than traditional websites because they are designed to be lightweight. -They are more accessible to users in developing countries who may not have access to high-speed internet.
What is the difference between a website and a mobile website?
A website is a collection of web pages that are typically accessed via a web browser on desktops. A mobile website is a website that is designed to be accessed via a mobile device, such as a smartphone.

Lots More Information

Related Articles

  • Gube, Jacob. "8 Tools For Easily Creating A Mobile Version of Your Website." Dec. 16, 2010. (June 13, 2010). http://mashable.com/2010/12/16/create-mobile-site-tools/
  • HSWSolutions.com. "Advantages of Mobile Website Optimization." (June 16, 2011) http://www.hswsolutions.com/services/mobile-web-development/advantages/
  • Ionescu, Daniel. "Facebook Merges Mobile Sites for All Phones." April 1, 2011. (June 13, 2011)
  • http://www.pcworld.com/article/223997/facebook_merges_mobile_sites_for_all_phones.html
  • MobiForge.com. "Mobile advertising: how to monetize your mobile site." June 2007. "June 16, 2011) http://mobiforge.com/running/story/mobile-advertising-how-monetize-your-mobile-site
  • Raasch, Jon. "How To Build A Mobile Website." Nov. 3, 2010. (June 13, 2011) http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
  • Thomas, Trisha. "India mobile web usage quadruples in one year: Opera." April 21, 2011. (June 13, 2011) http://rtn.asia/256_india-mobile-web-usage-quadruples-one-year-opera
  • Webcredible.co.uk. "7 usability guidelines for websites on mobile devices." March 2011. (June 13, 2011) http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

Advertisement

Loading...