Anda di halaman 1dari 20

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 1:21 PM, 08 April 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 1:21 PM, 08 April 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 subsquent 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 1:21 PM, 08 April 2008 3
The template
—a visual framework

design Grid
The new wider, centred page template and its associated Why grids? example
guidelines create a visual framework for starting to make There are many exponents of grid based designs on
bbc.co.uk more consistent. the web—Khoi Vinh, Art Director at NYTimes.com
(subtraction.com) and Mark Boulton, freelance designer
The following pages outline the new structure, including (markboulton.co.uk) to name a couple of leading industry
a design grid that affords flexible layout options and figures whose blog posts on the subject are well worth
updated global elements. reading for future reference.

There are also new guidelines for sizes and placement of grid applied to
images, the embedded media player and advertising. Oh Yeeaahh! 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/

Grid applied to
subtraction.com
Khoi Vinh explains the benefits of using grids in design

“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
simple example of
the logic of an overarching solution to the most tactical levels, navigation applied
subtly communicating to the audience that they are experiencing to a grid
a considered environment, where information, its presentation
and its behavior are logical, consistent and reliable”

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 1:21 PM, 08 April 2008 4
Page layout
—the stuff that surrounds us
White padding 10px each side (994px)
Content padding 14px each side (974px)
Content/grid area 946px
All new BBC pages are based around a design grid with
a standardised surrounding border.

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 1:21 PM, 08 April 2008 5
Design grid
12/24 columns - 946px

66px 14px 26px


column gutter sub-column
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.

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 1:21 PM, 08 April 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 1:21 PM, 08 April 2008 7
Global masthead
This is the first release of a new global masthead for the As an overview the masthead includes the BBC
whole of the BBC site. It is an interim solution which will masterbrand, Text only & Help links, Search and a menu
continue to evolve and be iterated in line with work on labelled ‘Explore the BBC’ which has a fly-out menu
the site-wide tech refresh. containing 16 static (including Home) and 3 temporal
links.
The specifics of the masthead, including international,
languages and children’s variations are documented in a
separate ‘Global Masthead’ document.

Text only | Help

Search Explore the BBC

Text only | Help


Home Sport Relief New BBC iPlayer Rugby 6 Nations

BBC iPlayer Health Music Sport Search Explore the BBC


CBBC History News TV
Cbeebies Learning Radio Weather
Food Local & Nations Science & Nature A whole lot more

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 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.

Content MUST NOT be placed outside of the grid.

Text only | Help

Search Explore the BBC


1px keyline
#cccccc

Local Masthead
Outset by 14px

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 9
Footer
—a meaningful end

The interim template includes a simple standard footer


Site specific BBC Help About the BBC
for use at the bottom of all pages. © MMVII
Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use

There are 7 global BBC links (with an additional the content of external internet sites of Four? Advertising Privacy & Cookies

‘Advertising’ link on international facing sites) on 2 Standard footer


columns, plus an optional column of site specific links
(maximum of 4).

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 Site specific BBC Help About the BBC
Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites of Four? Advertising Privacy & Cookies

Notes:
1. ‘Send to a friend’ is still a supported tool but should be placed
in your content area
© MMVII Site specific BBC Help About the BBC
Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites of Four? Advertising Privacy & Cookies

Alternative footers

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 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 1:21 PM, 08 April 2008 11
The fold
—where is it?
Browser support / Chrome / 1024x768 resolution
The argument that ‘users scroll’ has been used to refute the Firefox

need to worry about the ‘fold’ in a browser window. Equally Internet Explorer
user testing has shown that users can experience problems Opera
when faced with finding specific information that is not
Safari
visible in the browser window.

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 navgation 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. Eg, a user can expect a
news article to be scrolled, but would not expect to have
600px (the ‘fold’)
navigational elements positioned below the fold. 617px (IE7 XP)

Ultimately it is up to designers and design managers to make The fold


the best decision for each page and product, based on the
audience and page type and function

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 1:21 PM, 08 April 2008 12
example of a
This is an navigation
Left hand
example
10 px
Lorem ipsum
Dolor sit text
amet, super
consectetuer column
adipiscing elit. Etiam inset.
rhoncus gravida tortor.
Lorem ipsum
Dolor sit amet,
consectetuer adipiscing
Note the of a
10px In hac habitasse platea dictumst. Nunc turpis quam, blandit quis,
Lorem ipsum elit. Etiam rhoncus
Left
text hand
indentnavigation scelerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis Dolor sit amet,
Dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. gravida tortor. In hac
dis parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv consectetuer adipiscing

Text/object indentation
Note
and thethe5px
10px In hac habitasse platea dictumst. Nunc turpis quam, blandit quis, habitasse platea turpis.
massa, auctor et, auctor viverra. elit. Etiam rhoncus
text indent scelerisque id, aliquet nec, odio. Cum sociis natoque penatibus et magnis gravida tortor. In hac
indent used for
dis parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv Cum sociis natoque penatibus
habitasseet magnis dis
platea turpis.
and the 5px Lorem ipsum dolor sit amet, consectetuer parturient montes, nascetur ridiculus mus.
the separators massa, auctor et, auctor viverra.
adipiscing elit. Etiam rhoncus gravida tortor. In hac Lorem ipsum Dolor sit amet, consectetuer
indent used for
This is not habitasse platea dictumst. Nunc turpis quam, Cum sociis natoque penatibus et magnis dis
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus gravida tortor. In
the separators blandit quis, scelerisque id, aliquet nec, odio. Cum parturient montes, nascetur ridiculus mus.
how it adipiscing elit. Etiam rhoncus gravida tortor. In hac hac habitasse platea dictumst.
sociis natoque penatibus et magnis. Lorem ipsum Dolor sit amet, consectetuer
This
shouldis not
be done habitasse platea dictumst. Nunc turpis quam, adipiscing elit. Etiam rhoncus gravida tortor. In
blandit quis, scelerisque id, aliquet nec, odio. Cum hac habitasse platea dictumst.
how it it
but how Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus
When indentation of images and textgravida are required sociis natoque penatibus et magnis.
tortor. In hac habitasse platea dictumst. Nunc turpis quam,
should be done
10 px text super column inset. could be
(within boxes)
but how
usedone
it
a 10px indent fromblandit
the edge of scelerisque
quis, the
Lorem ipsum
id, aliquet nec, odio. Cum sociis natoque
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus
penatibus
box. In addition 10px between imagesgravida and text et magnis
should dis parturient montes, nascetur ridiculus mus.
Lorem ipsum
tortor. In hac habitasse platea dictumst. Nunc turpis quam,
Aliquam semkjhgkjhv massa, auctor et, auctor viverra. Nunc turpis quam,
orem ipsum also be employed. could be done
olor sit amet, consectetuer adipiscing elit. Etiam rhoncus
blandit quis, scelerisque id, aliquet nec, odio. Cum
gravidaettortor.
penatibus magnis dis parturient montes, nascetur
sociis natoque
blandit quis, scelerisque id, aliquet nec, odio. Dolor sit amet,
ridiculusadipiscing
consectetuer mus.
Lorem ipsum
Dolor sit amet,
consectetuer adipiscing
n hac habitasse platea dictumst. Nunc turpis quam,
When content is not in boxes, text and blandit quis,
Aliquam
imagessemkjhgkjhv
can be massa, auctor et, auctor elit.
viverra.
EtiamNunc turpis quam,
rhoncus elit. Etiam rhoncus
Dolor sit amet,
celerisque id, aliquet nec, odio. Cum sociis natoque penatibusblandit et magnis
quis, scelerisque id, aliquet nec, odio. gravida tortor. In hac gravida tortor. In hac
aligned to the grid or indented to 10px. consectetuer adipiscing
s parturient montes, nascetur ridiculus mus. Aliquam semkjhgkjhv habitasse platea turpis. habitasse platea turpis.
elit. Etiam rhoncus
massa, auctor et, auctor viverra.
gravida tortor. In hac
Cum sociis natoque penatibus et magnis dis Cum sociis natoque penatibus et magnis
habitasse plateadisturpis.
Lorem ipsum dolor sit amet, consectetuer
Notes: parturient montes, nascetur ridiculus mus. parturient montes, nascetur ridiculus mus. Lorem
adipiscing
1. This elit. Etiamand
is a recommendation rhoncus gravida
not a fixed rule. tortor. In hac Lorem ipsum Dolor sit amet, consectetuer ipsum Dolor sit amet, consectetuer adipiscing elit.
habitasse platea dictumst. Nunc turpis quam, Cum sociis natoque penatibus et magnis dis
adipiscing elit. Etiam rhoncus gravida tortor. In Etiam rhoncus gravida tortor. In hac habitasse
blandit quis, scelerisque id, aliquet nec, odio. Cum parturient montes, nascetur ridiculus mus. Lorem
hac habitasse platea dictumst. platea dictumst.
sociis natoque penatibus et magnis. ipsum Dolor sit amet, consectetuer adipiscing elit.
Etiam rhoncus gravida tortor. In hac habitasse
orem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam rhoncus Indentation when content is in a box platea to
Aligned dictumst.
the grid when content is not in a box
ravida tortor. In hac habitasse platea dictumst. Nunc turpis quam, Lorem ipsum
andit quis, scelerisque id, aliquet nec, odio. Cum sociis natoque
Lorem ipsum
enatibus et magnis dis parturient montes, nascetur ridiculus mus.
liquam semkjhgkjhv massa, auctor et, auctor viverra. Nunc turpis quam,
Dolor sit amet,
Lorem ipsum
Dolor sit amet,
consectetuer adipiscing
andit quis, scelerisque id, aliquet nec, odio. elit. Etiam rhoncus
consectetuer adipiscing
Dolor sit amet,
elit. Etiam rhoncus gravida tortor. In hac
consectetuer adipiscing
gravida tortor. In hac habitasse platea turpis.
elit. Etiam rhoncus
habitasse platea turpis.
gravida tortor. In hac
Cum sociis natoque penatibus
habitasseet magnis dis
platea turpis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
parturient montes, nascetur ridiculus mus. Lorem Lorem ipsum Dolor sit amet, consectetuer
Cum sociis natoque penatibus et magnis dis
ipsum Dolor sit amet, consectetuer adipiscing elit. adipiscing elit. Etiam rhoncus gravida tortor. In
parturient montes, nascetur ridiculus mus.
Etiam rhoncus gravida tortor. In hac habitasse hac habitasse platea dictumst.
Lorem ipsum Dolor sit amet, consectetuer
platea dictumst.
adipiscing elit. Etiam rhoncus gravida tortor. In
hac habitasse platea dictumst.

Lorem ipsum 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 1:21 PM, 08 April 2008 13

Cum sociis natoque penatibus et magnis dis


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

—sizes and ratios 1 Full story column width 2 Right hand column full width
Indented 446x251
Flush 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
Indented 286x161
illustrated on the right (heights based on a 16:9 ratio). Flush 306x172
Images should also be able to pad against the column
edges if it suits the design.
1
The following dimensions apply to a 16:9 image. 3 /2 story column width
Indented 206x116
Flush 226x127
IMAGE SIZES
Indented Flush
1. 446 x 251px 1. 466 x 262px
2. 286 x 161px 2. 306 x 172px 1/3
4 story column width
3. 206 x 116px 3. 226 x 127px Indented 126x71
Flush 146x82
4. 126 x 71px 4. 146 x 82px
5. 86 x 48px 5. 106 x 60px
6. 46 x 26px 6. 66 x 37px
5 Lead story column width
Indented 86x48
Where 16:9 and 4:3 are not appropriate square and Flush 106x60
In a panel Not panelled
Est hendrerit Aliquam a mi in
portrait (8:10) images can be used. Simply fit to the grid vehicula. Cras est hendrerit
using the relevant widths above with the height changing suscipit pede sit vehicula. Cras
amet est. Nam id erat. Quisque suscipit pede sit amet est. Nam id
proportionately. eget mi. Duis a augue eleifend . erat. Quisque eget mi. Duis a

Notes: 6 Thumbnail
1. Does not apply to background images Indented 46x26
2. Does not apply to image galleries Flush 66x37

recommended image sizes

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 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.

The video sizes that are available to you are 512x288,


400x225 and 256x144.
512 x 288
400x225 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.

400 x 225

256 x 144

Current EMP sizes

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 15
Advertising
—size and placement

Advertising on bbc.co.uk will only be visible to visitors

ADVERT
from outside of the UK. Current implementation of Leaderbord
ads is only on a small number of site areas but may be 728 x 90px
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.
ADVERT

There are four ad sizes and respective placements.


1. Leaderboard (728x90)
ADVERT
Sits above the global navigation.
2. Medium rectangle (300x250) Medium rectangle
300 x 250px
Sits in the right hand column with a 3px inset
3. Full banner (468x60)
Vertical banner
Sits in the footer 120 x 240px

4. Vertical banner (120x240)


Sits in the left hand navigation with a 13px inset.
All ads MUST have the supporting text ‘Advert’ above
or next to the advert.

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 Medium rectangle MUST be above the fold.
ADVERT

Full banner
3. The vertical banner is not mandatory on all sites (TBD).
468 x 60px
4. See appendix 1 for examples of collapsible columns.

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 16
Putting it together

The design to the right is purely an exercise to illustrate Text only | Help

how we can pull all the elements in this document Search Explore the BBC

together on one page.


Local Masthead

Vivamus volutpat Pellentesque orci mauris posuere SEE ALSO


Sed vehicula ipsum ut mauris in adipiscing.
Nulla eleifend Email this to a friend Print 09 Aug 07 | Curabitur ante
Proin interdum Curabitur tincidunt pede vestibulum tempus
14 May 07 | Curabitur ante
Nonummy congue
Fusce sodales ornare justo vivamus vitae mi
Integer 03 Oct 06 | Curabitur ante
Libero mauris Donec dolor nisi, consequat id, posuere quis
14 Jul 06 | Curabitur ante
Vestibulum nulla
Morbi quis est nam ac ante ornare justo
Aliquam felis Embedded Media Player
27 Sep 06 | Curabitur ante
Nec justo
optimal 400x225
Pellentesque orci
Quis turpis
Nullam egestas
Dignissim diam
Duis sed justo
Quisque aliquam sapien non odio.
Advertisement
HEADER
Medium rectangle
Nunc venenatis arcu Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
300 x 250px
consectetur, adipisci velit.
HEADER
In porta urna Aliquam a mi in est hendrerit
vehicula. Cras suscipit pede sit amet
Ut elit praesent
est. Nam id erat. Quisque eget mi.
Leo sed arcu Duis a augue eleifend urna blandit Image
Porta culis felis imperdiet. Duis mattis turpis eu nulla. 206 width
Ac massa
Pellentesque nec augue vel leo feu-
giat dignissim. Sed urna sapien, RELATED INTERNET LINKS
mollis eget, suscipit a, placerat. Eu,
Donec fermentum dolor nec arcu
tellus. Pellentesque fermentum. Nunc Nulla condimentum nonummy
nunc. Lorem ipsum dolor. Aliquet
sapien. Etiam sed lectus. Nulla Nulla condimentum nonummy
facilisi. Mauris sem sem, aliquet non, nunc. Lorem ipsum dolor. The BBC is not responsible for the content of
porttitor id, porta vitae, ipsum. Sed Citation external internet sites
urna sapien, mollis eget, suscipit.

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 Site specific BBC Help About the BBC


Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites of Four? Advertising Privacy & Cookies

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 17
Over to you

This document aspires to save you time and give you A quick recap.
more creative freedom.
Design to the grid
These rules and guidelines if adhered to will give a visual 946 wide, 12 columns, 66px wide with 14 pixel gutter
framework that affords consistency across bbc.co.uk and
yet still allow design teams to inject personality into their
Design for a centred fixed width page
site’s design.
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

BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 18
News Front Page News Front PageSEE ALSO
Euro gamers get hands on Halo 3 Euro gamers get hands on Halo 3 SEE ALSO
What exactly is a next generation game? What exactly is a next generation game?
Email this to a friend Print Email this to a friend
09 Aug 07 | Technology Print 09 Aug 07 | Technology
Halo 3 beta feeds hype machine Halo 3 beta feeds hype machine
14 May 07 | Technology 14 May 07 | Technology
Halo universe expands as fans wait Halo universe expands as fans wait

Appendix 1
Africa Africa 03 Oct 06 | Technology 03 Oct 06 | Technology
Americas Americas Halo aims for epic end to trilogy Halo aims for epic end to trilogy
14 Jul 06 | Technology 14 Jul 06 | Technology
Asia-Pacific Asia-Pacific
Director Jackson signs Xbox deal Director Jackson signs Xbox deal
Europe Europe 27 Sep 06 | Technology 27 Sep 06 | Technology
Middle East Middle East

—collabsible columns
South Asia
UK
South Asia
UK
ADVERTISEMENT
RELATED INTERNET LINKS
Eurogamer - Halo 3 review
Business Business Bungie
Health Health
The BBC is not responsible for the content of
Science/Nature 01:30 / 30:00 SHARE Science/Nature 01:30 / 30:00 SHARE external internet sites
Technology 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 Gamers across Europe got their hands on Halo 3 at midnight on TOP TECHNOLOGY STORIES
of the site. When those pages are viewed by a UK facing
Also in the news Tuesday, one of the most anticipated and heavily marketed titles
Also in the news Tuesday, one of the most anticipated and heavily marketed titles Abuse fight targets social sites
in history. in history. Games event highlights positives
audienceRESOURCES
the ad will not display. RESOURCES
Microsoft to carry out EU ruling
Video and Audio Video and Audio
Are you a fan of the Halo series of games? Will you be getting Halo 3? Are you a fan of the Halo series of games? Will you be getting Halo 3?
INTERACT Tell us why you're a fan.
INTERACT Tell us why you're a fan.
News feeds
In it’s place
Have the content will either move up into the
Your Say Have Your Say

space (collapsible
In Pictures
columns),
Youor
can alternate
also send us acontent of thefrom inside Halo 3. Grab
picture of yourself In Pictures
a You can also send us a picture of yourself from inside Halo 3. Grab a MOST POPULAR STORIES NOW
Country Profiles screenshot of yourself and then email us the link using the form below:Profiles RELATED INTERNET
Country screenshot of yourself and then email us the link using the form below:
LINKS
same column width
Special Reports
will appear in it’s place. Special Reports Eurogamer - Halo 3 review
MOST EMAILED MOST READ
Click here to see terms and conditions RIGH HAND COLUMN shown with
Click and
here towithout MPU
see terms and Ad
conditions
Bungie
News feeds News feeds 1. Monkey attack kills Delhi leader
At no time should you endanger yourself or others, take any unnecessary risks At no
The BBC is not time should
responsible you content
for the endangerof yourself or others, take any unnecessary risks 2. JK Rowling outs Dumbledore as gay
or infringe any laws. or infringe
external internet sites any laws. 3. Union ratifies mail dispute deal
RELATED BBC SITES RELATED BBC SITES 4. When work becomes a game

ADVERT
Name: Name: 5. Oceans are 'soaking up less CO2'
SPORT SPORT
TOP TECHNOLOGY STORIES

WEATHER Email address: Abuse fight


WEATHER Email address:
targets social sites
Most popular now, in detail
Games event highlights positives
On this Day Town and Country: On this Day Microsoft to carryand
Town outCountry:
EU ruling

ADVERT
Editors Blog Editors
Text only |Blog
Help
Phone number News feeds
Phone number
(optional): (optional): Search Explore the BBC

MOST POPULAR STORIES NOW


Comments: Comments:
Text only | Help
MOST EMAILED MOST READ

1. Monkey attack kills Delhi leader Search Explore the BBC


2. JK Rowling outs Dumbledore as gay
Masthead with and 3. Union ratifies
without mail dispute deal
leaderboard ad
The BBC may edit your comments and cannot guarantee that all 4. When work Thebecomes
BBC maya game
edit your comments and cannot guarantee that all
emails will be published. 5. Oceans are 'soaking
emails willup
beless CO2'
published.

SUBMIT CLEAR SUBMIT CLEAR


Most popular now, in detail

ADVERT
Email this to a friend Print Email this to a friend Print

Bookmark with Bookmark with


© MMVII Site specific BBC Help About the BBC
Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites of Four? Advertising Privacy & Cookies

© MMVII Site specific BBC Help About the BBC


Footer links Accessibility Help Contact Us

The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites 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 1:21 PM, 08 April 2008 19
BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 20

Anda mungkin juga menyukai