GEL Mobile Styleguide

Mobile GEL Styleguide Version 2 | Nov 2011
Mobile GEL Styleguide
Building a
Mobile Global Experience Language
for the BBC
UX&D 1
00 Introduction
01 Philosophy
02 Device Considerations
03 Foundations
04 Building Blocks
05 Patterns
UX&D 2
UX&D
00 Introduction

00 Introduction
We are evolving a global experience language for

the BBC's digital services.
The Mobile GEL guidelines are a reference point

for all designers creating BBC websites for the
mobile platform, and a continuation of the central
GEL reference documentation.
Outlined here are rules, standards and

considerations for use, that will help create
consistent interaction and visual design across
BBC mobile services.
UX&D 4
UX&D
01 Philosophy

01 Philosophy
In contrast to the web or television, consumption

of content and services on mobile rarely happens
in ideal viewing circumstances. Mobiles are often
used whilst commuting, watching television, or
speaking with other people and it is important
to bear this in mind when designing for this
platform.
BBC mobile services should be:
Immediate
Scannable
Concise
Considerate of context
Focused
Clearly navigable
Responsive
UX&D 6
02 Device Considerations
Content
Smartphone and Feature phone
Directional pad vs Touchscreen input
Resolution
Orientation
UX&D 7
02 Device Considerations Content
As a rule, mobile web pages scroll

vertically. It's best to arrange the page
content so that it is in direct 'read order',
starting with the most relevant or featured
content at the top.
You should also consider the following:

Be concise. Mobile phone screens show only a small portion Distinguish clearly items that are selected. A busy
of the page. Aside from index pages, it is best to keep the environment or bright lighting conditions can make it difficult to
'one story per page' rule. Placing multiple articles on one page pick out links or fields that are in focus.
could lead to subsequent content being missed by the user.
Make user input as easy as possible. Even though most
Keep download sizes to a minimum. Be judicious with the recent phones have advanced text entry, allowing users to
amount of content, particularly the number and size of images input information by making simple selections instead of
displayed. Long download times lead to people navigating entering text is preferable.
away before the page has loaded.
Design mobile-friendly, flexible page layouts. Make sure
Deliver the content quickly. Remember that mobile web users that the content is in the right order and the page can adapt to
are likely to experience distractions due to their environment. various screen types and widths. This is important especially
They are also likely to want information that is useful at their for devices that can be used both in landscape or portrait
location. modes.
UX&D 8
02 Device Considerations Smartphone and Feature phone
There is a wide range of mobile

devices on the market, with differing
capabilities and limitations.
When designing for BBC mobile

platforms it is vital that we cater
for both smartphones and feature
phones. We do not focus on a
specific device.
Smartphone Feature phone
• Screen resolution ranges from • Screen resolution ranges from
Device detection will ensure that 320px width. 240px width.
each mobile device is served with the • Devices often support landscape • Directional pad input.
correct design. mode. • Serve smaller image sizes.
• Touchscreen and non-touch input. In • Unreliable or no javascript
some cases an onscreen keyboard capabilities.
It is also important to note that these appears, making input easier but • Supports XHTML, basic or non-
definitions are likely to change as limits visible area dramatically. existent CSS capabilities.
• Serve large image sizes (over WiFi).
new devices are released into the • Strong support for XHTML,
marketplace. Javascript and CSS. Some CSS3
support.
UX&D 9
02 Device Considerations Directional pad vs Touchscreen input
When designing for mobile you will need

to consider user input, and design for both
touchscreen and d-pad (directional pad)
devices. The main differences between the
two inputs are as follows,
Touchscreen D-Pad
A touchscreen is an electronic visual display that can detect A circular or square shaped pad that provides navigation keys
the presence and location of a touch (with finger or hand) for the four directions: up, down, left and right. These are used
within the display area. for navigating the user interface.
• Elements should be positioned on either side of the screen, • Elements should be positioned closer together.
to accommodate for users and how they hold their devices.
• Make use of anchor points.
• It is recommended that a 44px safe area around elements
should be applied to allow a user to easily select content. Note: Other devices may use trackball and stylus as mobile inputs.
• As a general rule, gestures should not to be used for aspects

of core navigation. If employed without due consideration,
gestures can cause problems with standard functions like
scrolling.
UX&D 10
02 Device Considerations Resolution
When designing for BBC Mobile platforms we

recommend designing at a minimum of 480px,
320px and 240px width resolutions.
However screen sizes and resolutions can

vary across mobile devices so when designing
a consistent look and feel across a variety of
devices, design assets need to be scalable.
In this case we recommend designing at a

high enough resolution so designs can be
refactored where appropriate.
UX&D 11
02 Device Considerations Orientation
Mobile devices can be held in a number of different

orientations. When designing for BBC Mobile platforms
ensure that designs adapt to the user's preference,
portrait or landscape.
For smartphones, in landscape orientation the design can

either scale to fit the page, or redraw to show additional
content. Orientation should be used to affect the scale
and format of what is being displayed, not to navigate
between pages.
Portrait view Landscape view (responsive) Landscape view (redrawn)
Text and images scale according to orientation Text and images can be redraw in a different orientation.
UX&D 12
03 Foundations
Universal Grid
Columns
The Baseline
Page Structure
Module Structure
Global Masthead
Local Masthead
The Footer
Branding Rationale
Colour Usage
Global/Local Navigation
Deep Hierarchies
Crumbtrail
UX&D 13
03 Foundations Universal Grid
Your starting point is a universal grid, divided

into 8px vertical units. This is available in
different resolutions.
8px unit 240x320px 8px unit 320x480px 8px unit 480x320px
15 x 8px vertical units 30 x 8px vertical units
20 x 8px vertical units
Feature phone Smartphone (Landscape)
Note:
These grids are here to help create consistency
across designs for the mobile web.
The execution may vary across device, as Smartphone (Portrait)

spacing can be difficult to control.
UX&D 14
03 Foundations Columns
The grid allows for a standard split across two

columns.
The GEL mobile guidelines recommend a

two column approach on smartphones in
both portrait and landscape mode, and a one
column approach on feature phones.
320x480px 480x320px
8px 8px 8px 8px

152px 152px 232px 232px
UX&D 15
03 Foundations The Baseline
We're also employing an 8px baseline grid

to help with vertical alignment of page
components. The execution across devices
may vary.
320x480px
8px
UX&D 16
03 Foundations Page Structure
All pages must have a masthead and a footer.
The masthead consists of global and local

navigation and branding. The footer consists Masthead
of search and global navigation links.
Content
Footer
UX&D 17
03 Foundations Module Structure
The content area is very flexible and can be

made up of one or more modules. A module
should consist of a divider, title, content,
sub-divider and 'more' links.
Be considerate about page length when Divider
adding modules to a page.

Title
Content
Divider should be 8px on 320px, and 6px on
240px resolutions. Divider should not be featured Sub-divider
More information
directly under a carousel. Sub-dividers
should be 1px.
UX&D 18
03 Foundations Module Structure
The content of a module is flexible.

Promo and text links Media clips Promos Visual listings
Visual listings extended Text Links Quote
This example shows a module without a title or

additional 'more links'.
UX&D 19
03 Foundations The Masthead
The BBC brand is strengthened by being in

one consistent place across BBC Mobile.
The global masthead contains a menu with

global navigation links, sign in and search
functionality. The GEL masthead is always
white on all BBC mobile sites.
The local masthead should be devoted to

service level branding.
Search
Global Masthead
Opens dropdown
Search entry field.
Local Masthead
BBC Blocks Sign in Menu

Links to BBC Links to BBC ID on a Opens dropdown list of
Homepage separate page. global navigation links
UX&D 20
The following illustrates how the menu

dropdown opens.
Feature phone (Portrait)
Smartphone (Portrait) Smartphone (Landscape)
UX&D 21
The following illustrates how the search

dropdown opens.
Feature phone (Portrait)
Smartphone (Portrait) Smartphone (Landscape)
UX&D 22
The default font for the local masthead is Gill

Sans. This can be flexible to accomodate
branding rationale.
Feature phone Smartphone (Portrait)
24px Gill Sans Regular 32px Gill Sans Regular
Smartphone (Landscape)
UX&D 23
03 Foundations The Footer
The footer should be included at the bottom of

every page across BBC mobile sites.
It will always consist of the same elements and

the background colour is always dark grey.
Smartphone (Landscape)
Feature phone
Smartphone (Portrait)
UX&D 24
03 Foundations Branding Rationale
Branding can be applied across the site

banner and the local navigation.
A consistent brand colour can also be applied

to the background of the local navigation links
above the global footer.
Additional colours may be used within text

links in the content area.
UX&D 25
See the following examples of how branding

can be applied to your mobile web page.
UX&D 26
Feature phone - 240px
Banners should be designed for smartphones

and feature phones. These should be
responsive, scalable and cater for both portrait Smartphone - 320px
and landscape orientation.
For consistency, all service titles should sit on

the left and align with the BBC blocks in the Smartphone - 480px (320px Landscape)
global masthead.
A flat colour must be chosen as the

background colour of the masthead, enabling
scalability. This colour should be taken from
the brand's colour palette. Assets
When exporting graphics two images are required and the hex
value of the brand colour.
Brand name/logo Brand colour Brand kit
UX&D 27
Special considerations should be made when

designing for banners duplicating the BBC
blocks, longer titles and sites which require
co-branding.
Nations and Regions Events
Sites with co-branding
If the major brand name is of an extended length, the type

should go over two lines.
UX&D 28
03 Foundations Colour Usage
When designing for BBC mobile keep colour

usage to a minimum.
Text Colour
• The standard colour for header and body text is black or grey. No
other colour variations are permitted for plain text.
• To denote links, a single distinct colour is used. This should be Page background
derived from the page branding colour palette. This is subject to the
colour having sufficient contrast to be both legible and to be visually
distinguishable as a link.
• Text colour in a promo link must be either black/grey or white

depending on which is most appropriate for the background.
Header Promo background
Support colour
Background Colour Promo link
• The standard page background colour is white. Body text
• The promo background areas use an appropriate brand colour as Links

a background. If the text is not clearly visible, then the background
colour should be lightened or darkened to rectify this.
• A support colour is available to highlight areas on the page but it's

usage should be kept to a minimum.
Note: Branding should not rely on background images. Some devices are unable to show them, thus the design needs to look
adequate even without them.
UX&D 29
04 Building Blocks
Typography
Iconography
Linking Conventions
Images
Advertising
UX&D 30
04 Building Blocks Typography
GEL uses bold typography to create stronger

hierarchies across the site. Arial is the BBC's
default web font for both headers and
body copy.
Generally mobile devices use their own system

fonts, and thus there may be little control
over the typeface when designing pages for
the mobile web. Where possible the GEL font
specification should be applied.
Arial Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
Arial Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
Note: Fonts on devices are not always anti-aliased. Devices incapable of handling Arial, must always degrade to a sans-serif font.
UX&D 31
On a mobile device, font sizes are relative,

which means that point sizes are not
used. Fonts are defined as X-large, large,
medium, small and X-small. These are the
recommended type sizes.
Arial Bold 24pt X-large

Note: X-large is only available on smartphones.
Arial Bold 20pt Large
Arial Bold 16pt Medium
Arial Bold 13pt Small
Arial Bold 11pt X-small
UX&D 32
There should be consistent use of font sizes

across smartphones and feature phones.
Headers should be 20pt (feature phone) and
24pt (smartphone). Body copy should be 13pt
(feature phone) and 16pt (smartphone).
On changing orientation of the device, text

should be responsive and scalable.
Feature phone (Portrait) 240px Smartphone (Portrait) 320px Smartphone (Landscape) 480px
UX&D 33
There should be consistent spacing around

headers and body copy. Either 8px or 16px
above and to the left of content.
Character properties like leading and tracking

are more difficult to control in the mobile
space. Where possible this specification
should be applied.
8px
8px
16px
16px
UX&D 34
04 Building Blocks Iconography
The icons featured on BBC mobile sites should be

consistent with those on BBC desktop sites. The
default size is 13px and icons can be used with or
without a flat button container. These can be used in
any colour unless otherwise specified.
Previous Next Up Down To Top To Bottom Link to This Download Upload Lock/Security
Close/Remove/
Unlock Search No/Delete Embed Yes Print Email Help Info/Caption Alert/Warning
Refresh Alarm/Reminder Duration Countdown Expires Settings Zoom In Zoom Out Grid View List View (text)
List View
(text and thumb) Home New/New items Quote Chapters Loading External Link Traffic
UX&D 35
04 Building Blocks Linking conventions
Links should comply with existing standards

and guidelines. They should be easily
distinguishable from body copy using a
combination of bold type and colour, along
with underline or underline on selection
and press.
Headline/editorial promo
link points to an article
page.
Media links with an icon,

thumbnail and description
point directly to a media
file.
On selection links
should change colour
or underline.
UX&D 36
04 Building Blocks Images
Images have an aspect ratio of 16:9, except

for square images. Our recommended image
sizes are as follows, 304x171, 224x126, 144x81,
108x61, 70x70 and 50x50 pixels.
Editorial/Headline Promo List/Media Promo
There are no restrictions to the number

of list/media promos featured on a page,
however we do recommend that these
are limited on feature phones.
We recommend only one editorial/headline promo image be used
per page across both smartphones and feature phones. These larger Square Promo
promo images should be positioned at the top of the page and can
be featured within a carousel.
Square promo images are used in image

galleries.
UX&D 37
04 Building Blocks Images
The resolution of the screen determines which

image sizes should be used per grid.
240px page width 320px page width 480px page width
Note: Image use should be monitored across all designs for mobile web. The more images featured on a page, the
longer it will take to load and the heavier the page weight. We recommend only one headline/editorial promo be used
per page across both high-end and low-end devices. The amount of images featured on a low-end device should be
kept to a minimum.
UX&D 38
UX&D
05 Patterns

39
05 Patterns
The design patterns library will be a living

repository for simple, re-skinnable page
components. Several of these patterns
are available at bbc.co.uk/gel/mobile
Carousel
Accordion
Tabs
Embedded Media Player
Pagination
UX&D 40
For more information visit bbc.co.uk/gel
UX&D 41

GEL Mobile Styleguide

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

GEL Mobile Styleguide

Hochgeladen von

Copyright:

Verfügbare Formate

Mobile GEL Styleguide Version 2 | Nov 2011

Mobile GEL Styleguide

Mobile GEL Styleguide Version 2 | Nov 2011

We are evolving a global experience language for

The Mobile GEL guidelines are a reference point

Outlined here are rules, standards and

Mobile GEL Styleguide Version 2 | Nov 2011

In contrast to the web or television, consumption

BBC mobile services should be:

As a rule, mobile web pages scroll

You should also consider the following:

There is a wide range of mobile

When designing for BBC mobile

When designing for mobile you will need

• As a general rule, gestures should not to be used for aspects

When designing for BBC Mobile platforms we

However screen sizes and resolutions can

In this case we recommend designing at a

Mobile devices can be held in a number of different

For smartphones, in landscape orientation the design can

Your starting point is a universal grid, divided

15 x 8px vertical units 30 x 8px vertical units

20 x 8px vertical units

Feature phone Smartphone (Landscape)

The execution may vary across device, as Smartphone (Portrait)

The grid allows for a standard split across two

The GEL mobile guidelines recommend a

8px 8px 8px 8px

We're also employing an 8px baseline grid

All pages must have a masthead and a footer.

The masthead consists of global and local

of search and global navigation links.

The content area is very flexible and can be

Be considerate about page length when Divider

adding modules to a page.

The content of a module is flexible.

Visual listings extended Text Links Quote

This example shows a module without a title or

The BBC brand is strengthened by being in

The global masthead contains a menu with

The local masthead should be devoted to

BBC Blocks Sign in Menu

The following illustrates how the menu

Feature phone (Portrait)

Smartphone (Portrait) Smartphone (Landscape)

The following illustrates how the search

Feature phone (Portrait)

Smartphone (Portrait) Smartphone (Landscape)

The default font for the local masthead is Gill

Feature phone Smartphone (Portrait)

24px Gill Sans Regular 32px Gill Sans Regular

The footer should be included at the bottom of

It will always consist of the same elements and

Branding can be applied across the site

A consistent brand colour can also be applied

Additional colours may be used within text

See the following examples of how branding

Feature phone - 240px

Banners should be designed for smartphones

For consistency, all service titles should sit on

A flat colour must be chosen as the

Brand name/logo Brand colour Brand kit

Special considerations should be made when

Nations and Regions Events