Empowering the Content

Creator in a CMS

Environment: the art of

balancing consistency and

flexibility

VCSA Technology Services,

UC Riverside

Randal Maile

UCR Campus Branding Initiative

Consistent:

Logo / Monogram

Color palette

Fonts

Navigation

Layout chrome

CSS –powerful huge

consistency tool - leverage

heavily on the approved UCR

Campus Style guides

Flexible

Departments have unique

content – establish

messaging that’s consistent

with their mission.

Branding Distinctions:

Unique masthead

images

Approved color scheme

variants

Color stylesheets

UC

R U

mb

rella

Site

Vic

e C

ha

nce

llor

Stu

de

nt

Aff

airs -

Ca

ree

r C

en

ter

Vic

e C

ha

nce

llor

Stu

de

nt

Affa

irs -

Stu

de

nt A

ffa

irs

Header

Footer

Navig

ation

Search

Masterpage

Content Area

Content Area

Project Scope

VCSA TS will provide a custom CMS solution that

meets user needs and incorporates the UCR web

design branding standards

Redesigning all 30+ VCSA sites using a full featured

CMS solution.

Implement measures to ensure a uniform design

standard.

Provide the best possible tools for the end user to

easily manage and update their content.

Embracing the shift in web publishing

Old ModelWebmaster

Static sites

Limited templating

Reactionary – intensive

customer support

Current ParadigmWebmaster is redefined –

CMS design is the focus

WYSIWYG editing

Advanced templating

Web asset storage and

versioning

Web publishing workflows

Data driven

Consistency

Content Forces in a CMS

Flexibility

We’ve got a CMS, now what?

Content is King: creating it is a question of

Ultimate Control

Check Boxes

Drop-downs

Text Fields

Custom Content Types

Image Fields

Ultimate Flexibility

Blank Content Region

Unrestrained WYSIWYG

Editor

HTML / CSS / Javascriptauthoring

Balance

granularity

Content Creation

CMS Customization

Customizing the WYSIWYG

Designing Page Layouts

Managing data in SharePoint

Lists

Flexible Masthead Theming

Design / Content Solutions

Reusable Content

Cut and Paste

Design Pattern Library

jQuery interface elements

Consuming / Distributing Content

YouTube Playlists

Embedding Video

Google Calendar

Blogs

RSS

…with a safety net

Page Layouts

Purpose – customize the design so that the user

can enter content via WYSIWYG

Design layouts so that you shield content

Choice – offer our departments a variety of page

layouts

Multi-column layouts

1-column; 2-column; 3-column; etc.

Mixed layouts

Cracking the SP WYSIWYG Editor

Design Library – Repeatable Process

DYNAMIC

jQuery interactive solutions solve design problems:

Consolidate content: tabs, accordions, sliders

Facilitate a step-wise process: process sliders

Enhance usability:

Enhance navigation: mega menu

Facilitate search: ask Waylon

Provide visual balance and enhance aesthetics

Promoting Interactive Content

= ENGAGING

Leveraging jQuery

jQuery is our js library of choice –

how to integrate with SharePoint

Skill set lies here

Challenge: integrate interactive page elements w/ the

editing experience

Implementing jQuery – SharePoint Options

Method 2: SharePoint list editing

Pros: Most consistent way of assuring fidelity of UI

Cons: Learning curve; Time investment; Flexibility

Method 1: In-page editing: trial and error testing –

depends on plug-in Pros: Easiest way to get up and running fast; Flexible

Cons: Static in nature; Rogue markup can break the

interface

SharePoint list editing

What’s a SharePoint List?

What

Structure of rows and columns – similar to a database table –

easy for end user to manage

Ties in w/ content types – define data types

Textbox; Text Area; Number; Choice; Date & Time; Lookup; Person

or Group; Hyperlink; Picture; Calculated

Why

Users are task trained

Very few calls to fix UI design patterns

Positive feedback

Anatomy of a SharePoint List

Managing a Header Image Carousel

Managing a Mega Menu

Consuming External Content

YouTube

Podcasts RSS

Google Calendar

Web Services

Distributing Content

RSS Blogging

Syndication

Consuming Content

Methods:

3rd party webservices:

Google Calendar

YouTube

Playlists

Direct embed

RSS Feeds

Chancellor's Friday Letters

Pulling the content from external RSS

Displaying it – use of CSS / Data view web part (widget –

customize it by manipulating XSL (style markup w/ css) –

RSS / AJAX

Recreation Center Facilities interactive map

Distributing Content

Flash Interactive

Campus Map -

consumes data from

XML data source

SharePoint Custom

Form – Interfaces with

an XML data source

News Ticker

Masthead Branding

Custom Mastheads

Simple for the end-user…

Upload a background .jpg to a document library

Upload an overlay .png to a document library

Background Image – CSS property

Overlay Image – HTML <img>

Our Team(s)

VCSA Technology Services

Sean Dillingham – Director

Hadeel Elamin – Programmer

Mansur Syed – Web / UI Designer

Joseph Sexton – Network

Administrator / DBA

Waylon Baumgardner – Web / UI

Designer

Eugene O’Neill – Student Worker

Jimmy Tam – Student Worker

Student Affairs Communications

Paul Simon – Web / UI Designer

Jeffrey Girod – Web Copywriter /

Designer