june 2011 – snapshot of mobile web

41
An assortment of mobile site layouts Health and non Health related

Upload: kassim-rasoulian

Post on 02-Jul-2015

371 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: June 2011 – Snapshot of Mobile Web

An assortment of mobile site layouts – Health and non Health related

Page 2: June 2011 – Snapshot of Mobile Web
Page 3: June 2011 – Snapshot of Mobile Web

Features• Text Links to content• Large feature area• Search predominately displayed at top• Menu button brings up primary nav• Long scrolling page• Features expand/collapse footer nav

Page 4: June 2011 – Snapshot of Mobile Web

Features• Text Links to content• Large feature area• Search predominately displayed at top• Menu button brings up primary nav• Long scrolling page• Features expand/collapse footer nav

Page 5: June 2011 – Snapshot of Mobile Web

Features• Text Links to content• Large feature area• Search predominately displayed at top• Menu button brings up primary nav• Long scrolling page• Features expand/collapse footer nav

Page 6: June 2011 – Snapshot of Mobile Web

More than just a search engine, Yahoo mobileOffers mail, chat, weather, image storaage, news,Sports, and more through its mobile portal.

Features• Long scrolling page• Landing page shows main content• Other sites can be accessed through tabs• Large feature area, can be “flicked”• Search predominately displayed at top• Widget like areas of content• Content sections that page horizontally• Site detects user location to display specific content

Page 7: June 2011 – Snapshot of Mobile Web

More than just a search engine, Yahoo mobileOffers mail, chat, weather, image storaage, news,Sports, and more through its mobile portal.

Features• Long scrolling page• Landing page shows main content• Other sites can be accessed through tabs• Large feature area, can be “flicked”• Search predominately displayed at top• Widget like areas of content• Content sections that page horizontally• Site detects user location to display specific content

Page 8: June 2011 – Snapshot of Mobile Web

More than just a search engine, Yahoo mobileOffers mail, chat, weather, image storaage, news,Sports, and more through its mobile portal.

Features• Long scrolling page• Landing page shows main content• Other sites can be accessed through tabs• Large feature area, can be “flicked”• Search predominately displayed at top• Widget like areas of content• Content sections that page horizontally• Site detects user location to display specific content

Page 9: June 2011 – Snapshot of Mobile Web

New Orleans area local news mobile site

Features• Long scrolling page• High level main nav at top• Big text links, clearly defined with grey background and >• Section nav links mixed in with content

Page 10: June 2011 – Snapshot of Mobile Web

New Orleans area local news mobile site

Features• Long scrolling page• High level main nav at top• Big text links, clearly defined with grey background and >• Section nav links mixed in with content

Page 11: June 2011 – Snapshot of Mobile Web

Entertainment Company

Features• Short scrolling page• Icon based Navigation• Content relevant to mobile environment• Large feature area

Page 12: June 2011 – Snapshot of Mobile Web

Entertainment Company

Features• Short scrolling page• Icon based Navigation• Content relevant to mobile environment• Large feature area

Page 13: June 2011 – Snapshot of Mobile Web

Electronic retail store – Online mobile store

Features• Logo and shopping cart clearly at top• Simple top nav• Feature area items can be “flicked”• Product categories appear over page content• Search at top implies to use it instead of trying to navigate to a particular item• Multiple styles of footer links

Page 14: June 2011 – Snapshot of Mobile Web

Electronic retail store – Online mobile store

Features• Logo and shopping cart clearly at top• Simple top nav• Product categories appear over page content• Search at top implies to use it instead of trying to navigate to a particular item• Multiple styles of footer links

Page 15: June 2011 – Snapshot of Mobile Web

Electronic retail store – Online mobile store

Features• Logo and shopping cart clearly at top• Simple top nav• Product categories appear over page content• Search at top implies to use it instead of trying to navigate to a particular item• Multiple styles of footer links

Page 16: June 2011 – Snapshot of Mobile Web

Electronic retail store – Online mobile store

Features• Logo and shopping cart clearly at top• Simple top nav• Product categories appear over page content• Search at top implies to use it instead of trying to navigate to a particular item• Multiple styles of footer links

Page 17: June 2011 – Snapshot of Mobile Web

Department store– Online mobile store

Features• Only the homepage has button links• Text links on every page (except home)• Search appears at top of every page (implies to use search than navigate to an item)• Product list page has mixture of buttons and text links

Page 18: June 2011 – Snapshot of Mobile Web

Department store– Online mobile store

Features• Only the homepage has button links• Text links on every page (except home)• Search appears at top of every page (implies to use search than navigate to an item)• Product list page has mixture of buttons and text links

Page 19: June 2011 – Snapshot of Mobile Web

Department store– Online mobile store

Features• Only the homepage has button links• Text links on every page (except home)• Search appears at top of every page (implies to use search than navigate to an item)• Product list page has mixture of buttons and text links

Page 20: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Very large feature area; only 1 feature• Long scrolling page• Weather is alongside the logo, implies that weather is one of the top tasks for the site•Top nav goes to news and A/V of news• Section selector uses native browser interface• Sections on homepage feature 3 top links, then more link• Content pages are split up for faster mobile downloading•Content pages feature share buttons, search, and other recommended articles

Page 21: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Very large feature area; only 1 feature• Long scrolling page• Weather is alongside the logo, implies that weather is one of the top tasks for the site•Top nav goes to news and A/V of news• Section selector uses native browser interface• Sections on homepage feature 3 top links, then more link• Content pages are split up for faster mobile downloading•Content pages feature share buttons, search, and other recommended articles

Page 22: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Very large feature area; only 1 feature• Long scrolling page• Weather is alongside the logo, implies that weather is one of the top tasks for the site•Top nav goes to news and A/V of news• Section selector uses native browser interface• Sections on homepage feature 3 top links, then more link• Content pages are split up for faster mobile downloading•Content pages feature share buttons, search, and other recommended articles

Page 23: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Very large feature area; only 1 feature• Long scrolling page• Weather is alongside the logo, implies that weather is one of the top tasks for the site•Top nav goes to news and A/V of news• Section selector uses native browser interface• Sections on homepage feature 3 top links, then more link• Content pages are split up for faster mobile downloading•Content pages feature share buttons, search, and other recommended articles

Page 24: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Large feature area; only 1 feature• Long scrolling page• Top nav goes to news and News Video• Section selector uses native browser interface• Expand/Collapse footer links to sections; Popular sections automatically expanded

Page 25: June 2011 – Snapshot of Mobile Web

News – Television and Online

Features• Large feature area; only 1 feature• Long scrolling page• Top nav goes to news and News Video• Section selector uses native browser interface• Expand/Collapse footer links to sections; Popular sections automatically expanded• Long content pages split into multiple pages (for quicker page loading)

Page 26: June 2011 – Snapshot of Mobile Web
Page 27: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Big buttons, simple choices• each button has relevant icon• Simple footer

Page 28: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Feature area (welcome banner)• Big buttons, simple choices• each button has relevant icon• Simple footer on homepage• Social Icons at the bottom of homepage• Content pages have expand/collapsable areas• Footer links on content pages mirror homepage links• Provider directory looks like different website

Page 29: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Feature area (welcome banner)• Big buttons, simple choices• each button has relevant icon• Simple footer on homepage• Social Icons at the bottom of homepage• Content pages have expand/collapsable areas• Footer links on content pages mirror homepage links• Provider directory looks like different website

Page 30: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Feature area (welcome banner)• Big buttons, simple choices• each button has relevant icon• Simple footer on homepage• Social Icons at the bottom of homepage• Content pages have expand/collapsable areas• Footer links on content pages mirror homepage links• Provider directory looks like different website

Page 31: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Feature area (welcome banner)• Big buttons, simple choices• each button has relevant icon• Simple footer on homepage• Social Icons at the bottom of homepage• Content pages have expand/collapsable areas• Footer links on content pages mirror homepage links• Provider directory looks like different website

Page 32: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Feature area (welcome banner)• Big buttons, simple choices• each button has relevant icon• Simple footer on homepage• Social Icons at the bottom of homepage• Content pages have expand/collapsable areas• Footer links on content pages mirror homepage links• Provider directory looks like different website

Page 33: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Minimal scrolling page• Doctor finder• disclaimer• That’s it, That’s the whole mobile site

Page 34: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Login fields displayed on homepage• Site basically says log in or find a doc/hosp• But health insurance tells you to call, provides no touch to call.• Interactive controls use default browser elements

Page 35: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Login fields displayed on homepage• Site basically says log in or find a doc/hosp• But health insurance tells you to call, provides no touch to call.• Interactive controls use default browser elements

Page 36: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Login fields displayed on homepage• Site basically says log in or find a doc/hosp• But health insurance tells you to call, provides no touch to call.• Interactive controls use default browser elements•

Page 37: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Homepage feature area towards the bottom• Use of button style links, with shadows• Simple choices – users can find doc/hosp or log in•Interactive controls use default browser elements

Page 38: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Homepage feature area towards the bottom• Use of button style links, with shadows• Simple choices – users can find doc/hosp or log in•Interactive controls use default browser elements

Page 39: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Homepage feature area towards the bottom• Use of button style links, with shadows• Simple choices – users can find doc/hosp or log in•Interactive controls use default browser elements

Page 40: June 2011 – Snapshot of Mobile Web

Health Insurance Company

Features• Powered by Usablenet• Minimal scrolling page• Homepage feature area towards the bottom• Use of button style links, with shadows• Simple choices – users can find doc/hosp or log in• Interactive controls use default browser elements• Touch to call 911 – Nice• Site can use mobile device GPS to determine location

Page 41: June 2011 – Snapshot of Mobile Web

Widescreen Test Pattern (16:9)

Aspect Ratio Test

(Should appear circular)

16x9

4x3