Applying design modules - New TeraText design modules

RMIT University©2014 Web Services and Information Policy 2 Objectives Understand the benefits of the new design guidelines. Apply the new modules to existing web pages to improve users journey. Design and implement new pages that maximize content delivery.

RMIT University©2014 Web Services and Information Policy – 9.40am: What are the design extension content instructions? 9:40 – 10.15am: Overview of layouts and modules – 10.30am: Tea break – 12.30pm: Demo and exercises **************** Optional 1.30pm – 5pm work on your own examples with WSIP team assistance Agenda

RMIT University©2014 Web Services and Information Policy 4 Housekeeping Participant experience and expectations? Purpose of design extensions ‘Foundation’ project GUI Design Manual Instructions for web editors Overview

RMIT University©2014 Web Services and Information Policy 5 Overview of layouts and modules Layouts: Lower level landing page (simple)* Lower level landing page (context) Lower level landing page (links) To be demonstrated in this workshop. Other videos are also available online.

RMIT University©2014 Web Services and Information Policy 6 Landing pages Landing pages are designed to send users to their destination as quickly and easily as possible Landing pages should not be ‘cluttered’ with too many optional modules Splitter boxes should only link to children pages in the local IA They should be ordered left to right and top to bottom (to reflect side nav) Maximum of 8 Important links outside of local IA can be promoted as related links Splitter boxes should not link to downloads Link names should be consistent with Page name (H1), and Sub nav name Names should be kept as short as possible Acronyms should be avoided

RMIT University©2014 Web Services and Information Policy 7 Choose the right landing page Simple – Child pages are relatively few and require no explanation Context – A brief description is required to explain the child pages in this section Links – For task-based links that don’t require onward journeys e.g. commonly used forms

RMIT University©2014 Web Services and Information Policy 8 Overview of layouts and modules Other page elements: Short description (and extended description) Call to action links Subnavigation

RMIT University©2014 Web Services and Information Policy 9 Overview of layouts and modules Modules: Splitter (see previous slide) Video text Inline image* Promo* Related links* Browse links* News listing Events listing To be demonstrated in this workshop. Other videos are also available online.

RMIT University©2014 Web Services and Information Policy 10 Inline images 3 types: 1/3 column ½ column 1 column (hero image at top page – rarely used) (Set width, height can vary) Images should support your content Should be adjacent to relevant content Captions should be used – they should not include links

RMIT University©2014 Web Services and Information Policy 11 Side promos and related links Promos - should be used only for campaigns Browse links – Links to media assets to download (or to browse programs) Related links – used to cross-links to other areas and links to external sites

RMIT University©2014 Web Services and Information Policy 12 Content pages These should be the end of the user’s journey This is the room at the end of the corridor! If you have a page with a lot of links consider whether you need a Landing page above it. Content pages should have parents and possibly siblings but no children

RMIT University©2014 Web Services and Information Policy 13 Order to stack modules on a page Suggested order: 1.Page title 2.Short description (optional) 3.Extended description (optional) 4.Splitter module (for landing pages only) 5.Call to action link (optional) 6.Browse links module (optional) 7.Video text module (optional) 8.News/Events listing module (optional) 9.FAQ module (optional) 10.Related links module (optional) 11.Promo module (appears below the sub navigation) Note: Inline image module (optional, place adjacent to relevant content or as “hero” image at top of page)

RMIT University©2014 Web Services and Information Policy 14 Demonstration of the modules 1.Lower level landing page (Simple) 2.Inline image module 3.Promo module 4.Downloads module. 5.Related links module

RMIT University©2014 Web Services and Information Policy 15 Demonstration of the modules 1.Lower level landing page (simple) How do I create a Lower level landing page (simple splitter)? 1.Download or create your page. 2.Download the ‘inline image module code’ from the following page: Insert your optional Short description. 4.Copy and paste the code to apply styling. 5. Copy the Simple splitter module code and paste into your XML file. 6. Update the bullet list of links to match the titles of your child pages. Create links to the pages. 7.Save the file and upload/replace your page in the Web Publishing System.

RMIT University©2014 Web Services and Information Policy 16 Demonstration of the modules 5. Inline image module How do I create an inline image module? 1.Download or create your page. 2.Download the ‘inline image module code’ from the following page: Select the required Inline image style and copy and paste the code into your XML file. 4.Replace placeholder image with your image (image should be already uploaded on the MAMS server). Add the image caption (and accreditation if required). 5.Resolve the Media Clue in the Web Publishing System but don’t specify any alignment, spacing or border in the metadata. 6.Save the file and upload/replace your page in the Web Publishing System.

RMIT University©2014 Web Services and Information Policy 17 Demonstration of the modules 2. Promo module How do I create a promo module? 1.Download the ‘Promo module code’ on the following page: Your page can have a maximum of three promos with only one image promo. 3.Select the promo style/s that you need and copy and paste the code into your XML file. 4.If using a Side promo (image) module, replace the image with your promo image (already uploaded on the MAMS server). 5.Update the title, call to action and create the link to the target page. 6.Save the file and upload/replace your page in the Web Publishing System.

RMIT University©2014 Web Services and Information Policy 18 Demonstration of the modules 3. Browse links module How do I create a browse links module? 1.Download or create your page. 2.Download the ‘Promo module code’ on the following page: Copy the Browse link module and paste into your XML file. 4.Update the heading 3’s, link text and insert the links to the target pages. 5.Delete any un-used links and/or sub-headings. 6.Save the file and upload/replace your page in the Web Publishing System.

RMIT University©2014 Web Services and Information Policy 19 Demonstration of the modules 4. Related links module How do I create a related links module? 1.Download the ‘Promo module code’ on the following page: Download or create your page. 3.If your related links are less than or equal to three, copy the Related links (single row) module code and paste into your XML file. 4.If your related links are more than three, copy the Related links (three columns) module code and paste into your XML file. 5.Update the titles and the links to the target pages with your content. 6.Delete any un-used links. 7.Save the file and upload/replace your page in the Web Publishing System.

RMIT University©2014 Web Services and Information Policy 20 Questions? Design module instructions: GUI Elements and Modules: For all web publishing access and website related enquires: Web publishing using Window 7: