How Mobile Web Pages Work

Publish date: 2022-03-17

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.

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.

Contents
  • Mobile Web Site Design
  • Mobile Web Site Technology
  • Advantages and Disadvantages of Mobile Sites

    • Mobile Web Site Design

    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.

    Mobile Web Site Technology

    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.

    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.

    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.

    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.

    Is it safe to shop online from your phone?

    In some ways, phone browsing is actually safer than desktop browsing -- most of the viruses on the Web target Windows and won't function on a mobile operating system. Modern smart phones support secure browsing technologies like HTTPS and SSL, but you should be just as careful shopping on your phone as you would on any other computer. Shop at reputable sites and watch the URL bar to make sure encryption protocols are in place to keep your personal information and credit card data safe!

    Lots More Information

    Related Articles

    ncG1vNJzZmibn6K9tsDEq2Whp6eowbayxbCmq6OjY7CwuY6mppuhnJp6uLHBZqean5VjtbW5i2VjZWRcYXk%3D