July 3, 2014 Web Platform Design Comps

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 2 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

Headers

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 4 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 5 Option 1: Green Header With White Text Green header with white text.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 6 Option 2: White Header with Green Text White header with green text.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 7 Option 3: Image Header With White Text Image header with white text.

Homepage Hero Images

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 9 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 10 Option 1: Large Hero Image Without Springboards

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 11 Option 2: Large Hero Image With Springboards (closed) Closed springboards.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 12 Option 2: Large Hero Image With Springboards (open) Open springboard.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 13 Option 3: Side Panels Side panels.

Scrolling Homepage

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 15 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 16 Web Platform Homepage – Scrolling Custom Modules. Events Module. News Module.

Left Navigation

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 18 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 19 Option 1: Grey with Green Arrows. Grey navigation.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 20 Option 2: Green With Orange Arrows Green navigation.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 21 Option 3: Orange With Grey Highlights. Orange navigation.

Components

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 23 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 24 Events: Calendar View

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 25 Events: List View

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 26 Events: Detail Page

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 27 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.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 28 Web Platform News

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 29 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.)

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 30 Forms and Documents Search

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 31 The new Web Platform also has a powerful site search that displays results for pages and downloadable documents such as PDFs.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 32 Web Platform Search Results

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 33 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 address.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 34 Web Platform Staff Directory

Responsive Design

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 36 The new Web Platform uses responsive design, an approach that ensures pages render properly on computers, tablets, and laptops. Examples follow.

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 37 Web Platform Responsive Design

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 38 Web Platform Responsive Design

Confidential and Proprietary - Not for Public Distribution - Do Not Copy 39 Web Platform Responsive Design