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?
BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 2
Who approves this?
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
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.
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
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
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.
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.
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 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
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?
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.
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.
—sizes and ratios 1 Full story column width 2 Right hand column full width
Indented 446x251
Flush 466x262
Notes: 6 Thumbnail
1. Does not apply to background images Indented 46x26
2. Does not apply to image galleries Flush 66x37
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
Notes:
1. The EMP video controls add an extra 35 pixels to the height.
400 x 225
256 x 144
BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 15
Advertising
—size and placement
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.
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
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
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
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
ADVERT
Editors Blog Editors
Text only |Blog
Help
Phone number News feeds
Phone number
(optional): (optional): Search Explore the BBC
ADVERT
Email this to a friend Print Email this to a friend Print
The BBC is not responsible for Upto a maximum Jobs Terms of Use
the content of external internet sites of Four? Advertising Privacy & Cookies
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 19
BBC.co.uk global page restructure. Matt Coyne, Julie Dodd. Last modified at 1:21 PM, 08 April 2008 20