Using Our Template

UW-Green Bay's Web Development team has created a modern template that all new web development will use. This guide is to demonstrate the benefits of a singular look at feel, the future of web at UW-Green bay and tutorial on best/standard web practices.

Why a Template?

Although each individual website represents a unique part of our campus, all of our sites together create one UW-Green Bay web presence. Our website is often the first information source prospective students go to when researching their higher education options and a daily source of information for UW-Green Bay employees and current students.

Every UW-Green Bay web page contributes to the user's perception of the University. When a user visits our site, they take away an impression of the University and its departments. Because of the high profile and importance of our website, every effort must be made to create a unified, content-rich, comprehensive website representing all of our units and departments.

To ensure a unified web presence, official pages of the UW-Green Bay website should appear to be visually related in order to help promote usability and to reinforce UW-Green Bay's brand identity.

With the template we seek to build institutional identity and brand recognition, improve usability, allow user to clearly see where they are within the site, establish conventions (navigation location, site search function), enhance credibility (professional design and up-to-date, important content), bring consistency by allowing visitors to easily compare our academic programs and create predictability and structure when browsing, provide expected content to the visitor, improve accessibility, but also to show to the user why UW-Green Bay is such a great place to live and learn.

Hierarchy

There are three levels to the template; Home is used only once on the home page, Top Level is used on the clickable top level pages from the navigation like Academics, Faculty & StaffMajors & Minors and Students finally there is Global which is used for every other website.

Home Template

Top Level Template

Global Template


The templates were designed to attract prospective students, allow easier navigation to access information and create experience for daily use. This was achieved by creating a modern, attractive, responsive web design that is not only intelligent but also coherent. Examples of this in use; A focus on more photographic approach to showcase our campus, creation of a new top level page Majors & Minors to give our departments a platform and allow easy access for new students to learn about our programs, and common student tools like E-Mail, SIS & D2L are readily available to name a few.

Foundation

Every page created is created with the header, navigation, sidebar, footer and mobile nav to further our goals of a seamless experience. The template is locked so that no one can effect others' work. That means the only editable region is the main section. We are unable able to add anything specific to the header, sidebar, footer to any site in the template with out effecting every page. This means content underneath the sidebar is not permitted because of how the sidebar is injected into the mobile navigation. This also means that navigation can only be two tiers deep.

The template is built on Bootstrap. This allows us to quickly create mobile ready scaffolding for dynamic pages. The available rows are: 12 column, 9/3 column, 6/6 column or 3/3/3 columns. Please refer to Bootstrap's documentation for column visualizations and other tools that are included.

Analytics will be included for every page included. You have access to see what content and information is valuable or useful to your audience. Please keep this in mind when creating new content.

Tools

There is importance on keeping the look and feel of the entire UW-Green Bay site standardized. It's easier to navigate, demonstrates cohesion and grants the user confidence. With the help of web authors and editors we can maintain the quality of the UW-Green Bay presence online. Web Development has created tools in order to keep everything tenacious.

Header 2 (h2)

Header 3 (h3)

Header 4 (h4)

Header 5 (h5)

This is an example of paragraph text. We have paragraph styles like strong, and hyperlinks.

#ffffff
#eeeeee
#4f4e4c
#343434
#a7c776
#279c43
#137e3a
#063

Do's and Dont's

We want to maintain the look and feel across the entire UW-Green Bay platform. We want to communicate to the audience that our university is a cohesive, intelligent, and professional institution. In order to do that we need to remain consistent. Please:

  • Do not overuse bold. If everything is bold, nothing is.
  • Underline is reserved for publications. If it's used elsewhere it appears to be a hyperlink
  • Keep hyperlinks understandable. Here is not enough information, but UW-Green Bay Web Development is very descriptive to the audience and Google.
  • Use high resolution images that are saved for web. We want 72dpi and saved for a size that is appropriate (below 2000px).
  • Do not use "coming soon" or "under construction". You can work on pages that aren't ready by keeping them unpublished.
  • Keep your site content timely. Use "Publish From" and "Publish To" in order to specify date ranges for the system to automatically publish / unpublish your site content.
  • If you wrap text around images, use our built-in CSS classes of img-padding-left or img-padding-right by right-clicking the image and going to properties. You can enter either of those class names in order to create some padded white space between the text and the image. Apply the img-responsive class to make your images responsive across different screen widths.

Widgets

A list of all the widgets that are available for use in the Kentico content management system are below. Widgets are snippets of text and media that are already defined in an easy to use layout available for you to place on your web pages. If you need a widget which is not listed, please contact us.
 

UWGB 1 Column ( 100% )

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sem in ex tristique placerat. Mauris faucibus, dolor nec elementum tempor, mauris metus euismod magna, quis gravida magna tortor quis eros. Maecenas fermentum, urna cursus imperdiet rhoncus, eros turpis laoreet nisi, ac posuere neque neque nec massa. Sed auctor egestas ullamcorper. Ut metus neque, vehicula in ultrices eget, consequat non dolor. Morbi suscipit tellus sed ipsum condimentum ornare. Cras eu lorem accumsan, auctor ex blandit, elementum mauris. Quisque viverra viverra nulla, vitae semper turpis feugiat quis. Mauris vulputate nisi non feugiat dictum. Vivamus commodo ut ex ut iaculis. Sed arcu ipsum, iaculis eu molestie at, vulputate sed nunc. Fusce tortor urna, pharetra non dictum non, luctus id orci. Fusce commodo dui ac eros rutrum aliquet.



UWGB 2 Column

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum in magna a iaculis. Suspendisse pulvinar dapibus ullamcorper. Nam at elementum orci, ac rutrum justo. Nulla ut interdum sapien, in fringilla nunc. Morbi sem urna, scelerisque nec nisl sed, lacinia luctus diam. Phasellus luctus lorem neque, vel aliquet libero tincidunt eget. Etiam commodo dictum leo ac cursus. Aliquam eget ultrices sapien. Proin ac scelerisque dolor, nec euismod elit. Nulla facilisis, eros vitae tincidunt luctus, augue nulla porta metus, et elementum sapien nunc vel mauris.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum in magna a iaculis. Suspendisse pulvinar dapibus ullamcorper. Nam at elementum orci, ac rutrum justo. Nulla ut interdum sapien, in fringilla nunc. Morbi sem urna, scelerisque nec nisl sed, lacinia luctus diam. Phasellus luctus lorem neque, vel aliquet libero tincidunt eget. Etiam commodo dictum leo ac cursus. Aliquam eget ultrices sapien. Proin ac scelerisque dolor, nec euismod elit. Nulla facilisis, eros vitae tincidunt luctus, augue nulla porta metus, et elementum sapien nunc vel mauris.



UWGB 3 Column

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sem in ex tristique placerat. Mauris faucibus, dolor nec elementum tempor, mauris metus euismod magna, quis gravida magna tortor quis eros.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sem in ex tristique placerat. Mauris faucibus, dolor nec elementum tempor, mauris metus euismod magna, quis gravida magna tortor quis eros.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sem in ex tristique placerat. Mauris faucibus, dolor nec elementum tempor, mauris metus euismod magna, quis gravida magna tortor quis eros.



UWGB 4 Column


Header 2

Aenean sed elit hendrerit, aliquam lectus maximus, finibus sem. Praesent tempus, quam in sollicitudin condimentum, ante elit laoreet augue, eu imperdiet velit elit id dui. Quisque nec venenatis ligula. Donec a ex sollicitudin ante lacinia varius non at lacus. Sed ante mi, gravida eget suscipit a, gravida at magna. Ut tristique mauris ut nunc hendrerit, ac aliquam tortor ornare. Aliquam ultricies cursus quam eget suscipit.

Header 3

Aenean sed elit hendrerit, aliquam lectus maximus, finibus sem. Praesent tempus, quam in sollicitudin condimentum, ante elit laoreet augue, eu imperdiet velit elit id dui. Quisque nec venenatis ligula. Donec a ex sollicitudin ante lacinia varius non at lacus. Sed ante mi, gravida eget suscipit a, gravida at magna. Ut tristique mauris ut nunc hendrerit, ac aliquam tortor ornare. Aliquam ultricies cursus quam eget suscipit.

Header 4

Aenean sed elit hendrerit, aliquam lectus maximus, finibus sem. Praesent tempus, quam in sollicitudin condimentum, ante elit laoreet augue, eu imperdiet velit elit id dui. Quisque nec venenatis ligula. Donec a ex sollicitudin ante lacinia varius non at lacus. Sed ante mi, gravida eget suscipit a, gravida at magna. Ut tristique mauris ut nunc hendrerit, ac aliquam tortor ornare. Aliquam ultricies cursus quam eget suscipit.

Header 5

Aenean sed elit hendrerit, aliquam lectus maximus, finibus sem. Praesent tempus, quam in sollicitudin condimentum, ante elit laoreet augue, eu imperdiet velit elit id dui. Quisque nec venenatis ligula. Donec a ex sollicitudin ante lacinia varius non at lacus. Sed ante mi, gravida eget suscipit a, gravida at magna. Ut tristique mauris ut nunc hendrerit, ac aliquam tortor ornare. Aliquam ultricies cursus quam eget suscipit.