Special Considerations

The most obvious difference between desktop applications and mobile applications is that mobile applications are targeted towards small screens. The buttons are bigger and the content is split up on several pages. While the mobile applications can be opened and operated from a desktop web browser, they may not feel good in a desktop browser. The desktop browser is usually wider than high, which makes the UI look weird. 

On the other hand jQuery Mobile is designed to work with any kind of mobile devices. Some of these devices are wider than others. This influences the overall idea of jQuery mobile significantly.

Labels and Controls

Lists of inputs could be wrapped in a Table in desktop web applications. The table allows for a proper alignment of labels to their inputs. On Mobile Devices the screen can be so narrow that the labels wouldn't fit next to the inputs. In that case the labels should be placed on top of the input. This behavior cannot be easily achieved with tables. The solution to this problem is to use an FieldContainer element. This element is like a label but it contains the input that needs to be labeled. The default is a text input but it can be any kind of input.

FieldContainerElement.png

Buttons and Transitions

Another consequence of the narrow screens is the number of components that are used to display content. While a desktop application can work with fewer components that show more content, a mobile application distributes the content on more components because not much content can be shown on one component. As a result, the components are switched often. On mobile devices this switch is often accompanied with a transition. The transitions are triggered by buttons or anchors. As such both these elements have a transition property that describes how the new content is loaded.

Anchors are typically used in mobile applications to trigger actions so they have a property 'is button' which makes them look like a button. The button can also display an icon and jQuery Mobile provides quite a number of common icons. The icon can also be chosen for an anchor.

MobileAnchor.png 

List views

Another common aspect of mobile applications are list views. Lists are used both to show many objects but also to navigate further in a tree-like structure. seaBreeze jQueryMobile provides two different kinds of lists. Grouped and Ungrouped lists. Both lists behave like standard seaBreeze collection elements. The difference is that mobile devices have very limited resources compared to desktop computers and cannot display large lists in a reasonable time. The seaBreeze element limits the list to X elements and displays X more as soon as the user clicks on the More button. The value of X can of cause be configured in the web painter.

Grouped Lists are lists that display a sorted collection of elements. According to the sorting aspect of the list, the sorting value is used as a label. Sorting a list of projects by owner would put the owner's name on a label whenever the owner between two consecutive projects changes. The typical example for such a list is the address book on iOS, where the objects are grouped by first letter.

Grids

jQuery Mobile provides a way of arranging elements in a grid. To place multiple things next to each other in seaBreeze, add a MultiColumn Element. Up to five columns can be used. seaBreeze will automatically add the sub elements of the MultiColumn Element to the grid. It is recommended to use the Container element for each column of the grid. 

Collapsible Content

The container element in jQuery Mobile can be made collapsible, which takes the first header element in the container and makes it clickable so that the rest of the container is visible or not. The container can also be initially collapsed.

 

 

 

Copyright 2013 by Georg Heeg eK, released under MIT License