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: Grid

From Wiki
Jump to: navigation, search
jaaura (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Web Design" to "")
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
[[Category:Mobile_Web_Design_Patterns]]
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
[[Category:Mobile_Web_Design]]
+
|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 -->
 +
|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= 20090424
 +
|author= [[User:Yiibu]]
 +
}}
 +
 
 +
[[Category:Mobile Design Patterns]]
 +
[[Category:Mobile Web Design Patterns]]
 +
 
  
 
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.
Line 9: Line 31:
 
A series of list items arranged in one or more horizontal rows and/or vertical columns to form a grid.  
 
A series of list items arranged in one or more horizontal rows and/or vertical columns to form a grid.  
  
 
+
[[File:19-Grid.png]]
[[Image:19-Grid.png]]
+
  
  
Line 27: Line 48:
 
* Be sure to test your grid layout on devices of different screen size and dpi, paying particular attention to the size and ease of selection of each grid item. Be sure not to crowd the list and adjust the gutter between items if needed to facilitate selection.
 
* Be sure to test your grid layout on devices of different screen size and dpi, paying particular attention to the size and ease of selection of each grid item. Be sure not to crowd the list and adjust the gutter between items if needed to facilitate selection.
 
* Remember that the S40 and S60 browsers have different interaction models. Navigating a grid may take a bit more time or thought than navigating a list—especially if the item you wish to select requires you to traverse many other grid items.
 
* Remember that the S40 and S60 browsers have different interaction models. Navigating a grid may take a bit more time or thought than navigating a list—especially if the item you wish to select requires you to traverse many other grid items.
 +
<!-- Translation --> [[pt:Mobile Web Design Pattern: Grid (Português)]]

Latest revision as of 03:31, 9 May 2012

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


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

Contents

[edit] Description

A series of list items arranged in one or more horizontal rows and/or vertical columns to form a grid.

19-Grid.png


Figure: This one row grid on the BBC Proms site could easily have been expanded to create a more traditional multi-line grid pattern.

[edit] Use when

  • Use as an alternative to a vertical list containing an icon plus text. Is most appropriate if the text is short and is not expected to wrap.


[edit] Rationale

Grids have several advantages over other formats:

  • They often take up less vertical space than purely vertical lists.
  • When well executed, they can provide a more interesting visual grouping.

[edit] Design Tips

  • Be sure to test your grid layout on devices of different screen size and dpi, paying particular attention to the size and ease of selection of each grid item. Be sure not to crowd the list and adjust the gutter between items if needed to facilitate selection.
  • Remember that the S40 and S60 browsers have different interaction models. Navigating a grid may take a bit more time or thought than navigating a list—especially if the item you wish to select requires you to traverse many other grid items.
This page was last modified on 9 May 2012, at 03:31.
99 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.

×