Upload
randal-maile
View
185
Download
0
Tags:
Embed Size (px)
Citation preview
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
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
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
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
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