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 

Mobile web pages are a unique animal. Unlike desktop-friendly web pages, which are designed for large screens and precise mouse clicking, mobile web pages are sized for smaller screens and imprecise finger tapping. Additionally, modern websites are obliged to publish in both desktop and mobile formats, effectively requiring every web page to be created twice.

of 08

Screen Size and 'Real Estate' Are Different

BBC2 news website on a tablet

This is the most obvious difference between desktop and mobile web pages. While most desktop monitors are 19-inch to 24-inch diagonal size, tablets are commonly 10 inches diagonal. Smartphones are 4 inches diagonal. Simple zooming-out does not successfully convert a web page to being mobile-friendly, as this only makes the text unreadable. Similarly, finger-tapping becomes impossible to do accurately on a zoomed-out web page. Mobile web designers actually need to change their whole approach to page layout. Commonly, designers need to remove sidebars and unnecessary pictures, choose smaller pictures, increase font size, and collapse content into expandable widgets. This real estate limitation has driven a whole different kind of thinking amongst web designers.

of 08

Widgets and 'Sliders' Are In; Sidebars and Whitespace Are Out

Screenshot form, BBC 2 news site on tablet showing collapsed widgets

You can expect that most mobile-friendly pages will remove some or all of their sidebar navigation links, and replace them with collapsible/expandable menu widgets. Similarly, expect there to be no blank space on the left and right of the content, and much less whitespace as designers strive to maximize the use of the tablet and smartphone real estate.

of 08

Finger Tapping Is Less Precise Than Mouse Clicking

Finger tapping is different from mouse clicking - shoiwn on CNN tech site on tablet

Unlike a precise mouse pointer on your desktop, the human finger is a blob, and finger tapping requires large targets on the screen for hyperlinks. Expect to see large rectangular tap targets ('tiles') on mobile web pages, and fewer text-based hyperlinks. Additionally, menus will often be replaced with large buttons and large tabs to accommodate the imprecision of finger taps.

of 08

The Mobile Page URL Is Different

The mobile page URL is different on the best buy site

Mobile-friendly web pages commonly include the letter 'm' as a significant part of its address. The mobile URL is usually chosen for you automatically when you surf with a mobile tablet or smartphone. In some cases, you will see a tappable link that lets you switch to the regular desktop version of the page.

of 08

Advertising Is Either Reduced or Removed

Youtube mobile page on a tablet

Yes, this is wonderful for readers but a real sore point with web advertisers. Because there is reduced room on a tablet or smartphone, placing a crowd of sponsored links and large banner ads just doesn't work. Instead, expect to see special smaller pop-up type ads on mobile web pages, often at the bottom center of your screen. Other clever types of smaller-sized advertising are being devised as mobile devices mature.

of 08

Checkboxes and Small Links Will Be Frustrating

website on a tablet showing small checkboxes

When web publishers do not do a complete redesign of their content for small screens, they will often force you to use our blob-type fingers to click on tiny little checkboxes. This forces users to employ trial-and-error or pinch-zooming in order to accurately tap the checkboxes.

of 08

Password Logins May Become Obscured or Overly-Small

Password logins will often be frustrating to type on mobile web pages

Yes, this is a modern annoyance with many mobile web pages. Because many web publishers still think in terms of 22-inch screens, they will set you up for two annoying mobile experiences: your login and password fields will be tiny and difficult to tap, and your sliding mobile keyboard will cover your login and password fields. You will need to adapt by using pinch-zooming to make the login fields visible, and you will need to scroll the screen and turn the keyboard off in order to uncover the hidden login buttons. Hopefully, modern web publishers will find a clever way around this annoyance soon.

of 08

Pictures Become More Prominent

Pictures on the BBC News site shwoing pictures

Commonly, photos are shrunken so that they will fit on the smaller screens. In some rare cases, photos are actually expanded to fill the width of the tablet or smartphone display.