英国广播公司bbc的网站设计规范手册

'Visuallanguage2.0—BBCdesignguidelinesforthewebGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20081 Index1.Introduction37.Content322.Whoapprovesthis?47.1.Thefold333.TheTemplate57.2.Text/objectindentation343.1.PageLayout67.3.Fonts353.2.DesignGrid77.4.Images363.3.FlexibleLayouts87.5.InterimEmbeddedMediaPlayersizes384.GlobalMasthead108.LocalNavigation404.1.Mastheadmodes118.1.HorizontalLocalNavigation414.2.TheMenu-ExploretheBBC158.2.VerticalLocalNavigation434.3.MastheadVariations198.3.TwoBasicPatternsForthelocalnavigation:A&B455.LocalMasthead238.4.Breadcrumbtrails465.1.Makebetteruseofthespace249.Advertising475.2.Ifthereisnoalternativebuttouseanemptystripe2510.Puttingittogether485.3.FreeformLocalMasthead27Appendix496.Footer31GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20082 1.Introduction—visualguidewhendesigningforthewebThisisavisualguidedocumenttobeusedbyallthedesignerswhendesigningforBBCsites.Thiswaywewillimprovethesite’soveralluserexperiencethroughconsistencyindesignandinteraction.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20083 2.Whoapprovesthis?TheseguidelineshavebeendefinedincollaborationwithuserexperienceteamsacrosstheBBC.Approvalforthisproposal(andanysubsequentalterationsand/oradditions)sitswiththeUserExperienceClusterandtheHeadofUserExperience&Design.AnyfeedbackorsuggestionsshouldberaisedwithyourrepresentativeinthisClusterandalsoLyraXharraLoxhaandSteveGibbons.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20084 GrID3.ThetemplateEXAMPLE—avisualframeworkThecentredpagetemplateanditsassociatedguidelinescreateavisualframeworkthatmaketheBBCsiteconsistent.Thefollowingpagesoutlinethestructure,includingadesigngridthataffordsflexiblelayoutoptionsandupdatedglobalelements.GrIDAPPLIEDTOTherearealsoguidelinesforsizesandplacementofTHEBBCHOMEPAGEimages,theembeddedmediaplayerandadvertising.NOTES1.Moreinfoonthefunctionalityofthetemplatingsystem(Barlesque)canbefoundonwww.bbc.co.uk/includes/blq/GrIDAPPLIEDTOBBCNEWSGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20085 3.1.PAGELAYOUT—thestuffthatsurroundsusAlltheBBCpagesarebasedaroundadesigngridwithaWhitepadding10pxeachside(994px)standardisedsurroundingborder.Contentpadding14pxeachside(974px)Content/gridarea946pxThedesigngridconstrainsyourcontentarea.Nocontentshouldbeplacedoutsideofthedesigngrid.Thefirstbordertothedesigngridis14pixelseithersideandshouldbethepagebackgroundcolour.Thisgivesatotalof974pixelsinwhichthepagesits.Thereisafurther10pixelwhitemargineithersideofthistoframethepage,andthenanouterbordercoveringtherestofthepage.YouMUSTdesignyourpagetobefixedwidth(NOTstretchy)andcentredwithinthebrowser.PLEASENOTE:The10pixelmarginwillalwaysbesettowhite,unlessanexemptionhasbeenmade.Theouterborderswillalwaysbesetto#EAEAEA.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20086 3.2.DESIGNGrIDThedesigngridconsistsof12columns,each66pixelsin12/24columns-946pxwidthwitha14pixelgutterspacingbetweenthem.This66px14px26pxgivesatotalcontentareaof946pixels.columnguttersub-columnAnunderlying24subcolumnsof26pxcanalsobeemployedtoaidinyourdesigninmorecomplexlayouts.Thenumberofcolumnschosenenabletheuseofavarietyofsupercolumnstructurestoallowfordifferentpagetypes(seenextpage).Thegridsetstheboundsforcontentonly.Thestructureoftheareasoutsidethecontentareillustratedonthefollowingpages.Alldesignersshouldadheretothegridrules.FlashsitesarenotexemptfromthegridrulesGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20087 3.3.FLEXIBLELAYOUTS—somethingforeveryoneThegridisflexibleenoughtoaccommodateavarietyofsupercolumnlayoutsandenablesadplacementintherighthandcolumnforinternationalvisitors.Commonlayoutsinclude2and3supercolumnswithlefthandnavigation.WhenusingasupercolumnforlefthandlocalnavigationyouMUSTalwaysuse2columns.Thiscreatesaconsistent146pxforalllefthandlocalnavigation.Acombinationofsupercolumnscouldbeusedtocreatemorecomplexstructures.Seebottomrightforjustonepossibleexampleofthis.2SUPErCOLUMNLAYOUTWITHLEFTHANDNAVIGATION(STOrYPAGE)3SUPErCOLUMNLAYOUTWITHLEFTHANDNAVIGATION3SUPErCOLUMNLAYOUTMULTISUPErCOLUMNLAYOUTGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20088 UsingthegridwithflashThecontentthatsitsonflashsitesneedstoadheretothegrid.ThismeansthatflashsitesareNOTexemptfromusingthegridCOrrECTTrEATMENTINCOrrECTTrEATMENTGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December20089 4.GlobalmastheadThisistheglobalmastheadforthewholeoftheBBCNOTES3.Themeasurementsof118pxand140pxarebasedondefaultsite.textsizeand+2textresizinginFirefox(IEresizesinsmaller1.Thedesignassetsthataccompanythisdocumentcontainincrements)respectivelyandwillensuretherethemenuisnotcutAdobeIllustratorandPhotoshopfilesofthecurrentGlobalVisualoffwithinalloursupportedbrowsers.AsanoverviewthemastheadincludestheBBCLanguagetoformthebasisofyourdesign.Allassetsincludingthemasterbrand,Textonly&Helplinks,Searchandanpagestructure,thegrid,globalmastheadandfooterareprovided.‘ExploretheBBC’buttonwhichhasamenucontainingYouMUSTnotrecreatethefiles.17static(includingHome)and3temporallinks.2.CurrentguidelinesstatethatpagesmustbereadablewhentheThemenucolour(buttonandlinks)canbechangedfontsizeisincreasedbytwostepsinoursupportedbrowsers.byusingtheprovidedpaletteofcoloursONLY.Please(http://www.bbc.co.uk/guidelines/newmedia/technical/xhtml_makesureyouexplicitlyspecifythemenucolourtoyourintegrity.shtml#css)developmentteam.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200810 4.1.MASTHEADMODES—solidorsemi-transparentThedefaultmodeofthemastheadissolid.However,ifappropriate,youcanswitchtoasemi-transparentmodeasshownbelow.SOLIDMODESEMI-TrANSPArENTMODEGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200811 4.1.1MastheadinthedefaultsolidmodeThesolidmodeisthedefaultstateofthemasthead.Initssolidstatethereshouldalwaysbea1pxkeyline(hexvalue#cccccc)thatdividesitfromthelocalmastheadSOLIDMODEGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200812 4.1.2Mastheadinthesemi-transparentmodeThesemi-transparentmodeallowsthesubtleextensionThe1pxkeylineisnotmandatoryinthismode,butitcanofthelocalbranding/backgroundunderneaththeglobalbeappliedifnecessary.masthead.Thiscreatesasofterseparationbetweentheglobalandthelocalmasthead.SEMI-TrANSPArENTMODEGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200813 Designconsiderationswhenusingthesemi-transparentmodeTheBBCblocksandtheaccessibilitylinksSHOULDbeTheextendedbackgroundsittingunderneaththeGlobalclearandlegibleatalltimes.MastheadMUSTNOTcontaindetailed/busygraphicsasthiscanpotentiallyaffecttheclarityoftheblocksandtheYouMUSTcheckforanycolourcontrastissueswhichlegibilityofthetextlinkscouldaffectthelegibilityandclarity.TheBBCblocksMUSTTheaccessibilitylinksbeclearatalltimes.MUSTbelegibleatalltimesGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200814 4.2.THEMENU—exploretheBBCThe‘ExploretheBBC’menugivesquickaccesstoThe‘Awholelotmore’linktothebottomrightoftheNOTESgreatcontentontheBBCsite.Thereare17staticmenuwilltaketheusertoapagethatgivesaccessto1.The17staticlinkswereagreedinconsultationwithseniorlinks(includingHome)and3temporallinksusedforanextendedcollectionofBBCsitesthatarenotinthebusinessstakeholders.promotingcontentandevents.menu.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200815 4.2.1.ColourvariationsabespokefitColoursusedinthemenucanbechanged(choosingcomplementarycolourtoyourmainoneratherthanNOTESfromafixedpalette)tosuitthecurrentsite.Thebuttonmatchingdirectly.Theartworkforthenavwillbeplaced1.IfyourdevelopersdONOTexplicitlysetthecolourinNEEdStobenoticeablewhilstmatchingitwithyourinthe‘Assets’folderwhichwillbeaccompanyingthisBarlesque,thebutton/menuwillusethedefaultblue(asshown,colourscheme.Onewayofachievingthisistouseadocumenttopleft).HEXVALUE:#2E52D1HEXVALUE:#D60065HEXVALUE:#1864A4HEXVALUE:#9A005DHEXVALUE:#297E9BHEXVALUE:#68007FHEXVALUE:#8DB500HEXVALUE:#D7000CHEXVALUE:#308700HEXVALUE:#ED510AHEXVALUE:#0F463BHEXVALUE:#777247GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200816 ColourvariationsexampleusageGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200817 4.2.2.SafezoneaflashwarningThecurrentversionofAdobe’sFlashplayercreatesatechnicalissuewhereFlashcontentwilloverlayHTMLcontentincludingdropdownmenusandlightboxes.Themenuhasbeendesignedtoappearashighupthescreenaspossibletohelpavoidthis.YouMUSTNOTplaceanyFlashcontentabove118px.Thiswillensurethemenuisnotoverlaidbyit[Flash].THEMENUOVErLAYEDBYFLASHCONTENTThemenuexpandsverticallyontextresize.SitedesignsMUSTproportionallyexpand(vertically)toensurethatFlashcontentdoesnotdisplayabove140px.NOTES1.CurrentguidelinesstatethatpagesmustbereadablewhentheDefaultheight118pxfontsizeisincreasedbytwostepsinoursupportedbrowsers.+2textresizing140px(http://www.bbc.co.uk/guidelines/newmedia/technical/xhtml_integrity.shtml#css)ILLUSTrATIONrEPrESENTINGTHEHEIGHTINCrEASEWHENrESIzINGTEXT2.Themeasurementsof118pxand140pxarebasedondefaulttextsizeand+2textresizinginFirefox(IEresizesinsmallerincrements)respectivelyandwillensuretherethemenuisnotcutoffwithinalloursupportedbrowsers.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200818 4.3.MASTHEADVArIATIONS—site/userspecificchangesTheglobalnatureofthemastheadmeansweshouldnotmakeradicalchangesforlocalrequirements.However,incertaincircumstancesavariationtothelinksinthemenuneedstobeaddressed.Thisisapparentonbothinternationalfacingsites(Englishandotherlanguages)andChildren’ssiteswherespecificuserrequirementsmayneedtobemet.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200819 4.3.1InternationalfacingsitesSitesinotherlanguagesandsiteswithinternationalAdditionallinksthathaveauniqueinternationalversionscanuseavariationofthemasthead.perspectiveshouldalsobeincluded.ThesearecurrentlytheLanguagesportal,WorldServiceLearningEnglish&ThroughdiscussionwithBBCWorldService,aspecificWorldServiceTrust.setoflinksforthemenuhasbeenproposed.Finally,linksthataretargetedtowardsaUKspecificWhereaninternationalversionofaUKmenuitemisaudience(e.g.Gardening,Food,Health)shouldbeapplicablethatlinkshouldbeenforcedasadefaultunlessremovedfromthemenuandaccesstothesewillbeontheuserhasacookiesetspecificallytotheUKversion.the‘MoreBBCsites’/‘Awholelotmore’page.Thiswouldinclude,butmaynotbeexclusivetoNews,Sport,Weather,TV&radio.‘TextOnly’and‘Help’shouldbeinthelocallanguageDescriptortext:‘BBCSitesinEnglish’‘ExploretheBBC’shouldread‘BBCSites’SiteLinksappearinthisorderinthelocallanguageGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200820 4.3.2Non-englishlanguagesitesAdditionallythelabelusedonthesearchbuttonshouldreflectthelanguageofthesitetheuserisonandbescopedtosearchforresultsinthatlanguagewherepossible.Note-currentBBCsearchisonlyoptimisedforsomelanguagesnotthefull33GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200821 4.3.3AdvertisingonthemastheadofinternationalandlanguagesitesInternationalfacingsiteswillalsocarryadvertisingtonon-ukNOTESusers.1.Findoutmoreaboutadvertisingonsection9.AdvertisingThemastheadwillneedtoaccommodateaLeaderboardadvert(728x90px).GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200822 5.LocalmastheadIfyouhavealocalmastheadyoushouldextenditNOTESoutsidetheedgeofthecontentgridtotheinside1.Theillustrationbelowisonlyanexample.Thelocalmastheadedgeofthewhitepageborder.Thereisa1pxkeylinedoesnothavetobeastripofcolour(seethefollowingpagesfor(#cccccc)betweentheglobalmastheadandthelocalguidelines).masthead(ifusingthemastheadinitssolidmode).2.IfyourlocalmastheadisastripofcolourthedepthofitContentMUSTNOTbeplacedoutsideofthegrid.SHOULDBE49px.Textonly|HelpSearchExploretheBBC1pxkeyline#ccccccLocalMastheadOutsetby14pxGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200823 5.1.MAKEBETTErUSEOFTHESPACEINTHELOCALMASTHEADYoushouldtryandmakebetteruseofthelocalmastheadTheexamplesbelowshowtwoofthemanywaysthiscanbespaceandSHOULDAVOIDusinganemptystripeasyouachieved.wouldconsequentlylosevaluablerealestateonthepage.UsethespaceforlocalnavigationUsethespaceforUsethespaceforrighthandcolumnsubheadingsinformationTHEABOVEVISUALSArEFOrILLUSTrATIVEPUrPOSESONLYGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200824 5.2.IFTHErEISNOALTErNATIVEBUTTOUSEANEMPTYSTrIPE...Werecommendthatdesignersavoidusingemptystripes1.ThelocalmastheadwhenusedinastripeSHOULDBE(emptyblocksofcolourorgradient),howeverifthere49pxdeepareinstanceswhenitisabsolutelynecessarytousethem,wemustmakesurethatthedepthandfontsizeremain2.Fonttype&sizeSHOULDBEGillSans,30pxorconsistent.Arial30pxifusinghtmltext)ThelocalFont:GillSans,30pxmastheadshouldbe49pxdeep(ifyouareusingdynamicorsimplehtmltextthefonttypeshouldbeArial)GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200825 Howitwouldwork...GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200826 5.3.FrEEFOrMLOCALMASTHEADAfreeformlocalmastheadisusuallynotstrictlyconfinedThelocalbrandingusuallyfloatsonthepagebackgroundandtoanykindofvisiblehorizontalgrids(asshownonthethevisualreferenceastowherethelocalmastheadendsisexamplebelow).moresubtleorinsomecasesnotvisibleatall.ThelocalbrandingblendswiththebackgroundThereisnoclearvisualreferenceastowherethelocalmastheadendsGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200827 5.3.1.TherulesaroundusingafreeformlocalmastheadThelogoSHOULDALWAYSsitnolowerthan130pxThereshouldbeNOrEPETITIONoftheBBCblocksonunlessanexemptionhasbeenmade.ThelogoSHOULDthelocalmastheadunlessanexemptionhasbeenmadeALWAYSsitonthelefthandsideundertheBBCblocksunlessanexemptionhasbeenmade.one130pxwheninfreeformthelocalbrandingSHOULDsitonthelefthandsidenolowerthan130pxGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200828 Treatmentofthe‘leftaligned&above130pxrule’130px130pxCOrrECTTrEATMENTINCOrrECTTrEATMENTTHEABOVEVISUALSArEFOrILLUSTrATIVEPUrPOSESONLYGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200829 Exampleswhereanexemptionhasbeenmade130px130pxGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200830 6.Footer—ameaningfulendTheBarlesquetemplateincludesasimplestandardfooterforuseatthebottomofallpages.©MMVIISitespecificBBCHelpAbouttheBBCFooterlinksAccessibilityHelpContactUsUptoamaximumJobsTermsofUseTheBBCisnotresponsibleforThereare7globalBBClinks(withanadditionalthecontentofexternalinternetsitesofFour?AdvertisingPrivacy&Cookies‘Advertising’linkoninternationalfacingsites)on2STANDArDFOOTErcolumns,plusanoptionalcolumnofsitespecificlinks(maximumof4).Thereare3colourwaysforthefooter.Thestandardisgrey(#4D4D4D)andshouldbeusedasmuchaspossible.Theexceptionsareablackversionandawhiteversionwhichcanbeusedasanalternativetothegreywhereit[thegrey]doesnotsuitthedesignofthepage.©MMVIISitespecificBBCHelpAbouttheBBCFooterlinksAccessibilityHelpContactUsUptoamaximumJobsTermsofUseTheBBCisnotresponsibleforthecontentofexternalinternetsitesofFour?AdvertisingPrivacy&CookiesNOTES1.‘Sendtoafriend’isstillasupportedtoolbutshouldbeplacedinyourcontentarea©MMVIISitespecificBBCHelpAbouttheBBCFooterlinksAccessibilityHelpContactUsUptoamaximumJobsTermsofUseTheBBCisnotresponsibleforthecontentofexternalinternetsitesofFour?AdvertisingPrivacy&CookiesALTErNATIVEFOOTErSGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200831 7.ContentWenowhaveastructureforthepage,buttocreatefurtherusefulconsistencyacrosssitesthereareotherelementsweneedguidelinesfor.Certainattributesofcontentelementsneedtoadheretotheguidelineswhichfollow.Theseincludeindentation,images,theembeddedmediaplayer,andadvertising.Eachofwhichwillbeoutlinedonthefollowingpages.UsingtheseguidelinestogetherwiththestructuresoutlinedonpreviouspageswillcreateavisualframeworkthataffordsconsistencyyetflexibilityacrosstheBBCsite.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200832 7.1.THEFOLD—whereisit?Browsersupport/Chrome/1024x768resolutionTheargumentthat‘usersscroll’hasbeenusedtorefutetheFirefoxneedtoworryaboutthe‘fold’inabrowserwindow.EquallyInternetExplorerusertestinghasshownthatuserscanexperienceproblemsOperawhenfacedwithfindingspecificinformationthatisnotSafarivisibleinthebrowserwindow.Usingcurrentbrowsers/operatingsystemswecandefineamaximumandrecommendeddepthforcontentthatwouldbevisibletothevastmajorityofusers(seeillustration,right).InternetExplorer7onWindowsXPhasthesmallestdepthofvisiblecontentof617px.Therecommendationistokeepallsignificantcontentornavigationwithin600pxtocreateacomfortableviewingareafortheuser.Whethertoadheretothefolddependsonthetypeofpageandthedesignofthepage.E.g.,ausercanexpectanewsarticletobescrolled,butwouldnotexpecttohavenavigationalelementspositionedbelowthefold.600px(the‘fold’)617px(IE7XP)UltimatelyitisuptodesignersanddesignmanagerstomakeTHEFOLDthebestdecisionforeachpageandproduct,basedontheaudienceandpagetypeandfunctionHowever,thereisarequirementwithregardtoadvertising.Whenusingthe300x250pxmediumrectangleadvertsize,atleast50%oftheadvertMUSTbedisplayedabovethefold.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200833 10pxtextindent10pxtextsupercolumninset.LoremipsumexampleofaThisisanLefthandnavigationLoremipsum10pxtextsupercolumninset.LoremipsumDolorsitamet,exampleofaDolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.consectetueradipiscingNotethe10pxInhachabitasseplateadictumst.Nuncturpisquam,blanditquis,Loremipsumelit.EtiamrhoncusLefthandnavigationtextindentscelerisqueid,aliquetnec,odio.CumsociisnatoquepenatibusetmagnisDolorsitamet,gravidatortor.InhacDolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.consectetueradipiscing7.2.TNotethe10pxEXT/OBjECTINDENTATIONdisparturientmontes,nasceturridiculusmus.Aliquamsemkjhgkjhvhabitasseplateaturpis.andthe5pxInhachabitasseplateadictumst.Nuncturpisquam,blanditquis,elit.Etiamrhoncusmassa,auctoret,auctorviverra.textindentscelerisqueid,aliquetnec,odio.Cumsociisnatoquepenatibusetmagnisgravidatortor.Inhacindentusedfordisparturientmontes,nasceturridiculusmus.AliquamsemkjhgkjhvCumsociisnatoquepenatibusetmagnisdishabitasseplateaturpis.andthe5pxLoremipsumdolorsitamet,consectetuertheseparatorsmassa,auctoret,auctorviverra.parturientmontes,nasceturridiculusmus.adipiscingelit.Etiamrhoncusgravidatortor.InhacindentusedforLoremipsumDolorsitamet,consectetuerThisisnothabitasseplateadictumst.Nuncturpisquam,CumsociisnatoquepenatibusetmagnisdisLoremipsumdolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.Intheseparatorsblanditquis,scelerisqueid,aliquetnec,odio.Cumparturientmontes,nasceturridiculusmus.howitadipiscingelit.Etiamrhoncusgravidatortor.Inhachachabitasseplateadictumst.sociisnatoquepenatibusetmagnis.LoremipsumDolorsitamet,consectetuer5pxlineindentThisisnothabitasseplateadictumst.Nuncturpisquam,shouldbedoneadipiscingelit.Etiamrhoncusgravidatortor.Inblanditquis,scelerisqueid,aliquetnec,odio.Cum10pxtextindenthowitLoremipsumdolorsitamet,consectetueradipiscingelit.Etiamrhoncushachabitasseplateadictumst.Whenindentationofimagesandtextarerequiredbuthowitsociisnatoquepenatibusetmagnis.gravidatortor.Inhachabitasseplateadictumst.Nuncturpisquam,shouldbedoneThisisan10pxtextsupercolumninset.(withinboxes)usea10pxindentfromtheedgeofthecouldbedoneblanditquis,scelerisqueid,aliquetnec,odio.CumsociisnatoqueLoremipsumLoremipsumLoremipsumdolorsitamet,consectetueradipiscingelit.Etiamrhoncusexampleofabox.Inaddition10pxbetweenimagesandtextshouldbuthowitpenatibusetmagnisdisparturientmontes,nasceturridiculusmus.gravidatortor.Inhachabitasseplateadictumst.Nuncturpisquam,Aliquamsemkjhgkjhvmassa,auctoret,auctorviverra.Nuncturpisquam,LefthandnavigationLoremipsumalsobeemployed.couldbedoneblanditquis,scelerisqueid,aliquetnec,odio.CumsociisnatoqueDolorsitamet,Dolorsitamet,blanditquis,scelerisqueid,aliquetnec,odio.LoremipsumDolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.penatibusetmagnisdisparturientmontes,nasceturridiculusmus.consectetueradipiscingconsectetueradipiscingNotethe10pxInhachabitasseplateadictumst.Nuncturpisquam,blanditquis,Aliquamsemkjhgkjhvmassa,auctoret,auctorviverra.Nuncturpisquam,elit.Etiamrhoncuselit.EtiamrhoncusWhencontentisnotinboxes,textandimagescanbeDolorsitamet,textindentscelerisqueid,aliquetnec,odio.Cumsociisnatoquepenatibusetmagnisblanditquis,scelerisqueid,aliquetnec,odio.gravidatortor.Inhacgravidatortor.Inhacalignedtothegridorindentedto10px.consectetueradipiscingdisparturientmontes,nasceturridiculusmus.Aliquamsemkjhgkjhvhabitasseplateaturpis.habitasseplateaturpis.andthe5pxelit.Etiamrhoncusmassa,auctoret,auctorviverra.gravidatortor.InhacindentusedforCumsociisnatoquepenatibusetmagnisdisCumsociisnatoquepenatibusetmagnisdishabitasseplateaturpis.NOTESLoremipsumdolorsitamet,consectetuerparturientmontes,nasceturridiculusmus.parturientmontes,nasceturridiculusmus.Loremtheseparators1.Thisisarecommendationandnotafixedrule.adipiscingelit.Etiamrhoncusgravidatortor.InhacLoremipsumDolorsitamet,consectetueripsumDolorsitamet,consectetueradipiscingelit.Thisisnothabitasseplateadictumst.Nuncturpisquam,Cumsociisnatoquepenatibusetmagnisdisadipiscingelit.Etiamrhoncusgravidatortor.InEtiamrhoncusgravidatortor.Inhachabitasseblanditquis,scelerisqueid,aliquetnec,odio.Cumparturientmontes,nasceturridiculusmus.Loremhowithachabitasseplateadictumst.plateadictumst.sociisnatoquepenatibusetmagnis.ipsumDolorsitamet,consectetueradipiscingelit.shouldbedoneEtiamrhoncusgravidatortor.InhachabitasseLoremipsumdolorsitamet,consectetueradipiscingelit.EtiamrhoncusINDENTATIONWHENCONTENTISINABOXAplateadictumst.LIGNEDTOTHEGrIDWHENCONTENTISNOTINABOXbuthowitgravidatortor.Inhachabitasseplateadictumst.Nuncturpisquam,Loremipsumcouldbedoneblanditquis,scelerisqueid,aliquetnec,odio.CumsociisnatoqueLoremipsumpenatibusetmagnisdisparturientmontes,nasceturridiculusmus.LoremipsumDolorsitamet,Aliquamsemkjhgkjhvmassa,auctoret,auctorviverra.Nuncturpisquam,Dolorsitamet,consectetueradipiscingblanditquis,scelerisqueid,aliquetnec,odio.consectetueradipiscingelit.EtiamrhoncusDolorsitamet,elit.Etiamrhoncusgravidatortor.Inhacconsectetueradipiscinggravidatortor.Inhachabitasseplateaturpis.elit.Etiamrhoncushabitasseplateaturpis.gravidatortor.InhacCumsociisnatoquepenatibusetmagnisdishabitasseplateaturpis.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.parturientmontes,nasceturridiculusmus.LoremLoremipsumDolorsitamet,consectetuerCumsociisnatoquepenatibusetmagnisdisipsumDolorsitamet,consectetueradipiscingelit.adipiscingelit.Etiamrhoncusgravidatortor.Inparturientmontes,nasceturridiculusmus.Etiamrhoncusgravidatortor.Inhachabitassehachabitasseplateadictumst.LoremipsumDolorsitamet,consectetuerplateadictumst.adipiscingelit.Etiamrhoncusgravidatortor.Inhachabitasseplateadictumst.LoremipsumINDENTATIONWHENCONTENTISNOTINABOXDolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.InhacGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200834habitasseplateaturpis.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.LoremipsumDolorsitamet,consectetueradipiscingelit.Etiamrhoncusgravidatortor.Inhachabitasseplateadictumst. 7.3.FONTSStandardbodyfontsStandardBBCbrandfont•Verdana•GillsansistheofficialBBCfont•Nootherfontsshouldbeusedasbodyfontswithoutexplicitexemption•AVOIDusingGillboldMINIMUMSIzESCharactersets•12pxshouldbeminimumsizebodytext•11pxmaybeusedbutcautionshouldbeshownaroundusinglowcontrast•MUSTbeUTF8charactersetunlesssiteisinanunsupportedlanguagecoloursasuserresearchhasshownthatolderdemographicsstruggletoreaditFlashsitesStandardtitlefonts:•Flashsitesmustensuretypefacesusedareeasytoreadbutmayuseawiderset•Arial(preferred),Verdana&GeorgiaonlyiftheBBCstandardfontsdonotfitthebrand•Verdanashouldnotbeusedabove18pxsize.•Verdanaboldshouldbeavoidedabove16pxsize•Ona‘service’orprogrammebrandsiteitisacceptabletousetherelevantbrandfontaslongasitslegible•DesignersmustensurebrandfontsarelegallyclearedforonlineusageIMPOrTANT:Pagetitlefonts1.Ifyouwanttodosomethingoutsideoftheseguidelines(andtheautomaticexemptions)youMUSTapplyforanexemptionthroughthenormalprocedure•Officiallogosareautomaticallyexemptfromtheseguidelines2.AlwayschecktypeinbothrenderedandunrenderedstatesonbothPC&Mactoensure•Asaruleofthumbpagetitletypefacesshouldbeatleast2sizesupfrompresentationstandardtitlefont3.MakesurethecorrectpixelsizeisrepresentedonthelivesiteGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200835 7.4.IMAGESImagesizesBasedona16:9ratio.(ADJUSTDEPTHTOSUITSQUAREANDPORTRAITIMAGERATIOS)1Fullstorycolumnwidth2RighthandcolumnfullwidthIndented446x251ImagesMUSTworkwiththegridandhelptocreateFlush466x262orderwithinthepagelayout.Youshoulduseanimageratioof16:9.Aligningwiththegridthengivesusthefivecommonsizesillustratedontheright(heightsbasedona16:9ratio).Imagesshouldalsobeabletopadagainstthecolumnedgesifitsuitsthedesign.Indented286x161Flush306x172Thefollowingdimensionsapplytoa16:9image.IMAGESIzES31/2storycolumnwidthIndented206x116IndentedFlushFlush226x1271.446x251px1.466x262px2.286x161px2.306x172px3.206x116px3.226x127px4.126x71px4.146x82px41/3storycolumnwidth5.86x48px5.106x60pxIndented126x716.46x26px6.66x37pxFlush146x82NOTES5Leadstorycolumnwidth1.DoesnotapplytobackgroundimagesIndented86x48InapanelNotpanelledFlush106x602.DoesnotapplytoimagegalleriesEsthendreritAliquamamiinvehicula.Crasesthendreritsuscipitpedesitvehicula.Crasametest.Namiderat.Quisquesuscipitpedesitametest.Namidegetmi.Duisaaugueeleifend.erat.Quisqueegetmi.Duisa6ThumbnailIndented46x26Flush66x37rECOMMENDEDIMAGESIzESGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200836 7.4.1.OptionalImageratiosOtherimageratiosAdjustdepthtosuitPortrait,Square&14:5imageratiosWhere16:9arenotappropriate4:3,square,portrait1Portraitimages8:102Squareimages1:1(8:10)andawider14:5imagescanbeused.Simplyfittothegridusingtherelevantwidthsabovewiththeheightchangingproportionately.NOTES1.Doesnotapplytobackgroundimages2.Doesnotapplytoimagegalleries24:3314:5rECOMMENDEDIMAGESIzESGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200837 7.5.INTErIMEMBEDDEDMEDIAPLAYErSIzES—oneplayer,threesizesTheEmbeddedMediaPlayer[EMP]currentlyusesacodecwhichisnotfullyscalableandassuchspecificsizesneedtobebuilt.512x288(323hincludingcontrols)Thevideosizesthatareavailabletoyouare512x288,448x252and256x144.448x252istherecommendedsizeforusewithinstorypages(lefthandnav+2supercolumns).FutureiterationsoftheEMPwillhavegreaterflexibilityinsizesandthuswillfitbetterintopages.448x252NOTES(287hincludingcontrols)1.TheEMPvideocontrolsaddanextra35pixelstotheheight.2.The400x225sizeisnowdeprecatedandreplacedby448x252.3.Anadditionalsizeof384x216isalsoavailablebutrestrictedtositeswiththeBarleypagelayout.4.Seebbc.co.uk/empformoreinformation.256x144(179hincludingcontrols)CUrrENTEMPSIzESGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200838 7.5.1TheAudioEMPTheAudioEMPallowsmoreflexibilityintermsofusageasitfitstothegridcorrectly466x106446x106(indented)306x106286x106(indented)226x106206x106(indented)CUrrENTAUDIOEMPSIzESGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200839 8.LocalNavigation—whatlinksareincluded/thebasicsLinksthatMUSTBEinplaceontheLocalNavLinksthatSHOULDNOTappearinthelocalnavigationtheirnewpositions...•Sitenameorlogo-(recommendedposition-TopleftFOOTErbeneaththeglobaltoolbar)•Sitehomepagelink•Accessibilityhelp•Sitespecificlinks•ContactUs•HelpGLOBALTOOLBAr•BBCHomepagelink•TextonlyCONTENTArEA•Audioon/off•Dropdowns•Likethispage?Sendittoafriend•Newsletters•Printableversion•relatedsites/links•rSSfeedsGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200840 8.1.HOrIzONTALLOCALNAVIGATIONAbsoluteguidelinesforthehorizontalnav•Thecolourcontrastbetweenthetext&backgroundcoloursforlinks,selectedlinks&rolloversMUSTCOMPLYwiththeStandards&Guidelinesorcolourcontrast.•Fontsizemustbe11pxorbigger(11pxVerdana,12pxArial).•ALWAYSuseHTMLLinks(textlinks)-thisenablestheusertoresizethetext.IfthereisaneedforgraphicslookatcombiningHTMLtext&graphics,asthisstillallowsforresizing.•TheselectedlinkMUSTalwaysbehighlighted•AlllinksMUSThavearolloverbehavior•DONOTusefly-outmenusGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200841 recommendedguidelinesforthehorizontalnav•Makethewordsusedfornavigationlinksmatchthemainheadingofthepagetheylinkto.•Verdana(upto16px)istherecommendedfontfortheBBCwebsite.Anyfontsthatarehigherthan16px•Avoidusingthesamewordstostartlinkitems,becauseshouldbeArial.doingsomakesthemhardertoscan.•Usecautionwhenusingallcapitals.Avoidusingthemforsiteswithnumerouslinks.•Makeitvisuallyclearwhereonelinkstops&anotheronestarts–leaveclearspacesbetweenlinks(Verticallinescanhelpwiththis).•Aimtohave9orlesslinksinthehorizontalnav•ThehorizontalnavmustbeabletowithstandtwotextsizeincreaseswithoutwrappingonaPCininternetexplorer.•Wrappingbehaviorshoulditoccur–normaltextflow,thetextgoesontoasecondline.Makesurethelinespacingisrelatedtothesizeofthetext,toensurethatthereisnooverlappingoftext.•Makenavigationlabelsshortanduseclear,everydaylanguage.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200842 8.2.VErTICALLOCALNAVIGATIONAbsoluteguidelinesforverticalnavigation•Verticalnavigationforlocalnavigationalwaysappearsonthelefthandsideofthepage.•DONOTchangethecolourofvisitedlinks•Thecolourcontrastbetweenthetext&backgroundcoloursforlinks,selectedlinks&rolloversMUSTcomplywiththeStandards&Guidelinesforcolourcontrast.•Fontsizemustbe11px(11pxVerdana12pxArial)orbigger.•TheleadingbetweenlinksintheLeftHandNavmustbeatleast20px(20px)•Left-alignthelinks•ALWAYSuseHTMLlinks(thisenablestheusertoresizethetext)IfthereisaneedforgraphicslookatcombiningHTMLtext&graphics,asthisstillallowsforresizing.•TheselectedlinkMUSTalwaysbehighlighted•AlllinksMUSThavearolloverbehaviour•DONOTuseaccordionmenusorfly-outmenusGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200843 recommendedguidelinesforverticalnavigation•Avoidusingthesamewordstostartlinkitems,becausedoingsomakesthemhardertoscan.•Followtherecommendationsfortheorderingoflinks&•Verdana(upto16px)istherecommendedfontfortheBBCnamingconventionsintheGuidelines&Assetszipwebsite.Anyfontsthatarehigherthan16pxshouldbeArial•Usecautionwhenusingallcapitals.Avoidusingthemforsiteswithnumerouslinks•Aimtohave12orlesslinksfortheprimarylevelofnavigationforasite..•LocalnavigationlinksSHOULDbeabovethefold.•AvoidusingnonclickableheadingsintheLeftHandNavifheadingsareneededmakeitvisuallyclearthattheyarenonclickable•Show&hidelinkstoprovidetheclearestnavigation-Indentshow&hidelinks-Highlighttheselectedsectionheading-Highlighttheselectedlink-Changethebackgroundcolorfortheshow&hidelinks•UsethefullwidthoftheLeftHandNavfortheclickzone•Makenavigationlabelsshortanduseclear,everydaylanguage.•Makethewordsusedfornavigationlinksmatchthemainheadingofthepagetheylinkto.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200844 8.3.TWOBASICPATTErNSFOrTHELOCALNAVIGATION:A&B—recommendedpatternsPATTErNA—horizontalfollowedbyvertical111322A.1A.2A.31.horizontalnav1.horizontalnav1.horizontalnav3.show&hide2.lefthandnav2.lefthandnavPATTErNB—verticalonly211B.1B.21.lefthandnav1.lefthandnav2.show&hideGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200845 8.4.BrEADCrUMBTrAILSrecommendation•Donotusebreadcrumbtrailsforprimarynavigation•Wherenecessary,includebreadcrumbtrailsasasecondarynavigationtoprovidecontextandmakeusers’orientationmoreexplicit.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200846 9.Advertising—sizeandplacementAdvertisingontheBBCsitewillonlybevisibletovisitorsfromoutsideoftheUK.Currentimplementationisonlyonasmallnumberofsiteareasbutmaybeextended.ADVERTWhenthepageisviewedbyaUKfacingaudiencetheadTextonly|HelpSearchExploretheBBCwillnotdisplay.Init’splacethecontentwilleithermoveupintothespace(collapsiblecolumns),oralternateADVERTISEMENTcontentofthesamecolumnwidthwillbedisplayed.Therearefouradsizesandrespectiveplacements.1.Leaderboard(728x90)abovetheglobalnavigationwithinthemastheadandiscontrolledbyBarlesque.2.MPU(300x250)intherighthandcolumn,insetby3px(centred),14pxpaddingtopandbottom.Alladswillautomaticallydisplaythesupportingtext‘ADVErTISEMENT’(10pxVerdana,caps)aboveor©MMVIISitespecificBBCHelpAbouttheBBCbelowtheadvert(asillustrated,right).FooterlinksAccessibilityHelpContactUsTheBBCisnotresponsibleforthecontentofexternalinternetsitesUptoamaximumJobsTermsofUseofFour?AdvertisingPrivacy&CookiesNOTES1.Atleast50%oftheMPUMUSTbeabovethefold.2.Seeappendix1forexamplesofcollapsiblecolumns.GlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200847 10.PuttingittogetherThedesigntotherightispurelyanexercisetoillustrateTextonly|HelpSearchExploretheBBChowwecanpullalltheelementsinthisdocumenttogetherononepage.LocalMastheadVivamusvolutpatPellentesqueorcimaurisposuereSEEALSOSedvehiculaipsumutmaurisinadipiscing.NullaeleifendEmailthistoafriendPrint09Aug07|CurabituranteProininterdumCurabiturtinciduntpedevestibulumtempus14May07|CurabituranteNonummycongueFuscesodalesornarejustovivamusvitaemiInteger03Oct06|CurabituranteLiberomaurisDonecdolornisi,consequatid,posuerequis14Jul06|CurabituranteVestibulumnullaMorbiquisestnamacanteornarejustoAliquamfelisEmbeddedMediaPlayer27Sep06|Curabituranteoptimal400x225NecjustoPellentesqueorciQuisturpisNullamegestasDignissimdiamDuissedjustoQuisquealiquamsapiennonodio.AdvertisementHEADERMediumrectangleNuncvenenatisarcuNequeporroquisquamestquidoloremipsumquiadolorsitamet,300x250pxconsectetur,adipiscivelit.HEADERInportaurnaAliquamamiinesthendreritvehicula.CrassuscipitpedesitametUtelitpraesentest.Namiderat.Quisqueegetmi.LeosedarcuDuisaaugueeleifendurnablanditImagePortaculisfelisimperdiet.Duismattisturpiseunulla.206widthPellentesquenecauguevelleofeu-Acmassagiatdignissim.Sedurnasapien,RELATEDINTERNETLINKSmolliseget,suscipita,placerat.Eu,Donecfermentumdolornecarcutellus.Pellentesquefermentum.NuncNullacondimentumnonummynunc.Loremipsumdolor.Aliquetsapien.Etiamsedlectus.NullaNullacondimentumnonummyfacilisi.Maurissemsem,aliquetnon,nunc.Loremipsumdolor.TheBBCisnotresponsibleforthecontentofporttitorid,portavitae,ipsum.SedCitationexternalinternetsitesurnasapien,molliseget,suscipit.Etiamimperdietlacussitametdui.Namegetmetus.Namest.Fuscepretiumtortorvitaeestportalobortis.Praesentportafacilisisdui.Praesentduimassa.Utvenenatisloremeusapien.Nullavitaeloremvelorcimattisimperdiet.Maecenasfermentumtortorsedleo.Etiaminlorematelluscongue©MMVIISitespecificBBCHelpAbouttheBBCFooterlinksAccessibilityHelpContactUsUptoamaximumJobsTermsofUseTheBBCisnotresponsibleforthecontentofexternalinternetsitesofFour?AdvertisingPrivacy&CookiesGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200848 NewsFrontPageEurogamersgethandsonHalo3NewsFrontPageSEEALSOEurogamersgethandsonHalo3SEEALSOWhatexactlyisanextgenerationgame?Whatexactlyisanextgenerationgame?EmailthistoafriendPrint09Aug07|TechnologyEmailthistoafriendPrint09Aug07|TechnologyHalo3betafeedshypemachineHalo3betafeedshypemachine14May07|Technology14May07|TechnologyHalouniverseexpandsasfanswaitHalouniverseexpandsasfanswaitAfricaAfrica03Oct06|Technology03Oct06|TechnologyAmericasAmericasHaloaimsforepicendtotrilogyHaloaimsforepicendtotrilogy14Jul06|Technology14Jul06|TechnologyAsia-PacificAsia-PacificAppendix1DirectorJacksonsignsXboxdealDirectorJacksonsignsXboxdealEuropeEurope27Sep06|Technology27Sep06|TechnologyMiddleEastMiddleEastADVERTISEMENTSouthAsiaSouthAsia—collapsiblecolumnsRELATEDINTERNETLINKSUKUKEurogamer-Halo3reviewBusinessBusinessBungieHealthHealthTheBBCisnotresponsibleforthecontentofScience/Nature01:30/30:00SHAREScience/Nature01:30/30:00SHAREexternalinternetsitesTechnologyTechnologyAdswillbeshownonsomesitestointernationalusersEntertainmentGamersacrossEuropegottheirhandsonHalo3atmidnightonEntertainmentGamersacrossEuropegottheirhandsonHalo3atmidnightonTOPTECHNOLOGYSTORIESAlsointhenewsTuesday,oneofthemostanticipatedandheavilymarketedtitlesAlsointhenewsTuesday,oneofthemostanticipatedandheavilymarketedtitlesAbusefighttargetssocialsitesofthesite.WhenthosepagesareviewedbyaUKfacinginhistory.inhistory.GameseventhighlightspositivesRESOURCESRESOURCESaudiencetheadwillnotdisplay.MicrosofttocarryoutEUrulingVideoandAudioVideoandAudioAreyouafanoftheHaloseriesofgames?WillyoubegettingHalo3?AreyouafanoftheHaloseriesofgames?WillyoubegettingHalo3?INTERACTINTERACTNewsfeedsTelluswhyyou"reafan.Telluswhyyou"reafan.Init’splacethecontentwilleithermoveupintotheHaveYourSayHaveYourSayInPicturesYoucanalsosendusapictureofyourselffrominsideHalo3.GrabaInPicturesYoucanalsosendusapictureofyourselffrominsideHalo3.Grabaspace(collapsiblecolumns),oralternatecontentoftheMOSTPOPULARSTORIESNOWCountryProfilesscreenshotofyourselfandthenemailusthelinkusingtheformbelow:CountryProfilesRELATEDINTERNETLINKSscreenshotofyourselfandthenemailusthelinkusingtheformbelow:MOSTEMAILEDMOSTREADsamecolumnwidthwillappearinit’splace.SpecialReportsrIGHTHANDCOLUMNSpecialReportsSHOWNEurogamer-Halo3reviewWITHANDWITHOUTMPUADClickheretoseetermsandconditionsClickheretoseetermsandconditionsBungieNewsfeedsNewsfeeds1.MonkeyattackkillsDelhileaderAtnotimeshouldyouendangeryourselforothers,takeanyunnecessaryrisksTheBBCisnotresponsibleforthecontentofAtnotimeshouldyouendangeryourselforothers,takeanyunnecessaryrisks2.JKRowlingoutsDumbledoreasgayorinfringeanylaws.externalinternetsitesorinfringeanylaws.3.UnionratifiesmaildisputedealRELATEDBBCSITESRELATEDBBCSITES4.WhenworkbecomesagameName:Name:5.Oceansare"soakinguplessCO2"SPORTSPORTTOPTECHNOLOGYSTORIESWEATHEREmailaddress:WEATHERAbusefighttargetssocialsitesEmailaddress:Mostpopularnow,indetailGameseventhighlightspositivesOnthisDayTownandCountry:OnthisDayMicrosofttocarryoutEUrulingTownandCountry:EditorsBlogEditorsBlogPhonenumberNewsfeedsPhonenumber(optional):(optional):MOSTPOPULARSTORIESNOWComments:Comments:MOSTEMAILEDMOSTREAD1.MonkeyattackkillsDelhileader2.JKRowlingoutsDumbledoreasgay3.UnionratifiesmaildisputedealTheBBCmayedityourcommentsandcannotguaranteethatall4.WhenworkbecomesagameTheBBCmayedityourcommentsandcannotguaranteethatallemailswillbepublished.5.Oceansare"soakinguplessCO2"emailswillbepublished.SUBMITCLEARSUBMITCLEARMASTHEADWITHANDWITHOUTMostpopularnow,indetailLEADErBOArDADEmailthistoafriendPrintEmailthistoafriendPrintBookmarkwithBookmarkwithGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200849 Appendix2—samplelocalmastheadsNewsBritishstylegeNiussportBigcatsliveBBctwogardeNers’worldeNtertaiNmeNtweatherGlobalVisualLanguage2.0-BBCdesignguidelinesfortheweb.LyraXharraLoxha,SteveGibbons.Lastmodifiedat4:41PM,17December200850'