Documentation:WordPress Basics/UBC CLF on CMS @ UBC

Session Overview

Come for a quick overview of the common look and feel theme on CMS @ UBC as powered by WordPress. We'll go over the different theme options to help you decide on how to best customize your own site. The 2nd part of the session will be all about any burning questions you might have. Feel free to bring your own computers and work on your own sites.

Please take note that this session is intended for those who have attended a WordPress Basics session or are already have a CMS @ UBC site.

Training Guide: http://wiki.ubc.ca/Documentation:WordPress_Basics/UBC_CLF_on_CMS_@_UBC

What is the CLF?

The UBC CLF, or "Common Look and Feel," is a web design framework that supports the University’s Brand Identity and online reputation by providing a common look, feel, and functionality to UBC websites.

Developed by Communications & Marketing, the design of the UBC CLF is the result of ongoing consultation among audiences and stakeholder groups such as the Web Advisory Council and UBC's communications and web professionals.

On CMS @ UBC, the CLF comes as the default theme called "UBC Collab with built-in features for customization in your own context.

More info about the CLF is available at http://clf.ubc.ca.

What are the Features?

Responsive Design

UBC Collab has implemented responsive design that changes the layout of your site to fit any kind of screen size, from desktops to mobile phones.

Minimum desktop resolution

Larger tablet resolution

Smaller tablet resolution

Mobile phone resolution

Built-in Design

UBC Collab integrates the UBC Brand in the overall design of the theme. You do have flexibility in the following areas:

UBC CLF Options

You can choose from the various UBC visual identity color combinations and select a custom colour for the Website Name Bar

Layout Options

Choose to have one or more columns for your layout where the wider area is for your content. The narrower areas are sidebars and for widgets.

Frontpage Options

Layout Options

Choose from among 4 layouts or build your own by using the Default option.

Feature Slide Options

Choose from 5 different styles but keep in mind on how they will look like in smaller screen sizes.

Resources

Reading List

• Responsive Web Design by Ethan Marcotte
• Mobile First by Luke Wroblewski
• Mobile Design Book Bundle from A Book Apart
• Mobile Learning UX Design using WordPress by Paul Hibbits

Examples

Universities

• http://ubc.ca
• http://www.regent-college.edu/
• http://www.nd.edu/
• http://www.uchicago.edu/
• http://www.harvard.edu/

Others

• http://www.microsoft.com/en-ca/default.aspx
• http://thegreatdiscontent.com/
• http://www.polygon.com/
• http://www.shapeofdesignbook.com/

Best Practices

• Start designing for a mobile device first
• Use an actual mobile device test out the content, design, and layout
• Continuously ask the question: "Is this piece of content important?"

Migration

• Request for a test site to practice and experiment
• Back-up all the files
• Start with very clear and focused content
• Ask the question: "Is the content readable and accessible even without the design?"
• Will you be able to support the customization?

Support

Workshops

WordPress Basics workshops are offered throughout the term. Please visit http://events.ctlt.ubc.ca to when the next session will be offered.

Drop-in Clinics

Need help with blogs or cms?

Visit us at the WordPress Clinics:

• When: 1:00PM - 3:00PM, Thursday
• Where: Center for Teaching, Learning and Technology, Irving K Barber Learning Centre

You can sign-up for the clinics at: events.ctlt.ubc.ca