WebNet: Indigo and Silva briefing Agenda

• The new CMS: what’s happening?

• What is Indigo?

• What is the difference between an Indigo Silva template and the existing corporate template?

• Will editing in Silva be different?

• Is there any point in moving to Indigo when a new CMS is coming?

• How and when can I start with Indigo Silva?

The new CMS is …

Drupal - mission, values and principles

• The Drupal mission is to develop a leading edge open source

content management system that implements the latest thinking and

best practices in community publishing, knowledge management,

and software design.

• Values:

– Flexibility, simplicity, and utility in our product;

– Teamwork, innovation, and openness in our community;

– Modularity, extensibility and maintainability in our code.

Drupal - mission, values and principles

• Principles

– Modular and extensible

– Quality coding

– Standards-based

– Low resource demands

– Open source

– Ease of use

– Collaboration

Vision for web

As the users’ experience of UCL’s web presence reinforces

and shapes their perceptions of UCL as an institution, the

total presence will consistently reflect the excellence and

distinctiveness of UCL

See next slide to understand why this map

No website is an island entire of itself;

every website is a piece of the UCL

web continent; a part of the main ...

John Donne (ish)

CMS Project: Work Package 1

Three deliverables:

1. As-is and To-be process models

2. High level design

3. Delivery plan

CMS Project: Work Package 2

Five deliverables:

1. Technical implementation and system integration

2. CMS configuration

3. Training – developers

4. Pilot websites

5. Training – editors

Some answers … we don’t have them all yet!

How long will the project take?

The implementation of the CMS is likely to take a year. Migration of sites will take a further 1-2 years.

Will my site be migrated to the new CMS automatically?

Indigo Silva sites are likely to be easy to migrate automatically.

For others it will depend on the site’s complexity and how bespoke it is.

When can I move my site to the new CMS?

The order will be determined by the prioritisation policy.

Prioritisation policy

• What is the purpose of the project? Will it contribute to meeting UCL strategic objectives?

• Who will use the website?

• How many people will use the website each year?.

• Is the website UCL-branded?

• Will the website use a standard design?

• Will the website use standard features?

• What is the size of the project?

• What is the anticipated delivery date of the project? Is this date achievable given the time and resources available?

What is Indigo?

Indigo is UCL's responsive design language and front-end development framework for rapid development and deployment of UCL websites and applications.

Indigo should be used to develop UCL websites because:

• It’s Responsive – it provides multi-device support, from smart screen to desktop.

• It’s fast – rapid prototyping is easy with dozens of elements, styles and patterns to use.

• It enables creativity within the visual identity - it allows for creative design whilst retaining consistent user experience and UCL visual identity.

Indigo principles

• Design for users

• Design for content

• Modularity

• Technical independence

• Build the interface as the brand

• Simplicity and clarity at the core

• Provides a toolkit to help first use

• Build sustainable components

• Place Indigo at the heart of new site building

• Easy to learn and pleasant to use

• Smart defaults

Foundations - responsive grid

Require.js – Asynchronous JavaScript loader

Load JS apps:

• asynchronously

• as modules

• scoped

Minimised CSS calls

• Corporate template

– 49 calls

• 31 CSS

• Indigo template

– 29 calls

• 6 CSS

Content Delivery Network

Content Delivery Network

These are the tools we use in Indigo

Patterns

• Accordion

• Audio

• Blurb = image + text

• Box

• Breadcrumb

• Carousel

• Code display

• Footer

• Form

• Hero = large image + description

• Images

• Longform content = reduces text to

accordions for mobile viewing

• Map

• Navigation

• Quotes

• Tables

• Tabs

• Video

Indigo sites

Indigo benefits

• For our users

– constant DNA running through our sites

– smaller file size and better caching websites

– device independent website

• For our site owners

– modern responsive template

– a design which has content at its core

– consistency

• For WAMS

– consistent code

– low maintenance debt

– proactive

Before and after example

http://www.silva-sandbox.ucl.ac.uk/indigo-demo/corporate-demo/

What is the difference between an Indigo Silva template and the

existing corporate template?

• Responsive!

• Code sources

• <iframe> and <script> tags

• CSS

• UCL attributes object

• index_left

• Images

• Palettes

Responsive

Code sources

• We have recreated the most used code sources in Indigo

• Naming – all Indigo code sources start with ‘Indigo:’

• We have renamed some code sources to make these clearer

• Some are no longer available as they contravene Indigo principles:

– HTML: Insert HTML code

– Includes: Add and external JavaScript or CSS into the HTML Head (local-

styles CSS therefore removed)

– Includes: Display PHP within a Silva document

Can I add <iframe> and <script> tags?

Yes … but:

• WAMS will create it as a code source for you so we can:

– Assess it and check its suitability

– Have consistent functionality in your site

– Add any options you need in the code source

– Add any JS into our asynchronous JS loader

– Assess whether it should be rolled out to the community

– Record the existence of the code source

– Book onto our timeline according to prioritisation policy

Can I do my own CSS?

Yes … but:

1. Talk to WAMS first

2. Submit it to WAMS for review. They will check that the code:

– is valid

– doesn’t make anything visually inaccessible

– doesn’t break any of our code sources

– doesn’t conflict with UCL’s brand

UCL attributes are set in Properties tab in Indigo

• For a Publication you can set: colour palette choice; colour column

layout choice 1 or 2; horizontal/vertical/combi menu choice; Google

Analytics for site.

• For a Folder you can set: column layout choice 1 or 2;

horizontal/vertical/combi menu choice; header image on or off.

• For a Page you can set: column layout choice 1 or 2;

horizontal/vertical/combi menu choice; header image on or off.

index_left no longer exists

Use of index_left would not work with a responsive template

But index_right works as normal

Images

Large header image now available

Images need size defining:

– No respond

– Small image

– Medium image

– Large image

– Extra large image

– Super Extra Large image

– Decorative

Can I have a different colour palette?

Yes, as long as the colours

are from the brand palette

and they work well together.

Request it from web-

support@ucl.ac.uk and we

will set it up

Will editing in Silva be different? – not really

Indigo for the editor – you decide on the layout and colour

Same or different?

1. There is very little difference between Silva and Indigo for Editors

2. Chief Editors need to decide on a layout based on the importance of

content – remember, it’s responsive!

3. So, important content should be seen at the top when viewed on Mobile

devices

4. Chief Editors need to meet with all Editors / authors to explain the layout

5. Editors / authors need to follow this layout when creating new pages and

get any further input from Chief Editors

6. Chief Editors are responsible for their website and content and regularly

check content

Do I need training on Indigo Silva

If you have attended the following:

• Intro to Silva CMS (3 hours)

• Silva Plus (6 hours)

… you will just need to read the support materials we will provide.

In future the training will be similar:

• Intro to Silva (3 hours) - no changes – Why no changes?

– Because for any Indigo site, Chief Editors are required to attend the Silva Plus course where they will learn everything necessary to deal with layout

– Editors and authors do NOT need to change layout as this is the CE’s job

• Silva Plus (6 hours) - same material covered but adapted to Indigo

What support is available?

• live - Indigo website - explains what Indigo is to anyone

• soon to go live - Indigo demo website - shows examples of different

layouts, colours code sources etc.

• to be written - How-to guides that are Indigo-specific will be created

How to find out more about Indigo?

• live - Indigo Community using www.yammer.com/ucl.ac.uk

– to keep up to date with latest indigo changes

– to discuss the ongoing improvement of indigo

– to suggest new features and vote on the ones you like

– *not for support* or build requests use web-support@ucl.ac.uk

• to be launched – dedicated pages on the ISD website

Is there any point in moving to Indigo when a new CMS is coming?

Yes!

1. Responsive sites are increasingly important for meeting user needs

2. Google is now ranking according to whether it is a responsive site

or not

3. Moving to Indigo involves thinking about content structure and

prioritisation. The result is a more structured and usable site.

4. The structured nature of an Indigo site means it will be easier to

migrate your site automatically to the new CMS.

How and when can I start with Indigo Silva?

• First there will be an Assessment process

– We will run scripts

• to find code sources to convert

• to find code sources that need to be removed

• to find Local styles, UCL attributes, index_left to remove

• to find all images – to define size

– We need to identify site owner - chief editor

– We will need to ensure your commitment of time for the work

– You will need to work out timelines – content freeze, choose palette, review

content priority

• We will start the assessment process from 15 July