Site Manager rocks!

Site Manager rocks!This presentation goes up to 11

Gareth J M SaundersAssistant Information Architect/Web Manager

Chris GordonWeb Software Developer

T44U, Dublin - November 2009

Beta

St AndrewsSt Andrews

St AndrewsSt Andrews

Founded 1413

Site Managerat St Andrews

December 2006 Installed Site Manager 5.1 (or 5.2)

May 2007 Launched first site

October 2008 Upgraded to Site Manager 6.0.0018

Summer 2009 Dev server installed with 6.2Soon? Upgrade live to 6.2

Currently 35 channels, inc. 11 RSS channels

“Could you ...?"A typical request

"We can do anything!"The University of St Andrews Web Team

"How would we do this ...?"Gareth

"We could use PHP ..."Steve

"Aye ... but is there any way we could get Site Manager to do it?"

Gareth

The answer is usually: YES

But occasionally the answer is no

Top tipswhen rolling out sites using Site Manager

CaveatWe’re not experts, but these are the things we’ve found useful

1. Policies and proceduresThe exciting stuff first ...

Who is responsible for what?

Sign a partnership agreement

Thanks to Bill Mackintosh at the University of York for this advice

Naming conventions

Naming conventions

UPPERCASE, Mixed case or lowercase URLs? Per channel

Content e.g. webteam_about_garethjmsaunders

Styles and templates e.g. Divinity 1 Home

Media library categories Publish out as separate folders? TOOLS > CONFIGURATION

Media library items e.g. hr-policy-sickleave.pdf

Training and support

Development server

Going live policy ... test first

2. HacksIf it ain’t broke ... tweak it!

Hack #1: Firebug for Firefox http://getfirebug.com

http://www.iconlook.com/details.icon?id=14147&size=128

CSS Selector navigation object

ProblemHow do I delete these?

CSS Selector navigation object

Hack!Use FirebugLocate the values in the codeDelete themUPDATE

Hack #2: Stylish for Firefox https://addons.mozilla.org/en-US/firefox/addon/2108

"Restyle the web with Stylish, a user styles manager."


Use Firebug to locate page elements Isolating the login input boxes

Stylish examples Log in screen

BeforeSmall login boxes

AfterWeb 2.0 treatment for the short-sighted

Stylish examples Site Hierarchy

BeforeVery subtle background colour on mouse-over hover

AfterHover more prominent

Stylish examples Media Library

BeforeThere is no media in which category?

AfterAh! that one!

Stylish examples Configuration

BeforeCentre-aligned headings

AfterLeft-aligned headingswith background-colour and hover-effect on rows

Hack #3: Greasemonkey for Firefox

JavaScript librariesCan be used with jQuery, MooTools, Prototype, Scriptaculous, etc.

WishlistHighlight any selected rows in User Management, Group Management, etc., or even move them to the top of the table to remove the need to scroll.

https://addons.mozilla.org/en-US/firefox/addon/748

"Allows you to customize the way a webpage displays using small bits of JavaScript..."


3. From design to T4Transferring your designs into Site Manager

Print out design onto A3 and mark-up by hand

Style elementsFind divide between header and footerRelated content required?Hard-coded elements

Navigation objectsShare existingCreate newWrite IDs onto diagram

Media elementsImagesCSSJavaScript

TemplatesShare existingCreate new

Use mind maps

Our uses include

Project management

Information architectureMigration (4,000+ pages)Re-architect 50+ sites

Page-level design

Design management

User permissions in T4

www.slideshare.com/garethjmsaunders/

4. Efficient codeImproving the Web one byte at a time

Duplicate standalone HTML code for quick mock-ups

TERMINALFOUR Site Manager Standalone HTML

Use version control

Efficient Work on different branches concurrently

Fail-safeRoll back quickly to an older version

Use frameworks

CSSBlueprint CSS960 Grid SystemYUI Grids

JavaScriptjQueryPrototype and ScriptaculousMooTools

PHPCakePHPSymphonyZend

Framework advantages v disadvantages

AdvantagesCross-browser supportFaster development timeWell-structured, modular codeCode consistencyVisual design cohesion

DisadvantagesOften non-semanticBloated code (may not need whole framework)LimitedInherit other people's bugsCan take time to learn

Optimize your code

Books

High Performance Web SitesSteve Souders (O'Reilly, 2007) ISBN 0-596-52930-9

Even Faster Web SitesSteve Souders (O'Reilly, 2009) ISBN 0-596-52230-4

Firebug add-ons

Yahoo! YSlowhttp://developer.yahoo.com/yslow/

Google Page Speedhttp://code.google.com/speed/page-speed/

5. Navigation objectsWhere do you want to go today?

Navigation objects

Site Manager 6.0

Related ContentRelated Content BranchBreadCrumbsCSS SelectorLink MenuReturn To IndexSection DetailsTop ContentBreadCrumb AdvancedLanguage SwitcherSection IteratorSite MapTop Stories

An average page

BreadCrumbs CSS Selector

Section Details

Content

Related Content Branch

Related Content

Link Menu

Where related content comes from

Advantages v disadvantages

AdvantagesSeparate content from designRestrict accessEasy to mirror information

DisadvantagesUsers often struggle to remember where to go to update information

Related Content navigation object

Use Child

Unique keyword

Related Content Branch navigation object

Use Child

Unique keyword

Predefined order in styles

rel_global_imagerel_imagerel_residencerel_global_contactsrel_contactrel_contentrel_global_contentrel_childrenrel_global_childrenrel_twitterrel_global_twitterrel_phprel_meeborel_global_openingtimesrel_openingtimesrel_rssfeedrel_global_applicationsrel_formsrel_global_forms...rel_global_internal_links

Main content ... everything else is related

Image carousel

Campaign buttons

Site Manager rocks!

Technology

Transcript of Site Manager rocks!