Visual Language: BBC by firstyear design

Visual language 1.0 â&#x20AC;&#x201D;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

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

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

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

Page layout â&#x20AC;&#x201D;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 1:21 PM, 08 April 2008

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

Flexible layouts â&#x20AC;&#x201D;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

Global masthead 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.

As an overview the masthead includes the BBC masterbrand, Text only & Help links, Search and a menu labelled ‘Explore the BBC’ which has a fly-out menu 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

Text only | Help Home

Sport Relief

New BBC iPlayer

Rugby 6 Nations

BBC iPlayer

Health

Music

Sport

CBBC

History

News

Cbeebies

Learning

Radio

Weather

Food

Local & Nations

Science & Nature

A whole lot more

Explore the BBC

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

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â&#x20AC;&#x2122;s design. Content MUST NOT be placed outside of the grid. Text only | Help

1px keyline #cccccc

Explore the BBC

Local Masthead Outset by 14px

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

Footer —a meaningful end The interim 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).

About the BBC

Site specific

BBC Help

Footer links

Accessibility Help

Upto a maximum

Jobs

of Four?

Advertising

Privacy & Cookies

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Upto a maximum

Jobs

of Four?

Advertising

Privacy & Cookies

Site specific

BBC Help

About the BBC

Footer links

Accessibility Help

Upto a maximum

Jobs

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.

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

Alternative footers

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

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

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

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

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 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)

â&#x20AC;&#x201D;sizes and ratios

Indented Flush

Full story column width

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

1/3

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 .

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

Interim embedded media player sizes â&#x20AC;&#x201D;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

Advertising —size and placement ADVERT

Advertising on bbc.co.uk will only be visible to visitors from outside of the UK. Current implementation of ads is only on a small number of site areas but may be extended.

Leaderbord 728 x 90px

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) Sits above the global navigation.

ADVERT

2. Medium rectangle (300x250) Sits in the right hand column with a 3px inset 3. Full banner (468x60) Sits in the footer

Medium rectangle 300 x 250px

Vertical banner 120 x 240px

4. Vertical banner (120x240) Sits in the left hand navigation with a 13px inset.

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. 3. The vertical banner is not mandatory on all sites (TBD). 4. See appendix 1 for examples of collapsible columns.

ADVERT

All ads MUST have the supporting text ‘Advert’ above or next to the advert.

Full banner 468 x 60px

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

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

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

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

Upto a maximum

Jobs

of Four?

Advertising

Privacy & Cookies

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

Over to you This document aspires to save you time and give you more creative freedom. 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â&#x20AC;&#x2122;s design.

A quick recap. Design to the grid

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

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

News Front Page

News Front PageSEE ALSO

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

Appendix 1

Africa

Americas

Asia-Pacific

Europe

Middle East

South Asia

Business

Health

—collabsible columns Science/Nature

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

RELATED INTERNET LINKS Eurogamer - Halo 3 review Bungie

Science/Nature

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

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