MobileDesign

Single Column Format

• This format is ideal for hand-held devices (all sizes) which are typically held in the portrait orientation.
• Principles are:
  • No functional elements should appear along the bottom of the screen
  • Most users are right handed therefore orientate buttons to the right of the screen where possible
• See This Sketch and refer to the below for details.
  • A - Username / Login option should be a tap/pull down with the usual log in/log out and viewing preferences. In small devices this can be iconified, but the menu may occupy the entire screen if required.
  • B - Topic Bar - should be the topic group currently being viewed eg: "Technology" or "All Stories". Tapping this should bring down a pull down list of topics for selection.
  • D - Website Logo - tapping this should return to home page, it can also pull down a list of links to other major areas.
  • E - Read More and other buttons - positioned to the right. They need to be at least 1cm tall and 1cm wide so that a finger can touch the button easily.
  • F - Article Body - text needs to be 11 point equivalent minimum. Use em to be device independent if need be, but it's possible that experimentation will be required. Typographic and text layout guidelines are described elsewhere.
  • G - Bottom of page needs to indicate that there is "more" below .. one way is to fade window contents to background color, or to black, to indicate that there is more to be found below.
  • H - Story Icons - Clicking these should do something, possibly changing the story view category?