1 / 19

Differences between Traditional Web Sites and Mobile Web Sites

Differences between Traditional 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

jacob-potts
Download Presentation

Differences between Traditional Web Sites and Mobile Web Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Differences between Traditional Web Sites and Mobile Web Sites Yonglei Tao

  2. 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

  3. 1. Content Priority and Screen Layout • Traditional 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

  4. Reuters Web Sites

  5. Reuters Mobile Sites

  6. Orbitz Web and Mobil Sites

  7. 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

  8. Hypertext and Actionable Objects (Cont.)

  9. Hypertext and Actionable Objects (Cont.)

  10. 3. Text and Graphics

  11. Text and Graphics (Cont.)

  12. 4. Contextual and Global Navigation • Traditional 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

  13. Best Buy Web and Mobile Sites

  14. 5. Footers Footers on the Best Buy Web site Minimal footers on the Best Buy mobile site

  15. 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

  16. 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

  17. 8. Integrate with Phone Functions • Mobile devices such as smart phones open up new opportunities that regular Web sites cannot provide Shop by phone on the Best Buy mobile site

  18. 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

  19. Discussion –View on a Tablet

More Related