Mobile Web Templates: Layouts

Overview | Corporate Layout | News Layout | Online Store Layout

The news layout

Overview

This layout illustrates a news or blog site containing collections of articles grouped by category (or tag). The home page provides an entry point to top news stories and an easy means to search the archives. Users can also customise the home page to display the content they are most interested in.

Figure: Sample architecture for a news site.

1. Home

1. A slide show component presents the site’s top news stories. A second, more lightweight ‘latest news’ area is included beneath the top stories. Note: This slideshow layout is not currently optimised for landscape orientation. See the Nokia Mobile Web Templates for High-end Devices for information regarding the detection of changes in orientation.
2. Additional news stories are grouped by category and correspond to the user’s customisation choices.
3. An all-purpose content area displays more user-specified content (for example, weather, stock tickers, image galleries).
4. Users have easy access to Search and can prefilter their query by category (for example, sports, technology, lifestyle).

Modifications for non-touch devices

The slide show has been removed for smaller screens and replaced by a single top-news item. To feature a wider range of stories, this area could be designed to randomly display an item from a larger collection as the page loads.

2. An article

1. A lightweight text advertisement is included above each article.
2. Users can continue to the next article in a given category (or the next blog post within an archive) using the navigation links.
3. Users can also request an SMS including a link to this article. Additional prompts to leave a comment or share a link to social networks could also be included.
4. Lightweight links introduce related articles and provide quick access to other sections or news categories.

3. Search results

1. Search-related metadata (for example, search keyword(s), number of results, and filtering options) are provided above the results.
2. Search results are merely a step along the way to finding the content the user actually wants. To expedite this step, the search results are lightweight and only include text.
3. Results are paginated, and/or additional results can be loaded inline upon request.

4. Settings

1. Clear instructions are provided to introduce the available options.
2. Toggle switch components are used to indicate the chosen setting.
3. Less-frequently-edited personalisation controls are displayed within an accordion panel.
4. Users are free to experiment with settings and can easily correct any ‘mistake’ they make by clicking the button provided.

Modifications for non-touch devices

Toggle switches may not be appropriate on smaller screens. In cases where text labels are quite long, use check-box elements instead to free up some space.

Online Store Layout »

Overview | Corporate Layout | News Layout | Online Store Layout