Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Web Design Pattern: Horizontal List

From Wiki
Jump to: navigation, search
Yiibu (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Web Design" to "")
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Design]]
+
[[Category:Mobile Design Patterns]][[Category:Mobile Web Design Patterns]]
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090423
 +
|author= [[User:Yiibu]]
 +
}}
  
 
+
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.
This design pattern is part of the [[Mobile Web Design Patterns]] series.
+
  
  
 
== 2. Horizontal list ==
 
== 2. Horizontal list ==
 
 
===Description===
 
===Description===
 
 
 
A horizontal list of data which can include text and images. Horizontal lists have a somewhat limited use on the mobile web as they can be difficult to read once they begin to wrap. They are therefore best suited to very short lists.  
 
A horizontal list of data which can include text and images. Horizontal lists have a somewhat limited use on the mobile web as they can be difficult to read once they begin to wrap. They are therefore best suited to very short lists.  
 
  
 
[[Image:15-long-horizontal.png]]
 
[[Image:15-long-horizontal.png]]
 
 
 
'''Figure:''' This horizontal list is so long that the list items blend together. Selecting distinct elements within this list using cursor navigation could be tricky as the items are so close together.
 
'''Figure:''' This horizontal list is so long that the list items blend together. Selecting distinct elements within this list using cursor navigation could be tricky as the items are so close together.
  
Line 26: Line 40:
  
 
[[Image:16-horizontal-pagination.png]]
 
[[Image:16-horizontal-pagination.png]]
 
 
 
'''Figure:''' 1. A horizontal list used to create pagination (YouTube).  2. A Horizontal list with background colour to create a primary navigation bar (Betavine) and 3. A horizontal list of breadcrumbs (Mobiforge).
 
'''Figure:''' 1. A horizontal list used to create pagination (YouTube).  2. A Horizontal list with background colour to create a primary navigation bar (Betavine) and 3. A horizontal list of breadcrumbs (Mobiforge).
  
  
 
[[Image:17-weather.png]]
 
[[Image:17-weather.png]]
 
 
 
'''Figure:''' This weather banner from the NY Times could easily consist of a horizontal list containing three list items.
 
'''Figure:''' This weather banner from the NY Times could easily consist of a horizontal list containing three list items.
 
  
 
===Rationale===
 
===Rationale===
 
 
 
Horizontal lists have several advantages over other formats:
 
Horizontal lists have several advantages over other formats:
 
* They can create a natural page division so are useful if needing to immediately establish a hierarchy (ex. the site’s top level navigation).
 
* They can create a natural page division so are useful if needing to immediately establish a hierarchy (ex. the site’s top level navigation).
Line 46: Line 53:
  
 
===Design Tips===
 
===Design Tips===
 
  
 
* If the list is likely to wrap, test on devices with different screen sizes. Consider adjusting the font size to minimize wrapping and/or increasing the line height to improve legibility.
 
* If the list is likely to wrap, test on devices with different screen sizes. Consider adjusting the font size to minimize wrapping and/or increasing the line height to improve legibility.

Latest revision as of 03:31, 9 May 2012

Article Metadata
Article
Created: User:Yiibu (23 Apr 2009)
Last edited: hamishwillee (09 May 2012)

This design pattern is part of the Mobile Web Design Patterns series.


Contents

[edit] 2. Horizontal list

[edit] Description

A horizontal list of data which can include text and images. Horizontal lists have a somewhat limited use on the mobile web as they can be difficult to read once they begin to wrap. They are therefore best suited to very short lists.

15-long-horizontal.png Figure: This horizontal list is so long that the list items blend together. Selecting distinct elements within this list using cursor navigation could be tricky as the items are so close together.

[edit] Use when

  • Best suited for lists containing small amounts of copy and a small number of list items.
  • A common use is breadcrumbs which are typically short and also rendered in a small font which minimizes wrapping.
  • Other common contexts of use are top (high-level) navigation menus, pagination menus, small control groupings and admin navigation.

16-horizontal-pagination.png Figure: 1. A horizontal list used to create pagination (YouTube). 2. A Horizontal list with background colour to create a primary navigation bar (Betavine) and 3. A horizontal list of breadcrumbs (Mobiforge).


17-weather.png Figure: This weather banner from the NY Times could easily consist of a horizontal list containing three list items.

[edit] Rationale

Horizontal lists have several advantages over other formats:

  • They can create a natural page division so are useful if needing to immediately establish a hierarchy (ex. the site’s top level navigation).
  • They take up less vertical space than other lists.
  • If the horizontal aspect of the list is specified entirely using CSS, they degrade naturally into a vertical list on less capable browsers.

[edit] Design Tips

  • If the list is likely to wrap, test on devices with different screen sizes. Consider adjusting the font size to minimize wrapping and/or increasing the line height to improve legibility.
  • Use a background colour to visually separate the list (or list elements) from other elements on the page. This is particularly useful if the list is being used as high level navigation.
  • If the page is long and the list is being used for navigation, it’s best practice to place a second copy of the list at the bottom of the page and/or include a ‘back to top’ link.
  • The S60 browser supports sophisticated use of JavaScript™ and Ajax which can be used to create horizontal lists behaviours that show/hide or display list elements gradually.
This page was last modified on 9 May 2012, at 03:31.
91 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×