A great city or council website gets site visitors to the most valuable and relevant content as quickly as possible. You want your community to be able to find what they're looking for straight away and not get frustrated if they can't find something. We use top tasks to display a range of valuable and popular content directly on the homepage. Depending on how your theme is created, they're displayed in a tab or as stand-alone top tasks.
Your top tasks are the first content your community will see when they come to your homepage. It's best used to display frequently visited pages or particular services your users may be looking for. You can show them where your community is most likely to see them; on your homepage and in your navigation menu if you're using a mega-menu.
See it in action: check out the Do It Online tab on our demo site to see how we've set our Top Tasks.
You can also display different sets of Top Task items across desktop and mobile devices. Often, mobile users will be looking for a different service than desktop users, so you can display specific services or display your services in a different order.
Before you start, you should find out which pages are popular and which services are frequently used. Here are some tips:
- Check out the analytics in your OpenCities admin or on Google Analytics for some insights
- Talk to your customer service team about services they receive the most walk-in customers and most phone calls for, especially if you want to drive some of this traffic online.
- Check your CRM software for the most frequently requested support queries
Display Top Tasks on your homepage
Homepage top tasks are shown prominently in the Do It Online tab, making them a great way of getting your community the information or service they're looking for. Top tasks need to be created under the Do It Online OC Tab Widget; we will have made the Do It Online tab for you when we build your site.
To create a top task:
- In your site tree, expand your Tabs folder. You'll see various OC Tab Widgets which we have created when we create your site.
- Right-click on the Do It Online tab widget and select Create Page.
- You will be given an option of OC Top Task and OC Tab Widget as content types. Select OC Top Task as your content type.
- Fill out the necessary fields.
- Publish your top task.
What to include on your top task
Use the following information to fill out the page fields of your top task:
| Field | Function |
| Page name | Completes the unique page URL |
| Task title | The name of the task which appears in the list of homepage or navigation top tasks |
| Enter order to display on desktop (0-99) | Select the position of the task in the list of homepage top tasks on a desktop. Task 0 will appear first. |
| Enter order to display on mobile and tablet (0-99) | Select the position of the task in the list of homepage top tasks on a mobile or a tablet. Task 0 will appear first. |
| Add link URL | The URL of the page the user is taken to when they select the task. |
| Additional options for top tasks on homepage | |
| Add task summary | A brief overview of the task which appears below the Task title on the homepage |
| Select task icon | Choose a pre-made icon to display with the task on the homepage. |
| Add custom icon |
Choose a custom icon to display with the task on your homepage. You can upload icons to the Files Library. We recommend you use a .png image that is 60px wide. The OpenCities team can help you with configuring custom icons. If you add a task icon AND a custom icon, your site will show the custom icon. Note: if you are using custom icons, you cannot display different icons upon hover. |
Choose an icon to show on hover or focus
This task can be undertaken by users with the following roles: OC Site Designer.
We recommend that anyone attempting this task has front-end developer experience. If you want a different icon to appear when a user hovers over or focuses on a homepage top task:
- Follow the steps to configure homepage top task icons.
- In your OC Top Task page, choose an icon in the Select task icon dropdown menu.
Don't set a custom icon. - Add custom CSS and Javascript to a theme to select the icon to show on hover or focus.
Please note that you cannot choose an icon to display upon hover using custom icons.
Top Tasks in your navigation menu
Navigation menu top tasks are prominent, styled links in your site's main navigation menu. Top tasks in your navigation menu are best suited for mega menus. These work just like homepage top tasks to direct visitors to popular pages on your site. Because these links are in the navigation menu, they're available from any page on your site.
Mega menus and navigation top tasks need to be enabled and styled in your theme. We recommend a complete consultation process; please submit a ticket to get started if you want to implement a mega menu.
Want to learn more about navigation menus and top tasks? Consult our best practice article for advice.
Add top tasks to your navigation menu
Once navigation top tasks have been enabled in your theme, you can add top task items to each first-level page in your navigation menu. For example, you might have 'Council' as a first-level item in your site tree and want to direct your community to a popular service within that section, such as 'Volunteer for Council.'
To create a navigation top task item:
- Right-click on the first-level page in your site tree and select Create Page. Following the example above, you would create a page under 'Council.'
- Select OC Top Tasks Folder as the content type. If you don't see this option, you may have to add the OC Top Tasks Folder and OC Top Tasks content types in your first-level item's Child Pages Permissions.
- Fill out the Page name and Display name fields for the top tasks folder. The Display name will appear as a heading above the links in your navigation menu. If you don't want to display a heading, check 'Yes, hide' under Visually hide display name (Will still be read out by screen readers for accessibility purposes).
- Publish the top tasks folder page. Now you can create the top task item.
- Right-click on the top tasks folder which you've just created and select Create Page.
- Select OC Top Task as the content type and fill out the necessary fields. Please note that a summary and icon will not display in your navigation top tasks, so there is no need to complete anything under the Additional options for top tasks on homepage dropdown menu.
- Publish your top task item.
- Repeat steps 5-7 for each top task item you want to display.
Show different top tasks on desktop and mobile
Your community members often have different needs when they're at home and using a desktop device (say, applying for jobs or registering pets) compared to when they're out and about and might be using a mobile device (say, reporting graffiti or potholes). So it makes sense to show a different set of top tasks for each context.
For each of your top tasks, you need to add a number (0-99) in the Enter order to display on desktop and the Enter order to display on mobile and tablet fields that reflect where you want the task to appear for each device type. The lowest number (0) will appear first, so you can control which devices will display which top tasks.
For example, if you have a Report a pothole service that you want to show for mobile and tablet but not desktop, you might give it a 0 for mobile and tablet and a 30 for desktop. If you've only set 8 top tasks to show on desktop – and you have 8 other tasks with numbers lower than 30 – it won't show there at all.