Layout options
Formatted content is an important way to provide users with an accessible way to reference and gather the information you are providing on your website. With the increase in mobile web traffic and the need for mobile website versions, formatted content is becoming even more important. We can no longer solely rely on our users sitting at a desk and spending time interacting with our websites. Users are on the move, and simple, nicely formatted content is more important than it has ever been.
When formatting content for a mobile web page, it’s important to remember that most mobile devices have narrow screens. That said, there are still plenty of situations that call for column grids. jQuery Mobile includes a layout grid that you can easily use to create a grid of data via a CSS class (Listing 4).
<div class="ui-grid-a">
<div class="ui-block-a">
Left column
</div>
<div class="ui-block-b">
Right column
</div>
</div>
The CSS class used by default to create a grid from a group of HTML elements is the ui-grid-* class. The asterisk (*) represents the theme you choose to use for your grid. (For more information about the theming system, see Resources.) You can create as many columns as you choose, but I recommend using only two columns at the most, and then only when necessary.
Another handy way to format content is only to show a portion of the content, which provides users with an overview and the option to read more. Because most mobile devices have such a small screen, it’s important to keep page length relatively short and to the point. Collapsible content blocks offer a great way to handle this functionality (Listing 5). The jQuery Mobile framework offers a data-role for collapsible content, which when used properly converts a header element and associated content into a collapsible block.
<div data-role="collapsible"> <h2>My header</h2> <p>The full content would normally be longer than this, which is why we would want to hide it by default and allow the user to choose whether they wanted to read it by viewing the title. Therefore the title plays an important role when creating collapsible content blocks.</p> </div>
By default, the block shows the header text as a button with a + icon. When clicked, the full content will be revealed, and the + icon will change to a – icon, indicating that the button can be clicked again to close the full content and return to the default button state.
