mobile guide v1.1 compressed
TRANSCRIPT
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 1/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
BBC Mbile Stle Guide 1.1 — Glbal Viual Laguag fr h mbil wb
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 2/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 2
Contents
1. Intrductin 3
2. Design principles 5
2.1. Navigatn & interactin 6
2.2. Usabilit cnsideratins 7
2.3. Tne f vice 8
2.4. Editrial principles 9
3. Viual guidli 10
3.1 Page structure 12
3.2 Mdule structure 13
3.3. Margi ad layu 14
3.4. Images & Screen elements 15
3.5. fnts 16
3.6. Text clurs 19
3.7. Backgrud clur 20
3.8. Bradig 21
4. Page templates 22
4.1. Index pages 24
4.2. Articles 28
4.3. Listings 33
4.4. Media galler pages 41
4.5. Actinable pages 45
4.6. Administrative pages 50
5. Mdules 55
6. Technical requirements 82
6.1. Basic technical guidelines 83
Rfrc 84
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 3/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 3
1. Intrductin
This stle guide utlines the principles and standards fr
the creatin f mbile web pages fr the BBC. It is in -
tended t be used b designers, develpers and prduc -
r.
thi dcum d u crai wha i
shuld r shuld nt be implemented, but aims instead
t establish a cnsistent qualit f treatment fr funda-
mal lm acr h BBC mbil wb.
Main areas covered
1. High level wireframes f all majr page tpes and the
rul fr crucig hm2. Infrmatin n the structure and the limitatins f
ach ci
3. Detailed visual stles and specicatin f screen ele-
m
4. Technical requirements and standards fr BBC mbile
web pages.
Approval process
These guidelines have been dened in cllabratin with
user experience teams and mbile teams in the BBC.
Apprval fr mbile web prpsals (and an subsequent
alrai ad/r addii) i wih h BBC Mbil
tam, ad hy huld b mad awar f mbil wb
prjects befre the g live. Mbile team cntacts are:
Ulya Macmilla
Executive Prducer fr Mbile Brwser
Jasn Quinn
Team Leader fr Mbile Client Side Develpment
B Guyr
Creative Directr Mbile UX&D
Pla Rfrc ci fr a full li f dcum
that have been used as a surce material.
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 4/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 4
— Hw u hi dcum
1 2 3
L at the page template index f Capter 4. Page
Templates and nd the page tpe that matches ur
dig ak.
Use the page template t structure ur page and cn -
.
Wat are yo designing? Were are te details? Ptting it all togeter
Mdul c ad cruci dail ca b fud
i Capter 5. Modles.
D1. Text Link List (Related Links)
Visal Gidelines
FooteR
CRUMBTRAIL - BoTToM
MEDIA LINk
oR
MEDIA PRoMo
TEXT LINk LIST (RELATED LINkS)
PAGINATIoN
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE D1
SEE A5
SEE D2, C3
ADDITIONAL LINK
LIST TITLE
Up t X list items allwed. All shuldihr b bulld r -bulld.
LIST ITEM TEXT
f ram
backgrud clur
f ram
lik clur
mdul cruci
principles
BANNER TBD
Capter 3. Visal Gidelines
Example:
Example:
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 5/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 5
2. Design principles — Lk ad fl
Te BBC Mobile Web serv ice is
• Rliabl ad ci
• Respnsive
• Cmpetent
• Accessible
• Curteus - plite, respectful, cnsiderable, and
fridly
• Cmmunicative - we use language that the users
udrad
• Credible - trustwrth, believable and hnest
• scur - fr frm dagr, rik r dub
• Udradig - w kw h cumr’ d
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 6/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 6
2.1. NAVIGAToN & INTERACTIoN
• keep sitemap wide and shallw.
• Tae int accunt the trade-ff between having t
man lins n a page and asing the user t fllw
may lik rach wha hy ar lkig fr.
• Infrm the user abut his r her lcatin in the serv-
ice. This can be dne with a crumbtrail navigatin,
page titles, infrmative lin names and branding ele-
m.
Strctre
• offer cnsistent navigatin acrss the service . This
helps users rient themselves and allws them t
identif navigatin mre easil.
• Index pages wr as a table f cntents t each sec-
i.
• Crumbtrail navigatin helps users t get bac t the
hme page and ther main sectins.
• Fter navigatin is shwn n ever page, as the lins
lead t utilit pages, lie FAQ and Cntact Us.
• Since mbile phnes represent the infrmatin in se-
quences, it is imprtant t prvide lins n each page
t avid dead-ends.
• Users f devices that d nt have pinting deviceshave t scrll between hperlins using the epad.
Cntextual gruping can assist usabilit.
Navigation
Inpt
• keep the number f estres t a minimum
• Avid free text entr where pssible
• Prvide pre-selected default values where pssible
• Specif a default text entr mde, language and/r
input frmat, if the target device is nwn t supprt
it. This will be a great help fr user s wh then can
cmplete the frms with fewer epresses.
Content
• Arrange the page cntents s that the rder is lgi-
cal when scrlling a page frm tp t bttm. Re-
member that nl a fractin f the page is visible ncr.
• eur ha c i uiabl fr u i a mbil
cntext.
• Limit cntent t what the user has requested.
• Prvide a shrt but descriptive page title t allw
eas identicatin.
Scrolling
• onl vertical page scrlling is alllwed.
• eur ha marial ha i cral h maig f
the page precedes material that is nt.
Interaction
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 7/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 7
2.2. USABILITy CoNSIDERATIoNS
• Meet sers’ needs qickly. Rmmbr ha mbil
web users are liel t experience distractins, varius
lighting cnditins and shrt attentin span depend-
ing n their envirnment. The are als liel t want
ifrmai ha i uful a hir lcai r im.
• Do not repeat te navigation on every page, a i
taes a lt f valuable space n small screen. Instead
displa navigatin n the hmepage and index pages.
on ther pages include lins bac t the hme page
and the mst imprtant sectins alng the path users
have taen. Practicall this is dne with the help f
crumbtrail menu, which is shwn at the tp and bt- tm f the page.
• Distingis clearly items tat are selected. M m-
bile devices have pr cur sr cntrl, and the lighting
cnditins can mae it difcult t see lins r elds
ha ar i fcu. thi ca b d by chagig h
f ad backgrud clur f lik ad bu.
• Make ser inpt as easy as possible. Allw users
t input infrmatin b maing selectins instead f
entering free text, r at least give this as an alternative
mhd.
• Sow only essential information. Tin mbile phne
screens shw nl a fractin f the page. This is wh it
is imprtant t cndense the message and priritise
the mst relevant cntent n each page. Als be sure
t identif page requests cming frm mbiles, and
ffer a suitable versin fr them.
• Designmobile-friendly,exiblepagelayouts. Maksure that the cntent is in right rder and the page
can adapt t varius screen tpes and widths. This is
imprtant especiall fr devices that can be used bth
in landscape r prtrait mdes.
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 8/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 8
2.3. ToNE oF VoICE
yu’re writing n behalf f the BBC, but u can still
mae ur writing sund persnal.
• Write lie u’d spea. Tal abut the BBC as we, and
h radr a yu.
• Wri wih m i mid.
• U craci.
• Use wrds peple sa.
• Use less jargn.
• keep it simple.
• U aalgi.
Wh wriig a h BBC, i’ ay add may if,
buts, passives and caveats that u dn’t get t the pint.
• Tae respnsib ilit. Cut hesitant wrds (lie ma, might,
culd).
• Advise, dn’t diagnse.
• Active nt passive.
• Use imperatives, particularl in headlines.
Write On Yor Level Get Off Te Fence
TONE OF VOICE GuIDELINE:
http://www.bbc.c.u/guidelines/futuremedia/restricted/
desed/tv.shtml
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 9/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 9
2.4. EDIToRIAL PRINCIPLES
Grammar and style
The same grammatical rules appl t mbile as t the
web - refer t the BBC Editrial Guidelines. Hwever, in
terms f writing stle, bear in mind that mbile devices
ar mallr, ad ha ur f mbil c d lik
‘snacing’ n cntent. keep sentences shr t, use mre
paragraphs rather than less, and if pssible limit page sie
t n mre than 500 wrds.
Pnctation
Again, ensure that all cntent is prperl punctuated, and
that full stps are fllwed b a space. The use f txt sp
is nt recmmended – thugh there are nt specicguidli ulawig i.
Capitals
Ensure that the rst letters f all lists, stries and sectin
titles are capitalised. This helps t distinguish a new str
frm ne that has wrapped ver tw lines.
Link and title lengts
Tr t eep lin text and page titles shrt, therwise
these ma wrap nt a secnd line. Ideall, lins and page
titles shuld nt exceed 15 characters (including spaces).
Site introdctions
Each site shuld cntain a clear and brief descrip -
tin. This can either be dne n the hmepage itself if
space allws r if nt, frm a clearl labelled lin ff the
hmepage (such as Intrductin, Abut x, etc).
Paragraps
Ideall paragraphs shuld be n mre than 2-3 sentenceslng. The shr ter the paragraph, and the mre white
space between paragraphs, the better in terms f maing
yur c mr radabl.
Use nl <p></p> tags t indicate a new paragraph
iad f w li brak. thi will add h i’ ui-
frmiy.
External links
When editriall relevant, u ma wish t lin t an
external mbile site. Ensure the lin is accmpanied with
a disclaimer as well as a lin t ur external lining plic.
Lining t external mbile sites shuld generall be lim -
id h ha ffr mhig h BBC mbil i
d ffr.
Editorial Gidelines
Fr ifrmai h guidli bhid h uag f
SMS/MMS and fr guidance n user interactin via m-
bile, see Mbile Devices Guidance at bbc.c.u/guide-
lines/editrialguidelines/advice/mbiledevices
ThE BBC EDITORIAL GuIDELINES:
http://www.bbc.c.u/guidelines/editrialguidelines/
MOBILE DEVICES GuIDANCE:
bbc.c.u/guidelines/editrialguidelines/advice/mbilede-
vices
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 10/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 10
3. Viual guidli — A visual framewr
• Display sizes: optimise the design fr small screens.
Tae int accunt limited screen estate, prcessing
pwer and memr.
• Mltiple variations: Cnsider that web pages are
brwsed with varius devices with different charac-
teristics. Sme have 4-wa navie and a epad, while
m wrk wih uch cr ly.
• Screen differences: Pla ha h cr r-
lutin and pixel densit varies frm device grup t
ahr. thi d b ak i accu wh
designing visual elements such as icns fr mbile
devices.
• Layot: Design stretch pages. This means that theright hand side f the page expands t ll the gap in
the brwser windw when resied. This wa the cn-
tent adapts t different screen widths. The web page
ci f ly clum.
• Content: Written and image cntent shuld be ap-
prpriatel cndensed fr mbile use.
• Text: Use relative fnt sies. Devices use their native
UI fnts.
• Page strctre: Glball dened elements must be in
place.
Example of stretcy designConsiderations wen designing for mobile
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 11/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 11
— Prtrait and landscape screen mdes
Man devices can detect and change the screen rientatin. The web page needs t adapt t the
changing device rientatin s that it lls up the full screen width at all times.
320x420px screens
240x134px image remains left
aligd, bu h backgrud
stretches t ll the gap.
The text runs
dg dg.
320x179px image remains leftaligd, bu h backgrud
stretches t ll the gap.
The text runsdg dg.
320x179px image
rmai lf aligd.
The text blc shifts
next t the image.
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 12/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 12
3.1 PAGE STRUCTURE
• Each page MUST have bth header and fter.
• Hadr MUst ci f bradig lm.
• Crumbtrail has tw instances (header and fter).
thy MUst b ud ghr.
• Fter is alwas the last element n the page.
Core principles
Hadr ci f bradig
lm ad h crumbrail.
Fter clses the page
Example page
Hadr ara
Fr ara
Bdy ara
BANNER TBD
Crumbrail - Bm ha
idical lik wih h
crumbrail i h hadig
C
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 13/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 13
3.2 MoDULE STRUCTURE
• Mdules cnsist f varius elements.
• Hadig MUst b ud cily.
• Dividers are used inbetween lists items and t clse
tpics.
• The last mdule n the bd area MUST use cmp-
fr.
Core principles Sb-topic modle example
Heading pens the subtpic mdule.
Subtpic heading is used n prtal pages. It
d b a lik.
Gradi hadig i ud ly h BBC
Hm Pag.
A full width divider clses the subtpic
mdul.
Page heading identies the cntent n
page
Media prm
A sub-divider divides the list items
A divider clses the listing, if it is fllwed
b a new subsectin r tpic.
List modle example
Link modle exampleA heading labels the mdule. It is nt a lin,
because it is a page-specic mdule.
Lik
Cmpnent fter clses the last mdule
n a page.
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 14/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 14
3.3. MARGINS AND LAyoUT
— Glbal rul
Page dimensions
Devices are gruped int three main sie categries:
• 320px wide
• 230px wide
• 170px wide
All cntent MUST be left aligned.
All designs MUST be designed t degrade dwn t
170px wide screens.
Te rle of nines for 230px and wider devices
• Left and right page margin: 9 pixels
• Padding after the heading: 9 pixels• Padding after a feed prm: 9 pixels
• Padding befre and after sub-dividers: 9 pixels
• Padding befre the mdule fter: 9 pixels
Layot for devices wider tan 230px
Page margin 9px
9px belw the
headline prm
9px befre thesub-divider
9px after the
hadig
9px after the sta-
u ifrmai
9px after the sub-
divider
9px befre the
mdul fr
Page margin 9px
Layot for 170px wide devices
Page margin 4px Page margin 4px
9px after the
hadig
8px leading between
lik
9px befre the
sub-divider
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 15/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 15
3.4. IMAGES & SCREEN ELEMENTS
Images have an aspect rati f 16:9, except fr the
weather images. Headline prm can have an aspect
rati f 16:9 r 4:3, depending n the tls used fr cap-
urig h imag.
Content images are sed in normal editorial content:
• 57x57px - Weather
• 66x49px r 86x48px - Headline prm
• 86x48px - iPlaer thumbnails
• 170x96px - Prm fr 170px wide devices
• 234x132px - Prm fr 240px wide devices
• 320x179px - Prm fr 320px wide devices and
abve
Wallpaper images are for downloads and sowcasing
promotional content:
• 128x128 (max. 9.8kb)
• 128x160 (max. 9.9kb)
• 176x220 (max. 10kb)
• 240x320 (max. 15kb)
• 352x288 (max. 15kb)
• 320x480 (max. 15kb)
edirial Prm imag,
alternative sies:
320x180px
234x132px
170x96px
Headline prm image:
86x48px r
66x49px
Weather image:
57x57px
Media prm image:
80x48px
(Standard image
prprtin)
Image sizes
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 16/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 16
3.5. FoNTS
Generall mbile devices use their wn sstem fnts, and
thus there ma be little cntrl ver the tpeface when
designing pages. Fnts n devices are nt alwas anti-aliased. Hwever, whenever there is chice, fnt MUST
b a-rif.
Relative sizes
Fnt sies are relative, which means that pint sies are
nt used but fnts are dened as x-small, small, medium
r larg.
Larg
small
Font sizes for screen sizes 240px wide and above:
Mbile web pages are designed with fur relative fnt sies
r less, as these will have been designed t wr well n thedevice displa.
Mdium
X-small
tuch cr
u largr ladig
and mre padding
arund text and
lik.
Screen sizes 170px wide and
below:
onl ne fnt sie MUST be used.Use text frmatting t bring variet
t the text. E.g. bld, uppercase.
FoNT REFERENCES FoR VISUAL DESIGN
240px wide screens and above
X-Small: 10pt Arial
Small: 12pt Arial
Medium: 14pt Arial
Large: 16pt Arial
170px wide screens
Bd text: 11pt Arial
Please nte: Tuch screen devices use percentage sies
t get mre granular fnt sies. E.g. 100%, 140%.
Allowed font treatment
Uppercase, bld, regular.
An ther treatments ma nt be used.
Bld
Bld
Bld
Bld
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 17/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 17
— Lin stle principles
Media links and promos utility links
Bulleted lins pint t an article page.
Bld lins withut bullets pint t index pages.
Media lins pint directl t a media le. A media lin
u ic wih bld f.
Media prm lins use icn, thumbnail and descriptin. A
lin pints t a page.
Headline prm lin pints t an article.
Paginatin uses uppercase fnt treatment.
NOTE: Lins MUST have a rllver state. This is t mae
sure that the lins will be recgnised as lins in a variet
f mbile devices. Use underline r lin clur.
Crumbrail u bld f, udrli.
Inline lins use a distinctive lin clur, n ther treat-
m.
Three (3) r mre lins pinting t index pages MUST
be gruped under a heading as a mdule f their wn.
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 18/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 18
— Lin stle examples
Fr lik
Bld
Headline prm lin
Bld
Call aci
Rgular
Tpic header
Bld
(NoTE: Used nl n the BBC
Hmepage)
Mdia lik
Bld, wih ic
Media prm
Bld, with icn & image
Lik li
Bld
Lik
Rgular
Te BBC omepage link styles Portal page links
BANNER TBD
Headline prm lin
Bld
Crumbrail
Bld
Bull lik
Rgular
Mdia lik
Bld, wih ic
Crumbrail - Bm
Bld
Sub-tpic header
Bld, uppercase
Bull lik
Rgular
Rlad lik
Rgular
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 19/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 19
3.6. TEXT CoLoURS
• header: Text clur in prm and article headersmust be either blac r white depending n which is
mst apprpriate fr the bacgrund.
• Body: The standard clur fr bd text is blac. N
ther clur variatins are allwed fr plain text.
• Link: t d lik, a igl diic clur i ud.
thi clur mu b ud cily hrughu h
page and acrss the sectin f the site.
The default lin clur is blue (HEX 006aba).
If required, a bespe lin clur derived frm the
page branding clur palette ma be used instead f the default. This is subject t the clur having suf -
cient cntrast t be bth legible and t be visuall
diiguihabl a a lik.
NOTE: nl tw text clurs (Bd and Lin) ma
be used in the bd sectin f a single page at an
im. thi i ur ha lik ar alway
clearl visible.
th lik clur huld b d i udr cdi-
tins t see hw envirnmental light and reectins
affc h lgibiliy f lik.
• Sb Topic eader:
Nn lining Tpic subheadings text are blac
Lining Tpic subheadings text is either the default
blue, r the predminant text lin clur
Note: Image reqires pdate
Header & Prm
Bd text
Dfaul lik
Dfaul lik
n likig
Sub tpic header
Bespe lin
Likig sub-
tpic header
(bespe clur)
Lining tpic header
(default clur)
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 20/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 20
3.7. BACkGRoUND CoLoURS
• Page: The standard page bacgrund clur is white
• header: Prm ara ad majr brand article head-
ers use the apprpriate brand clur as a bac -
grund. If the text is nt clearl visible, the header
backgrud clur huld b lighd r darkd
lighly rcify hi.
• Sb Topic header is gre (HEX eeeeee)
• Footer Crmbtrail: U h mai bradig clur
• Icon: Mai clur huld b gry wih a whi l-m
NOTE: Branding shuld nt rel n bacgrund images.
Sme devices are unable t shw them, thus the design
needs t l adequate even withut them.
Pag
Header &
Prm
Sub Tpic Header
Icn
Crumbrail-Bm
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 21/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 21
3.8. BRANDING
Hadr lm- Gric BBC
- Branded (channel)
- Prgramme / event specic branding
IN PROGRESS
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 22/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 22
4. Page templates — Whr hy huld b ud
All pages n the BBC mbile site fall int the fllwing
page template categries.
Index pages (Page #)
Media gallery pages (Page #)
Listings (Page #) Actionable pages (Page #)
Administrative pages (Page #)
Is ur page an index page f a prtal r
a ubci?
THE BBC HoME PAGE
PoRTAL PAGES
SITE HoME PAGES
Is ur page related t an image, vide
r audi gallry?
GALLERy INDEX SEQUENTIAL ITEM PAGE
Des ur page cntain a list f sme
kid?
TEXT LIST
PLAyLISTS AND SCHEDULES
SEARCH RESULTS WEATHER LIST
LINk LIST
Ca h ur d mhig wih h
cntent f ur page?
MEDIA oBJECT PAGE
LAUNCH PAGE
WIDGET PAGE (+SEARCH FoRM)
FoRM PAGE
D u need t cnrm an actin, alert
h ur, r l hm dcid bw
varius ptins?
SETTINGS AND PREFERENCES
ALERTS AND ERRoRS
CoNFIRMATIoN PAGE
CUSToMISE HoME PAGE
Article pages (Page #)
Is ur cntent abut a single tpic and
cnsists mainl f text?
ARTICLES
SHoRT DESCRIPTIoN PAGE
PRoGRAMMES
FAQ, TERMS & CoNDITIoNS AND REFERENCE PAGES
!
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 23/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 23
PAGE MoDULES
— Hw a page is cnstructed
At the highest level, the mbile web page must alwascnsist f three areas:
• Hadr
• Bdy
• Fr
Each f these areas can be made up f ne r mre
mdules. A mdule is cmpsed f ne r mre ele-
m, ad ach f hm ha rul abu iraci ad
visual design.
header
th hadr ci f h hadr mdul . th hadr will alwas be cmpsed f the same elements, but this
d ma ha i will alway lk idical.
Body
The bd area is ver exible and made up f ne r
mr mdul, ach f which will b daild lar i hi
dcum.
Footer
th fr cair imilarly ci f h fr
mdule. Fter mdule will alwas be cmpsed f the
am lm.
Hadr ara
Fr ara
Bdy ara
FooteR
HEADER
BANNER
CRUMBTRAIL - ToP
ToPIC
HEADER
IMAGE
LINk
ToPIC
HEADER LINk
THUMBNAIL
PAGELINk
ToPIC
HEADER LINk
PAGELINk
PAGELINk
PAGELINkS (BULLET LIST)
Page template Elements (examples)
CRUMBTRAIL CRUMBTRAIL - BoTToM
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 24/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 24
4.1. INDEX PAGES
An Index page gives an access t varius subsectins f h i.
There are three tpes f index pages:
• The BBC hme page
• Prtal pages
• Site index pages
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 25/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 25
Index pages
Page templateExample Rles
4.1.1. The BBC hme page The BBC Hme page serves as a table f cntents t the varius
subsectins f the site. This page template is used nl t cnstr uct
the BBC Mbile hme page . This template is ver custmisable and
the users can custmise the cntents exibl.
SEE A1HEADER
EDIToRIAL PRoMo
FooteR
CALL To ACTIoN
ToPIC
ToPIC
• XHTML page SHoULD NoT exceed 25 inclusivef mar-up, CSS and images.
• Crumbrail MUst not b ud th BBC hm
page.
• Editrial Prm MUST be abve Tpic bjects.
• Call t actin lin MUST be shwn abve the fld,
belw the Featured Article bject.
• Tpic MAy be used n the page as man times as
cary.
• th ur ca chag h c f hir BBC hm
page, thus this page is ver mdular and exible.
This page MAy be built with the fllwing mdules:• Hadr
• Editrial prm
• Call aci
• Headline prm
• Wahr li
• Media prm
• Mdia lik
• Lik li
• schdul li
• nw air
• Search eld
• Lcai
• Sub-divider
• Tpic divider
• Cmpnent fter
• Fr
SEE C1
see G7
SEE B1
SEE B1
SEE A2
= xed mdule
ToPIC
SEE B1
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 26/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 26
Index pages
Page templateExample Rles
4.1.2. PoRTAL PAGE Prtal page is an index page f the sub-sectin, which cnsists f
multiple subjects r brands. Fr example: BBC News, BBC Spr t,
Televisin, Radi & Music, BBC one, 6 Music.
SEE A1
EDIToRIAL PRoMooR
HEADLINE PRoMo
oR
NoW oN AIR
FooteR
• XHTML page SHoULD NoT exceed 24 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• If an Editrial Prm is used n the page, it MUST be
abve Tpic mdules.
• Bradcast channels r sites MAy use Nw n air
mdul iad f edirial Prm mdul.
• Sub-tpic MAy be used n this page as man times as
cary.
• The Anchr SHoULD fllw each list mdule nce
the page length exceeds 600px.• Simple text MAy be used fr brief technical details
abut the Radi netwr r similar purpses.
• Text Lin List (Related lins) MAy be used n this
page when needed.
SEE C1, C2, E1
SEE A2
SUB-ToPICSEE B2
TEXT LINk LIST (RELATED LINkS)SEE D1
CRUMBTRAIL - BoTToMSEE A3B
ANCHoR SEE A6
SEE A3A
BANNER TBD
CRUMBTRAIL - ToP
HEADER
= cdiial
mdul
SIMPLE TEXT SEE F1
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 27/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 27
Index pages
Page templateExample Rles
4.1.3. Site index page Site index page template is used n prgramme hme pages, event
hme pages r ther regular brands, e.g. As the Dctr, BBC Electric
Prms. These pages usuall have varius lins t mre infrmatin
abut the prgramme, cast, maing f and ther relevant infrmatin
abut the tpic.
FooteR
• XHTML page SHoULD NoT exceed 25 inclusive f mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Editrial Prm MAy be used t prmte cntent.
The fllwing bjects MAy be used as man times as
necessar:
• Editrial prm
• Media prm
• Lik li• Mdia lik
• Sub-divider
• Tpic divider
• Sub-tpics
• Cmpnent fter
CRUMBTRAIL - BoTToM
EDIToRIAL PRoMo
SUB-ToPIC
SEE C1
SEE B2
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 28/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 28
4.2. ARTICLES
There are three tpes f article templates:• Article page
• Shrt descriptin pages
• Prgramme page
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 29/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 29
Articles
Page templateExample Rles
4.2.1. Article page Article page template is used fr mainl text cntent, but there
ma be images t. Fr example: News, essas, clumns, Hw-t
aricl.
ARTICLE
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Article MUST be used when a clumn r article is
aciad wih a auhr.SEE F2
CRUMBTRAIL - BoTToM
TEXT LINk LIST (RELATED LINkS)
BANNERTBD
FoRMSEE G2
SEE D1
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SIMPLE TEXTSEE F1
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 30/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 30
Articles
Page templateExample Rles
4.2.2. Shrt descriptin page Shrt descriptin template is used fr presenting cncise infrma -
tin abut a single tpic such as an artist, authr, service, campaign r
event. Tpicall these sectins are titled “Abut”. Fr example: “Abut
Autumnwatch”, “Abut Stephen Fr” and “Abut Film Netwr”.
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• A shrt descriptin page MUST have less than 15
rws f text exclusive f the lin listing, therwise the
page becmes an article.
CRUMBTRAIL - BoTToM
ARTICLE
TEXT LINk LIST (RELATED LINkS)
BANNER TBD
CRUMBTRAIL - ToP
HEADER
SEE F2
SEE D1
SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 31/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 31
Articles
Page templateExample Rles
4.2.3. FAQ, Terms & cnditins
and reference pages
FAQ, T&C and reference template is used fr length textual cn-
tent. These pages can cntain a list f questins and answers, terms
f use r ther tpes f reference infrmatin, e.g. the hw-t
instructins fr preparing a meal.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page SHoULD NoT exceed 20 inclusive f mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part f
the glbal navigatin. The MUST be used tgether n
a page.
• Text Lin List (Related lins) SHoULD lin t subsec-
tins f the selected tpic.
• The Next-Previus Navigatin MUST lin t the next
tpic.
SIMPLE TEXT
PAGINATIoN
TEXT LINk LIST (RELATED LINkS)
CRUMBTRAIL - ToP
HEADER
= cdiial
mdul
SEE F1
SEE D1
SEE A5
SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 32/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 32
Articles
Page templateExample Rles
4.2.4. Prgrammes Prgrammes template is used fr prgramme and episde infr -
mai ad hir bradca chdul.
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Editrial Prm SHoULD be used t bring visual
interest and prmte specic cntent.
• Media Lists SHoULD be used t list episdes.
• Text Lin List (Related lins) mdule MAy be used n
the page if categries are available. Hwever, when
it is used, it MUST be placed n the bttm f the
page.
CRUMBTRAIL - BoTToM
EDIToRIAL PRoMo
SUB-ToPIC
SEE C1
TEXT LINk LIST (RELATED LINkS) SEE D1
SEE B2
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 33/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 33
4.3. LISTINGS
There are varius tpes f list page templates:
• Text list
• Playli ad chdul
• Asset / media list
• sarch rul
• Sprts results
• Wahr li
• Lik li
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 34/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 34
Liig
Page templateExample Rles
4.3.1. Text list Text list presents simple listing f text cntent.
This page can be used fr example fr trac listing, live cmmen-
tar frm an event, cntact infrmatin r feed-based text cntent
(weather news RSS feed).
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Text List MAy cntain images, if the are relevant fr
the tpic, but the MUST NoT be the main fcus f
the page.
• Text Lin List (Related lins) MAy be used if neces-
ary.
CRUMBTRAIL - BoTToM
TEXT LIST
- BULLeteD
- nUMBeReD- SECTIoN LIST- PARAGRAPH LIST
TEXT LINk LIST (RELATED LINkS)
CRUMBTRAIL - ToP
HEADER
SEE F2
SEE D1
SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 35/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 35
Mre text list examples
Lottery reslts
Li i
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 36/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 36
Liig
Page templateExample Rles
4.3.2. Plalists and schedules Plalists and schedules template lists prgrammes in chrnlgical
rdr. thy ca b ud fr liig a fu ll bradcaig chdul f a
channel r a subsectin, e.g. a schedule fr prgramme.
HEADER
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Heading MUST be used t indicate the cntext f the
schedule. It can be a date, prgramme name r ther
relevant heading describing the cntent f the page.
• Anchrs SHoULD be used after each Schedule md-
ule, if the page is lnger than 600 pixels.
• Picer - Time f Da bject SHoULD be shwn n
tp f the page t allw eas switching between
im.
CRUMBTRAIL - BoTToM
sCHeDULe
ANCHoR
PAGE TITLE
ANCHoR
sCHeDULe
PAGINATIoN
CRUMBTRAIL - ToP
SEE E2
SEE E2
SEE A5
SEE A4
SEE A6
SEE A6
SEE A1
SEE A2
SEE A3B
SEE A3A
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 37/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 37
Mre plalist and schedule examples
upcoming episodes Season episode listing
Liig
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 38/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 38
Liig
Page templateExample Rles
4.3.3. sarch rul Search result template is used fr listing search results. Currentl
this is specic fr Hg2g sectin.
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Search Result Stats MUST be the tpmst mdule n
this page.
• sarch Rul MUst fllw sarch Rul sa.
• Search Bx MUST be shwn n the bttm f the
page, but abve the Crumbtrail - Bttm mdule.
CRUMBTRAIL - BoTToM
SEARCH RESULTS
SEARCH RESULT STATS + LINk To FILTER
FILTER
PAGINATIoN
SEARCH BoX
CRUMBTRAIL - ToP
HEADER
= cdiial
mdul
tBD
tBD
tBD
tBD
SEE A5
SEE A1
SEE A2
SEE A3B
SEE A3A
Liig
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 39/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 39
Liig
Page templateExample Rles
4.3.4. Weather list Weather list template is used fr listing weather frecasts and
wahr warig.
FooteR
CRUMBTRAIL - BoTToM
5 DAy FoRECASToR
24 HR FoRECAST
PAGE TITLE
• XHTML page SHoULD NoT exceed 20 inclusive f mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part f
the glbal navigatin. The MUST be used tgether n
a page.
• Heading MUST be lcated n tp f the page.
• Frca mdul MUst fllw Hadig.
CRUMBTRAIL - ToP
HEADER
tBD
SEE A4
SEE A1
SEE A2
SEE A3B
SEE A3A
Liig
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 40/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 40
Liig
Page templateExample Rles
4.3.5. Lin list Lin list is a page template fr page cntent cnsisting f lins ac -
cmpanied b a heading and ptinall a line f bd text.
Fr example: Trafc reprt index page, Ltter results index, Ft-
ball scres index, Radi 1 Traclistings index page, Fd ingredient
guide index.
FooteR
CRUMBTRAIL - BoTToM
PAGE TITLE
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• Intrductin SHoULD be used n the page t ex-
plain the purpse and cntext f the lin list.
• Secndar List MUST be used t list text lins.
TEXT LINk LIST
BANNER TBD
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE A4
SEE D1
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 41/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 41
4.4. MEDIA GALLERy PAGES
Media galler pages are all related t brwsing and view -ing images and vides, r listening t audi thrugh vari-
us galler pages.
Mdia Gallry
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 42/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 42
y
Page templateExample Rles
4.4.1. Galler index Asset/media listing template is used n pages that ffer either ne
r multiple lins t media cntent. E.g. the latest headlines frm
BBC News in high and standard qualit stream. other tpical uses
are image dwnlad pages that ffer the same cntent in varius
sies. This page tpe can cntain text and images in additin t the
lik.
FooteR
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• A Galler index page MUST cnsist f minimum 5
mdia mdul f am kid.
• An Media lin r media prm mdule MAy be
repeated as man times as necessar.
• Paginatin MUST be used when the list cnsists f 10
r mre Media prm mdules.
• Paginatin MUST be used when the list cnsists f 20
r mr Mdia Lik mdul.
• Lining rules:
CRUMBTRAIL - BoTToM
MEDIA LINk
oR
MEDIA PRoMo
TEXT LINk LIST (RELATED LINkS)
PAGINATIoN
1. Audi List, Vide List r Image List mdule MUST
be used when lining directl t the media le.
2. Media List - Audi/Vide/Image mdule MUST be
used when lining t a page where the user can
chse between varius sie and qualit ptins.
BANNER TBD
CRUMBTRAIL - ToP
HEADER
= cdiial
mdul
SEE A1
SEE A2
SEE A3B
SEE A3A
SEE D1
SEE A5
SEE D2, C3
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 43/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 43
Mre Galler index examples
>Click Adio listing
BANNER TBD
Mdia Gallry
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 44/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 44
Page templateExample Rles
4.4.2. Sequential item page Sequential item page template is used fr presenting ne entr in
a sequence. Each page is lined t the previus and next entr, s
that the users can navigate thrugh the sequence. E.g. a blg psts,
qui, image galleries and guides.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• If Article mdule is used, the MUST be full articles
n a single page, as paging is nt allwed in this cn-
text.
• Next-Previus Navigatin lins MUST be used t al-
lw navigatin between Images and Articles.
IMAGE VIEWER
oR
ARTICLE
oR QUIz
PAGINATIoN
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE G1, F2, TBD
SEE A5
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 45/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 45
4.5. ACTIoNABLE PAGES
There are varius tpes f list page templates:
• Media bject page
• Launch page
• Widget page
• Frm page
Actinable pages
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 46/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 46
Page templateExample Rles
4.5.1. Media bject page Media bject page shws a single image (in sme cases als audi
r vide) le that can be viewed n the page. There is n ther
cntent n the page.
NoTE: The device plas audi and vide les with their native
media plaer applicatins, thus this page is a bacup ptin fr
audi and vide cntent.
IMAGE FILE
[VIDEo FILE oR AUDIo FILE]
• XHTML page SHoULD NoT exceed 20 inclusive f mar-up, CSS and images.
• The users end up n this page when selecting an im-
age sie frm a list f ptins.
• The users can save the image t their devices using
the ptins in the device’s native UI.
• This page is a dead-end: The users navigate awa frm
this page b using their device’s native UI lgic, e.g.
bac -ptin.
• The native UI f the device handles the vide and au-
di les. E.g. the brwser hands ver t a media plaer
when the user se lects t view a vide. When the
vide has nished, the media plaer (generall) ffers
an ptin t return t the web page.
Actinable pages
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 47/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 47
Page templateExample Rles
4.5.2. Launch page Launch page presents a lin fr launching r dwnlading an ap -
plicatin. It is als used fr functins such as launching a webcam
r scripts e.g. Shaespearian Insult Generatr.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• The page MUST shw instructins t explain the p-
tins n the page.
• Instructins MUST be the tpmst mdule n the
bdy mdul.
SIMPLE TEXT
IMAGE VIEWER
oR
TEXT LINk LIST
oR
MEDIA LINk LIST
oR
CALL To ACTIoN
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE F1
SEE G1, D1, D2, C4
PAGE TITLESEE A4
Actinable pages
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 48/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 48
Page templateExample Rles
4.5.3. Widget page Widget pages are used fr presenting widgets such as a calendar
date picer r a cntextual search eld fr weather frcasts.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• The page SHoULD cntain a page heading t ex-
plain the purpse f this page.
• Next-Previus Navigatin MUST be used with Picer-
Caldar mdul, bu i MUst not b ud wih
Picer-Alphabetical and Search Bx.
• Page Specic Lins MUST be used n Weather sec-
tin t accmpan the Search Bx mdule.
PICkER - CALENDAR oR
PICkER - ALPHABETICAL
oR
SEARCH BoX
PAGE TITLE
PAGINATIoN
PAGINATIoN
oR TEXT LINk LIST (RELATED LINkS)
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE A4
SEE A5
SEE G4, G5, TBD
SEE A5, D1
Actinable pages
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 49/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 49
Page templateExample Rles
4.5.4. Frm page Frm pages are used n pages where the user is ased t submit
infrmatin, e.g. surves, user generated cntent r feedbac.
FooteR
CRUMBTRAIL - BoTToM
FoRM
SIMPLE TEXT
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• The page MUST shw instructins r ther infrma-
tin abut the purpse f the frm.
• Frm mdule SHoULD be visible abve the fld.
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
SEE F1
SEE G2
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 50/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 50
4.6. ADMINISTRATIVE PAGES
There are fur tpes f administrative page templates:
• Settings and preferences
• Alerts and errrs
• Cnrmatin page
• Custmise hme page
Administrative pages
!
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 51/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 51
Page templateExample Rles
!
4.6.1. Settings and preferences Settings and preferences template presents the user with ptins
t chse frm a list f alternatives. E.g. Chsing a preferred ver -
i f h mbil i.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page SHoULD NoT exceed 20 inclusivef mar-up, CSS and images.
• Crumbtrail - Tp and Crumbtrail - Bttm are part
f the glbal navigatin. The MUST be used tgether
n a page.
• If a Disclaimer (Text mdule) is shwn n the page, it
MUST be shwn n the bttm f the page.
PReFeRenCes
ANCHoR
SIMPLE TEXT
oR
DISCLAIMER
CRUMBTRAIL - ToP
HEADER
= cdiial
mdul
SEE A1
SEE A2
SEE A3B
SEE A3A
tBD
SEE A6
SEE F1, G8
Administrative pages
!
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 52/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 52
Page templateExample Rles
!
4.6.2. Aler ts and errrs This page template infrms the user abut errr situatins and
ther tpes f alerts.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page MUST be as light as pssible.• Crumbtrail - Tp and Crumbtrail - Bttm are part f
the glbal navigatin. The MUST be used tgether n
a page.
• Alert MUST be shwn n the tp f the page.
ALERT
[ANy MoDULE DEPENDING oN THE PAGE CoNTEXT]
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
see G3
Administrative pages
!
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 53/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 53
Page templateExample Rles
!
4.6.3. Cnrmatin page The user can see a cnrmatin page, after accmplishing a tas,
fr example after submitting feedbac.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page MUST be as light as pssible.• Crumbtrail - Tp and Crumbtrail - Bttm are part f
the glbal navigatin. The MUST be used tgether n
a page.
• Cnrmatin message MUST be related t the cn-
text. E.g. “Thans fr ur feedbac n bbc.c.u/m -
bile.” instead f “Thans.“CoNFIRMATIoN
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
see G3
Administrative pages
!
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 54/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 54
Page templateExample Rles
!
4.6.4. Custmise hme page The user can add and remve mdules n their hme page
thrugh this page template.
FooteR
CRUMBTRAIL - BoTToM
• XHTML page weight depends n the cntext andpurpse. An custmisatin prjects are managed b
cral am.
• Crumbtrail - Tp and Crumbtrail - Bttm are part f
the glbal navigatin. The MUST be used tgether n
a page.
• Custmisable List MUST be the tpmst mdule n
h bdy mdul.
• Help Lins MUST be placed n the bttm f the
page but abve the Crumbtrail - Bttm.
CUSToMISABLE LIST
HELP LINkS
CALL To ACTIoN
CRUMBTRAIL - ToP
HEADER SEE A1
SEE A2
SEE A3B
SEE A3A
tBD
SEE C4
SEE G6
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 55/84
55BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
5. Mdules — Index
A BasicsA1 Header
A2 Fter
A3 Crumbtrail (Tp & Bttm)
A4 Page Title
A5 Paginatin
A6 Anchr
B Tpics
B1 Tpic
B2 Subtpic
C Prm
C1 Main Prm (Editrial Prm)
C2 Head line Prm
C3 Mdia Prm
D Lik Li
D1 Text Lin List
D2 Media Lin List
e Prgramm rlad mdul
E1 Nw n Air
E2 Schedule
F Text mdules
F1 Simple Text
F2 Article
F3 Text List
G ohr
G1 Image Viewer
G2 Frm
G3 Aler t & Cnmatin
G4 Picer - Calendar
G5 Picer - Alphabetical
G6 Help Lins/FAQ
G7 Call T Actin (CTA)
G8 Diclaimr
LegendMdul
Mandatory element
Optional element
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 56/84
56BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A1 Header
use:
Design Rle:
Devices:
First item n a BBC Mbile page.
Currentl being dened as part f branding wr.
This mdule ls & wrs identical n all devices.
WORK IN PROGRESSCurrentlybeingdenedaspartofbrandingwork.
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 57/84
57BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A2 Fter
Strctre
Elements
use:
Design Rle:
Devices:
Prvides user with standard set f lins frm an BBC Mbile site.
Psitin directl underneath Crumbtrail Bttm. Cntent and labels are xed and the 5-6 lins have t appear as bulleted list.
There are 3 different appearances depending n device capabilit. See examples be lw.
Example 1 (eg. iPone, N95)
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Link - Go to desktop site
& divider
Fixed. Lins t
http://www.bbc.c.u/mbile/prefs/index.shtml
y 1 text xed y
(see cmment)
onl appears n devices that are able t displa html.
Jasn Quinn recmmends t cde this part as a separate
mdul.
Link - Cstomise yor
omepage
Fixed. Lins t
http://www.bbc.c.u/mbile/custmise/ps
nl relevant
HP
1 text xed y
Link - Prefernces Fixed. Lins t
http://www.bbc.c.u/mbile/prefs/index.shtml
y 1 text xed y
Link - FAQ Fixed. Lins t
http://www.bbc.c.u/mbile/faq/index.shtml?
y 1 text xed y
Link - Contact us Fixed. Lins thttp://www.bbc.c.u/mbile/custmise/cntact
y 1 text xed y
Link - Terms of use Fixed. Lins t
http://www.bbc.c.u/mbile/termsfuse
y 1 text xed y
Link - Privacy policy Fixed. Lins t
http://www.bbc.c.u/mbile/privac
y 1 text xed y
Copyrigt mark Shuld alwas shw current ear (2009) y 1 text xed, update ear y
Link - Cstomise yor omepage
Link - FAQ
Link - Contact us
Link - Privacy policy
Copyrigt mark
Example 2 (eg. Sony Ericsson k310iv)
Link - Preferences
Example 2 (eg. Samsng x820)
Link - Go to desktop site
= high-end devices, able t displa html = advanced devices, nt able t displa html = basic devices
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 58/84
58BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A3 Crumbtail Tp & Bttm
Strctre A3a - Top
Elements
use:
Design Rle:
Devices:
Shws a lin t BBC Hme plus lins t the tw fllwing levels in the hierach f the sitemap. Tp & Bttm shw the same 3 lins, just in reverse rder.
Psitin-Tp is directl underneath header. Psitin-Bttm is abve Fter.
This mdule ls & wrs identical n all devices.
Example - Top
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
BBC home
(= higest page)
BBC Hm lik y 1 text xed y
BBC home uRL URL Mbil HP y 1 text, URL
frma
xed crradr r
n rllver
2nd igest page Page title f the page that sits 2nd highest in the hier -
achy f h Mbil i.
y, if hr i
a page abve
h curr
1 text n/a as cmes frm page
title f page this lins
rfr
y
2nd igest page uRL
(as above)
URL fr page y 1 text, URL
frma
n/a as cmes frm page
hi lik rfr
crradr r
n rllver
3rd igest page Page title f the page that sits 3rd highest in the hier -
achy f h Mbil i . thi ma h cr umbrail may
nt shw the page that sits right abve the displaed
page in the site hierach (eg. if the displaed page sits
deeper dwn in the site hierach then level 4).
y, if hr i
a page abve
h curr
1 text n/a as cmes frm page
title f page this lins
rfr
y
3rd igest page uRL
(as above)
URL fr page y 1 text, URL
frma
n/a as cmes frm page
hi lik rfr
crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Example - Bottom
BBCHOME(xedlabel)
2ND hIGhEST PAGE
3RD hIGhEST PAGE
(te one tat ieracically sits on level
3 of te Mobile hP sitemap)
Strctre A3b- Bottom (= order opposite)
BBCHOME(xedlabel)
2ND hIGhEST PAGE
3RD hIGhEST PAGE
(te one tat ieracically sits on level
3 of te Mobile hP sitemap)
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 59/84
59BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A4 Page Title
Strctre
Elements
use:
Design Rle:
Devices:
Imprtant fr crumbtrail, & search indexing. In man cases the Page Title is identical t the title f the rst mdule used n the page, eg. Article Title, List Title.
If the rst mdule has a title then dn’t displa the page title if the text wuld be duplicated then. Hwever, page title alwas must alwas be part f the nn-visi -
ble mar-up.
This mdule ls & wrs identical n all devices.
Example 1 Example 2
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Article title Str title, functins as page title y 1 text 33 characr* if mdul
il i idical
* Might be necessar smetimes t have lnger title but
recmmendatin is t eep it belw 33 characters.
Imprtant: Use Article Title as Page Title in mar -up!
Example 3PAGE TITLE
In this case u see a page listing media lins. (mdule
‘Media Lin List’). The title given t the list ‘Stephen’s Dis-
patches’ is what shuld be used as Page Title - hwever, n
need t displa it again as it alread is displaed.
In this case u see an article page with a an Article md -
ul. th aricl i l i ‘Villagr challg Ggl camra’.
This is what s huld be used as Page Title - hwever, n
need t displa it again as it alread is displaed as part f h aricl.
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 60/84
60BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A5 Paginatin
Strctre
Elements
use:
Design Rle:
Devices:
Allws user t navigate thrugh a lng listing, fr example Search Results.
Psitin abve Crumbtrail-Bttm when cntent cntinues. Alwas eep labels and rder as stated belw (Next / Previus). Highlight current page number.
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Next link Label xed. Lin is active and lins t previus page
- unless user currentl sees page 1 f a series f pages.
y 1 text xed y Requires sme lgic in the cde t have this lin t the
right page.
Next link uRL Page the next lin lins t y 1 text, URL
frma
255 characters crradr r
n rllver
Previos link Label xed. Lin is active and lins t previus page
- unless user currentl sees page 1 f a series f pages.
y 1 text xed y Requires sme lgic in the cde t have this lin t the
right page.
Previos link uRL Page the previus lin lins t y 1 text, URL
frma
255 characters crradr r
n rllver
Orientation info Tells user hw man mre pages there are and which
f these are currentl displaed.
y 1 text Page <insert current> f
<insert ttal>
y Requires sme lgic t insert inf crrectl.
NEXT LINK
PREVIOuS LINK
ORIENTATION INFO
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 61/84
61BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
A6 Anchr
Strctre
Elements
use:
Design Rle:
Devices:
Allws user t quic jump t cntent further dwn the same page oR bac t the tp f the page.
Inserted manuall r autmaticall n lng pages. Use standard icns as shwn in examples belw. Recmmendatin is that a ‘Tp’ lin allwing users t get t the
tp f the page shuld be ffered ever 3-5 paragraphs.
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Icon Standard icns fr quic jump up and dwn. y 1 text xed y
Ancor link text Label exible - hwever if used t allw users t navi -
gate t tp f the page xed t ‘Tp’.
y 1 text max. 33 characters recm-
mdd
y
Ancor link uRL Reference t anther item n the page (psitined
abve r belw).
y 1 text Page <insert current> f
<insert ttal>
y Requires that editr/user can select an ther item n the
page t create the anchr lin reference.
ANChOR LINK
Example 2
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 62/84
62BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
B1 Tpic
Strctre
Elements
use:
Design Rle:
Devices:
Separates different cntent areas n an index page. Fr this t mae sense there shuld be at least 2 tpics per index page. Enables users t scan the page easil
when scrlling dwn/scanning the page. Tpic headings shuld lin t index pages r ther majr pages, eg. schedule. Edit functinalit is nl available n HP.
Used mainl n index pages. Psitin rst tpic directl underneath crumbtrail-tp r Main Prm.
This mdule ls & wrs identical n all devices (except Edit buttn that is nt available fr sme devices).
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Topic eading Prvides cntext fr belw cntent. Label carefull,
shuld be shrt & eas t understand.
y 1 text max. 20 charcters recm-
mdd
y
Topic eading uRL Pag h hadig lik y 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Edit btton CTA lining t custmisatin page 1 text xed label
Edit btton uRL Custmisatin page the prm lins t y* 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
1-3* = up t 3 headline prms can be added, each f them needs image, image alte text, prm text and URL nce.
es * = if edit buttn has been added, then these elds are required.
TOPIC
hEADING
EDIT
BuTTON
ToPIC HEADING is the nl element unique t the Tpic mdule. All ther elements can be created b
inserting ther mdules int the Tpic mdule (eg. Text Lin List r Headline Prm).
yu can add a variet f mdules
t a tpic. Examples:
- Subtpic
- Hadli Prm
- Mdia Prm
- Text Lin List
- Mdia Lik Li
c.
= Hadli Prm
= Text Lin List with additnal lins
= Mdia Lik Li
= Subtpic
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 63/84
63BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
B2 Subtpic
Strctre
Elements
use:
Design Rle:
Devices:
Separates different cntent areas within a tpic n an index page. Fr this t mae sense there shuld be at least 2 subtpics per tpic. Enables users t scan the
page easil when scrlling dwn/scanning the page. Subtpic headings can lin t index pages, nt a must thugh.
Used mainl n index pages as part f tpic mdules.
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Sbtopic eading Prvides cntext fr belw cntent. Label carefull,
shuld be shrt & eas t understand.
y 1 text max. 20 charcters recm-
mdd
y
Topic eading uRL Index page the heading lins t 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
SuBTOPIC
hEADING
SUBToPIC HEADING is the nl element unique t the subtpic mdule. All ther elements can be created b
inserting ther mdules int the subtpic mdule (eg. Text Lin List r Headline Prm).
yu can add a variet f mdules
t a subtpic. Examples:
- Hadli Prm
- Mdia Prm
- Text Lin List
- Mdia Lik Li
c.
= Text Lin List with additnal lins
Tpic
= Tpic Heading
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 64/84
64BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
C1 Main Prm (als nwn as ‘Editrial Prm’)
Strctre
Elements
use:
Design Rle:
Devices:
Prmtes an ar ticle/item. Prm lins t a page. Prm image & text nl, nl additinal lin can be an av lin (fr prm with av see ‘Media Prm’).
Psitin directl underneath breadcrumb n tp f an index page.
This mdule ls & wrs identical n all devices.
Example 1 Example 2 Example 3
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Promo image Big prm image y 1 jpeg, gif 320 x 179px oR
240 x 134px oR
165 X 93px
y
Promo image alt text Dcr ib imag c, ud fr crradr y 1 text 125 characters crradr r
n rllver
Promo text Editrial prmtin text, functins as call-t-actin t
encurage user t clic n the prm image/text and
nd ut mre
y 1 text max. 70 characters recm-
mdd
y
Promo uRL Page the prm lins t y 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link text Editrial text, prmtes availabilit f mre related
c
1 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1 crlld li text oR audi oR vide y a ic
es * = if editr chses t add an additinal lin, then these elds are required.
PROMO TEXT
IMAGE
ADDITIONAL LINK
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 65/84
65BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
C2 Headline Prm
Strctre
Elements
use:
Design Rle:
Devices:
Prmtes 1-3 articles/items. Each prm lins t a page. Prms is image & text nl. NoT media. Additinal lin can be av (fr av prm see ‘Media Prm’).
Psitin directl underneath breadcrumb n tp f an index page r as rst item within a tpic mdule.
This mdule ls & wrs identical n all devices.
Example 1 Example 2
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Promo image Small t medium sied prm image y 1-3* jpeg, gif 86 x 48px oR
66 x 93px
y
Promo image alt text Dcr ib imag c, ud fr crradr y 1-3* text 125 characters crradr r
n rllver
Promo text Editrial prmtin text oR headline, functins as
call-t-actin t encurage user t clic n the prm
image/text and nd ut mre
y 1-3* text max. 70 characters rec-
mmdd
y
Promo uRL Page the prm lins t y 1-3* text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
1-3* = up t 3 headline prms can be added, each f them needs image, image alte text, prm text and URL nce.
Example 3 (alternative image size)
PROMO TEXT
PROMO TEXT
PROMO TEXT
IMAGE
IMAGE
IMAGE
Mdul
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 66/84
66BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
C3 Mdia Prm
Strctre
Elements
use:
Design Rle:
Devices:
Prmtes 1-3 av items. Prm taes user t item page where he can than launch the media item.
Psitin directl underneath breadcrumb n tp f an index page r as rst item within a tpic mdule. Alwas has watch/listen icn.
Devices that can’t pla the media item will nt shw this mdule.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE/VALuE/
LENGTh
VISIBLE? COMMENT
Promo image Small t medium sied prm image y 1-3* jpeg, gif 86 x 48px oR
66 x 93px
y
Promo image alt text Dcr ib imag c, ud fr crradr y 1-3* text 125 characters crradr r
n rllver
Title, eg. Now on air OR
Next on
Prvides user with cntext abut the prmted media
im
1-3* text max. 33 ch-
arcr rcm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Programme Brand Cre infrmatin abut media item. Lins t /pr-
grammes page fr the currentl bradcasted episde.
URL in sme cases might cme frm PIPS.
y 1-3* text ??? PIPS
Promo uRL Page the prm lins t y 1-3* text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frma t “http:// ...”
Episode title &
description
Additinal infrmatin abut the media item 1-3* text ??? PIPS y
Broadcast time / Lengt Additinal infrmatin abut the media item 1-3* 00:00 - 00:00oR 0 min
c mm y Bradcast time cmes frm PIPS. Length cmes frm clipoR fr clip can be added b editr manuall.
Additonal link text Editrial text, prmtes availabilit f mre related
c
1 text max. 33 char -
acr rcm-
mdd
Additonal link uRL
(Link sold be text link)
Pag h addiial lik lik y* 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frma t “http:// ...”
Additonal link type Denes lin tpe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1 crlld li text oR audi
oR vide
y a ic
1-3* = up t 3 prms can be added, each f them needs t have an identical ar rangement f elements. es * = if editr chses t add an addit inal lin, then these elds are required.
Example 2
LABEL eg. Now on air
Up t 3 prms. All shuld have an
idical arragm f lm.
EPISODE TITLE
BROADCAST TIME /
LENGTh
ADDITIONAL LINK
EPISODE DESCRIP.
Mdul
D1 T Li Li
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 67/84
67BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
D1 Text Lin List
Strctre
Elements
use:
Design Rle:
Devices:
Listing simple text lins. Nte: This mdule can als be used if nl 1list item needs t be listed.
List can have a list title but this is ptinal. List items can be bulleted r nn-bulleted. Use this mdule fr Related Lins.
This mdule ls & wrs identical n all devices. Hwever, n small displa devices lng items might wrap int a secnd rw.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
List type Bulld r -bulld r umbrd. y 1 crlld li simple oR bulleted oR
umbrd.
Denes if bullet pints r numbers shuld be displaed
i fr f im
List title Prvide cntext 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar -up. n sme
pages.
List item text shr lik il. y 1-x* text max. 70 characters recm-
mdd
y
List item uRL Pag h li im lik y 1-x* text 255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link text Editrial text, prmtes availabilit f mre relatedc
1-3 text max. 33 characters recm-mdd
y
Additonal link uRL Pag h addiial lik lik y* 1-3 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1-3 crlld li text oR audi oR vide y a ic
1-x* = unlimited list items allwed
es * = if editr chses t add an additinal lin, then these elds are required.
ADDITIONAL LINK
LIST TITLE
Up t X list items allwed. All shuld
ihr b bulld r -bulld.
LIST ITEM TEXT
Example 3 Example 5
Example 2 Example 4
Mdul
D2 M di Li Li
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 68/84
68BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
D2 Media Lin List
Strctre
Elements
use:
Design Rle:
Devices:
Listing av items. Nte: This mdule can als be used if nl 1media item needs t be listed.
List can have a list title but this is ptinal. Each list item is shwn with the standard av icn (watch/listen, see visual guidelines sectin).
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
List title Prvide cntext 1 text max. 33 characters recm-
mdd
y Might be used a s Page Title as well in mar-up. n sme
pages.
List item text shr lik il. y 1-x* text max. 70 characters recm-
mdd
y
List item uRL Pag h li im lik y 1-x* text 255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
List item type Denes lin tpe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y 1-x* crlld li audi oR vide y a ic
Additonal link text Editrial text, prmtes availabilit f mre related
c
1 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frma t “http:// ...”
Additonal link type Denes lin tpe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1 crlld li text oR audi oR vide y a ic In this case this shuld be a text lin.
1-x* = unlimited list items allwed
es * = if editr chses t add an additinal lin, then these elds are required.
ADDITIONAL LINK
LIST TITLE
Up t X list items allwed.
LIST ITEM TEXT
Example 3Example 2
Mdul
E1 N i
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 69/84
69BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
E1 Nw n air
Strctre
Elements
use:
Design Rle:
Devices:
Prvides an verview ver current bradcast n 1 r mre channels/statins. Data prvided b PIPS feed.
Psitin as rst item within a tpic mdule. Alwas label ‘Nw n air’ (either b maing this the tpic heading r b using the status element).
This mdule ls & wrs identical n all devices. Hwever, n small displa devices the Prgramme Brand might wrap int a secnd rw.
Example 1 Example 2 (wit location cstomisation)
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Stats Prvides user with cntext abut the schedule items. 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up. n sme
pages. Status ‘Nw n air’ is necessar if tpic heading is
‘Radi’. Status ‘Nw n air’ is nt necessar if tpic head -
ing underneath schedule appear s is ‘Nw n air’ alread.
Station/Cannel shr Labl fr ai/chal a agrd fr Mbil.
Lins t statin/channel page. URL t cme frm PIPS
r hardcdd.
y 1-x* text 15 characters y
Programme Brand Cre infrmatin abut a schedule item. Lins t /pr-
grammes page fr the currentl bradcasted episde.
URL t cme frm PIPS.
y 1-x* text PIPS y
Image for Broadcast Item
(Comes from iPlayer)
iPlaer image sie
86x48px
Additonal link text Editrial text, prmtes availabilit f mre related
c
1-3 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1-3 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1-3 crlld li text oR audi oR vide y a ic
1-x* = unlimited statins/channels allwed,, fr each ne chsen a prgramme brand needs t be shwn.
es * = if editr chses t add an additinal lin, then these elds are required.
Example 3
STATuS, eg. Now on air
PROGRAMME BRAND
Up t X channe;ls/statins. All shuld
have an identical arrangement f
lm.
STATION/ChANNEL
ADDITIONAL LINK
IMAGE
WORK IN PROGRESS
Please do not se tis as a
design example
Mdul
E2 S h d l
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 70/84
70BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
E2 Schedule
Strctre
use:
Design Rle:
Devices:
Lists directl sequentiall bradcasted items. Items lin t APS episde pages. Dn’t cnfuse with Nw n Air (shws what’s currentl bradcasted) r Media Pr-
ms (lists nn-sequential media items).
Ideall a schedule shuld be its wn page r at least be the dminating mdule n a page. Avid cmbining it with t man ther mdules.
This mdule ls & wrs identical n all devices.
Example 2
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE VISIBLE? COMMENT
Scedle Title tll h ur wha im fram h chdul i fr. y 1 text max. 33 char -
acr rcm-
mdd
y Might be used a s Page Title as well in mar-up. n sme
pages.
Image fr Bradcast Item 66x37px
Broadcast time sar ad d im f h bradca y 1-x* 00:00 - 00:00 13 characters y Bradcast time cmes frm PIPS.
Programme Brand Cre infrmatin abut media item. Lins t APS epi-
sde page fr this item. URL t cme frm PIPS.
y 1-x* text PIPS (/Pr-
gramm)
y Prgramme brand cmes frm PIPS.
Episode title Species which episde f the brand is bradcasted.
Migh al hw sri umbr
y 1-x* text PIPS (/Pr-
gramm)
y Episde title cmes frm PIPS.
Episode description(sort) Shrt infrmatin abut the episde. 1-3* text PIPS (/Pr-gramm) y Episde descriptin cmes frm PIPS.
1-x* = up t x bradcast items can be shwn, each f them needs t have an identical arrangement f elements.
es * = if editr chses t add an additinal lin, then these elds are required.
IMAGE
SChEDuLE TITLE
Up t X bradcast items can be listed.
All shuld have an identical arrange-
m f lm.
PROGRAMME BRAND
EPISODE TITLE
BROADCAST TIME
EPISODE DESCRIP.
Mdul
F1 Si l T t
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 71/84
71BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
F1 Simple Text
Elements
use:
Design Rle:
Devices:
An frm f descr iptin r infrmatin. Text can cntain inline text lins. bld wrds and lists.
Usuall used as part f article r frm. If used as stand alne item add a title - avid stand-alne/ating items as the ma cnfuse users. If text is quite lng use
bld paragraph beginnings t help users r ientate themselves. yu ma als want t add anchr lins n lng pages.
This mdule ls & wrs identical n all devices.
Example 1Strctre
ADDITIONAL LINK
TITLE
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Text title Prvide cntext, heading 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar -up. n sme
pages.
Body text Allw fr parts f the text t be bld/clured r be
inline lins t ther pages.
y 1 text max f 1000 characters (?) y
Additonal link text Editrial text, prmtes availabilit f mre related
c
1-3 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1-3 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1-3 crlld li text oR audi oR vide y a ic
1-x* = unlimited list items allwed
es * = if editr chses t add an additinal lin, then these elds are required.
BODY TEXT
INLINE LINK
BOLD /COLOuRED TEXT
Mdul
F2 A ti l
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 72/84
72BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
F2 Article
Strctre
Elements
use:
Design Rle:
Devices:
Str page r an ther text based cntent. Paragraphs shuld nt cntain mre than 5 sentences. Can have ‘Have ur sa’ cntent & related lins at the end.
Allw fr inline lins t ther pages & anchrs t the tp f the page. Allw maing text bld and/r gre, this will help users rientating themselves n pages.
This mdule ls & wrs identical n all devices.
Example 1 Example 1 (contined)
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Article title image Small t medium sied image, similar t prm image 1 jpeg, gif 86 x 48px oR
66 x 93px
y
Article title image alt text Dcr ib imag c, ud fr crradr y 1 text 125 characters crradr r
n rllver
Article title Str title, functins as page title y 1 text 33 characr* * Might be necessar smetimes t have lnger title but
recmmendatin is t eep it belw 33 characters.
Imprtant: Use Arti cle Title as Page Title in mar-up!
Article time stamp Infrms user abut publishing time f the str 1 text,
xed frmat
see example 1fr frmat y
Article body text Main bd text. Ideall cnsists f lead paragraph and
several paragraphs.. Allw fr parts f the text t be
bld/clured r be inline lins t ther pages. Add
anchr lins after 3-5 paragraphs t allw user t get
t tp f the page quicl.
y 1 text min. 200 characters
max f 1000 characters (?)
y
have yor say qotes Lie main bd text, just allws fr a small graphic at
the beginning f the paragraph.
1 text & small
imag/ic
max. 1000 (?) y
have yor say form Allws users t submit a cmment. 1 text /a y This is a sep arate mdule, see ‘G2 Frm’ fr details.
Text Link List
(Related links)
Prvides additnal lins. 1 text, URL
frma
/a crradr r
n rllver
This is a separate mdule , see ‘D1 Text Lin Lis t’ fr
dail.
Example 2
ARTICLE BODY TEXT
IMAGE
ARTICLE TITLE
ARTICLE TIME STAMP
ANChOR
BOLD /COLOuRED TEXT
hAVE YOuR SAY QuOTE WITh ICON
hAVE YOuR SAY FROM
Mdul
F3 Text List
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 73/84
73BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
F3 Text List
Strctre
Elements
use:
Design Rle:
Devices:
Listing simple text items.
List can have a list title but this is ptinal. List items can be bulleted r numbered.
This mdule ls & wrs identical n all devices. Hwever, n small displa devices lng items might wrap int a secnd rw.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
List type Bulld r umbrd. y 1 crlld li bulld oR umbrd. Denes if bullet pints r numbers shuld be displaed
i fr f im
List title Prvides cntext. 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar -up. n sme
pages.
List item text Text. y 1-x* text max. 200 characters rec-
mmdd
y
Additonal link text Editrial text, prmtes availabilit f mre related
c
1-3 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1-3 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1-3 crlld li text oR audi oR vide y a ic
1-x* = unlimited list items allwed
es * = if editr chses t add an additinal lin, then these elds are required.
ADDITIONAL LINK
LIST TITLE
Up t X list items allwed. All shuld
ihr b bulld r umbrd.
LIST ITEM TEXT
Example 2
Mdul
G1 ImageViewer
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 74/84
74BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G1 Image Viewer
Strctre
Elements
use:
Design Rle:
Devices:
Displas a single r a cllectin f images. Allws t ffer CTAs fr dwnlad, add image title, captin and cpright infrmatin.
There is n xed image sie. Recmmendatin is that within a cllectin images have same sies t prvide cnsistenc.
Images are nt displaed and ma be replaced if the user has set his preferences t nt be shwn images. The behaviur is handled b the device’s brwser.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Collection title Prvides cntext. This is als required if there is nl 1
imag i h cllci.
y 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Image Medium t big sied image y 1-x jpeg, gif exible y Images within ne cllectin shuld have the same sie.
Image caption Dcrib imag c 1-x text max. 150 characters rec-
mmdd
y
Image copyrigt informa-
tion
Dcrib wh h imag i by 1-x text max. 70 characters recm-
mdd
y
Download CTA
(see Modle G7 for
details)
1-x xed ‘Dwnlad image (<le
sie>)’
y If several le sies are available we recmmend fllwing
example 2. (If u use example 1 the image captin &
paginatin elements are pushed dwn the page t far).
Pagination
(see Modle A5 for
details)
y 1 text xed y
PAGINATION
Example 2
IMAGE COPY RIGhT INFORMATION
IMAGE CAPTION
COLLECTION TITLE
IMAGE
DOWLOAD CTA (p to 3)
Mdul
G2 Frm
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 75/84
75BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G2 Frm
Strctre
Elements
use:
Design Rle:
Devices:
Allws end-users t submit cntent, eg. feedbac, stries, pinins r used fr registering cmpetitin entries. Entr elds can be chsen b editr and be made
mandatr r ptinal fr end-users t ll in.
Be clear with names fr entr elds. Use ‘Send’ as buttn at the bttm. Be aware that the mre entr elds u add the further dwn the page the ‘send’ buttn
gets mved.
This mdule ls & wrs identical n all devices.
Example 1 Example 2 (combining oter modles)
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
From title Prvide cntext. Might nt be necessar , eg. if text is
appearing befre the frm (dne b adding Mdule F1
Simple Text n tp).
1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Entryeld Allws user t enter text b selecting eld/clicing ‘Edit’
n his handset. 2 sies available.
y 1-x* frm eld 1 width =
2 heights:
1 line = fr name/phne/
umbr/mail/w
3 li = fr cmm,
ri c
y D nt mae the entr elds bigger than recmmended
as this will push the ‘send’ buttn dwn the page. Data
entr anwa happens n end-user’s handset edit view.
Requires that the editr maes a chice fr each entr
eld (in the CMS).
Entryeldlabel Tells user what t tpe int the eld. y 1-x* text 30 characters y
Entryeldtype Displa if the user has t ll in the eld r whether it is
ptinal. If it is ptinal t hen add ‘(ptinal)’ behind the
eld label. D nt shw * r ther indicatrs.
y 1-x* crlld li optinal vs. mandatr es, f ptinal Requires that the editr maes a chice fr each entr
eld (in the CMS).
Send btton Allws user t submit his infrmatin. D nt rename. y 1 jpeg, gif xed y Use standard buttn prvided b Mbile team.
es * = if editr chses t add an entr eld, then these elds are required.
Example 3 (combining oter modles)
SEND
BuTTON
FORM TITLE= F1 Simple Text
= F1 Simple Text
= F1 Simple Text
= D1 Text Lin LIst
= G2 Frm
= G2 Frm
ENTRY FIELD
ENTRY FIELD LABEL
ENTRY FIELD TYPE
Up t X entr elds allwed.
Mdul
G3 Alert & Cnrmatin
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 76/84
76BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G3 Alert & Cnrmatin
Elements
use:
Design Rle:
Devices:
Prvides user with feedbac t an actin. Feedbac can be psitive r negative. Use the additinal lin t ffer users where t g/what t d next. Text can cn-
ai bld wrd.
keep this page simple. Dn’t cmbine this mdule with ther mdules n a page (exceptin Header, Crumbtrail & Fter).
This mdule ls & wrs identical n all devices.
Example 1 Example 2Strctre
ADDITIONAL LINK
TITLE
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Alert/ConrmationTitle Prvide cntext, heading 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Message Text Use ver simple and eas-t-understand English. Allw
fr parts f the text t be bld/clured.
y 1 text max. f 200 characters
rcmmdd
y
Additonal link text Editrial text, prmtes availabilit f mre related
c
1-3 text max. 33 characters recm-
mdd
y
Additonal link uRL Pag h addiial lik lik y* 1-3 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Additonal link type Denes lin t pe, infrms whether ‘listen’ r ‘watch’
icns are displaed
y* 1-3 crlld li text oR audi oR vide y a ic
es * = if editr chses t add an additinal lin, then these elds are required.
MESSAGE TEXT
BOLD /COLOuRED TEXT
Mdul
G4 Calendar Picer
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 77/84
77BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G4 Calendar Picer
Strctre
Elements
use:
Design Rle:
Devices:
Allws users t mae a selectin b date. Main use scenari are schedule pages. Sme das in the calendar might nt be available fr selectin (inactive). once
the user has cliced n a date it shuld tae him t a cnrmatin screen.
Psitin directl underneath breadcrumb n tp f a page r after a ver shrt Simple Text paragraph (see mdule F1). The smallest width fr the calendar is
170px, the width shuld be stretch s it adapts t the screen.
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Picker title sowing
mont
Prvides cntext. y 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Picker text
(not sown in example)
Simple text mdule. If required the editr can prvide
m addiial ifrmai wha h ur huld
d n this page , eg. ‘Chse ur preferred date fr
X.’. Hwever, this shuld be shrt as the calendar will
therwise mve further dwn the page.
1 text max. 150 characters rec-
mmdd
y
Active days Das available fr selectin. In this example eg,. 1
March. Each active da is a lin. When the users clics it
shuld tae him t a cnrmatin screen oR - when
ud fr chdul brwig - h chdul liig fr h lcd day.
y 1-31 text/number <00> y Active das have tw stati:
nn-selected = default, eg. 1 March in example
selected = the user has fcussed n a da alread, eg. 31
March in example
Active days uRL Pag h day lik y 1-31 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Inactive days Das NoT available fr selectin. In this example eg.
12 March.
y 1-31 text/number <00> y
TITLE - MONTh
TEXT
DAY30 r 31 times
Mdul
G5Time f Da Picer
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 78/84
78BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G5 Time f Da Picer
Strctre
Elements
use:
Design Rle:
Devices:
Allws users t mae a selectin b time f da. Main use scenari are schedule pages.
Psitin directl underneath breadcrumb n tp f a page. D nt change an labelling. If used fr schedule brwsing d ffer lin t Calender Picer (see G4).
This mdule ls & wrs identical n all devices.
Example 1
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
Picker title Prvides cntext. y 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
Picker date shw da. y 1 text xed - shw date in fr -
mat shwn in example
y
Time of day links Fixed labelling fr all times f da, as shwn in example.
Wh h ur click f hm i huld ak him
h chdul li ig fr ha im f day. thi may b
further dwn the same page (anchr) r n a different
page.
y 4 text y
Browse more days link Allws user t change the date. Taes user t calendar
picer page (see mdule G4).
y 1 text xed label y
Browse more days link
uRL
Pag wi h h ca ldar ic k r hi l i k l ik y 1 text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
Icon Standard anchr icn (see mdule A6), shwn befre
ach im f day lik.
y 1 text xed y
BROWSE MORE DATES LINK
TITLE
DATE
MORNIINGICON
AFTERNOONICON
EVENINGICON
LATE NIGhTICON
Mdul
G6 Help Lins/FAQ
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 79/84
79BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G6 Help Lins/FAQ
Elements
use:
Design Rle:
Devices:
Pints user t help infrmatin. Use fr FAQ lists. Nte: This mdule can als be used if nl 1 help item needs t be listed.
If mre then 1 help lin is listed it ma mae sense mend u ma want t use a title. Each help item is shwn with the standard help icn (see visual guidelines
ci).
This mdule ls & wrs identical n all devices.
Example 1 Example 2Strctre
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
help list title Prvide cntext 1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
help Icon Standard icns fr audi and vide items. y 1-x* jpeg,,gif xed sie y Mu u adard ic.
help item text Help lin title. y 1-x* text max. 70 characters recm-
mdd
y
help item uRL Page the help item lins t y 1-x* text 255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
hELP LIST TITLE
Up t X list items allwed.
hELP ITEM TEXTICON
Mdul
G7 Call t Actin (CTA)
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 80/84
80BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G7 Call t Actin (CTA)
Strctre
Elements
use:
Design Rle:
Devices:
Use fr all CTAs that are nt watch/pla/listen.
Use verb t descr ibe actin, be as precise as pssible. Nte: Dn’t just invent a new icn fr CTAs, chec with Mbile UX Lead if u thin a new icn is required.
This mdule ls & wrs identical n all devices.
Example 1 Example 2
NAME DESCRIPTION REQuIRED? hOW OFTEN? DATA TYPE SIZE / VALuE / LENGhT VISIBLE? COMMENT
CTA image or Icon Image r Icn t help user understand what the CTA is
abu r fr.
1 jpeg, gif ??? y Dn’t just invent a new icn fr CTAs, chec with Mbile
UX Lead if u thin a new icn is required.
CTA Title Prvides cntext. onl maes sense if there is mre
than 1 CTA.
1 text max. 33 characters recm-
mdd
y Might be used as Page Title as well in mar-up n sme
pages.
CTA Text Describes what the user can d here. If the actin is
DoWNLoAD let the user nw le sie.
y 1-3 text max. 70 characters recm-
mdd
y
CTA uRL Hperlin executing the actin y 1-3* text, URL
frma
255 characters crradr r
n rllver
Ideall build validatin chec int CMS t chec entr
cmplies with URL frmat “http:// ...”
1-3* = up t 3 CTAs can be added, each f them needs a CTA URL
Example 3
IMAGE
OR ICON
TITLE (if tere are more tan 1 CTA)
Up t 3 CTAs can be added.
CTA TEXT
Mdul
G8 Diclaimr
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 81/84
81BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009
G8 Diclaimr
Elements
(same as F1 simple Text)
see F1 Simple Text fr details
Example 1
6 Technical requirements
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 82/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 82
6. Technical requirements
The BBC Mbile site cmes in tw distinct avurs,
WML (legac) and XHTML.
Arund 90% f the site is managed and published
thrugh ur CMS called the Wap Admin Tl. The WAT
wa rigially crad fr h maagm f WML i
and thugh it was repurpsed t utput XHTML, it’s
internal understanding f XHTML, CSS, objects, Classes
etc, is prett much nn existent. Fr this reasn we als
utput hand cded hbrid pages (which we call re-
sinned r re-freshed pages) that cater t higher design
requirements.
At rst glance there desn’t seem t much difference.Bu wh yu igr h glbally hadld lm uch
as the Banners and glbal navigatins such as Crumb and
Fters, the cntent in-between is relativel bland n the
WAT pages. With n semantic handling f mdules such
as Headers (H2’s, H3’s) r lists.
obviusl, ur ideal laut and glbal visual language
mving frward (fr xhtml sites) wuld be the re-sinned
pages that have been designed and cded the wa we
wad i.
Re-skinned page examples WAT pblised page examples
Te BBC omepage BBC News heroes omepage News page
6.1. BASIC TECHNICAL GUIDELINES
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 83/84
BBC Mbile Stle Guide - Glbal Visual Language fr the mbile web. Ben Guer, Riia Puustinen, Claudia Urschbach, Dan Dumitriu. Last mdied at 5:16 PM, 09 June 2009 83
• All sites/pages shuld have a WML and XHTML ver -
i ul rdirci ad acc ha b lckdut frm CMS (WAT) pages.
• WML pages must nt exceed 2 in mar-up r 6
inclusive f images
• XHTML page sies depend n the page tpe, please
see the page templates (Chapter 3).
• XHTML pages shuld cater t a minimum width f
170 pixels and supprt a stretch design/laut.
• Fnts shuld expected t be sans-serif and use n
mre than three relative sies as nl “x-small”, “small”
and “medium” must be used in CSS mar-up.
• The crumbtrail tp and bttm navigatin ech each
hr, ad currly* rla rucural hir archy ad mu b mr ha hr lik lg wih h
highest pint f navigatin alwas being “BBC Hme”.
• Templating (mar-up) fr glbal bjects such as Ban-
ners, Crumbtrail (tp and bttm) and Fter lins
must use prvided glbal includes and shuld nt be
duplicated r mdied.
* The site is mstl nn-dnamic, and therefre naviga-
tin in the crumb and fter are hierarchical. Mving fr -
ward t dnamic publishing, (n Frge fr example) it’s
quite pssible that navigatin can be ffered histricall.
Rfrc
8/3/2019 Mobile Guide v1.1 Compressed
http://slidepdf.com/reader/full/mobile-guide-v11-compressed 84/84
Rfrc
Mobile best practices
W3C, Mbile Web Best Practices 1.0http://www.w3.rg/TR/mbile-bp/
7 usabilit guidelines fr websites n mbile devices
http://www.webcredible.c.u/user-friendl-resurces/web-usabilit/mbile-guidelines.shtml
Editorial gidelines
Jim Har tt & Alice Gardiner, WAP Admin Tl User Guide & Sle Guide, WAT_User_Guide_1Dec08.dcx
WAT Training, http://wiis.gatewa.bbc.c.u/cnuence/displa/NMMoB/WAT+Training
Tne f Vice Guidelines vs 1.0
http://www.bbc.c.u/guidelines/futuremedia/restricted/desed/tv.shtml
th BBC edirial Guidli
http://www.bbc.c.u/guidelines/editrialguidelines/
Mbile Devices Guidance
bbc.c.u/guidelines/editrialguidelines/advice/mbiledevices
Visal design
Mbile screen reslutin calculatr: http://www.radreams.cm/prg/dpi.aspx
Effective design fr Multiple Screen Sies: http://mbifrge.cm/designing/str/effective-design-multiple-screen-sies
Tecnical details
Jasn Quinn, Mbile Template and Design Quic-Guide, Mbile_quic-guide_1.dc