Mobile Guide v1.1 Compressed

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



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




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.




— 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:




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




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




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 bttm 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.




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




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




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




— 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.




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




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.




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




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




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




— 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.




— 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




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)




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




3.8. BRANDING

Hadr lm- Gric BBC

- Branded (channel)

- Prgramme / event specic branding

IN PROGRESS




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

!




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




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




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




Index pages


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


• 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




Index pages


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.



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




4.2. ARTICLES

There are three tpes f article templates:• Article page

• Shrt descriptin pages

• Prgramme page




Articles


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




n a page.

• Article MUST be used when a clumn r article is

aciad wih a auhr.SEE F2

CRUMBTRAIL - BoTToM


BANNERTBD

FoRMSEE G2

SEE D1

CRUMBTRAIL - ToP

HEADER SEE A1

SEE A2

SEE A3B

SEE A3A

SIMPLE TEXTSEE F1




Articles


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




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


BANNER TBD

CRUMBTRAIL - ToP

HEADER

SEE F2

SEE D1

SEE A1

SEE A2

SEE A3B

SEE A3A




Articles


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


• 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


CRUMBTRAIL - ToP

HEADER

= cdiial

mdul

SEE F1

SEE D1

SEE A5

SEE A1

SEE A2

SEE A3B

SEE A3A




Articles


4.2.4. Prgrammes Prgrammes template is used fr prgramme and episde infr -

mai ad hir bradca chdul.

FooteR




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




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




Liig


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




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


CRUMBTRAIL - ToP

HEADER

SEE F2

SEE D1

SEE A1

SEE A2

SEE A3B

SEE A3A




Mre text list examples

Lottery reslts

Li i




Liig


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




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




Mre plalist and schedule examples

upcoming episodes Season episode listing

Liig




Liig


4.3.3. sarch rul Search result template is used fr listing search results. Currentl

this is specic fr Hg2g sectin.

FooteR




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




Liig


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




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




Liig


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




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




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




y


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




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


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




Mre Galler index examples

>Click Adio listing

BANNER TBD

Mdia Gallry





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




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




4.5. ACTIoNABLE PAGES

There are varius tpes f list page templates:

• Media bject page

• Launch page

• Widget page

• Frm page

Actinable pages





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]


• 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





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




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





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




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





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




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




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

!





!

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




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


!





!

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


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


!





!

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


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


!





!

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.



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



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




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




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




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.


Example - Top


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




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.


Example 1 Example 2


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




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.


Example 1


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


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




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.


Example 1


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




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


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


n rllver



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


n rllver



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




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.


Example 1


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


n rllver



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




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.


Example 1 Example 2 Example 3


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


mdd

y

Promo uRL Page the prm lins t y 1 text, URL

frma


n rllver



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


n rllver



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




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.


Example 1 Example 2


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


n rllver



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




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


n rllver


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.


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


n rllver



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




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


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



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


n rllver




icns are displaed

y* 1-3 crlld li text oR audi oR vide y a ic

1-x* = unlimited list items allwed


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




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


Example 1


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



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


c


mdd

y

Additonal link uRL Pag h addiial lik lik y* 1 text, URL

frma


n rllver



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.



ADDITIONAL LINK

LIST TITLE

Up t X list items allwed.

LIST ITEM TEXT

Example 3Example 2

Mdul

E1 N i




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)


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


c

1-3 text max. 33 characters recm-

mdd

y


frma


n rllver




icns are displaed


1-x* = unlimited statins/channels allwed,, fr each ne chsen a prgramme brand needs t be shwn.


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




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.


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.


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




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.


Example 1Strctre

ADDITIONAL LINK

TITLE


Text title Prvide cntext, heading 1 text max. 33 characters recm-

mdd


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


c


mdd

y


frma


n rllver




icns are displaed




BODY TEXT

INLINE LINK

BOLD /COLOuRED TEXT

Mdul

F2 A ti l




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.


Example 1 Example 1 (contined)


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




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


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


pages.

List item text Text. y 1-x* text max. 200 characters rec-

mmdd

y


c


mdd

y


frma


n rllver




icns are displaed




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




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


Collection title Prvides cntext. This is als required if there is nl 1

imag i h cllci.


mdd


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




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.


Example 1 Example 2 (combining oter modles)


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


mdd


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




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


Example 1 Example 2Strctre

ADDITIONAL LINK

TITLE


Alert/ConrmationTitle Prvide cntext, heading 1 text max. 33 characters recm-

mdd


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


c


mdd

y


frma


n rllver




icns are displaed



MESSAGE TEXT

BOLD /COLOuRED TEXT

Mdul

G4 Calendar Picer




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.


Example 1


Picker title sowing

mont

Prvides cntext. y 1 text max. 33 characters recm-

mdd


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


n rllver



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




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


Example 1


Picker title Prvides cntext. y 1 text max. 33 characters recm-

mdd


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


n rllver



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




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


Example 1 Example 2Strctre


help list title Prvide cntext 1 text max. 33 characters recm-

mdd


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



hELP LIST TITLE

Up t X list items allwed.

hELP ITEM TEXTICON

Mdul

G7 Call t Actin (CTA)




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.


Example 1 Example 2


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.


mdd


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


n rllver



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




G8 Diclaimr

Elements

(same as F1 simple Text)

see F1 Simple Text fr details

Example 1

6 Technical requirements




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




• 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



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

Documents

Mobile Guide v1.1 Compressed