Page 1

Visual language 1.0 —design guidelines for the widening of page templates across bbc.co.uk

BBC.co.uk global page grid & layout. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

1


What is this? —and, why are we doing it? We know that we need to move on from our current 770 pixel wide page templates. The web’s evolved and we’re still crouching in the left corner of the browser. This document shows the newly proposed design grid and page layout guidelines to be used across the site. A full new technical architecture solution for the site is currently still in development, but there’s much that can be done in the meantime to improve the site’s overall user experience. We’ve got a great opportunity now to create new consistency, modernise its appearance, remove outdated Barley elements, and try out and iterate new template ideas which can then be fed as requirements into the full system. Some elements like the new masthead - will continue to evolve as we develop this architecture, and so are marked as ‘interim’. Making this change now across our new builds and redesigns will also make it easier to transfer these sites into the full new system when its complete. Sites currently in Barley using these new guidelines will be built on an interim CSS-based technical template (an upgraded version of ‘Barlesque’ - the template behind BBC iPlayer).

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

2


Who approves this? These guidelines have been defined in collaboration with user experience teams across the BBC. Approval for this proposal (and any subsequent alterations and/or additions) sits with the User Experience Cluster and the Head of User Experience & Design. Any feedback or suggestions should be raised with your representative in this Cluster and also Julie Dodd and Matt Coyne.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

3


The template —a visual framework The new wider, centred page template and its associated guidelines create a visual framework for starting to make bbc.co.uk more consistent. The following pages outline the new structure, including a design grid that affords flexible layout options and updated global elements.

Why grids? There are many exponents of grid based designs on the web—Khoi Vinh, Art Director at NYTimes.com (subtraction.com) and Mark Boulton, freelance designer (markboulton.co.uk) to name a couple of leading industry figures whose blog posts on the subject are well worth reading for future reference.

There are also new guidelines for sizes and placement of images, the embedded media player and advertising.

Oh Yeeaahh!

design Grid example

grid applied to times online

http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php

Nudge your elements

http://www.subtraction.com/archives/2007/0606_nudge_your_e.php

Five simple steps to designing grid systems

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_ designing_grid_systems_part_1/

Khoi Vinh explains the benefits of using grids in design

Grid applied to subtraction.com

“The way I see it, there are two levels of benefits to grid usage: the first is the superficial imparting of order, in which a grid helps the entirety of a layout fall together with enhanced cohesion. You use a grid when you want things to look tidy. For me, though, I prefer the second, more subtle level, in which the grid is a crucial tool in a larger order. The grid helps extend the logic of an overarching solution to the most tactical levels, subtly communicating to the audience that they are experiencing a considered environment, where information, its presentation and its behavior are logical, consistent and reliable”

simple example of navigation applied to a grid

Khoi Vinh http://www.subtraction.com/archives/2007/0606_nudge_your_e.php

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

4


Page layout —the stuff that surrounds us White padding 10px each side (994px) Content padding 14px each side (974px)

All new BBC pages are based around a design grid with a standardised surrounding border.

Content/grid area 946px

The design grid constrains your content area. No content should be placed outside of the design grid. The first border to the design grid is 14 pixels either side and should be the page background colour. This gives a total of 974 pixels in which the page sits. There is a further 10 pixel white margin either side of this to frame the page, and then an outer border covering the rest of the page. You MUST design your page to be fixed width (NOT stretchy) and centred within the browser. please note: The 10 pixel margin will always be set to white. The outer borders will always be set to #EAEAEA.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

5


Design grid 12/24 columns - 946px

The design grid consists of 12 columns, each 66 pixels in width with a 14 pixel gutter spacing between them. This gives a total content area of 946 pixels.

66px column

14px gutter

26px sub-column

An underlying 24 sub columns of 26 px can also be employed to aid in your design in more complex layouts. The number of columns chosen enable the use of a variety of super column structures to allow for different page types (see next page). The grid sets the bounds for content only. The structure of the areas outside the content are illustrated on the following pages.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

6


Flexible layouts —something for everyone The grid is flexible enough to accommodate a variety of super column layouts and enables ad placement in the right hand column for international visitors. Common layouts include 2 and 3 super columns with left hand navigation. When using a super column for left hand local navigation you MUST always use 2 columns. This creates a consistent 146px for all left hand local navigation. A combination of super columns could be used to create more complex structures. See bottom right for just one possible example of this.

2 super column layout with left hand navigation (story page)

3 super column layout with left hand navigation

3 super column layout

Multi super column layout

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

7


Global masthead Text only | Help

Search

Text only | Help Home

Sport Relief

New BBC iPlayer

Rugby 6 Nations

BBC iPlayer

Health

Music

Sport

CBBC

History

News

TV

CBeebies

Learning

Radio

Weather

Food

Local & Nations

Science & Nature

A whole lot more

This is the first release of a new global masthead for the whole of the BBC site. It is an interim solution which will continue to evolve and be iterated in line with work on the site-wide tech refresh. The specifics of the masthead, including international, languages and children’s variations are documented in a separate ‘Global Masthead’ document. As an overview the masthead includes the BBC masterbrand, Text only & Help links, Search and an ‘Explore the BBC’ button which has a menu containing 17 static (including Home) and 3 temporal links. The menu colour (button and links) can be changed by using the provided palette of colours ONLY. Please make sure you explicitly specify the menu colour to your development team.

Search

Explore the BBC

Explore the BBC

WARNING The current version of Adobe’s Flash player creates a technical issue where Flash content will overlay HTML content including drop down menus and lightboxes. The menu has been designed to appear as high up the screen as possible to help avoid this.

Notes: 1. The design assets that accompany this document contain Adobe Illustrator and Photoshop files of the current Global Visual Language to form the basis of your design. All assets including the page structure, the grid, global masthead and footer are provided. You MUST not recreate the files.

You MUST NOT place any Flash content above 118px. This will ensure the menu is not overlayed by it [Flash].

2. Current guidelines state that pages must be readable when the font size is increased by two steps in our supported browsers. (http://www.bbc.co.uk/guidelines/newmedia/technical/xhtml_ integrity.shtml#css)

The menu expands vertically on text resize. Site designs must proportionally expand (vertically) to ensure that Flash content does not display above 140px.

3. The measurements of 118px and 140px are based on default text size and +2 text resizing in Firefox (IE resizes in smaller increments) respectively and will ensure there the menu is not cut off within all our supported browsers.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

8


Local masthead If you have a local masthead you should extend it outside the edge of the content grid to the inside edge of the white page border. There is a 1px keyline (#cccccc) between the global masthead and the local masthead. This is part of the global masthead and does not need to be incorporated into a site’s design.

Notes: 1. The illustration below is only an example. The local masthead does not have to be a strip of colour (see appendix 2 for current BBC site examples). 2. If your local masthead is a strip of colour it MUST NOT be deeper than 70px.

Content MUST NOT be placed outside of the grid. Text only | Help

1px keyline #cccccc

Search

Explore the BBC

Local Masthead Outset by 14px

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

9


Footer —a meaningful end The Barlesque template includes a simple standard footer for use at the bottom of all pages. There are 7 global BBC links (with an additional ‘Advertising’ link on international facing sites) on 2 columns, plus an optional column of site specific links (maximum of 4).

© MMVII The BBC is not responsible for the content of external internet sites

About the BBC

Site specific

BBC Help

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

Standard footer

There are 3 colourways for the footer. The standard is grey (#4D4D4D) and should be used as much as possible. The exceptions are a black version and a white version which can be used as an alternative to the grey where it [the grey] does not suit the design of the page.

© MMVII The BBC is not responsible for the content of external internet sites

Notes: 1. ‘Send to a friend’ is still a supported tool but should be placed in your content area

© MMVII The BBC is not responsible for the content of external internet sites

Alternative footers

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

10


And what about content? We now have a structure for the page, but to create further useful consistency across sites there are other elements we need guidelines for. Certain attributes of content elements need to adhere to the guidelines which follow. These include indentation, images, the embedded media player, and advertising. Each of which will be outlined on the following pages. Using these guidelines together with the structures outlined on previous pages will create a visual framework that affords consistency yet flexibility across bbc.co.uk.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

11


The fold —where is it?

Browser support / Chrome / 1024x768 resolution

The argument that ‘users scroll’ has been used to refute the need to worry about the ‘fold’ in a browser window. Equally user testing has shown that users can experience problems when faced with finding specific information that is not visible in the browser window.

Firefox Internet Explorer Opera Safari

Using current browsers/operating systems we can define a maximum and recommended depth for content that would be visible to the vast majority of users (see illustration, right). Internet Explorer 7 on Windows XP has the smallest depth of visible content of 617px. The recommendation is to keep all significant content or navigation within 600px to create a comfortable viewing area for the user. Whether to adhere to the fold depends on the type of page and the design of the page. E.g., a user can expect a news article to be scrolled, but would not expect to have navigational elements positioned below the fold. Ultimately it is up to designers and design managers to make the best decision for each page and product, based on the audience and page type and function

600px (the ‘fold’) 617px (IE7 XP)

The fold

However, there is a requirement with regard to advertising. When using the 300x250px medium rectangle advert size, at least 50% of the advert MUST be displayed above the fold.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

12


example of a This is an navigation Left hand example a Note the of 10px Left text hand indentnavigation

10 px text super column Dolor sit amet, consectetuer adipiscing elit. Etiam inset. rhoncus gravida tortor. Lorem ipsum

In hac habitasse platea dictumst. Nunc turpis quam, blandit quis, Lorem ipsum scelerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. dis parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv Note the5px 10px In hac habitasse platea dictumst. Nunc turpis quam, blandit quis, and the massa, auctor et, auctor viverra. scelerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis text indent indent used for dis parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv Lorem ipsum dolor sit amet, consectetuer and the 5px the separators massa, auctor et, auctor viverra. adipiscing elit. Etiam rhoncus gravida tortor. In hac indent used for This is not habitasse platea dictumst. Nunc turpis quam, Lorem ipsum dolor sit amet, consectetuer blandit quis, scelerisque id, aliquet nec, odio. Cum the separators how it adipiscing elit. Etiam rhoncus gravida tortor. In hac sociis natoque penatibus et magnis. This is not habitasse platea dictumst. Nunc turpis quam, should be done blandit quis, scelerisque id, aliquet nec, odio. Cum how it it Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus but how sociis natoque penatibus et magnis. When indentation of images and textgravida are required tortor. In hac habitasse platea dictumst. Nunc turpis quam, should be done could be (within boxes) usedone a 10px indent fromblandit the edge of scelerisque the quis, id, aliquet nec, odio. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus but how it penatibus et magnis dis parturient montes, nascetur ridiculus mus. box. In addition 10px between imagesgravida and text should tortor. In hac habitasse platea dictumst. Nunc turpis quam, Aliquam semkjhgkjhv massa, auctor et, auctor viverra. Nunc turpis quam, could be done orem ipsum also be employed. blandit quis, scelerisque id, aliquet nec, odio. Cum sociis natoque blandit quis, scelerisque id, aliquet nec, odio. Dolor sit amet, olor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravidaettortor. penatibus magnis dis parturient montes, nascetur ridiculusadipiscing mus. consectetuer n hac habitasse platea dictumst. Nunc turpis quam, blandit quis, Aliquam massa, auctor et, auctor elit. viverra. Nunc turpis quam, Etiam rhoncus When content is not in boxes, text and imagessemkjhgkjhv can be celerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis blandit quis, scelerisque id, aliquet nec, odio. gravida tortor. In hac aligned to the grid or indented to 10px. s parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv habitasse platea turpis. massa, auctor et, auctor viverra.

Text/object indentation

10 px text super column inset.

Lorem ipsum dolor sit amet, consectetuer Notes: adipiscing elit. Etiamand rhoncus gravida 1. This is a recommendation not a fixed rule. tortor. In hac habitasse platea dictumst. Nunc turpis quam, blandit quis, scelerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis.

orem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus ravida tortor. In hac habitasse platea dictumst. Nunc turpis quam, andit quis, scelerisque id, aliquet nec, odio. Cum sociis natoque enatibus et magnis dis parturient montes, nascetur ridiculus mus. liquam semkjhgkjhv massa, auctor et, auctor viverra. Nunc turpis quam, andit quis, scelerisque id, aliquet nec, odio.

Lorem ipsum

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse platea dictumst. Indentation when content is in a box

Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse platea turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse platea dictumst.

Lorem ipsum

Dolor sit amet, Lorem ipsum consectetuer adipiscing

elit. Etiam rhoncus Dolor sit amet, gravida tortor. In hac consectetuer adipiscing habitasse platea turpis. elit. Etiam rhoncus gravida tortor. In hac Cum sociis natoque penatibus et magnis dis habitasse platea turpis. parturient montes, nascetur ridiculus mus. Lorem ipsum Dolor sit amet, consectetuer Cum sociis natoque penatibus et magnis dis adipiscing elit. Etiam rhoncus gravida tortor. In parturient montes, nascetur ridiculus mus. hac habitasse platea dictumst. Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse platea dictumst.

Lorem ipsum Dolor sit amet, Lorem ipsum consectetuer adipiscing

elit. Etiam rhoncus Dolor sit amet, gravida tortor. In hac consectetuer adipiscing habitasse platea turpis. elit. Etiam rhoncus gravida tortor. In hac Cum sociis natoque penatibus et magnis disturpis. habitasse platea parturient montes, nascetur ridiculus mus. Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis Etiam rhoncus gravida tortor. In hac habitasse parturient montes, nascetur ridiculus mus. Lorem platea dictumst. ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse Aligned the grid when content is not in a box platea to dictumst.

Lorem ipsum

Dolor sit amet, Lorem ipsum consectetuer adipiscing

elit. Etiam rhoncus Dolor sit amet, gravida tortor. In hac consectetuer adipiscing habitasse platea turpis. elit. Etiam rhoncus gravida tortor. In hac Cum sociis natoque penatibus et magnis dis habitasse platea turpis. parturient montes, nascetur ridiculus mus. Lorem ipsum Dolor sit amet, consectetuer Cum sociis natoque penatibus et magnis dis adipiscing elit. Etiam rhoncus gravida tortor. In parturient montes, nascetur ridiculus mus. hac habitasse platea dictumst. Lorem ipsum Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse platea dictumst. Indentation when content is not in a box

Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In hac habitasse plateaBBC.co.uk turpis. global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008 Cum sociis natoque penatibus et magnis dis

13


Images

Image sizes

Based on a 16:9 ratio. (ADJUST DEPTH TO SUIT SQUARE AND PORTRAIT IMAGE RATIOS)

—sizes and ratios

1

Indented Flush

Full story column width

2

Right hand column full width

446x251 466x262

Images MUST work with the grid and help to create order within the page layout. You should use an image ratio of 16:9 or 4:3. Aligning with the grid then gives us the five common sizes illustrated on the right (heights based on a 16:9 ratio). Images should also be able to pad against the column edges if it suits the design. The following dimensions apply to a 16:9 image. IMAGE SIZES Indented

Flush

1. 446 x 251px 2. 286 x 161px 3. 206 x 116px 4. 126 x 71px 5. 86 x 48px 6. 46 x 26px

1. 466 x 262px 2. 306 x 172px 3. 226 x 127px 4. 146 x 82px 5. 106 x 60px 6. 66 x 37px

Where 16:9 and 4:3 are not appropriate square and portrait (8:10) images can be used. Simply fit to the grid using the relevant widths above with the height changing proportionately. Notes: 1. Does not apply to background images 2. Does not apply to image galleries

Indented Flush

Indented Flush

Indented Flush

Indented Flush

3

1

4

1/3

5

Lead story column width

/2 story column width

206x116 226x127

story column width

126x71 146x82

86x48 106x60

In a panel

Not panelled

Est hendrerit vehicula. Cras suscipit pede sit amet est. Nam id erat. Quisque eget mi. Duis a augue eleifend .

6

Indented Flush

286x161 306x172

Aliquam a mi in est hendrerit vehicula. Cras suscipit pede sit amet est. Nam id erat. Quisque eget mi. Duis a

Thumbnail

46x26 66x37

recommended image sizes

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

14


Interim embedded media player sizes —one player, three sizes The Embedded Media Player [EMP] currently uses a codec which is not fully scalable and as such specific sizes need to be built.

512 x 288 (323h including controls)

The video sizes that are available to you are 512x288, 448x252 and 256x144. 448x252 is the recommended size for use within story pages (left hand nav + 2 super columns). Future iterations of the EMP will have greater flexibility in sizes and thus will fit better into pages. Notes: 1. The EMP video controls add an extra 35 pixels to the height. 2. The 400x225 size is now deprecated and replaced by 448x252. 3. An additional size of 384x216 is also available but restricted to sites with the Barley page layout. 4. See bbc.co.uk/emp for more information.

448 x 252 (287h including controls)

256 x 144 (179h including controls)

Current EMP sizes

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

15


Advertising —size and placement Advertising on bbc.co.uk will only be visible to visitors from outside of the UK. Current implementation is only on a small number of site areas but may be extended. When the page is viewed by a UK facing audience the ad will not display. In it’s place the content will either move up into the space (collapsible columns), or alternate content of the same column width will be displayed.

ADVERTISEMENT

Text only | Help

Explore the BBC

Search

ADVERTISEMENT

ADVERTISEMENT

There are four ad sizes and respective placements. 1. Leaderboard (728x90) above the global navigation within the masthead and is controlled by Barlesque. 2. MPU (300x250) in the right hand column, inset by 3px (centred), 14px padding top and bottom. 3. Button (120x240) in the left hand navigation, inset by 13px (centred), 14px padding top and bottom. 4. Full banner (468x60) in the footer, aligned left, above the BBC logo. Controlled by Barlesque. ADVERTISEMENT

All ads will automatically display the supporting text ‘ADVERTISEMENT’ (10pt Verdana, caps) above or below the advert (as illustrated, right).

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

© MMVII The BBC is not responsible for the content of external internet sites

Notes: 1. The rules and standards around use of these ads are TBD and this document will be updated accordingly. 2. At least 50% of the MPU MUST be above the fold. 3. The button is not mandatory on all sites (TBD). 4. See appendix 1 for examples of collapsible columns.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

16


Putting it together The design to the right is purely an exercise to illustrate how we can pull all the elements in this document together on one page.

Text only | Help

Explore the BBC

Search

Local Masthead Vivamus volutpat Nulla eleifend

Pellentesque orci mauris posuere Email this to a friend

SEE ALSO Sed vehicula ipsum ut mauris in adipiscing. 09 Aug 07 | Curabitur ante Curabitur tincidunt pede vestibulum tempus 14 May 07 | Curabitur ante Fusce sodales ornare justo vivamus vitae mi 03 Oct 06 | Curabitur ante Donec dolor nisi, consequat id, posuere quis 14 Jul 06 | Curabitur ante Morbi quis est nam ac ante ornare justo 27 Sep 06 | Curabitur ante

Print

Proin interdum Nonummy congue Integer Libero mauris Vestibulum nulla

Embedded Media Player optimal 400x225

Aliquam felis Nec justo Pellentesque orci Quis turpis Nullam egestas Dignissim diam Duis sed justo

Quisque aliquam sapien non odio.

HEADER Nunc venenatis arcu

HEADER In porta urna Ut elit praesent Leo sed arcu Porta culis felis Ac massa

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Aliquam a mi in est hendrerit vehicula. Cras suscipit pede sit amet est. Nam id erat. Quisque eget mi. Duis a augue eleifend urna blandit imperdiet. Duis mattis turpis eu nulla. Pellentesque nec augue vel leo feugiat dignissim. Sed urna sapien, mollis eget, suscipit a, placerat. Eu, tellus. Pellentesque fermentum. Nunc sapien. Etiam sed lectus. Nulla facilisi. Mauris sem sem, aliquet non, porttitor id, porta vitae, ipsum. Sed urna sapien, mollis eget, suscipit.

Advertisement Medium rectangle 300 x 250px

Image 206 width RELATED INTERNET LINKS Nulla condimentum nonummy nunc. Lorem ipsum dolor. Nulla condimentum nonummy nunc. Lorem ipsum dolor. Citation

Donec fermentum dolor nec arcu Aliquet The BBC is not responsible for the content of external internet sites

Etiam imperdiet lacus sit amet dui. Nam eget metus. Nam est. Fusce pretium tortor vitae est porta lobortis. Praesent porta facilisis dui. Praesent dui massa. Ut venenatis lorem eu sapien. Nulla vitae lorem vel orci mattis imperdiet. Maecenas fermentum tortor sed leo. Etiam in lorem a tellus congue

Š MMVII The BBC is not responsible for the content of external internet sites

About the BBC

Site specific

BBC Help

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

17


Over to you This document aspires to save you time and give you more creative freedom.

A quick recap. Design to the grid

These rules and guidelines if adhered to will give a visual framework that affords consistency across bbc.co.uk and yet still allow design teams to inject personality into their site’s design.

946 wide, 12 columns, 66px wide with 14 pixel gutter

Design for a centred fixed width page Stick to the page layout

14px content border / 10px white border / outer border

Use the standard footer & global masthead Indent text & objects in boxes by 10px Check object sizes

Images, embedded media player & advertising

Ensure Flash content is NOT higher than 140 px on the page

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

18


News Front Page

News Front PageSEE ALSO

Euro gamers get hands on Halo 3 Email this to a friend

Appendix 1

Africa

Americas

Americas

Asia-Pacific

Asia-Pacific

Europe

Europe

Middle East

Middle East

South Asia

South Asia

UK

UK

Business

Business

Health

Health

—collapsible columns Science/Nature

SHARE

01:30 / 30:00

Technology

INTERACT

What exactly is a next generation game? 09 Aug 07 | Technology Halo 3 beta feeds hype machine 14 May 07 | Technology Halo universe expands as fans wait 03 Oct 06 | Technology Halo aims for epic end to trilogy 14 Jul 06 | Technology Director Jackson signs Xbox deal 27 Sep 06 | Technology

ADVERTISEMENT

RELATED INTERNET LINKS Eurogamer - Halo 3 review Bungie

Science/Nature

The BBC is not responsible for the content of external internet sites

SHARE

01:30 / 30:00

Technology

Ads will Entertainment be shown on some sites to international users Entertainment Gamers across Europe got their hands on Halo 3 at midnight on Tuesday, one of the most anticipated and heavily marketed titles Also in the news Also in the news of the site. When those pages are viewed by a UK facing in history. RESOURCES audienceRESOURCES the ad will not display. Video and Audio

SEE ALSO

What exactly is a next generation game? Email this to a friend Print 09 Aug 07 | Technology Halo 3 beta feeds hype machine 14 May 07 | Technology Halo universe expands as fans wait 03 Oct 06 | Technology Halo aims for epic end to trilogy 14 Jul 06 | Technology Director Jackson signs Xbox deal 27 Sep 06 | Technology

Print

Africa

Euro gamers get hands on Halo 3

Gamers across Europe got their hands on Halo 3 at midnight on Tuesday, one of the most anticipated and heavily marketed titles in history.

Video and Audio Are you a fan of the Halo series of games? Will you be getting Halo 3?

Tell us why you're a fan. In it’s place content will either move up into the Have the Your Say Have Your Say In Pictures In Pictures Youor can alternate also send us acontent picture of yourself a You can also send us a picture of yourself from inside Halo 3. Grab a space (collapsible columns), of thefrom inside Halo 3. Grab screenshot of yourself and then email us the link using the form below:Profiles RELATED INTERNET screenshot of yourself and then email us the link using the form below: LINKS Country Profiles Country same column width will appear in it’s place. Eurogamer Halo 3 review Special Reports Special Reports Click here to see terms and conditions

News feeds

ADVERT

Name: SPORT TOP TECHNOLOGY STORIES

SPORT Email address:

Email address: Abuse fight targets social sites WEATHER Games event highlights positives On this Day Microsoft to carryand outCountry: EU ruling Town

Town and Country:

Editors Blog

Editors Text only |Blog Help Phone number (optional):

MOST POPULAR STORIES NOW MOST EMAILED 1. 2. 3. 4. 5.

MOST READ

Monkey attack kills Delhi leader JK Rowling outs Dumbledore as gay Union ratifies mail dispute deal When work becomes a game Oceans are 'soaking up less CO2'

Search

Explore the BBC

Search 1. Monkey attack kills Delhi leader 2. JK Rowling outs Dumbledore as gay 3. Union ratifies mail dispute deal without leaderboard ad 4. When work becomes a game The BBC may edit your comments and cannot guarantee that all 5. Oceans are 'soaking CO2' emails willup beless published.

Explore the BBC

MOST POPULAR STORIES NOW Comments:

Comments: Text only | Help

Masthead with and

The BBC may edit your comments and cannot guarantee that all emails will be published. SUBMIT

News feeds

Most popular now, in detail

News feeds Phone number (optional):

CLEAR

Email this to a friend

Bookmark with

MOST EMAILED

MOST READ

SUBMIT

CLEAR

Most popular now, in detail ADVERT

On this Day

At no time should you content endanger The BBC is not responsible for the of yourself or others, take any unnecessary risks or infringe external internet sites any laws.

RELATED BBC SITES

Name: WEATHER

Bungie

News feeds

ADVERT

RELATED BBC SITES

RIGHT HAND COLUMN shown with and Ad Click here to without see terms andMPU conditions

At no time should you endanger yourself or others, take any unnecessary risks or infringe any laws.

Abuse fight targets social sites Games event highlights positives Microsoft to carry out EU ruling

Are you a fan of the Halo series of games? Will you be getting Halo 3?

INTERACT

Tell us why you're a fan.

TOP TECHNOLOGY STORIES

Print

Email this to a friend

© MMVII

Bookmark with

The BBC is not responsible for the content of external internet sites

© MMVII The BBC is not responsible for the content of external internet sites

Print

About the BBC

Site specific

BBC Help

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Contact Us

Upto a maximum

Jobs

Terms of Use

of Four?

Advertising

Privacy & Cookies

Footer with and without full banner ad

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

19


Appendix 2 —sample local mastheads News

Radio 1Xtra

Sport

Radio 3

I’d Do Anything

Gardeners’ World

Doctor Who

Thread

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

20


BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 2:12 PM, 15 May 2008

21

Test oplage  

bla die bla die bla