June 2011 – Snapshot of Mobile Web

504 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

June 2011 – Snapshot of Mobile Web

  1. 1. June 2011 – Snapshot of mobile web<br />An assortment of mobile site layouts – Health and non Health related<br />
  2. 2. Non-health related<br />
  3. 3. ESPN Mobile Web<br />Features<br /><ul><li> Text Links to content
  4. 4. Large feature area
  5. 5. Search predominately displayed at top
  6. 6. Menu button brings up primary nav
  7. 7. Long scrolling page
  8. 8. Features expand/collapse footer nav</li></li></ul><li>ESPN Mobile Web<br />Features<br /><ul><li> Text Links to content
  9. 9. Large feature area
  10. 10. Search predominately displayed at top
  11. 11. Menu button brings up primary nav
  12. 12. Long scrolling page
  13. 13. Features expand/collapse footer nav</li></li></ul><li>ESPN Mobile Web<br />Features<br /><ul><li> Text Links to content
  14. 14. Large feature area
  15. 15. Search predominately displayed at top
  16. 16. Menu button brings up primary nav
  17. 17. Long scrolling page
  18. 18. Features expand/collapse footer nav</li></li></ul><li>Yahoo! Mobile<br />More than just a search engine, Yahoo mobile<br />Offers mail, chat, weather, image storaage, news,<br />Sports, and more through its mobile portal.<br />Features<br /><ul><li> Long scrolling page
  19. 19. Landing page shows main content
  20. 20. Other sites can be accessed through tabs
  21. 21. Large feature area, can be “flicked”
  22. 22. Search predominately displayed at top
  23. 23. Widget like areas of content
  24. 24. Content sections that page horizontally
  25. 25. Site detects user location to display specific content</li></li></ul><li>Yahoo! Mobile<br />More than just a search engine, Yahoo mobile<br />Offers mail, chat, weather, image storaage, news,<br />Sports, and more through its mobile portal.<br />Features<br /><ul><li> Long scrolling page
  26. 26. Landing page shows main content
  27. 27. Other sites can be accessed through tabs
  28. 28. Large feature area, can be “flicked”
  29. 29. Search predominately displayed at top
  30. 30. Widget like areas of content
  31. 31. Content sections that page horizontally
  32. 32. Site detects user location to display specific content</li></li></ul><li>Yahoo! Mobile<br />More than just a search engine, Yahoo mobile<br />Offers mail, chat, weather, image storaage, news,<br />Sports, and more through its mobile portal.<br />Features<br /><ul><li> Long scrolling page
  33. 33. Landing page shows main content
  34. 34. Other sites can be accessed through tabs
  35. 35. Large feature area, can be “flicked”
  36. 36. Search predominately displayed at top
  37. 37. Widget like areas of content
  38. 38. Content sections that page horizontally
  39. 39. Site detects user location to display specific content</li></li></ul><li>Nola.com<br />New Orleans area local news mobile site<br />Features<br /><ul><li> Long scrolling page
  40. 40. High level main nav at top
  41. 41. Big text links, clearly defined with grey background and >
  42. 42. Section nav links mixed in with content</li></li></ul><li>Nola.com<br />New Orleans area local news mobile site<br />Features<br /><ul><li> Long scrolling page
  43. 43. High level main nav at top
  44. 44. Big text links, clearly defined with grey background and >
  45. 45. Section nav links mixed in with content</li></li></ul><li>Disney<br />Entertainment Company<br />Features<br /><ul><li> Short scrolling page
  46. 46. Icon based Navigation
  47. 47. Content relevant to mobile environment
  48. 48. Large feature area</li></li></ul><li>Disney<br />Entertainment Company<br />Features<br /><ul><li> Short scrolling page
  49. 49. Icon based Navigation
  50. 50. Content relevant to mobile environment
  51. 51. Large feature area</li></li></ul><li>Best Buy<br />Electronic retail store – Online mobile store<br />Features<br /><ul><li> Logo and shopping cart clearly at top
  52. 52. Simple top nav
  53. 53. Feature area items can be “flicked”
  54. 54. Product categories appear over page content
  55. 55. Search at top implies to use it instead of trying to navigate to a particular item
  56. 56. Multiple styles of footer links</li></li></ul><li>Best Buy<br />Electronic retail store – Online mobile store<br />Features<br /><ul><li> Logo and shopping cart clearly at top
  57. 57. Simple top nav
  58. 58. Product categories appear over page content
  59. 59. Search at top implies to use it instead of trying to navigate to a particular item
  60. 60. Multiple styles of footer links</li></li></ul><li>Best Buy<br />Electronic retail store – Online mobile store<br />Features<br /><ul><li> Logo and shopping cart clearly at top
  61. 61. Simple top nav
  62. 62. Product categories appear over page content
  63. 63. Search at top implies to use it instead of trying to navigate to a particular item
  64. 64. Multiple styles of footer links</li></li></ul><li>Best Buy<br />Electronic retail store – Online mobile store<br />Features<br /><ul><li> Logo and shopping cart clearly at top
  65. 65. Simple top nav
  66. 66. Product categories appear over page content
  67. 67. Search at top implies to use it instead of trying to navigate to a particular item
  68. 68. Multiple styles of footer links</li></li></ul><li>Sears<br />Department store– Online mobile store<br />Features<br /><ul><li> Only the homepage has button links
  69. 69. Text links on every page (except home)
  70. 70. Search appears at top of every page (implies to use search than navigate to an item)
  71. 71. Product list page has mixture of buttons and text links</li></li></ul><li>Sears<br />Department store– Online mobile store<br />Features<br /><ul><li> Only the homepage has button links
  72. 72. Text links on every page (except home)
  73. 73. Search appears at top of every page (implies to use search than navigate to an item)
  74. 74. Product list page has mixture of buttons and text links</li></li></ul><li>Sears<br />Department store– Online mobile store<br />Features<br /><ul><li> Only the homepage has button links
  75. 75. Text links on every page (except home)
  76. 76. Search appears at top of every page (implies to use search than navigate to an item)
  77. 77. Product list page has mixture of buttons and text links</li></li></ul><li>CNN<br />News – Television and Online<br />Features<br /><ul><li> Very large feature area; only 1 feature
  78. 78. Long scrolling page
  79. 79. Weather is alongside the logo, implies that weather is one of the top tasks for the site
  80. 80. Top nav goes to news and A/V of news
  81. 81. Section selector uses native browser interface
  82. 82. Sections on homepage feature 3 top links, then more link
  83. 83. Content pages are split up for faster mobile downloading
  84. 84. Content pages feature share buttons, search, and other recommended articles</li></li></ul><li>CNN<br />News – Television and Online<br />Features<br /><ul><li> Very large feature area; only 1 feature
  85. 85. Long scrolling page
  86. 86. Weather is alongside the logo, implies that weather is one of the top tasks for the site
  87. 87. Top nav goes to news and A/V of news
  88. 88. Section selector uses native browser interface
  89. 89. Sections on homepage feature 3 top links, then more link
  90. 90. Content pages are split up for faster mobile downloading
  91. 91. Content pages feature share buttons, search, and other recommended articles</li></li></ul><li>CNN<br />News – Television and Online<br />Features<br /><ul><li> Very large feature area; only 1 feature
  92. 92. Long scrolling page
  93. 93. Weather is alongside the logo, implies that weather is one of the top tasks for the site
  94. 94. Top nav goes to news and A/V of news
  95. 95. Section selector uses native browser interface
  96. 96. Sections on homepage feature 3 top links, then more link
  97. 97. Content pages are split up for faster mobile downloading
  98. 98. Content pages feature share buttons, search, and other recommended articles</li></li></ul><li>CNN<br />News – Television and Online<br />Features<br /><ul><li> Very large feature area; only 1 feature
  99. 99. Long scrolling page
  100. 100. Weather is alongside the logo, implies that weather is one of the top tasks for the site
  101. 101. Top nav goes to news and A/V of news
  102. 102. Section selector uses native browser interface
  103. 103. Sections on homepage feature 3 top links, then more link
  104. 104. Content pages are split up for faster mobile downloading
  105. 105. Content pages feature share buttons, search, and other recommended articles</li></li></ul><li>Fox News.mobi<br />News – Television and Online<br />Features<br /><ul><li> Large feature area; only 1 feature
  106. 106. Long scrolling page
  107. 107. Top nav goes to news and News Video
  108. 108. Section selector uses native browser interface
  109. 109. Expand/Collapse footer links to sections; Popular sections automatically expanded</li></li></ul><li>Fox News.mobi<br />News – Television and Online<br />Features<br /><ul><li> Large feature area; only 1 feature
  110. 110. Long scrolling page
  111. 111. Top nav goes to news and News Video
  112. 112. Section selector uses native browser interface
  113. 113. Expand/Collapse footer links to sections; Popular sections automatically expanded
  114. 114. Long content pages split into multiple pages (for quicker page loading)</li></li></ul><li>Health related<br />
  115. 115. BCBSFL<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  116. 116. Big buttons, simple choices
  117. 117. each button has relevant icon
  118. 118. Simple footer</li></li></ul><li>BCBSTX<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  119. 119. Feature area (welcome banner)
  120. 120. Big buttons, simple choices
  121. 121. each button has relevant icon
  122. 122. Simple footer on homepage
  123. 123. Social Icons at the bottom of homepage
  124. 124. Content pages have expand/collapsable areas
  125. 125. Footer links on content pages mirror homepage links
  126. 126. Provider directory looks like different website</li></li></ul><li>BCBSTX<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  127. 127. Feature area (welcome banner)
  128. 128. Big buttons, simple choices
  129. 129. each button has relevant icon
  130. 130. Simple footer on homepage
  131. 131. Social Icons at the bottom of homepage
  132. 132. Content pages have expand/collapsable areas
  133. 133. Footer links on content pages mirror homepage links
  134. 134. Provider directory looks like different website</li></li></ul><li>BCBSTX<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  135. 135. Feature area (welcome banner)
  136. 136. Big buttons, simple choices
  137. 137. each button has relevant icon
  138. 138. Simple footer on homepage
  139. 139. Social Icons at the bottom of homepage
  140. 140. Content pages have expand/collapsable areas
  141. 141. Footer links on content pages mirror homepage links
  142. 142. Provider directory looks like different website</li></li></ul><li>BCBSTX<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  143. 143. Feature area (welcome banner)
  144. 144. Big buttons, simple choices
  145. 145. each button has relevant icon
  146. 146. Simple footer on homepage
  147. 147. Social Icons at the bottom of homepage
  148. 148. Content pages have expand/collapsable areas
  149. 149. Footer links on content pages mirror homepage links
  150. 150. Provider directory looks like different website</li></li></ul><li>BCBSTX<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  151. 151. Feature area (welcome banner)
  152. 152. Big buttons, simple choices
  153. 153. each button has relevant icon
  154. 154. Simple footer on homepage
  155. 155. Social Icons at the bottom of homepage
  156. 156. Content pages have expand/collapsable areas
  157. 157. Footer links on content pages mirror homepage links
  158. 158. Provider directory looks like different website</li></li></ul><li>BCBSAL<br />Health Insurance Company<br />Features<br /><ul><li>Minimal scrolling page
  159. 159. Doctor finder
  160. 160. disclaimer
  161. 161. That’s it, That’s the whole mobile site</li></li></ul><li>Aetna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  162. 162. Minimal scrolling page
  163. 163. Login fields displayed on homepage
  164. 164. Site basically says log in or find a doc/hosp
  165. 165. But health insurance tells you to call, provides no touch to call.
  166. 166. Interactive controls use default browser elements</li></li></ul><li>Aetna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  167. 167. Minimal scrolling page
  168. 168. Login fields displayed on homepage
  169. 169. Site basically says log in or find a doc/hosp
  170. 170. But health insurance tells you to call, provides no touch to call.
  171. 171. Interactive controls use default browser elements</li></li></ul><li>Aetna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  172. 172. Minimal scrolling page
  173. 173. Login fields displayed on homepage
  174. 174. Site basically says log in or find a doc/hosp
  175. 175. But health insurance tells you to call, provides no touch to call.
  176. 176. Interactive controls use default browser elements</li></li></ul><li>Cigna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  177. 177. Minimal scrolling page
  178. 178. Homepage feature area towards the bottom
  179. 179. Use of button style links, with shadows
  180. 180. Simple choices – users can find doc/hosp or log in
  181. 181. Interactive controls use default browser elements</li></li></ul><li>Cigna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  182. 182. Minimal scrolling page
  183. 183. Homepage feature area towards the bottom
  184. 184. Use of button style links, with shadows
  185. 185. Simple choices – users can find doc/hosp or log in
  186. 186. Interactive controls use default browser elements</li></li></ul><li>Cigna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  187. 187. Minimal scrolling page
  188. 188. Homepage feature area towards the bottom
  189. 189. Use of button style links, with shadows
  190. 190. Simple choices – users can find doc/hosp or log in
  191. 191. Interactive controls use default browser elements</li></li></ul><li>Cigna<br />Health Insurance Company<br />Features<br /><ul><li> Powered by Usablenet
  192. 192. Minimal scrolling page
  193. 193. Homepage feature area towards the bottom
  194. 194. Use of button style links, with shadows
  195. 195. Simple choices – users can find doc/hosp or log in
  196. 196. Interactive controls use default browser elements
  197. 197. Touch to call 911 – Nice
  198. 198. Site can use mobile device GPS to determine location</li></li></ul><li>Widescreen Test Pattern (16:9)<br />Aspect Ratio Test<br />(Should appear circular)<br />4x3<br />16x9<br />

×