Docstoc

ECU CORPORATE WEB STYLE GUIDE

Document Sample
ECU CORPORATE WEB STYLE GUIDE Powered By Docstoc
					EDITH COWAN UNIVERSITY




       ECU CORPORATE
       WEB STYLE GUIDE
              VERSION 2.3 - JUNE 2010
CONTENTS
1	 ECU	WEBSITE	INFORMATION	ARCHITECTURE	                                       5
2	 2009	CORPORATE	WEB	STYLE	(‘RED’)	-	INTERNET	                                6
      2.1	 HEADER	                                                             7
           2.1.1	 ECU	logo	                                                    7
           2.1.2	 Top	level	navigation	                                        7
           2.1.3	 Search	box	                                                  7
           2.1.4	 Section	header	                                              7
           2.1.5	 Background	                                                  7
           2.1.6	 Section	header	graphic	                                      7

      2.2	 FOOTER	                                                             7
           2.2.1	 Column	1	                                                    8
           2.2.2	 Column	2	                                                    8
           2.2.3	 Column	3	                                                    8
           2.2.4	 Column	4	                                                    8

3	 2009	CORPORATE	WEB	STYLE	(‘BLUE’)	-	INTRANET	                               9
      3.1	 HEADER	                                                             9
           3.1.1	 ECU	logo	                                                   10
           3.1.2	 Top	level	navigation	                                       10
           3.1.3	 Search	box	                                                 10
           3.1.4	 Section	header	                                             10
           3.1.5	 Background	                                                 10
           3.1.6	 Section	header	graphic	                                     10

      3.2	 FOOTER	                                                            10

4	 2009	CORPORATE	WEB	STYLE	-		
	 WEB	APPLICATIONS	SYSTEMS	                                                   11
           4.2.1	 ECU	logo	                                                   11
           4.2.2	 Header	                                                     11
           4.2.3	 Background	                                                 11
           4.2.4	 Footer	                                                     11

5	 LANDING	PAGES	                                                             12
      5.1	 LANDING	PAGE	ELEMENTS	                                             12
           5.1.1	 Summary	                                                    12
           5.1.2	 Footer	                                                     12
           5.1.3	 News	/	events	                                              13
           5.1.4	 Showcase/Highlights	                                        13
           5.1.5	 Content	areas	                                              13
           5.1.6	 Content	are	types:	summary	followed	by	bullet	list	links	   13
           5.1.7	 Content	are	types:	link	followed	by	summary	                14
           5.1.8	 Content	are	types:	link	followed	by	content	                14



ECU Web Corporate Style Guide
      5.2	 TYPOGRAPHY	                                                             15
           5.2.1	 Summary	                                                         15
           5.2.2	 Quote	                                                           15
           5.2.3	 Quote	cite	                                                      15
           5.2.4	 Section	headers	                                                 15
           5.2.5	 Content	areas	                                                   15

6	 STANDARD	PAGES	                                                                 16
      6.1	 STANDARD	PAGE	TEMPLATES	                                                16
           6.1.1	 Standard	page	with	left-hand	menu	                               16
           6.1.2	 Standard	page	with	right-hand	related	contents	                  16
           6.1.3	 Standard	page	with	wrapped	floated	video/image	and		
           	      right-hand	related	contents	                                     17

      6.2	 STANDARD	PAGE	TEMPLATE	ELEMENTS	                                        17
           6.2.1	 Headings	                                                        17
           6.2.2	 See	also	                                                        17
           6.2.3	 Downloads	                                                       17
           6.2.4	 Related	images	                                                  18
           6.2.5	 Linked	images	                                                   18
           6.2.6	 Floated	images	                                                  18

      6.3	 ASSET	LISTINGS	                                                         18
           6.3.1	 News	items	                                                      18
           6.3.2	 Speaches	                                                        19
           6.3.3	 Event	listings	                                                  19

7	 ADVANCED	PAGES	                                                                 20
      7.1	 ADVANCED	PAGE	TEMPLATES	                                                20
           7.1.1	 Template	20:	Standard	“Float”	Page	with	“jQuery	Lightbox”	       20
           7.1.2	 Template	21:	Standard	“Float”	Page	with	“Prototype	Lightview”	   20
           7.1.3	 Template	22:	Standard	Page	with	“jQuery	Lightbox	Gallery”	       20
           7.1.4	 Template	23:	Standard	Page	with	“Prototype	Lightview	Gallery”	   20
           7.1.5	 Template	27-PL:	Standard	Page	with	‘Floated	Video	(FLV)’	        20
           7.1.6	 Template	28-PL:	Standard	Page	with	‘Floated	Video	(YouTube)’	    21
           7.1.7	 Template	41:	Standard	Page	with	‘Lightview	Video	(FLV)’	         21
           7.1.8	 Template	42:	Standard	Page	with	‘Lightview	Flash	(SWF)’	         21
           7.1.9	 Template	43:	Standard	Page	with	‘Lightview	Flash	Slideshow’	     21
           7.1.10	Template	44:	Standard	Page	with	‘Lightview	Flash	Gallery’	       21
           7.1.11	Template	45:	Standard	page	with	“jQuery	Image	Slider		           21
           7.1.12	Template	52:	Testimonial	page	(Random	full	story)	               22
           7.1.13	Template	53:	Testimonial	page	(Random	video	testimonial)	        22

8	 NAVIGATION	STRUCTURE	                                                           23
      8.1	 TOP	LEVEL	NAVIGATION	                                                   23

      8.2	 LEFT-HAND-SIDE	MENU	                                                    23

      8.3	 WEB	PATHS		                                                             24


ECU Web Corporate Style Guide
9	 WRITING	STYLE	                                     25
      9.1	 CONTACT	INFORMATION	                       25

      9.2	 FURTHER	INFORMATION	                       25

      9.3	 LANGUAGE	                                  25

	
APPENDICES
A	 TYPOGRAPHY			                                      26
B	 IMAGES	                                            27
      B.1	 IMAGE	SIZE	                                27
           B.1.1	 Section	header	                     27
           B.1.2	 Related/linked	images	              27
           B.1.3	 Thumbnails	                         27
           B.1.4	 Floated	images	                     28
           B.1.5	 Landing	page	showcase	thumbnails	   28

C	 CUSTOMISATIONS	                                    29
      C.2	 ECU	HOMEPAGE	SEGMENTATION	                 29
           C.2.1	 Banner	                             29
           C.2.2	 News	                               30
           C.2.3	 Seasonal	links	                     30
           C.2.4	 Quick	links	                        30
           C.2.5	 Events	                             30

      C.3	 ECU	HOMEPAGE	TYPOGRAPHY	                   31
           C.3.1	 News	                               31
           C.3.2	 Quick	links	                        31
           C.3.3	 Events	                             31




ECU Web Corporate Style Guide
1	      ECU	WEBSITE	INFORMATION	ARCHITECTURE
ECU’s Information Architecture is based on a
top-down (pyramid) approach.

Level 1 (~10% of web content) is the highest
level in the structure and is restricted to the
ECU Homepage, and various sub web pages
that are linked directly.

Level 2 (~25% of web content) contains web
content from destination focus areas (such as
About ECU, Future Students, Research and
Community), as well as the public web pages
for Faculties, Schools and Service centres.

Level 3 (~65% of web content) is the lowest
level in the structure and in most cases is              Homepage
web content available on the ‘Intranet’ and                                                                           Level 1
restricted to current students and staff.                                                                              ~10%




                                                                                                                      Level 2
                                                                                                                       ~25%


                  About ECU -      Future Students        Research           Community            Student & Staff
                 (Landing page)    (Landing page)      (Landing page)      (Landing page)        Portals (Intranet)




                                                                                                                      Level 3
                                                                                                                       ~65%




                                   Third level standard pages with and without related content




                                                                                         ECU Web Corporate Style Guide          5
  2	      2009	CORPORATE	WEB	STYLE	(“RED”)	-	INTERNET
  The 2009 Corporate web style ‘Red’ – Internet is the web style to be adopted for all web pages available to visitors
  via the Internet. The style includes navigation to the four key areas of the Universities’ public web presence, global
  search box, global footer, and a large dominant ‘ECU Red’ bar, which includes a customised section header graphic
  depending on the web page you are visiting.

  This style is RESTRICTED to use within the ECU WebCMS, and is to be used for all ‘INTERNET’ web pages.




                                                              900px




  2.1	 HEADER

            2.1.1 ECU Logo                  2.1.2 Top level navigation                       2.1.3. Search box




                2.1.4 Section header                      2.1.6 Section header graphic           2.1.5 Background




6 ECU Web Corporate Style Guide
2.1.1	 ECU	logo
•   The ECU Logo measures 135px (w) x 100px (h)
•   Drop shadow structure; Blend Mode - Multiply; Opacity - 43%; Angle - 127; Global Light - checked;
    Distance - 8px; Spread - 0%; Size - 3px


2.1.2	 Top	level	navigation
•   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed


2.1.3	 Search	box
•   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed


2.1.4	 Section	header
•   Reflects the area of the website you are in
•   Can not be manually edited


2.1.5	 Background
•   Overall height is 200px
•   Top grey bar colour: #5e5e60; height: 82px
•   Thin white line height: 2px
•   Red gradient bar height: 113px; colour gradient top # 8f0000 bottom # a80018
•   Bottom grey line colour: #a2a5a6 height: 4px


2.1.6	 Section	header	graphic
•   288px - 420px (w) x 143px (h) Image should be deep etched around edges sitting on background red and
    created by the Senior Online Design Coordinator
•   There can only be one section header graphic per website area unless exemption granted by the Senior Online
    Design Coordinator



                                        Min 288px - Max 420px




                                                                              143px




                                                                             ECU Web Corporate Style Guide        7
  2.2	 FOOTER
            2.2.1 Column 1          2.2.2 Column 2        2.2.3 Column 3         2.2.4 Column 4




  •   Background colour: #5e5e60; top border: 2px high #cccccc
  •   Font style is constant, maintained by the Corporate Web Team and can not be changed



  2.1.7	 Column	1
  •   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed
  •   Consists of:
      - Got a question? Ask us
      - Contact us
      - Phone 134 ECU (134 328)
      - International: +61 8 6304 0000;
      - Campus map


  2.1.8	 Column	2
  •   May change to suit website area


  2.1.9	 Column	3
  •   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed
  •   Consists of:
      - Alumni
      - News
      - Media
      - Jobs at ECU


  2.1.10	Column	4
  •   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed
  •   Consists of:
      - Copyright, Disclaimer, Privacy
      - Emergency
      - Report errors
      - Sitemap
      - Last reviewed date
      - Cricos code




8 ECU Web Corporate Style Guide
3	 2009	CORPORATE	WEB	STYLE	(“BLUE’)	-		
INTRANET
The 2009 Corporate web style ‘Blue’ – Intranet is a refined version of the ‘Internet’ style, and as such has many of
the same elements. The most noticeable distinction between the two styles is the removal of the ‘section header’
graphic and changing to ‘ECU blue’ as the dominant colour.

This style is RESTRICTED to use within the ECU WebCMS, and is to be used for all ‘INTRANET’ web pages.


                                                            900px




3.1	 HEADER

          3.1.1 ECU Logo                      3.1.4 Section header                        3.1.3 Search box




                           3.1.2. Top level navigation                                               3.1.5 Background




                                                                                 ECU Web Corporate Style Guide          9
   3.1.1	 ECU	logo
   •   The ECU Logo measures 120px wide x 89px high
   •   Drop shadow structure; Blend Mode - Multiply; Opacity - 43%; Angle - 127; Global Light - checked;
       Distance - 8px; Spread - 0%; Size - 3px


   3.1.2	 Top	level	navigation
   •   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed
   •   Grey bar colour: #5e5e60; height: 24px


   3.1.3	 Search	box
   •   Is constant, applied globally, maintained by the Corporate Web Team and can not be changed


   3.1.4	 Section	header
   •   Reflects the area of the website you are viewing
   •   Can not be manually edited
   •   Style set in css


   3.1.5	 Background
   •   Overall height is 200px
   •   Top grey bar colour: #5e5e60; height: 82px
   •   Thin white line height: 2px
   •   Red gradient bar height: 113px; colour gradient top # 8f0000 bottom # a80018
   •   Bottom grey line colour: #a2a5a6 height: 4px


   3.1.6	 Section	header	graphic
   •   Overall height is 119px
   •   Top grey bar colour: #5e5e60; height: 48px
   •   Thin white line height: 1px
   •   Blue gradient bar height: 70px; colour gradient top #114671 bottom #004b85

   3.2	 FOOTER




   •   Is inherited from the INTERNET style. Refer section 2.2.




10 ECU Web Corporate Style Guide
4	      2009	CORPORATE	WEB	STYLE	-		
	       WEB	APPLICATIONS	SYSTEMS
4.1	 APPLICATION	STYLE	ELEMENTS

The 2009 Corporate web style ‘Web Application Systems’ is the style to be adopted by corporate web systems if
customisation within the system is permitted. The style mandates a common ‘header’ and ‘footer’, whilst allowing
the individual systems autonomy in how the ‘middle’ content section appears.

This style can be attained upon application to the Web Business Manager.

                               4.1.2 Header                    4.1.3 Background               4.1.1 ECU Logo




       4.1.4 Footer




4.1.1	 ECU	logo
•    Logo positioned top right, 104(w) x77(h)


4.1.2	 Header
•    450(w) x 91(h)
•    Font: Univers 67 Bold Condensed, left margin: 22px, top margin: 40px
•    Main heading all caps 24 pt
•    Sub heading “Edith Cowan University” all caps 12pt
•    The header can be created for you or photoshop template can be attained from the Senior Web Designer


4.1.3	 Background
•    Background blue colour: #004b85 followed by 1 px white line followed by 29px height red colour: #be112d


4.1.4	 Footer
•    Footer is 1px blue #004b85 line
•    Consists of:
     - Copyright, disclaimer, sitemap, feedback, emergency, Cricos code (all linked)
     - Last updated date


                                                                                  ECU Web Corporate Style Guide 11
   5	         LANDING	PAGES
   5.1	 LANDING	PAGE	ELEMENTS
   The ‘landing page’ template is available for web pages within level 2 of the ECU website (refer 1. ECU Website
   Information Architecture) and are created by the ECU Corporate Web Team.
   Examples of the WebCMS templates are available at www.ecu.edu.au/web-administration/webcms




         5.1.1 Summary                                                                                 5.1.2 Quote




       5.1.3 News/Events                                                                             5.1.4 Showcase/
                                                                                                        Highlights




       5.1.5 Content areas




   5.1.1	 Summary
   •      Should span at least 6 lines (min approx 100 words)
   •      Font is predetermined in CMS and can not be changed


   5.1.2	 Quote
   •      Quote should span 3-5 lines (min approx 16 words)
   •      Title, name and position of person quoted goes below the quote in bold font.




12 ECU Web Corporate Style Guide
5.1.3	 News	/	Events
•   News listings should always have a thumbnail related to the content item.
•   Event listings can have thumbnails but it is not mandatory. However, if you decide to include thumbnail images,
    every event listing item requires one.
•   Thumbnail image measures 100(w) x 80(h)
•   Heading and thumbnail links through to full story on a 2nd level standard page
•   Summary is first few words of story followed by ...
•   Heading, space and summary should span same amount of lines for all
•   There must be a link to the asset listing (refer 8.3) of all news/events/highlights at the bottom.


5.1.4	 Showcase/Highlights

•   Showcase randomly rotates through and displays 2-3 samples.
•   Height of News/Events/Highlights section should be around the same height as the showcase section.
•   The showcase thumbnail measures 420(w) x 190(w) or 335(w) x 190(h) if the landing page has a left-hand
    menu, and should directly relate to the story. A generic image may be used when a direct relational image can
    not be found.
•   Heading and thumbnail links through to full story on a 2nd level standard page
•   The summary should span 3-4 lines.
•   There must be a link to the asset listing of the whole showcase at the bottom.


5.1.5	 Content	areas

•   The content area of landing pages can only be a list of assets that lead off to standard pages. It should not be
    used to hold content only except for contact details.
•   Content areas are divided into two columns where the right and left column should be of equal or similar
    height
•   Headings on the grey background becomes a menu item in subsequent standard pages
•   Links below the heading become 3rd level menu items but can be hidden if it is a large asset list ie. news items




5.1.6	 Content	area	types:	summary	followed	by	bullet	list	links

                                              •   The summary should span between 3-4 lines.




                                                                                 ECU Web Corporate Style Guide 13
   5.1.7	 Content	area	types:	link	followed	by	summary

                                              •   The summary should span between 2-4 lines.
                                              •   Generally, the length of the left column content area should be
                                                  of similar height to the right column content area. This will impact
                                                  on how long the summary should be.




   5.1.8	 Content	area	types:	link	followed	by	content




   •   Content areas may contain a relevant image at the top if required
   •   Image measures 420(w) x 190(h) or 335(w) x 190(h) if the landing page has a left-hand menu




14 ECU Web Corporate Style Guide
5.2	 TYPOGRAPHY

5.2.1	 Summary
•     Standard text


5.2.2	 Quote
•     Font: Georgie “Times New Roman”, Times, serif; Size: 0.85em


5.2.3	 Quote	cite
•     Bold; Font: standard; Size: 0.85em.


5.2.4	 Section	headers
•     Font: Georgie “Times New Roman”, Times, serif; Size: 1.6em
•     Background colour: #D0D1D3


5.2.5	 Content	areas
•     Title links - Bold; Colour: #004b85; Size: 0.9em; Decoration: underline colour #E4E5FE
•     Summary - Size 0.9em; links underline colour #004b85


    5.2.1 Summary                                                                                5.2.2 Quote

                                                                                               5.2.3 Quote cite




     5.2.4 Section
           headers
                                                                                                 5.2.5 Content
                                                                                                        areas




                                                                              ECU Web Corporate Style Guide 15
   6	      STANDARD	PAGES
   6.1	 STANDARD	PAGE	TEMPLATES

   The ‘standard page’ template is available for web pages within levels 2 and 3 of the ECU website (refer 1. ECU
   Website Information Architecture) and can be created by content authors.

   Examples of the WebCMS templates are available at www.ecu.edu.au/web-administration/webcms/std-templates


   6.1.1	 Standard	page	with	left-hand	menu




   6.1.2	 Standard	page	with	right-hand	related	contents:	Layout	453
                                                                     •   Order:
                                                                             - See Also
                                                                             - Downloads
                                                                             - Linked Images
                                                                             - Related Images
                                                                     •   Can contain one, or more of all the right-
                                                                         hand related content types




16 ECU Web Corporate Style Guide
6.1.3	 Standard	page	with	wrapped	floated	video/image	and		
	      right-hand	related	contents:	Layout	601

                                                                  •   Order:
                                                                           - Floated Image
                                                                           - See Also
                                                                           - Downloads
                                                                           - Linked Images
                                                                           - Related Images
                                                                  •   Can contain floated image/video only or one
                                                                      or all of the right-hand related content types
                                                                  •   May not contain floated image/video at all to
                                                                      allow text to wrap around right-hand related
                                                                      content




6.2	 STANDARD	PAGE	TEMPLATE	ELEMENTS

6.2.1	 Headings
•   All pages have a H2 heading which is the ‘Page Name’ in the WebCMS.
•   he H2 style is predetermined in the WebCMS and cannot be changed.
•   There should only be one H2 per page




6.2.2	 See	also
•   Not to be used for primary navigation
•   For linking outside of the current website into related web pages
•   Typically used for linking to external websites mentioned in the body text
•   Order is set by created date; can be modified in WebCMS


6.2.3	 Downloads
•   For downloads of documents relevant to your page
•   Linked item should ideally be in PDF format but may also be in Word or Excel format
•   Ensure file size of document to be downloaded is compressed and optimised for
    online viewing
•   Order is set by created date; can be modified in WebCMS




                                                                                 ECU Web Corporate Style Guide 17
   6.2.4	 Related	images

   •   Width: 142(w) x 190(h) (height may vary from 115-230px if 190px not appropriate)
   •   Must have a caption of no more then 10 words that describes the picture contents.
   •   Images must relate to the page contents
   •   Refer to Appendix B for more information on images.
   •   Order is set by created date; can be modified in WebCMS



   6.2.5	 Linked	images

   •   142(w) x 190-250(h)
   •   Image should be the cover of the document to be downloaded
   •   Linked item should ideally be in PDF format but may also be in Word or Excel format
   •   Ensure file size of document to be downloaded is compressed and optimised for
   •   online viewing
   •   Title and file size of download is displayed automatically by the WebCMS
   •   Refer to Appendix B for more information on images.
   •   Order is set by created date; can be modified in WebCMS



   6.2.6	 Floated	images
   •   All floated images should be 347(w) x 280(h). However, if the
       original image does not re-size well to those dimensions, the
       following sizes can be used: (width x height)
             - 347x280px (preferable)
             - 347x347px (squared)
             - 420x280px (landscape)
             - 400x300px (landscape option 2)
             - 300x400px (portrait)
   •   All floated images must have a caption spanning no more
       than three lines that describes the picture contents
   •   Images must relate to the page contents




   6.3	 ASSET	LISTINGS

   6.3.1	 News	items
   •   If there is an RSS feed, an icon with a link
       “Subscribe to RSS feed” goes below the page
       heading
   •   News heading comes first and links through to
       whole news article
   •   Date of news items follows. Format is automated.
   •   Summary as it appears on the landing page
       follows
   •   Each story is divided by a horizontal rule
   •   10-15 news items per page




18 ECU Web Corporate Style Guide
6.3.2	 Speeches
•   Name of speaker comes first
•   Speech heading follows and links though to the
    whole speech page
•   Date of speech goes under the speech heading
•   Summary of approx five lines follows
•   Each speech item is divided by a
    horizontal rule




6.3.3	 Event	listings
•   Tabbed links of days (according to your site’s
    needs) goes under the heading
•   Events are listed in order of time
•   Event title links through to full event page
•   Date, room, then presenter follows
•   Room is linked to ECUSIS
•   Summary of approx three lines follows
•   Each event item is divided by a horizontal rule




                                                      ECU Web Corporate Style Guide 19
   7	      ADVANCED	PAGES
   7.1	 ADVANCED	PAGE	TEMPLATES
   Advanced templates have been developed by the Corporate Web Team to implement more advanced and specialist
   features for web pages within the WebCMS.
   You can view all the Advanced Templates here: www.ecu.edu.au/web-administration/webcms/advanced-templates.


   7.1.1	 Template	20:	Standard	“Float”	Page	with	“jQuery	Lightbox”
   •    This template would commonly be used to enlarge a floated image without the user having to leave the page
   •    Thumbnail dimensions: Width: 347(w) x 280-347(h) Large Liteboxed image dimensions: 800(w) x 600(h) max
   •    All floated jQuery Lightbox images must have a caption spanning no more then
   •    three lines that describes the picture contents
   •    File type for thumbnails and main images: PNG, GIF or JPG (70% compression)
   •    Images must relate to the page content


   7.1.2	 Template	21:	Standard	“Float”	Page	with	“Prototype	Lightview”
   •    This template would also commonly be used to enlarge a floated image without the user having to leave the
        page. Similar to Template 20 but has a slightly different style
   •    Thumbnail dimensions: Width: 347(w) x 280-347(h)
   •    Large Liteboxed image dimensions: Width: 800(w) x 600(h) max
   •    All floated jQuery Lightbox images must have a caption spanning no more then
   •    Three lines that describes the picture contents
   •    File type for thumbnails and main images: PNG, GIF or JPG (70% compression)
   •    Images must relate to the page content


   7.1.3	 Template	22:	Standard	Page	with	“jQuery	Lightbox	Gallery”
   •    This template would also commonly be used to display a small photo gallery of 4 images
   •    Thumbnail dimensions: 120(w) x 120(h)
   •    Main image: Maximum 800px (largest side: width or height)
   •    Image amount: 4
   •    Images must relate to the page content


   7.1.4	 Template	23:	Standard	Page	with	“Prototype	Lightview	Gallery”
   •    This template would also commonly be used to display a small photo gallery of 4 images. Similar to Advanced
        Template 22 but has a slightly different style
   •    Thumbnail dimensions: 120(w) x 120(h)
   •    Main image: Maximum 800px (largest side: width or height)
   •    Image amount: 4
   •    Images must relate to the page content


   7.1.5	 Template	25:	Standard	Page	with	“Related	Ask	Us	Questions”
   •    This template would be used to place an ‘Ask Us’ accordion at the bottom of the page with the top frequently
        asked questions on a the page’s topic
   •    Facts displayed: 10
   •    Accordion style is set


   7.1.6	 Template	26:	Standard	Page	with	“Related	Ask	Us	Questions	Lightview”
   •    This template would be used to place an ‘Ask Us’ accordion on the page. Similar to Template 25 but with a
        slightly different style
   •    Facts displayed: 10
   •    Accordion style is set




20 ECU Web Corporate Style Guide
7.1.7	 Template	27-PL:	Standard	Page	with	‘Floated	Video	(FLV)’
•   This template would be used to show a floated video within a web page
•   Poster frame (thumbnail) and Video dimensions: Widescreen - width: 347(w) x 196(h) / Standard - width:
    347(w) x 260(h)
•   File Size: Approx - max 10mb based on a 1 minute movie (standard definition)
•   Format: .flv
•   Frame Rate: 30 fps
•   Audio: Stereo, Bitrate: 96 kbps, Frequency: 44.1 khz


7.1.8	 Template	28-PL:	Standard	Page	with	‘Floated	Video	(YouTube)’
•   This template would be used to show an ECU YouTube channel video within a web page
•   Poster frame (thumbnail) and Video dimensions: width: 347(w) x 280(h) (dynamically imported from ECU’s
    YouTube channel)


7.1.9	 Template	35:	Standard	Page	with	‘Tooltip	Example’
•   This template would be used to display a pop-up box description upon text rollover
•   Colours available for the pop up box include Cream Yellow, Dark Grey, Green, White, Red and Blue
•   Word limit: max 40


7.1.10	Template	41:	Standard	Page	with	‘Lightview	Video	(FLV)’
•   This template would be used to show a floated video in a Lightview overlay style similar to Advanced Template
    21
•   Poster frame (thumbnail) dimensions - Widescreen: 400(w) 225(h) / Standard: 400(w) 300(h)
•   Video dimensions: Widescreen: 512(w) 288(h) / Standard: 512(w) 384(h)
•   File Size: Approx – max 35mb based on a 1 minute movie (standard definition)
•   Format: .flv
•   Frame Rate: 30 fps
•   Audio: Stereo, Bitrate: 96 kbps, Frequency: 44.1 khz


7.1.11	Template	42:	Standard	Page	with	‘Lightview	Flash	(SWF)’
•   This template would be used to show Flash content such as animation in a Lightview overlay style similar to
    template 21
•   Poster frame (thumbnail) dimensions - Widescreen: 400(w) 225(h) / Standard: 400(w) 300(h)
•   Video dimensions: Widescreen: 512(w) 288(h) / Standard: 512(w) 384(h)
•   File Size: Approx – max 35mb based on a 1 minute movie (standard definition)
•   Format: .swf
•   Frame Rate: 30 fps
•   Audio: Stereo, Bitrate: 96 kbps, Frequency: 44.1 khz


7.1.12	Template	43:	Standard	Page	with	‘Lightview	Flash	Slideshow’
•   This template would be used to create a scrolling slideshow of up to 30 images
•   Thumbnail dimensions: 300(w) x 200 (h)
•   Main image size: Maximum - 800(w) x 533(h)
•   Image amount: max 20


7.1.13	Template	44:	Standard	Page	with	‘Lightview	Flash	Gallery’
•   This template would be used to create a static gallery of up to 200 images
•   Thumbnail dimensions: 67(w) x 67(h)
•   Main image size: width: 580(w) x 420(h)
•   Image amount: max 200




                                                                                 ECU Web Corporate Style Guide 21
   7.1.14	Template	45:	Standard	page	with	“jQuery	Image	Slider	
   •   This template would be used on a landing page to display one image at a time rotating through
   •   Image dimensions: 690(w) x 190(h)
   •   Image amount: 7 max


   7.1.15	Template	51:	Testimonial	page	(Random	quote)
   •   This template is used to display a random testimonial quote within a web page.
   •   Style of quote box is set


   7.1.16	Template	52-PL:	Testimonial	page	(Random	full	story)
   •   This template is used to display a floated testimonial photo with the full story displayed directly underneath in
       the right hand column of the page. This right hand column can also include Standard Page Elements such as
       ‘see-also’, ‘downloads’ etc (see section 6.2 of this guide)
   •   Style of story box is set
   •   Full Story Thumbnail 347(w) x 280(h) - height can vary


   7.1.17	Template	53-PL:	Testimonial	page	(Random	video	testimonial)
   •   This template is used to display a randomly selected floated testimonial video into a testimonial page
   •   For video dimensions and specifications, please see ‘Template 27-PL: Standard Page with ‘Floated Video (FLV)’




22 ECU Web Corporate Style Guide
8	       NAVIGATION	STRUCTURE
                                                           7.1 Top level navigation




                 7.2
           Left-hand-side
                menu




8.1	 TOP	LEVEL	NAVIGATION

•    Is constant, applied globally, maintained by the Corporate Web Team and can not be changed
•    Stays constant and can not be changed.
•    Consists of four top level navigation items:
          - About ECU
          - Future Students
          - Research
          - Community

8.2	 LEFT-HAND-SIDE	MENU

•    Menus can only go down three levels deep
•    Every page linked on the menu item must be in the corporate style. Ie. No menu item links can link to an
     external page or website that isn’t on the WebCMS.
•    The menu should contain a minimum of 5 top level links and a maximum of 15.
•    Menu titles should be brief and descriptive. Jargon should not be used. eg. Use email instead of Outlook, Staff
     benefits instead of StaffPlus. If uncertain, contact the Senior Web Developer for assistance.
•    Ensure menu items uses the ‘Caps’ rule. ie. Only the first letter of the first word is to be a cap unless it is a name
     or acronym.
•    The menu style is set up in the WebCMS and can not be changed. For reference:
         - Menu background colour: #d0d1d3
         - Selected background colour: #b30000
         - Expanded sub-menu background colour: #f9f9f9
         - Font colour: #333333; bold
         - Selected sub-menu font colour: #be112d
         - Hover colour; #be112d; underlined
         - Font size: 0.925em
•    Menu items with 2nd level navigation has a right facing arrow at the front. You need to contact the Senior web
     designer to do this as it is specified in the global css style sheet.
•    Menu sections are separated by a dotted white line. You need to contact the Senior Online Design Coordinator
     to do this as it is specified in the global css style sheet.




                                                                                      ECU Web Corporate Style Guide 23
                                                                           This menu indicates that you are in the
                                                                          ‘Welcome to ECU’ section on the ‘About
                                                                            ECU’ page denoted by the expanded
                                                                           2nd level menu and the highlighting of
                                                                            ‘Welcome to ECU’ and ‘About ECU.’




     Menu items with 2nd
     level menu item has
   right facing arrow at the
              front


                                                                                             Menu section
                                                                                              separator




   8.3	 WEB	PATHS	

   •   The web path is the name of the page in the URL
   •   The WebCMS automatically sets up the web path to be the page title of your web page. Eg. The web path for
       About ECU is www.ecu.edu.au/about-ecu
   •   If you change the name of your page, you need to remember to change the web path also. Eg. A page titled
       ‘Copyright and Disclaimer’ has the web path /copyright-and-disclaimer. If the page gets changed to just
       ‘Copyright’. The web path needs to be adjusted to be /copyright
   •   If your page name has an ‘&’ in it, the default web path will display two hyphens. Eg. Fees & charges will have
       the web path /fees--and--charges. The extra hypens need to be removed so the web path becomes fees-
       and-charges. Generally, ‘&’ should not be used in a page name, however, there are some exceptions by the
       Corporate Web Team.




24 ECU Web Corporate Style Guide
9	      WRITING	STYLE
9.1	 CONTACT	INFORMATION

•    First line: H3 heading - Contact area, eg. Directorate. No H3s if no area headings required
•    Second line: H4 heading - Position title
•    Third line: Professional title (if one), first name, last name
•    Fourth line: Location (if required)
•    Fifth line: Telephone: (61 8) XXXX XXXX
•    Sixth line: Facsimile: (61 8) XXXX XXXX (leave out if there is no fax)
•    Seventh line: Email: x.xxx@ecu.edu.au (email address is linked)
•    Eighth line: Web: www.xx.xx.au (leave out if there is no web address)




9.2	 FURTHER	INFORMATION

•    If you need to direct people to further information on a page, the following sentence should be used (on a new
     line): For further information, visit the xxxx website. (xxxx is linked)
•    Do not use double arrows after. Ie. Don’t write, See more >>
•    The linked style of blue text with underline already denotes that it is a link to further information.
•    The linked website should also be placed in a ‘See Also’ box (refer item 6.2.2)

9.3	 LANGUAGE

•    Please refer to Corporate Communication’s (pr@ecu.edu.au) ECU Style Guide for Writing for information
     regarding how we display content and University specific terms. Eg, the way we format phone numbers, email
     addresses etc.




                                                                                 ECU Web Corporate Style Guide 25
EDITH COWAN UNIVERSITY




            APPENDICES
A	       TYPOGRAPHY		
Below is an outline of all text styles. They are pre-determined in the WebCMS and cannot be changed.

Standard font
Arial, Helvetica, sans-serif; Colour: #333333 (unless otherwise stated)
Size: 1em; line height: 1.5em
Links - Colour: #004B85; underline
Links rollover Colour: #BE112D; underline

H1 Headings (section titles):
Bold; Color: #FFFFFF; Size: 2.5em

H2 Headings
Bold; Colour: #BE112D; Size: 1.4em; Letter Spacing: 0.05em

H3 Headings
Bold; Size: 1.1em

H4 Headings
Bold; Size: 1.0em

Horizontal rules
Colour: #C1DAD7; Height: 1px

Other Type styles
.red-type - Colour:#BE112D

Footer
Colour: #FFFFFF, Size: 0.9em, Decoration: dotted underline
Links rollover Colour: #BE112d

Notes:
•    The ‘red-type’ class style should only be used for headings where H1, H2, H3 and H4 is not
     appropriate
•    If it is necessary to emphasis a point, then bolded text may be used. Overuse is discouraged.
•    Italics should only be used when referencing titles or quotations and not to emphasise a point.
•    Underlines are never to be used except for links which is automatically generated when a link is made in the
     WebCMS.
•    Use of any other font style or colours is strictly prohibited




                                                                                 ECU Web Corporate Style Guide 27
   B	 IMAGES
   •   The quality of images on the ECU website must be of a high standard. They must be clear and in focus. It is
       recommended that images are ‘saved for web’ in Photoshop at 70% for maximum quality but smallest file
       size. Inappropriate images of poor quality will be removed and may be replaced at the discretion of the Senior
       Online Design Coordinator.
   •   Images with block colours and no shadows (ie. Logos) should be saved as a GIF file. Photo type images should
       be saved as a JPG or PNG file.
   •   Must be relational to the content and not added for the sake of it.
   •   Must not contain any borders.
   •   Stock photography is discouraged and usage of ECU’s own photos encouraged.
   •   If stock photography must be used, ensure you have the copyright license to use it.
   •   Clip art is strictly forbidden.
   •   Alt tags and captions must be added at the time of uploading the images to the WebCMS.
   •   All images must contain a caption except for thumbnails. Captions should not contain punctuation, should
       clearly describe the image in no more than 10 words.

   B.1	 IMAGE	SIZE
   B.1.1	 Section	header

                                                Min 288px - Max 420px




                                                                                          143px




   B.1.2	 Related/linked	images
                                                     142px




                                                                        Min 115px
                                                                        Max 230px




   B.1.3	 Thumbnails
                                                100px



                                                              80px




28 ECU Web Corporate Style Guide
B.1.4	 Floated	images
                                347px




                                                      Standard
                                                       280px

                                                           Min
                                                         250px
                                                  (only if necessary
                                                     to fit image)




B.1.5	 Landing	page	showcase	thumbnails
                                          420px




                                                           190px




                                                      ECU Web Corporate Style Guide 29
   C	 CUSTOMISATIONS
   C.1	 ECU	HOMEPAGE	SEGMENTATION




                                                                                                                 C.1.4
   C.1.1 Banner                                                                                                Quick links




       C.1.2 News

                                                                                                               C.1.5 Events



        C.1.3
   Seasonal buttons




   C.1.1	 Banner

                                                        654px




                    176px                                                                           192px




   •     Actual image file measures 654 x 192px
   •     White bar at the bottom measures 16px high and allows for image to overlap into it if needed.
   •     May contain 1 - 4 rotating messages as a swf. file
   •     JPG image must also be supplied to display if audience browser does not have flash player installed




30 ECU Web Corporate Style Guide
C.1.2	 News




•   There are always four news items on the homepage which is managed and owned by Corporate
    Communications.
•   The thumbnails are the standard size (refer B.1.3) and measure 100px wide x 80px high. A thumbnail must
    always accompany stories that go on the homeapage.
•   Both the news heading and image links through to the news story in Inside ECU
•   The news title and intro should span 5 lines


C.1.3	 Seasonal	links


                         148px                                            148px

                                                                                         43px
          100px




•   Seasonal link buttons change occasionally as required
•   There may be four seasonal buttons measuring 100px wide x 80px high or three buttons measuring this size
    with two on top of each other measuring 148px wide x 43px high in the last column.



C.1.4	 Quick	links
•   These links are constant and consist of:
       - Student & Staff Portal
       - Got a Question? Ask Us
       - Apply Online Now
       - Virtual Information Pack

C.1.5	 Events
•   The events section is owned and edited by Corporate Communications
•   Should contain 3 events at a time
•   Each event is separated by a horizontal rule
•   Day, date then location follows event title




                                                                             ECU Web Corporate Style Guide 31
   C.2	 ECU	HOMEPAGE	TYPOGRAPHY


                                                                                            C.2.2
                                                                                          Quick links




       C.2.1 News

                                                                                         C.2.3 Events




   C.2.1	 News
   •    Headings - Bold; Colour: #BE112D; Size: 0.95em; Rollover decoration: underline
   •    Summary - Colour: #333333; Size: 0.9em

   C.2.2	 Quick	links
   •    Bold; Size: 1.0em; Colour: #FFFFFF; Rollover decoration: underline

   C.2.3	 Events
   •    Heading (h2) - Colour #FFFFFF; Size: 2em
   •    Title links - Colour: #d6aa40; Size: 0.85em; Decoration: dotted underline
   •    Summary - Colour: #FFFFFF; Size 0.85em




32 ECU Web Corporate Style Guide

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:28
posted:7/13/2011
language:English
pages:32