Creative Communications Blog

Office of Communications and Marketing



2015-16 Web Templates

The university’s web templates were last updated in the spring of 2012, following the launch of the Big Orange. Big Ideas. campaign. Three years later, and following the recent announcement of a new logo for the university’s flagship campus, it is time for another update.

The new templates were presented to the Chancellor’s cabinet on March 16, 2015. Following cabinet approval, the templates were then presented to campus communicators at a public forum on March 26, which was announced on the CAMPCOMM listserv group (campus communicators, graphic designers, and web designers, you can join CAMPCOMM here).

The presentation covered our process for developing the templates, which involved face-to-face interviews with campus communicators, two rounds of usability testing (mobile and desktop), ongoing accessibility testing, “competitor” research, and a mobile-first mindset.

The new templates will be made available for download on June 1, 2015, as HTML/CSS files and as a WordPress theme. Ideally, all campus units will be able to complete migration of existing websites to the new templates by June 2016.

See a note outlining who should use these templates.

GOALS

  • Design templates with users of mobile devices first in mind
  • Improve campus website usability by developing a consistent, clear navigation scheme that works equally well on desktop and mobile
  • Create a clean canvas upon which campus communicators can share their unique messages, while at the same time clearly identifying each unit as a part of the University of Tennessee, Knoxville
  • Develop a flexible, usable template that can accommodate sites of varying sizes (whether a center, department, institute, or college with four pages or 400)
  • Develop a template that is accessible to visitors who use assistive technologies to access the internet
  • Address common, valid concerns about the current templates, especially about required elements taking up too much space at the top of web pages

COMPARISONS

2012 Templates

  • Fixed width (960px)
  • Required: university header with logo, university Google search, and universal “toolbar”
  • Required: unit header image with unit name “written” in Gotham typeface in specific size/weight
  • Required: university footer with Big Orange. Big Ideas. graphic
  • Customizable unit header image background (color/image)
  • Optional, customizable giving bar
  • Optional, customizable expanded footer
  • Lots of graphic textures in the header, expanded footer, and background

2015 Templates

  • Responsive (i.e., mobile friendly)
  • Required: new primary university logo (at top left)
  • Required: unit name (HTML text, no image requirement)
  • Required: unit contact information (appears above the university footer)
  • Required: university footer with Big Orange. Big Ideas. graphic, university Google search, and universal quick links
  • Customizable giving link now included in main menu
  • Customizable site background color and highlight box colors, etc.
  • Mobile-friendly, left-hand primary navigation menu with flyouts allowing for improved usability
  • Content “filter” functionality for database-driven websites
  • Multiple options for presenting content at varying widths, with different layout options for images, sliders, accordion folds, callout quotes, etc.
  • Site content begins 158 pixels higher on desktop
  • Site title appears 142 pixels higher on desktop

SCREENSHOTS: MOBILE

The screenshots provided here show how the site scales down for presentation on a mobile device or tablet with a narrow viewport. The second screenshot shows the menu (with “Find a Page” filter) that is revealed when a visitor interacts with the “Find Page” button. The third screenshot demonstrates the “typeahead” functionality that provides a content filter for the website (available for database-driven websites).

mobile screenshotmobile screenshot with navigation displayedmobile screenshot using find page filter

 

SCREENSHOTS: DESKTOP

For development purposes, we imported content from one of our larger sites, McClung Museum, to test various page layouts and navigational depth. In the screenshots provided here, you will see examples of a landing page, what that same page will look like if a visitor scrolls to the bottom of the page, interior pages, examples of a site using different background colors, and examples of the fully extended navigation panel. These are all screenshots of the desktop view.

We will be posting additional screenshots as development continues and will also link to pilot sites as they are launched starting in May.

template screenshot

template screenshot

template screenshot

template screenshot



template screenshot


template screenshot showing expanded navigation panel


template screenshot showing expanded navigation panel

TRAINING & DEVELOPER ROUNDTABLES

We will post information about template training sessions and developer roundtables as we draw closer to the template launch date of June 1, 2015.

CONTACT

E-mail your questions to webteam@utk.edu. We’ll collect your questions and assemble a list of “frequently asked questions” to post here.


*Who should use these website templates? All academic and administrative units whose reporting structure culminates with the chancellor of the University of Tennessee, Knoxviille.

 


WordPress Shortcodes Training

Let’s talk about dressing up your WordPress website. In this series, we’ll discuss the shortcodes built into the UT WordPress Theme.

If you have any questions about using posts, e-mail webteam@utk.edu.

Video Topic

Video Length

Description

Introduction 2:25 The first video in this series reviews the  functionality and definition of shortcodes.
Highlight Boxes 3:06 Learn how to add highlight boxes to your text or images.
Making Columns 5:16 Format your text or images into neat columns.
Nesting 4:04 Using combinations of the shortcodes.

View all of our WordPress training resources, including Nivo Slider and Basic Training.


WordPress Posts Training

Are you ready to include announcements, news, events on your WordPress website? In order to do this, you need to use the posts functionality.

Watching this video training series will get you ready to create posts. You will then be able to leverage posts to structure menus and widgets.

If you have any questions about using posts, e-mail webteam@utk.edu.

 

Video Topic

Video Length

Description

What is a post? 3:30 The first video in this series reviews the default functionality and appearance of posts on your WordPress website.
Categories and tags 4:29 Categories and tags are essential when using posts. Learn how to add this meta information.
Featured images 4:02 Featured images add visual interest to your posts. This video shows how to add a featured image and covers best practices.
Excerpts 4:04 Excerpts provide an engaging teaser to your post. Learn how to use the excerpt functionality.
Slug and author 3:56 This video reviews the WordPress slug and theme options for post bylines.
Sticky posts 1:56 Use sticky posts to override posts’ chronological order.
QuickEdit 2:49 The bulk QuickEdit feature can save time when editing meta information for multiple posts.
Categories and menu 2:33 When you add meta information to your posts, you can leverage categories and tags in your menu.
Categories, menu, and widgets  8:05 When you add meta information to your posts, you can leverage categories and menus in widgets.

 

View all of our WordPress training resources, including Nivo Slider and Basic Training.


WordPress Basic Training

Do you need help with your WordPress website that uses the UT theme? These tutorial videos are for you!

Throughout this seven part video series, we cover the basics of logging in to your website, the dashboard, pages, menus, sidebars, widgets, and theme options.

Watch the full video series embedded below, or select an individual video to watch in the table below. If you have any other questions, don’t hesitate to e-mail webteam@utk.edu.

 

 

Video Topic

Video Length

Description

Introduction 2:37 Layout and nomenclature of UT WordPress theme.
Dashboard 2:59 Login and navigate the dashboard and backend.
Pages, Part I 6:51 Create a page, add content, add images and PDFs, and hyperlink text.
Pages, Part II 4:36 Add page meta information and publish a page.
Menu 2:32 Add pages and links to your main navigation.
Sidebars & Widgets 8:06 Add widgets to the main sidebar, the link drawer, and the extended footer.
Theme Options 2:07 Theme options to customize color palette, giving bar, and post meta data.

 

View all of our WordPress training resources, including Nivo Slider.


Our New Logo

The university began implementing a new logo on January 1, 2015. The logo is being rolled out across campus, in four phases, between now and June 1.

Read all about the new logo and the implementation process.

Our existing communications resources will remain available through, at least, June 1. You should continue to use these resources until your unit’s approved rollout. Once your unit has been approved to begin using the new logo, you should work with your logo liaison, listed on the logo website, to obtain the approved files.

In order to stay up to date on the progress of rolling out the new logo, be sure you’re subscribed to the CAMPCOMM listserv.

If you have any questions, let us know at creative@utk.edu.


WordPress 4.0

WordPress has announced its release of version 4.0.

The interface in your Media Library will now leverage infinite scrolling and feature other interface tweaks.

The major change is now you can preview embedded media before you publish your post or page. We suggest you review the automatic embeds that WordPress supports to save you time in the future.

You can read and watch videos detailing the new features of WordPress 4.0 at the WordPress blog. Email webteam@utk.edu if you have any questions.


Tennessee Today website redesign launch

tntodayAs you visit tntoday.utk.edu, you will notice major changes.

We launched the redesign of Tennessee Today this morning. Highlights of this redesign include providing an outstanding mobile experience, spotlighting news from our colleges, providing an easy way to sign up for and view past issues of our daily e-newsletter, providing story-to-story navigation and more efficient ways to browse stories of a similar topic, and drawing attention to ongoing campus news.

The redesigned home page still showcases a top headline, but we gave ourselves the opportunity to also feature four secondary top headlines. You can find all the latest stories we publish in the “Latest News” section and search our entire news site.

The home page also features a section with news from our colleges. We recognize that great research, outreach, and philanthropic activity comes from our academic units and the importance of highlighting their efforts is a priority in this redesign. In the website’s footer we also showcase other campus publications and link to pages dedicated to each college’s news stories. We hope that providing direct access to news from around campus will help promote and publicize the great things happening at UT.

In case you miss the daily Tennessee Today e-newsletter, we now provide a way to view past issues of the e-newsletter. On the home page, scroll halfway down the page and look for the heading “Our Newsletter.” From here, use the archives drop down to navigate to previous issues.

The new “News Around Our Campus” section allows us to pull forward stories about ongoing campus topics such as construction, welcome week, faculty appreciation week, and more. We hope this section will help our campus community stay abreast of longterm news.

On individual story pages, you can now navigate to more stories about similar topics, as well as our top headlines and the latest stories we’re publishing.

In the past year, 30 percent of traffic on the Tennessee Today website has been from mobile phone and tablets. The redesign of Tennessee Today leverages responsive web design to provide the best possible experience to our users whether they are viewing our website on their phone, tablet, or desktop computer. Responsive web design means designing a website that is optimized for use on a mobile phone, a tablet, a laptop, a desktop, and even a widescreen television. In alignment with our optimized mobile experience goal, our next step is to use a responsive design approach to revamp the daily Tennessee Today e-newsletter.

We hope you take time to get to know your campus news source and please send any feedback to webteam@utk.edu.


WordPress Training Summer 2014

If you have launched a WordPress site in the last six months, have you come in for training yet? If not, e-mail webteam@utk.edu and we will get you registered for one of our basic UT WordPress theme sessions. If you have completed a basic session and are interested in one of our advanced topics, e-mail webteam@utk.edu with the date and topic you are interested in attending.

May 2 – No training
May 9 – No training
May 16 – Basic training
May 23 – No training
May 30 – Basic training

June 6 – Advanced Topics: Shortcodes
June 13 – Basic training

June 20 – No training
June 27 – Advanced Topics: Posts

July 4 – No training
July 11 – No training
July 18 – Basic training
July 25 – Advanced Topic: Gravity Forms

August 1 – Basic training
August 8 – Advanced Topic: Nivo Slider

August 15 – No training

Contribute to big ideas. Give to UT.

The University of Tennessee, Knoxville. Big Orange. Big Ideas.

Knoxville, Tennessee 37996 | 865-974-1000
The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.