webnet: indigo and silva briefing
TRANSCRIPT
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-
[email protected] 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 [email protected]
• 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