Branding
91热爆 sites are fully responsive. As a result, the branding for them needs to be too. When designing branding, you should consider three sizes: mobile, tablet and desktop.
Platform | Screen Width (px) |
---|---|
Mobile | 320 to 599 (from 240px to 320px it defaults to colours only, no images) |
Tablet | 600 to 1007 |
Desktop | >1008 |
You will need to provide:
- Three images for background (if in your design)
- Three images for logo (if in your design)
- Hex codes for page colours
Image Specifications
Background image
All background images must be either JPG or PNG.
You should save the images with a web profile. You can do this by selecting 'Save for Web & Devices' or similar. If you don't save this way, the colours will subtly change.
You need to provide three sizes:
Mobile: 600x104px
This is a banner that appears behind the logo or title.
Tablet: 1008x800+px
This image appears behind the main body of the page in tablet view.
There is no designated height as it should be as long as it needs to be to become a solid colour but it must be more than 800px and ideally no larger than 1200px.
If there is no tablet-specific design, we can use the desktop version although please bear in mind the above dimensions when designing the desktop branding.
Desktop: 1680x800+px
This image appears behind the main body of the page in desktop view.
There is no designated height as it should be as long as it needs to be to become a solid colour but it must be more than 800px and ideally no larger than 1200px.
Both tablet and desktop images must fade to a solid colour. You need to provide the hex code for the colour they fade to.
Logo
All logo files must be PNG with a transparent background.
Mobile: 200x40px
Width: We recommend 200px but you can use any width that is readable on a 240px screen.
Height: This should be 40px.
Tablet: 300px x banner height – logo offset from the top
Width: This is flexible but the design must fit at 600px with all the page furniture (e.g. network logos).
Height: 70px or 172px. The logo must fit inside the one being used and have some padding.
Desktop: 300px x banner height – logo offset from the top
Width: This is flexible but the design must work at 1008px with all the page furniture (e.g. network logos, radio on air panel etc.)
Height: 70px or 172px. The logo must fit inside the one being used and have some padding.
Hex Codes
As well as adding a logo and background image, we can control the colouring of the page. For this we need colour hex codes. .
We need the following:
- Body background colour
- Page background colour (this is the colour your background image has faded to)
- Subtle colour
- Page text colour
- Page link colour
- Page link hover colour
- Highlight colour
- Text colour
- Link colour
- Link hover colour
- Secondary colour
- Text colour
- Link colour
- Link hover colour
- Base colour of masthead stripe
- Masthead text colour
These colours need to be accessible. We use AA Standard. You can check your colours are accessible using a contrast checker like .
Branding Tool
All branding must be added to the Branding tool. You must then add the branding ID into the tool for your pages.
(91热爆 desktop certificate required)
Branding Example Pages
Quick Dimension Guide
Asset type | Size (Width x Height in Pixels) | Format |
---|---|---|
Mobile: Banner | 600 x 104 | PNG/JPG |
Mobile: Logo | 200 x 40 | PNG |
Tablet: Banner | 1008 x 800+ (The height needs to be however long it takes to become a solid colour, but ideally no larger than 1200) | PNG/JPG |
Tablet: Logo | 300 x height (max is masthead height) | PNG |
Desktop: Banner | 1680 x 800+ (The height needs to be however long it takes to become a solid colour, but ideally no larger than 1200) | PNG/JPG |
Desktop: Logo | 300 x height (max is masthead height) | PNG |
-
/Events branding example page
How branding behaves on a /events page.
-
/Programmes branding example page
How branding behaves on a /programmes page.
-
Article page branding example page
How branding behaves on an article page.