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 (localstyles 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 websupport@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