WebNet: Indigo and Silva briefing Agenda

Transcription

1 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?

2 The new CMS is

3 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.

4 Drupal - mission, values and principles Principles Modular and extensible Quality coding Standards-based Low resource demands Open source Ease of use Collaboration

5 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

6 See next slide to understand why this map

7 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)

8 CMS Project: Work Package 1 Three deliverables: 1. As-is and To-be process models 2. High level design 3. Delivery plan

9 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

10 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.

11 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?

12 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.

13 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

14 Foundations - responsive grid

15 Require.js Asynchronous JavaScript loader Load JS apps: asynchronously as modules scoped

16 Minimised CSS calls Corporate template 49 calls 31 CSS Indigo template 29 calls 6 CSS

17 Content Delivery Network

18 Content Delivery Network

19 These are the tools we use in Indigo

20 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

21 Indigo sites

22 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

23 Before and after example

24 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

25 Responsive

26 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

27 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

28 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

29 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.

30 index_left no longer exists Use of index_left would not work with a responsive template But index_right works as normal

31 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

32 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

33 Will editing in Silva be different? not really

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

35 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

36 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

37 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

38 How to find out more about Indigo? live - Indigo Community using 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

39 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.

40 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