How Are Mobile Web Pages Different from Regular Web Pages?

Mobile web pages are a whole different 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 on mobile pages:

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

Collapsible widgets and 'sliders' are common; sidebars and whitespace are not:

You can expect that most mobile-friendly pages will remove some or all of their sidebar navigation links, and replace them with collapsible/expendable 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
Finger tapping is different from mouse clicking:.

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 more 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
The mobile page URL is different.

Mobile-friendly web pages commonly include the letter 'm' as a significant part of its address. (click here for an example) 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:

Advertising is often reduced on mobile pages
Advertising is often reduced on mobile pages.

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 on some web pages:

When web publishers do not do a complete redesign of their content for small screens, they will often force you and me 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
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 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 either become more prominent, or they are moved offscreen:

Pictures are sized differently on mobile pages
Pictures are sized differently on mobile pages.
Commonly, photos are shrunken so that they will accomodate the smaller screens. In some rare cases, photos are actually expanded to fill the width of the tablet or smartphone display. There is not a consistent approach to picture sizing yet in 2012.