How Are Mobile Web Pages Different From Regular Web Pages?

Close up of man using multiple mobile device - phone, table, and laptop

Tetra Images / Getty Images 

Web pages that are optimized for use on mobile devices differ from their conventional counterparts, which appear on desktop and laptop computers. The latter are designed for large screens and precise mouse clicking, whereas mobile web pages are sized for smaller screens and imprecise finger tapping. Given that 58% of site visits came from mobile devices in 2018, site designers are tasked with providing versions that work with both mobile devices and desktop computers. The most common approach is to use responsive web design, which automatically delivers the proper version based on the device and screen size as detected by the browser.

In any case, mobile-friendly web pages have a few traits in common.

  • Screen real estate: This is the most obvious difference between desktop and mobile web pages. While most desktop monitors measure at least 19 inches to 24 inches diagonally, tablets are commonly around 10 inches diagonal. Smartphones are about 4 inches diagonal. Simply zooming out does not successfully convert a web page to being mobile-friendly, because it makes the text unreadable and requires an extra step from the site visitor. Plus, tapping accurately on tiny elements becomes impossible. Commonly, designers remove sidebars and graphics that aren't strictly necessary. Instead, they use smaller graphics, increase font sizes, and collapse content into expandable widgets. This real estate limitation has driven a whole different kind of thinking among web designers.
  • Widgets and sliders replace sidebars and whitespace: Collapsible/expandable menu widgets typically replace sidebars and bulky header menus. Similarly, in their quest to make every millimeter of screen space count, designers remove superfluous white space, while keeping a careful eye on readability.
  • Hotspot areas are more prominent: Unlike a precise mouse pointer on your desktop, the human finger is a blob, and tapping requires large targets on the screen for hyperlinks. Mobile-friendly sites offer large tapping areas (or hotspots) to facilitate accurate navigation.
  • Often, the URL is different: Mobile-friendly web pages commonly include the letter m in their addresses; for example, Facebook's mobile address is m.facebook.com. The mobile URL is usually chosen for you automatically when you surf with a mobile tablet or smartphone. In some cases, you'll see a tappable link that lets you switch to the regular desktop version of the page.
  • Advertisements are different: A crowd of sponsored links and large banner ads just don't work on a phone or small tablet. Instead, small pop-up ads are more common on mobile web pages.
  • Password logins are different: Login and password fields meant for desktops and laptops become tiny and unusable on a phone, so web publishers make these larger, sometimes giving them their own pages for ease of use. Logging in with a fingerprint or another account, such as Google or Facebook, is becoming increasingly common as device and service capabilities evolve.
  • The layout of graphics tends toward vertical: Layouts that feature text wrapped around a graphic don't play well on mobile devices. Instead, designers often give those graphics the full width of the screen and run the text beneath or above.
  • "Chunking" remains a good design principle: Good web design breaks text into chunks for readability; no one wants to read solid walls of words. This becomes even more important on small screens. Using white space judiciously is crucial.