Given that the majority of website visits come from mobile devices, 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 user’s device and screen size, as detected by the browser. In any case, mobile-friendly web pages have are distinct from desktop versions in a number of ways.
Page Design: Mobile Screens Have Less Space
The most obvious difference between desktop and mobile web pages is the screen real estate. While most desktop monitors measure at least 19 inches to 24 inches diagonally, tablets are commonly around 10 inches. Smartphones are about 4 inches diagonally. Simply zooming out does not successfully convert a web page to a mobile-friendly version because it makes the text unreadable and requires an extra step from the site visitor. Also, tapping accurately on tiny elements becomes impossible. To fix the issue designers may 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. Also, collapsible or expandable menu widgets typically replace sidebars and bulky header menus. In their quest to make every millimeter of screen space count, designers remove superfluous white space, while keeping a careful eye on readability. 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. 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. Similarly, good web design breaks text into chunks for readability; no one wants to read solid walls of text. This becomes even more important on small screens. Using white space judiciously is crucial.
Page Controls: Desktop Precision vs. Mobile Blobs
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. Mobile-friendly web pages also 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. 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.
Why Does it Matter?
Mobile web pages are designed for handheld devices and are quite different from pages made for desktop reading. While you can usually view the desktop version of a webpage on a mobile device, and vice versa, they are designed differently to make content easier to view, read, and navigate.
