july 3, 2014 web platform design comps. confidential and proprietary - not for public distribution -...
TRANSCRIPT
2Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The new Web Platform is a dynamic, flexible tool for displaying council web content.
In this presentation you’ll find an overview of some of its most popular features, including:
• A choice of header styles.• A choice of homepage hero image styles.• Homepage components.• Three color schemes for the left navigation.• Components for
• Events• Forms and Documents• News• Search• Staff Directory
• Responsive design
4Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Councils have the choice of three header options:
• Green header with white text.• White header with green text.• An image header— featuring a photograph of your choice — with white
text.
Examples of all three follow.
5Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 1: Green Header With White Text
Green header with white text.
6Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 2: White Header with Green Text
White header with green text.
7Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 3: Image Header With White Text
Image header with white text.
9Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Councils have three options for the homepage hero image.
• A large image (without springboards).• A large image with two “springboards,” which expand upward to deliver
messaging.• A smaller image, with two side panels that deliver messaging.
In all cases, optional carousel functionality can accommodate multiple images, allowing users to click or swipe through the different messages.
Examples follow.
10Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 1: Large Hero Image Without Springboards
11Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 2: Large Hero Image With Springboards (closed)
Closed springboards.
12Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 2: Large Hero Image With Springboards (open)
Open springboard.
13Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 3: Side Panels
Side panels.
15Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Users can scroll below the homepage hero image to reveal content modules.
These modules can feature curated information about the council and display feeds from components such as Events and News.
16Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Web Platform Homepage – Scrolling
Custom Modules.
Events Module.
News Module.
18Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The left navigation expands and collapses accordion-style to hide and reveal subsections of the site.
Though they all work the same, councils have a choice of three color schemes:
• Grey with green arrows.• Green with orange arrows.• Orange with grey highlights.
Examples follow.
19Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 1: Grey with Green Arrows.
Grey navigation.
20Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 2: Green With Orange Arrows
Green navigation.
21Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Option 3: Orange With Grey Highlights.
Orange navigation.
23Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The site has numerous components.
Events, the first, has three views:• A Calendar View, showing all the events and activities on a classic grid
calendar.• A List View with a powerful advanced search.• Event Detail Pages that show all of the details for each event and activity.
It also has• Six to eight categories, chosen by the council, each with its own color and
icon. (Each event can only be assigned one category.)• Optional use of photos to accompany events.• Events can auto-populate the homepage.
Examples of all follow.
27Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The News module provides a dynamic list of all your news stories, displaying the title, date, and the beginning of the article. A user clicks on an article to view a page with the entire story.
Like the Events module, news stories can auto-populate the homepage.
29Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Forms and Documents is a tool providing users with quick access to the most frequently used forms and downloads, and Advanced Search functionality to help them find exactly what they’re looking for – whether it’s posted on one of the site’s pages or simply available for download from this section.
Users can search by Keywords, Categories, and Document Type. The search is customizable, allowing councils to add their own Categories. (Note: The Document Type search is still tentative.)
30Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Forms and Documents Search
31Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The new Web Platform also has a powerful site search that displays results for pages and downloadable documents such as PDFs.
32Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Web Platform Search Results
33Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The Staff Directory dynamically organizes your staff by department (or service unit), listing each staff member’s name, title, and phone number, along with a link to their email address.
34Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Web Platform Staff Directory
36Confidential and Proprietary - Not for Public Distribution - Do Not Copy
The new Web Platform uses responsive design, an approach that ensures pages render properly on computers, tablets, and laptops.
Examples follow.
37Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Web Platform Responsive Design
38Confidential and Proprietary - Not for Public Distribution - Do Not Copy
Web Platform Responsive Design