You are on page 1of 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

BBC. Matt Coyne. Any feedback or suggestions should be raised with your representative in this Cluster and also Julie Dodd and Matt Coyne. Julie Dodd.uk global page restructure.Who approves this? These guidelines have been defined in collaboration with user experience teams across the BBC. 08 April 2008 3 . Last modified at 1:21 PM. Approval for this proposal (and any subsquent alterations and/or additions) sits with the User Experience Cluster and the Head of User Experience & Design.co.

08 April 2008 4 .uk global page restructure. You use a grid when you want things to look tidy. in which a grid helps the entirety of a layout fall together with enhanced cohesion.php Nudge your elements http://www.COM Khoi Vinh explains the benefits of using grids in design “The way I see it.co.php SIMPLE ExAMPLE OF NAVIgATION APPLIED TO A grID BBC. Last modified at 1:21 PM.co.uk more consistent. Julie Dodd. There are also new guidelines for sizes and placement of images.uk) to name a couple of leading industry figures whose blog posts on the subject are well worth reading for future reference. where information. more subtle level. I prefer the second. there are two levels of benefits to grid usage: the first is the superficial imparting of order.subtraction. its presentation and its behavior are logical. centred page template and its associated guidelines create a visual framework for starting to make bbc. Why grids? There are many exponents of grid based designs on the web—Khoi Vinh. Matt Coyne. For me.com) and Mark Boulton.subtraction.php Five simple steps to designing grid systems http://www.The template —a visual framework The new wider.com/archives/2007/0606_nudge_your_e.markboulton.com/archives/2007/0318_oh_yeeaahh.uk/journal/comments/five_simple_steps_to_ designing_grid_systems_part_1/ grID APPLIED TO SUBTrACTION.subtraction.co.com/archives/2007/0606_nudge_your_e. though. the embedded media player and advertising. Art Director at NYTimes. The following pages outline the new structure. subtly communicating to the audience that they are experiencing a considered environment. consistent and reliable” Khoi Vinh http://www.co.com (subtraction. in which the grid is a crucial tool in a larger order. including a design grid that affords flexible layout options and updated global elements. Oh Yeeaahh! DESIgN grID ExAMPLE grID APPLIED TO TIMES ONLINE http://www. The grid helps extend the logic of an overarching solution to the most tactical levels. freelance designer (markboulton.

and then an outer border covering the rest of the page. The outer borders will always be set to #EAEAEA. Matt Coyne. You MUST design your page to be fixed width (NOT stretchy) and centred within the browser. The first border to the design grid is 14 pixels either side and should be the page background colour. No content should be placed outside of the design grid.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. There is a further 10 pixel white margin either side of this to frame the page. The design grid constrains your content area. Julie Dodd. Last modified at 1:21 PM.uk global page restructure. pleaSe NOTe: The 10 pixel margin will always be set to white. Content/grid area 946px BBC. This gives a total of 974 pixels in which the page sits. 08 April 2008 5 .co.

each 66 pixels in width with a 14 pixel gutter spacing between them. The structure of the areas outside the content are illustrated on the following pages.uk global page restructure. 08 April 2008 6 . Last modified at 1:21 PM.Design grid 12/24 columns . 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).946px 66px column 14px gutter 26px sub-column The design grid consists of 12 columns. The grid sets the bounds for content only. BBC. Matt Coyne. This gives a total content area of 946 pixels.co. Julie Dodd.

This creates a consistent 146px for all left hand local navigation. A combination of super columns could be used to create more complex structures. 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. Julie Dodd.uk global page restructure. Last modified at 1:21 PM. 08 April 2008 7 . When using a super column for left hand local navigation you MUST always use 2 columns. See bottom right for just one possible example of this.co. Common layouts include 2 and 3 super columns with left hand navigation. Matt Coyne.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.

Search Explore the BBC Text only | Help Home BBC iPlayer CBBC Cbeebies Food Sport Relief Health History Learning Local & Nations New BBC iPlayer Music News Radio Science & Nature Rugby 6 Nations Sport TV Weather A whole lot more Search Explore the BBC BBC.uk global page restructure. languages and children’s variations are documented in a separate ‘global Masthead’ document. It is an interim solution which will continue to evolve and be iterated in line with work on the site-wide tech refresh. Text only & Help links. Julie Dodd. The specifics of the masthead. including international.global masthead This is the first release of a new global masthead for the whole of the BBC site. 08 April 2008 8 . Text only | Help As an overview the masthead includes the BBC masterbrand. Search and a menu labelled ‘Explore the BBC’ which has a fly-out menu containing 16 static (including Home) and 3 temporal links. Matt Coyne. Last modified at 1:21 PM.co.

This is part of the global masthead and does not need to be incorporated into a site’s design. Matt Coyne.uk global page restructure. There is a 1px keyline (#cccccc) between the global masthead and the local masthead. 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.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. 08 April 2008 9 . Julie Dodd. Last modified at 1:21 PM.co.

co. 08 April 2008 10 . 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. 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). ‘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 Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies ALTErNATIVE FOOTErS BBC. © MMVII The BBC is not responsible for the content of external internet sites Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies STANDArD FOOTEr © MMVII The BBC is not responsible for the content of external internet sites Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies Notes: 1. The standard is grey (#4D4D4D) and should be used as much as possible. There are 3 colourways for the footer.uk global page restructure. Julie Dodd. Matt Coyne. Last modified at 1:21 PM.Footer —a meaningful end The interim template includes a simple standard footer for use at the bottom of all pages.

And what about content? We now have a structure for the page.uk global page restructure. Matt Coyne. These include indentation. Using these guidelines together with the structures outlined on previous pages will create a visual framework that affords consistency yet flexibility across bbc. but to create further useful consistency across sites there are other elements we need guidelines for. BBC. Certain attributes of content elements need to adhere to the guidelines which follow. Each of which will be outlined on the following pages.co. Last modified at 1:21 PM. images. 08 April 2008 11 . the embedded media player. Julie Dodd.co. and advertising.uk.

The recommendation is to keep all significant content or navgation within 600px to create a comfortable viewing area for the user. based on the audience and page type and function However. 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. there is a requirement with regard to advertising. THE FOLD Browser support / Chrome / 1024x768 resolution Firefox Internet Explorer Opera Safari 600px (the ‘fold’) 617px (IE7 XP) BBC. Matt Coyne.uk global page restructure.co. Internet Explorer 7 on Windows xP has the smallest depth of visible content of 617px. When using the 300x250px medium rectangle advert size. right). at least 50% of the advert MUST be displayed above the fold. Eg. Ultimately it is up to designers and design managers to make the best decision for each page and product. Julie Dodd. Whether to adhere to the fold depends on the type of page and the design of the page. a user can expect a news article to be scrolled. 08 April 2008 12 .The fold —where is it? The argument that ‘users scroll’ has been used to refute the need to worry about the ‘fold’ in a browser window. but would not expect to have navigational elements positioned below the fold. Equally user testing has shown that users can experience problems when faced with finding specific information that is not visible in the browser window. Last modified at 1:21 PM.

hac habitasse platea dictumst. Aliquam semkjhgkjhv massa. Etiam rhoncus gravida tortor. Cum sociis natoque penatibus et magnis dis Etiam rhoncus gravida tortor.uk global page restructure. Etiam rhoncus quam. consectetuer adipiscing elit. Lorem ipsum dolor sit amet. consectetuer adipiscing elit. In hac consectetuer adipiscing habitasse platea turpis. auctor viverra. quam. odio. nascetur ridiculus mus. are required dictumst. consectetuer adipiscing elit. Cum sociis natoque penatibusquis. aliquet nec. gravida tortor. parturient montes. In hac habitasse platea turpis. Etiam rhoncus gravida tortor. Nunc turpis quam. consectetuer Notes: adipiscing elit. aliquet nec. consectetuer adipiscing elit. INDENTATION WHEN CONTENT IS IN A BOx orem ipsum dolor sit amet. Lorem ipsum Dolor sit amet. In hac Cum sociis natoque penatibus et magnis dis habitasse platea turpis. nascetur ridiculus mus. nascetur ridiculus mus. In hac BBC. Nunc turpis quam. Etiam rhoncus ravida tortor.co. aliquet nec. This is a recommendation and not a fixed rule. Etiam rhoncus gravida tortor. Nunc turpis quam. In hac habitasse ALIgNED TO THE grID WHEN CONTENT IS NOT IN A BOx platea dictumst. Cum sociisamet. Etiam rhoncus Dolor sit amet. andit quis. odio. In hac Cum sociis natoque penatibus et magnisturpis. Lorem ipsum elit. massa. consectetuer adipiscing elit. In hac sociis natoque penatibus et magnis. consectetuer blandit quis. consectetuer adipiscing 10 px text super column inset. Lorem ipsum Dolor sit amet. INDENTATION WHEN CONTENT IS NOT IN A BOx Dolor Lorem ipsum sit amet. nascetur ridiculus mus. nascetur ridiculus mus.example of a This hand navigation Left is an example of a Note the 10px Left hand navigation text indent In hac habitasse platea dictumst. Etiam rhoncus Dolor sit amet. Cum sociis natoque blandit quis. auctor elit. odio. habitasse platea dis parturient montes. odio. Lorem ipsum Dolor sit amet. Cum sociis natoque penatibus et magnis. consectetuer adipiscing elit. tortor. liquam semkjhgkjhv massa. nascetur ridiculus mus. This is not done habitasse platea dictumst. Nunc turpis quam. Etiam rhoncus gravida tortor. aliquet nec. should be blandit quis. Lorem ipsum Dolor sit amet. gravida tortor. consectetuer adipiscing elit. Etiam rhoncus gravida tortor. Nunc turpis When content is not in boxes. aliquet nec. In hac habitasse platea dictumst. Dolor px text super column rhoncus gravida Lorem ipsum Text/object indentation elit. Etiam rhoncus gravida 1. Lorem platea dictumst. Dolor Lorem ipsum sit amet. Last modified at 1:21 PM. aliquet nec. aliquet nec. consectetuer adipiscing Lorem ipsum dolor sit amet. auctor viverra. elit. consectetuer adipiscing elit. aliquet nec. In hac habitasse platea dictumst. odio. In hac Cum sociis natoque penatibus et magnisturpis. Lorem ipsum scelerisque id. Dolor Lorem ipsum sit amet. Cum sociis natoque penatibus et magnis dis 13 . consectetuer adipiscing elit. Cum howhow it Lorem ipsum dolor sit amet. Lorem ipsum Dolor sit amet. In hac consectetuer adipiscing habitasse platea turpis. Etiam rhoncus gravida tortor. Cum sociis natoque enatibus et magnis dis parturient montes. Matt Coyne. In parturient montes. Etiam rhoncus gravida tortor. nascetur ridiculus mus. aliquet nec. Julie Dodd. auctor et. Etiam rhoncus gravida tortor. s parturient montes. scelerisque id. In hac habitasse platea dictumst. Etiam rhoncus gravida tortor. blandit quis. Nunc turpis quam. consectetuer adipiscing elit. 10 sit amet. Nunc turpis should be done could be done (within boxes) use a 10px indent from the edge of scelerisque id. elit. natoque blandit quis. nascetur ridiculus mus. odio. aliquet nec. Lorem ipsum Lorem ipsum elit. In hac habitasse platea dictumst. Etiam rhoncus Dolor sit amet. consectetuer Cum sociis natoque penatibus et magnis dis adipiscing elit. penatibus et magnis consectetuer adipiscing n hac habitasse platea dictumst. Aliquam semkjhgkjhv Lorem ipsum dolor sit amet. In hac habitasse parturient montes. scelerisque id. nascetur ridiculus mus. Nunc turpis quam. In hac blandit et magnis aligned to the grid or indented to 10px. In addition 10px between images and text should hacdis parturient montes. Lorem ipsum Dolor sit amet. In parturient montes. auctor et. could be also be employed. scelerisque id. Nunc turpis quam. odio. adipiscing elit. aliquet nec. Aliquam semkjhgkjhv habitasse platea turpis. celerisque id. In hac habitasse platea dictumst. Dolor sit olor sit amet. ipsum Dolor sit amet. dis parturient montes. consectetuer adipiscing elit. odio. In hac indent used for This is not habitasse platea dictumst. auctor viverra. consectetuer and separators the 5px the massa. andit quis. Etiam rhoncus gravida tortor. nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes. In hac habitasse plateapenatibus et magnis. gravida tortor. nascetur ridiculus mus. Etiam inset. Etiam rhoncus gravida tortor. blandit quis. auctor et.done orem ipsum blandit quis. auctor et. nascetur ridiculus mus. Cum the separators how it adipiscing elit. 08 April 2008 habitasse platea turpis. odio. Etiam rhoncus gravida tortor. blandit quis. Lorem ipsum Dolor sit amet. auctor viverra. the Lorem ipsum dolor sit amet. consectetuer adipiscing elit. hac habitasse platea dictumst. Etiam rhoncus gravida tortor. consectetuer adipiscing Lorem ipsum Dolor sit amet. text and imagessemkjhgkjhv massa. Etiam rhoncus gravida tortor. Etiam rhoncus but it sociis natoque When indentation of images and textgravida tortor. Nunc turpis quam. consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis text indent for indent used dis parturient montes. consectetuer adipiscing elit. scelerisque id. Nunc turpis quam. aliquet nec. blandit quis. auctor et. Aliquam semkjhgkjhv Notethe 5px In hac habitasse platea dictumst. nascetur ridiculus mus. and the 10px massa. auctor et. Aliquam can be viverra. auctor viverra. elit. odio. gravida tortor. scelerisque id. Cum sociis natoque penatibus et magnis Dolor sit amet. scelerisque id. dis parturient montes. scelerisque id. Cum sociis natoque penatibus et magnis dis parturient montes. In hac consectetuer adipiscing habitasse platea turpis. consectetuer Cum sociis natoque penatibus et magnis dis adipiscing elit. nascetur ridiculus mus. habitasse platea dis parturient montes. scelerisque id. Lorem ipsum Dolor sit amet. gravida tortor. In hac habitasse platea dictumst. Nunc turpis quam. odio. Etiam rhoncus but how it penatibus et magnis box. scelerisque id. Etiam rhoncus gravida tortor. odio. In habitasse platea dictumst. tortor. Etiam rhoncus gravida tortor.

86 x 48px 6. 446 x 251px 2. 46 x 26px Flush 1. 206 x 116px 4. 226 x 127px 4. Nam id erat. Duis a Where 16:9 and 4:3 are not appropriate square and portrait (8:10) images can be used. Images should also be able to pad against the column edges if it suits the design. 146 x 82px 5. 126 x 71px 5. (ADJUST DEPTH TO SUIT SQUARE AND PORTRAIT IMAGE RATIOS) Full story column width 2 Right hand column full width Images MUST work with the grid and help to create order within the page layout.uk global page restructure. Notes: 1. Does not apply to image galleries Indented Flush 86x48 106x60 Est hendrerit vehicula. Nam id erat. 106 x 60px 6. 466 x 262px 2. The following dimensions apply to a 16:9 image. Last modified at 1:21 PM. You should use an image ratio of 16:9 or 4:3. Cras suscipit pede sit amet est. IMaGe SIZeS Indented 1. Cras suscipit pede sit amet est. 6 Thumbnail Indented Flush 46x26 66x37 rECOMMENDED IMAgE SIzES BBC. 08 April 2008 14 . Simply fit to the grid using the relevant widths above with the height changing proportionately. Julie Dodd. 286 x 161px 3. 306 x 172px 3. Quisque eget mi. Aligning with the grid then gives us the five common sizes illustrated on the right (heights based on a 16:9 ratio). Quisque eget mi.co. Matt Coyne. 66 x 37px 3 1 Indented Flush 286x161 306x172 /2 story column width Indented Flush 206x116 226x127 4 13 / story column width Indented Flush 126x71 146x82 5 Lead story column width In a panel Not panelled Aliquam a mi in est hendrerit vehicula. Does not apply to background images 2.Images —sizes and ratios Indented Flush 446x251 466x262 Image sizes 1 Based on a 16:9 ratio. Duis a augue eleifend .

The video sizes that are available to you are 512x288.co. Future iterations of the EMP will have greater flexibility in sizes and thus will fit better into pages. 08 April 2008 15 . 512 x 288 400 x 225 256 x 144 CUrrENT EMP SIzES BBC. Notes: 1. 400x225 and 256x144. Last modified at 1:21 PM. Julie Dodd. Matt Coyne. 400x225 is the recommended size for use within story pages (left hand nav + 2 super columns).uk global page restructure.Interim embedded media player sizes —one player. The EMP video controls add an extra 35 pixels to the height. 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.

Julie Dodd. Vertical banner (120x240) Sits in the left hand navigation with a 13px inset. The rules and standards around use of these ads are TBD and this document will be updated accordingly. ADVERT ADVERT Leaderbord 728 x 90px There are four ad sizes and respective placements. 4. Medium rectangle (300x250) Sits in the right hand column with a 3px inset 3. All ads MUST have the supporting text ‘Advert’ above or next to the advert.Advertising —size and placement Advertising on bbc. When the page is viewed by a UK facing audience the ad will not display. The vertical banner is not mandatory on all sites (TBD).co. or alternate content of the same column width will be displayed. 2. Notes: 1. Vertical banner 120 x 240px ADVERT Medium rectangle 300 x 250px ADVERT Full banner 468 x 60px BBC. In it’s place the content will either move up into the space (collapsible columns). Full banner (468x60) Sits in the footer 4. 08 April 2008 16 . Leaderboard (728x90) Sits above the global navigation. Matt Coyne. Last modified at 1:21 PM.co. 3. See appendix 1 for examples of collapsible columns. Current implementation of ads is only on a small number of site areas but may be extended.uk will only be visible to visitors from outside of the UK. 2. 1. At least 50% of the Medium rectangle MUST be above the fold.uk global page restructure.

co. mollis eget. Etiam sed lectus. Maecenas fermentum tortor sed leo. suscipit a. Fusce pretium tortor vitae est porta lobortis. placerat. porta vitae. 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. Advertisement Medium rectangle 300 x 250px Image 206 width RELATED INTERNET LINKS Nulla condimentum nonummy nunc. mollis eget. Julie Dodd. ipsum. Pellentesque orci mauris posuere Email this to a friend Print SEE ALSO Sed vehicula ipsum ut mauris in adipiscing. aliquet non. Lorem ipsum dolor. suscipit. posuere quis 14 Jul 06 | Curabitur ante Morbi quis est nam ac ante ornare justo 27 Sep 06 | Curabitur ante Embedded Media Player optimal 400x225 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. Lorem ipsum dolor. Sed urna sapien. Ut venenatis lorem eu sapien. Nulla vitae lorem vel orci mattis imperdiet. porttitor id. Nam est. Mauris sem sem. 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. Eu. consequat id. tellus. Matt Coyne. Nunc sapien. Sed urna sapien. Quisque eget mi. Cras suscipit pede sit amet est. Aliquam a mi in est hendrerit vehicula. Duis a augue eleifend urna blandit imperdiet. Last modified at 1:21 PM. Praesent dui massa. Praesent porta facilisis dui. Pellentesque nec augue vel leo feugiat dignissim. adipisci velit.uk global page restructure. Pellentesque fermentum. consectetur. Nam id erat. Duis mattis turpis eu nulla. Etiam in lorem a tellus congue © MMVII The BBC is not responsible for the content of external internet sites Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies BBC. Nulla facilisi.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. 08 April 2008 17 . Text only | Help Search Explore the BBC Local Masthead Vivamus volutpat Nulla eleifend Proin interdum Nonummy congue Integer Libero mauris Vestibulum nulla Aliquam felis Nec justo Pellentesque orci Quis turpis Nullam egestas Dignissim diam Duis sed justo Quisque aliquam sapien non odio. Nam eget metus. Nulla condimentum nonummy nunc.

Over to you This document aspires to save you time and give you more creative freedom. 946 wide.uk global page restructure. embedded media player & advertising BBC. 12 columns.co. Julie Dodd. Last modified at 1:21 PM.co.uk and yet still allow design teams to inject personality into their site’s design. 08 April 2008 18 . A quick recap. These rules and guidelines if adhered to will give a visual framework that affords consistency across bbc. 66px wide with 14 pixel gutter Design to the grid Design for a centred fixed width page 14px content border / 10px white border / outer border Stick to the page layout Use the standard footer & global masthead Indent text & objects in boxes by 10px Check object sizes Images. Matt Coyne.

Matt Coyne. in detail News feeds Phone number (optional): Search Explore the BBC MOST POPULAR STORIES NOW Comments: Text only | Help MOST EMAILED MOST READ The BBC may edit your comments and cannot guarantee that all emails will be published. Julie Dodd. Most popular now. In it’s place theSay Have Your content will either move up into the Have Your Say In Pictures In Pictures You can also send us picture of of the You can also send us a picture of yourself from inside Halo 3. take any unnecessary risks or infringe external internet sites any laws. When work becomes a game your comments and cannot guarantee that all The BBC may edit 5. RESOURCES RESOURCES audience the ad will not display. 08 April 2008 19 . 5. 2. width Eurogamer . one of the most anticipated and heavily marketed titles in history. Oceans are 'soaking up less CO2' emails will be published. one of the most anticipated and heavily marketed titles news Also in the news those pages are viewed by a UK facing Also in the of the site. Last modified at 1:21 PM. Union ratifies mail dispute deal WITHOUT LEADErBOArD AD 4. When in history. 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' Most popular now. 3. JK Rowling outs Dumbledore as gay 3. or alternate acontentyourself from inside Halo 3. Grab a screenshot of yourself and then email us the link using the form below: screenshot of yourself and then email us the link using the form below: Country Profiles Country Profiles RELATED INTERNET LINKS same columnReports will appear in it’s place. Monkey attack kills Delhi leader 2. in detail ADVERT Explore the BBC SUBMIT CLEAR Email this to a friend Print Email this to a friend Print Bookmark with © MMVII Bookmark with Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies 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 Site specific Footer links Upto a maximum of Four? BBC Help Accessibility Help Jobs Advertising About the BBC Contact Us Terms of Use Privacy & Cookies FOOTEr WITH AND WITHOUT FULL BANNEr AD BBC. RELATED BBC SITES At responsible for you endanger The BBC is not no time should the content of yourself or others. INTERACT MOST POPULAR STORIES NOW MOST EMAILED 1. MOST READ rIgH HAND COLUMN SHOWN WITH ANDto see terms and conditions Click here WITHOUT MPU AD News feeds Bungie News feeds Name: SPORT WEATHER On this Day Editors Blog Phone number (optional): Comments: Email address: Town and Country: Name: SPORT TOP TECHNOLOGY STORIES Email address: Abuse fight targets social sites WEATHER Games event highlights positives On this Day Microsoft to carry outCountry: Town and EU ruling Editors Blog Text only | Help ADVERT ADVERT RELATED BBC SITES At no time should you endanger yourself or others.uk global page restructure. Video and Audio Gamers across Europe got their hands on Halo 3 at midnight on Tuesday.co. SUBMIT CLEAR MASTHEAD WITH AND Search 1. Are you a fan of the Halo series of games? Will you be getting Halo 3? TOP TECHNOLOGY STORIES Abuse fight targets social sites Games event highlights positives Microsoft to carry out EU ruling News feeds Tell us why you're a fan.News Front Page Euro gamers get hands on Halo 3 Email this to a friend Print News Front PageSEE ALSO Euro gamers get hands on Halo 3 SEE ALSO 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 Appendix 1 Africa Americas Asia-Pacific Europe Africa Americas Asia-Pacific Europe Middle East South Asia UK Business Health What exactly is a next generation game? Email this Print 09 Aug 07 | Technology to a friend 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 —collabsible columns South Asia UK Business Health Science/Nature Technology 01:30 / 30:00 Middle East RELATED INTERNET LINKS Eurogamer . take any unnecessary risks or infringe any laws. 4.Halo 3 review Special Special Reports Click here to see terms and conditions INTERACT 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.Halo 3 review Bungie The BBC is not responsible for the content of external internet sites SHARE Science/Nature Technology 01:30 / 30:00 SHARE Ads will Entertainment on some sites to international hands on Halo 3 at midnight on be shown users Entertainment Gamers across Europe got their Tuesday. Grab a space (collapsible columns).

BBC. Julie Dodd. Last modified at 1:21 PM. 08 April 2008 20 .co.uk global page restructure. Matt Coyne.