1. Utility area revisions [Mandatory]

Requirements- Search box code revised- Schools & departments link added (removed from global/themed nav

area)- Contact us link removed- The search button restyling is handled through CSS.- Example code and screenshot below<div id="utility"><a id="linkSchoolsDepts" href="schools-and-departments/">Schools &amp; Departments</a><form class="globalSearch" action="/search" method="get" id="search" enctype="x-www-form-encoded"><div><input name="q" id="keywords" type="text" /><input type="submit" name="submit" value="Search" /></div></form></div>

Figure 1 - Schools & Departments link with Search box

2. Themed/global nav revisions [Mandatory]Currently this has 2 states:

1. On the themed area of the website it appears with the following links – News, About, Studying, Research, Alumni, Staff & students, Schools & departments eg as seen here: www.ed.ac.uk/about

2. Once the user navigates beyond the themed area of the website, this area only displays – Schools & departments eg as seen here:www.ed.ac.uk/schools-departments/registry/

Requirements Schools & departments link is dropped from the themed/global nav

area and relocated to the Utility area. The entire themed/global nav area no longer appears once beyond

the themed area of the website. There’s already a conditional output change when the global nav reduces down to only the “schools & depts” link – this would be the point where the global nav is dropped completely. See Figure 2 and illustrated example here: http://uoe.tayburndigital.co.uk/schools-and-departments/humanities-soc-sci/

The global/themed nav will remain when within the themed area of the website but its presentation and location are amended. See Figure 3 and illustrated example here:

http://uoe.tayburndigital.co.uk/about

Example code for themed area below:

<div id="headerContainer"><div id="globalNavContainer"><ul id="globalNav"><li class="selected"><a href="about">About</a></li><li><a href="news/">News</a></li><li><a href="studying/">Studying</a></li><li><a href="research">Research</a></li><li><a href="alumni">Alumni</a></li><li><a href="business">Business</a></li><li><a href="staff-and-students/">Staff &amp; students</a></li> </ul></div></div>

Figure 2 - Re-positioned Schools & Department link with no global nav

Figure 3 - Global nav without Schools & Departments menu item

3. Contact link/button [Mandatory]

Requirements Contact link is removed from its current location within the utility

area and repositioned within the section header area It should be possible for the editor to supply a contact link title -

examples on the live site:o Much of the MVM College Office site (http://www.ed.ac.uk/schools-

departments/medicine-vet-medicine/home) links to a single generic contact us page (http://www.ed.ac.uk/schools-departments/medicine-vet-medicine/about/contacts). So the user might set the contact link title to something like “Medicine & Veterinary Medicine – contact details”

o However, the prospective postgraduate section has a different contact us page (http://www.ed.ac.uk/schools-departments/medicine-vet-medicine/postgraduate/contact-us). And this might result in a link title similar to “Prospective postgraduate enquiries, Medicine & Veterinary Medicine – contact details”

Example code and screenshot below (the title attribute should not be included if the editor has not defined Contact link title):<p class="tb_button" id="linkContact" title="{editor defined text if populated}"><a href="#">Contact</a></p>

If feasible within the development time, the Contact link title would use the section heading if the editor has not set a Contact link title, i.e. title=”{Section heading} - contact details” (in the examples above this would result in respective default titles “Medicine & Veterinary Medicine – contact details” and “Prospective postgraduate enquiries – contact details”).

Sample CMS interface change shown in Figure 5, with the following caveats:

o the paste icon will only be used as requested if simple to implement;

o it will only be possible to have a single line of text for the label for the contact link title text field - the label will be re-worded accordingly.

Figure 4 - Revised Contact link

Figure 5 - Sample contact link title field

4. Section banners [Mandatory]

RequirementsThe image used in a banner is always unique to, and indicative of, the content in the primary navigation.The image below shows the different banner options that will be available for Standalone Sections; it is followed by annotated examples using sample real-world scenarios.

Figure 6 - Banner Samples

B1 Banner Examples

LLC is a large school in HSS. Figure 7 shows the banner for LLC, which does not reference any parent section in its banner.

Figure 7 - B1 example - LLC, a large school in HSS

Celtic & Scottish Studies are a subject area of LLC. Figure 8 demonstrates that they have opted to retain the current presentation, and not reference the parent Section, LLC. This example mimics the behaviour of the current CMS for all Standalone Sections. Effectively this is the same as the behaviour shown in Figure 7 for LLC.

Figure 8 – B1 example - Celtic & Scottish Studies, a subject area of LLC not using LLC as parent

B2 Banner Example

Asian Studies is a subject area of LLC which has chosen to reflect this organisational relationship by associating with its parent, LLC, as shown in Figure 9, demonstrating the new banner structure shown in B2.

Figure 9 – B2 example – Asian Studies, a subject area of LLC using LLC as parent

B3 Banner Example

Some areas of the University (e.g. Informatics and Dick Vet) use their own logos. Figure 10 exemplifies an Institute which has chosen presentational independence and is presenting their own logo, demonstrating the new banner structure shown in B4. Child sections of this Institute would follow the layout shown in B4 and Figure 11

Figure 10 – B3 example – Informatics Institute not maintaining relationship with Informatics

B4 Banner Example

In Figure 11, an Institute has chosen to maintain its connection with Informatics, therefore the logo image is incorporated via its relationship with the parent Section. This demonstrates the new banner structure shown in B4.

Figure 11 – B4 example – Informatics Institute maintaining relationship with Informatics

Summary of Scenarios Affecting Hierarchical Relationships in a Section Banner1. A subsection of a site (e.g. information about a research group)

expands to become a child site.2. An independent (i.e. parent) research group website becomes a child of

the school.3. A research group child site becomes an independent parent site so that

it can include its own logo in the banner.4. The parent school introduces a logo to replace the standard text in their

banners.

CMS editor processScenario 1:

- I change the section from sub to standalone- I upload a banner image- I assign a ‘contact us’ page (if this has not already been done)

At this point, the site looks like Figure 8/B1.Scenario 2:

- I decide to inherit a banner title from the parent school.At this point, the site looks like Figure 9/B2.Scenario 3:

- I remove my child site’s association with its parent.- I upload a logo to replace the text in my banner.

At this point, the site looks like Figure 10/B3.Scenario 4:

- I upload a logo image to replace the text in my banner. This change cascades to all child sites associated to this parent.

At this point, the child section layout looks like Figure 11/B4, with the logo image reflecting the new parent logo and replacing the parent section title.

Sample CMS Interface Sample CMS interface change shown in Figure 12, with the following

caveats:

o it must be possible to remove the Logo image, therefore Logo Image will be replaced either with a field to upload the image as shown, along with a drop-down list enabling the logo to be selected or de-selected or an image upload field which allows the image to be removed;

o the paste icon for banner parent will only be used as requested if simple to implement;

o it will only be possible to have a single line of text for the label for the contact link title text field - the label will be re-worded accordingly.

Figure 12 – New fields for section banner, and revised field labels - SAMPLE

Technical Implementation Details

Summary of approachSections will, in most instances, only require a single image upload. Utilising existing CMS values for section and optionally sub-section titles, we can use html and css outputs to achieve the desired presentation styles illustrated above in B1 and B2.We will require an additional image upload to achieve the scenarios illustrated in B3 and B4. A separate logo is uploaded to the system and html and css used to position it.It’s advantageous to present the section and sub-section titles as textual content rather than graphical content. For the CMS user it’s simpler and obvious where the title content is coming from, it’s easy to re-edit without reworking banners, it’s more accessible and we can segment the areas and link destinations without the use of complex image maps. We are also able to present visual cues on mouse over actions for the section and sub-section titles. These visual cues are unviable with graphical based titles.For those areas that require a ‘logo’, then the site managers have extra work and maintenance overheads. They also lose the mouse-over behaviour that the purely text based option provides.

Stand-alone section bannerThe presentation of the parent/primary section title will normally be produced using text field values which are written to the output html and then positioned and styled using CSS. The final output is illustrated in image B1.An example of the source image that is uploaded to the CMS is below:

Image upload via section super tab. As current. The parent section title text is written in html and overlaid onto the

image using absolute CSS positioning. (This is the same manner that the new contact link is overlaid.)

Parent section title text derived from Section properties, heading field.

CSS will be used to style the background area of the parent section title. It will be styled white using CSS (and opacity added for modern browsers).

The whole image links to the home url of the section. As current. (see image below).

Image title text derived form section name. The title text area links to the home url of the section. (see image

below). The title text area displays interactive hover states written in CSS.

Output code<!-- code for banner with only parent heading, no sub-heading and no logo --><div id="sectionHeader"><a class="parentLink" href="{parent-section-url}"><span id="parentTitle">{Title: School of Literature, Languages and Cultures}</span><img src="banner-parent.jpg" alt="{Section title: School of Literature, Languages and Cultures}" title="{Section title: School of Literature, Languages and Cultures}"></a><p class="tb_button" id="linkContact" title="{name of section} contact"><a href="#">Contact</a></p></div>

Sub-section bannerWhen presenting a sub-section (eg Asian Studies) and output B2 is required, it is expected that the user would upload a new banner with an image choice that represents the sub-section theme. When this banner is uploaded it would replace the parent banner completely. Only one image would be output. The same image template would used offline to replace the image choice, but once again the parent title and sub-section title are derived from CMS textual values.

Image upload via section super tab. As current. The whole image (except the parent title overlay) links to home of

the subsection eg Asian Studies (see image below). Image title text derived form sub-section name Sub-section title text is written in html and overlaid onto the image

using absolute CSS positioning. (This is the same manner that the new contact link is overlaid.)

Sub-section title text derived from Sub-section properties, heading field.

Sub-section section title/area links to sub-section home. Sub-section title text area displays interactive hover states written in

CSS Parent section title text is written in html and overlaid onto the

image using absolute CSS positioning. Parent section title text derived from the parent section properties,

heading field. Parent section title/area links to parent section home (see image

below). Parent title text area displays interactive hover states written in CSS.

Output code:<!-- code for banner with sub-heading and no logo --><div id="sectionHeader"><a class="parentLink" href="{parent-section-url}"><span id="parentTitle">{Title: School of Literature, Languages and Cultures}</span></a><a class="subsectionLink" href="{sub-section-url}"><img src="banner-sub.jpg" alt="{Sub-section title: Asian Studies}" title="{Sub-section title: Asian Studies}"><span id="subsectionTitle">{Sub-section title: Asian Studies}</span></a><p class="tb_button" id="linkContact" title="{name of section} contact"><a href="#">Contact</a></p></div>

Section and sub-section banners with logos

The requirement is to maintain the clickable nature of the primary title area (or logo in this case) and to have its destination link differ from the main banner image area in sub-site scenarios (B4).

The main image upload and titling follows the same procedure as outlined above for parent and sub-sections.

An additional (optional) image upload function is required at parent section level.

This would be set in section properties, super tab When present the output html is modified accordingly. The logo title text and link destinations follow the same rules as the

parent title text functions above (see image below). Mouse over interactions are lost for logo area but persist on sub-site

title area.

Note that if a banner parent has been set for a standalone section, any logo configured at the level of that standalone section is ignored in favour of the parent logo.

Output code:<!-- code for banner with sub-heading plus a logo --> <div id="sectionHeader"><a class="parentLink" href="{parent-section-url}"><img id="parentLogo" src="logo-inf.jpg" alt="{Section title: School of Literature, Languages and Cultures}" title="{Section title: School of Literature, Languages and Cultures}"></a><a class="subsectionLink" href="{sub-section-url}"><img src="banner-sub.jpg" alt="{Sub-section title: Asian Studies}" title="{Sub-section title: Asian Studies}"><span id="subsectionTitle">{Sub-section title: Asian Studies}</span></a><p class="tb_button" id="linkContact" title="{name of section} contact"><a href="#">Contact</a></p></div>

5. Default styles selected on templates [Desirable]Info-items currently have 3 user-defined styles available – high, medium and low. The user selected style results in a class name being added to the output code.This is in addition to the info-items default state that does not apply a class name to the output.Tayburn’s proposal is that an ‘optimum’ style for each row is preset by the CMS. The CMS user could still subsequently adjust this. However, it has been demonstrated that the code changes required to implement default style selections are prohibitive, therefore default styling will be achieved via CSS.

6. Differentiate the presentation of bulleted lists and a list of links [Mandatory]Propose that when a CMS user creates a link using the ‘Links’ tool in polopoly, an additional class is added to wrapping list code eg <ul class = "linksList">

When a user produces a list using the ‘List item’ tool in Poloply the output remains as is.If this is feasible then there’s sufficient code in the output html for CSS to create style differentiation.

7. Add optional title text to primary and secondary navigational panel links [Highly desirable]

Article and section properties currently collates a “Link text” value Optional additional data to be gathered for “Link title” If possible, the properties should be validated to prevent the user

from saving when Link text and Link title are identical HTML output template amended to append title text to link elements

when value is available The full title attribute should be conditional output. I.e. do not output

an empty title tag value. This additional title attribute would appear on primary and

secondary nav panel links Example code:

<li><a href="xx" title=”{link text value}”>Undergraduate home</a></li>

8. Improve contextual help on article and section properties [Desirable]

Add help text to article and section input fields in Polopoly interface to help editors correctly complete the fields and thereby improve navigational presentation

The help icon is displayed for each property Clicking the help icon displays the help text Help text to be confirmed for the section and article properties

shown in Figure 13 and Figure 14

Figure 13 - Section properties with new title field & help icons

Figure 14 - Article properties with new title field & help icons

Reference materialsTayburn development server with example output code: http://uoe.tayburndigital.co.uk/sitemap