Website Banner Guidelines - Revision history

Marc.maier at 22:26, 8 October 2015

2015-10-08T22:26:15Z

Marc.maier at 18:43, 8 October 2015

2015-10-08T18:43:13Z

Marc.maier: /* Banner specification and quality standards */

2015-10-08T18:41:53Z

‎Banner specification and quality standards

Marc.maier: /* Facebook Page Cover */

2015-04-28T12:50:41Z

‎Facebook Page Cover

Marc.maier at 12:49, 28 April 2015

2015-04-28T12:49:51Z

Marc.maier at 11:10, 28 April 2015

2015-04-28T11:10:58Z

Marc.maier at 11:08, 28 April 2015

2015-04-28T11:08:35Z

Marc.maier at 10:59, 28 April 2015

2015-04-28T10:59:01Z

Marc.maier: /* Banner specification and quality standards */

2015-04-28T10:46:57Z

‎Banner specification and quality standards

Marc.maier at 10:49, 31 January 2015

2015-01-31T10:49:14Z

@@ Line 8: / Line 8: @@
 == Website Page Banner ==
 *Height: 475 pixels
-*Width: 1280 pixels
+*Size: less than 150 kilobytes, ideally about 100 kilobytes
 *Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if abstract)
 == Website Page Banner Thumbnail ==
 *Height: 137 pixels
-*Width: 369 pixels
+*Size: less than 50 kilobytes, ideally about 35 kilobytes
 *Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if abstract)
 == Facebook/Twitter Page Cover ==
 *Height: 632 pixels
 *Size: less than 2 MB
 *Format: [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG]

@@ Line 19: / Line 19: @@
 *Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if abstract)
-== Facebook Page Cover ==
+== Facebook/Twitter Page Cover ==
-*Height: 316 pixels
+*Height: 632 pixels
-*Width: 851 pixels
+*Width: 1702 pixels
 *Size: less than 2 MB
 *Format: [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG]

@@ Line 7: / Line 7: @@
 = Banner specification and quality standards =
-== Website Rotator Banner ==
+== Website Page Banner ==
-*Height: 350 pixels
+*Height: 475 pixels
-*Width: 720 pixels
+*Width: 1280 pixels
-*Size: 50-100 kilobytes
+*Size: 150 kilobytes
-*Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if text heavy)
+*Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if abstract)
-== Website Page Banner ==
+== Website Page Banner Thumbnail ==
-*Height: 234 pixels
+*Height: 137 pixels
-*Width: 714 pixels
+*Width: 369 pixels
-*Size: 50-100 kilobytes
+*Size: 50 kilobytes
-*Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if text heavy)
+*Format: [http://en.wikipedia.org/wiki/JPEG JPEG] (if photo heavy) or [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] (if abstract)
 == Facebook Page Cover ==

@@ Line 26: / Line 26: @@
 *Format: [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG]
 As the banners are so prominent on the front page,''' every banner should look professional and friendly. Please review the [[Branding_Guidelines|Branding Guidelines]] if you haven't done so yet.'''
 In addition, it should be easy to read the banner in the time that the banner is shown on the webpage which is only a few seconds. Here are some dos and don'ts:
-*Do use a professionally created picture. If you don't have one, consider buying one from a stock sitefor a small fee (typically a few pounds). Click here for list of [[Main_Page#Photo_Stock_Accuounts|photo stock accounts].
+*Do use a professionally created picture. If you don't have one, consider buying one from a stock sitefor a small fee (typically a few pounds). Click here for list of [[Main_Page#Photo_Stock_Accuounts|photo stock accounts]].
 *Do make sure that the banner picture fills the whole banner space, not only part of it.
 *Do include a title in the banner with a large font. Also, if this is an event, please include event details on the banner. Visitors to the website should be able to get all key details from the banner.

@@ Line 26: / Line 26: @@
 *Format: [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG]
-As the banners are so prominent on the front page,''' every banner should look professional and friendly. Please review the [http://wiki.ccchislehurst.org/index.php?title=Branding_Guidelines|Branding Guidelines] if you haven't done so yet.'''
+As the banners are so prominent on the front page,''' every banner should look professional and friendly. Please review the [[Branding_Guidelines|Branding Guidelines]] if you haven't done so yet.'''
 In addition, it should be easy to read the banner in the time that the banner is shown on the webpage which is only a few seconds. Here are some dos and don'ts:

← Older revision		Revision as of 11:08, 28 April 2015
Line 1:		Line 1:
−	If you would like to promote your event, course, activity, etc. on the front page of the web site, please email the [mailto:~~websiteteam~~@~~christchurchchislehurst~~.org ~~Website Team~~] with ~~a draft banner and additional~~ relevant information that will be required depending on the type (see [[Website Promotion Guidelines\|Promotion Guidelines]]). ~~However,~~ the ~~Website Team don't decide which banners will appear on the front page, '''this will normally be decided in the Monday staff meetings'''~~.	+	If you would like to promote your event, course, activity, etc. on the front page of the web site, please email the [mailto:publicity@ccchislehurst.org PublicityTeam] with relevant relevant information that will be required depending on the type (see [[Website Promotion Guidelines\|Promotion Guidelines]]). The process process is documentated [https://ccchislehurst.sharepoint.com/_layouts/15/guestaccess.aspx?guestaccesstoken=bY5wDSTCrCZepU7K109zKuX6CV31bq8mWXtA7Mnkvko%3d&docid=0fe03cdce2e1c45b3ad979f35a32aca9f here] and the roles and responsibilities are described [https://ccchislehurst.sharepoint.com/_layouts/15/WopiFrame.aspx?sourcedoc=%7B1BA53C79-9FA1-4E36-B47B-B8A046300E15%7D&file=Publicity%20Roles%20and%20Responsiblities%20(Shared%20via%20link).docx&action=default here].

	Here is an example banner:		Here is an example banner:

@@ Line 4: / Line 4: @@
 [[File:Banner-example.png]]
 = Banner specification and quality standards =
@@ Line 30: / Line 28: @@
 As the banners are so prominent on the front page,''' every banner should look professional and friendly'''. In addition, it should be easy to read the banner in the time that the banner is shown on the webpage which is only a few seconds. Here are some dos and don'ts:
-*Do use a professionally created picture. If you don't have one, consider buying one from stock site, such as [http://www.istockphoto.com/ iStock Photo] for a small fee (typically a few pounds).
+*Do use a professionally created picture. If you don't have one, consider buying one from a stock sitefor a small fee (typically a few pounds). Click here for list of [[Main_Page#Photo_Stock_Accuounts|photo stock accounts].
 *Do make sure that the banner picture fills the whole banner space, not only part of it.
 *Do include a title in the banner with a large font. Also, if this is an event, please include event details on the banner. Visitors to the website should be able to get all key details from the banner.

@@ Line 37: / Line 37: @@
 *Don't use low constrast writing which may be difficult to read.
 *Don't use stylised clipart.
-*Don't ''Click here for more information''.
+*Don't add ''Click here for more information''.
-*Don't load the banner with text. Remember that it will only be visible for a few seconds.
+*Don't add a lot of text to the banner because it will difficult to read and search engines can't read it.
 *Don't reduce the size of the banner so much that compression artefacts are clearly visible in  [http://en.wikipedia.org/wiki/JPEG JPEG] image files. Please note that [http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG] image file never show compression artefacts.