differences between desktop web sites and mobile web sites yonglei tao

Differences between Desktop Web Sites and Mobile Web Sites

Yonglei Tao

Computing Environments Laptop and desktop computers

Lenovo IdeaPad: 15.6” screen with 1920 x 1080 resolution

Pointing and clicking with a mouse A broad range of development tools

Mobile devices like smart phones iPhone 5: 4” screen with 1136 x 640 resolution Tapping on a touch screen Access to phone and geolocation services

1. Content Priority and Screen Layout Desktop Web sites

Often contain a wide range of content Use horizontal navigation to structure and present

content Mobile sites

Usually include the most crucial functions and features

Use vertical navigation to organize content

Reuters Web Sites

Reuters Mobile Sites

Orbitz Web and Mobil Sites

2. Hypertext and Actionable Objects Hypertext is the typical component for the

Web, but links often appear in the form of bars, tabs, and buttons on mobile pages Easier and more accurate to click a link with a

mouse than using fingers on a touch screen Bigger objects allow users to tap with more

precision

Hypertext and Actionable Objects (Cont.)

Hypertext and Actionable Objects (Cont.)

3. Text and Graphics

Text and Graphics (Cont.)

4. Contextual and Global Navigation Desktop Web sites use various forms of

navigation Global – remain consistent across the site Contextual – change according to where users are

on a site Limited use of global and contextual

navigation on mobile sites May make it difficult for users to figure out where

they are Need to reduce hierarchy when organizing the

content on mobile sites

Best Buy Web and Mobile Sites

5. Footers

Footers on the Best Buy Web site

Minimal footers on the Best Buy mobile site

6. Breadcrumbs Effective to reassure users they are on the right

page and allow them to backtrack on their navigational path

Make sense for sites with different content at multiple level in a hierarchy

7. Progress Indicator Guide users through a multi-step process Rarely appear on mobile sites due to limited

space Instead they use buttons with explicit labels to

inform users exactly what the next step is such as “Proceed to Checkout” or “Specify Shipping & Payment”

progress indicator on Amazon Web site

8. Integrate with Phone Functions Mobile devices such as

smart phones open up new opportunities that desktop Web sites cannot provide

Shop by phone on the Best Buy mobile site

9. Localized & Personalized Search Many mobile devices

can automatically detect where users are and give them local search results

Auto-detection of geographical location to suggest an airport on Kayak

Discussion – A View on a Tablet