Technical specifications for the Web and mobile presence

<!doctype html> <html class="no-js" dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head prefix="og: http://ogp.me/ns#"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="utf-8"/> <title>Technical specifications for the Web and mobile presence - Canada.ca</title> <meta content="width=device-width,initial-scale=1" name="viewport"/> <link rel="schema.dcterms" href="http://purl.org/dc/terms/"/> <link rel="canonical" href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/technical-specifications/web-mobile-presence.html"/> <link rel="alternate" hreflang="en" href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/technical-specifications/web-mobile-presence.html"/> <link rel="alternate" hreflang="fr" href="https://www.canada.ca/fr/secretariat-conseil-tresor/services/communications-gouvernementales/programme-federal-image-marque/specifications-techniques/relatives-presence-web-mobile.html"/> <meta name="description" content="The Government of Canada Standard on Optimizing Websites and Applications for Mobile Devices ensures Government of Canada online information and services are optimized for mobile devices."/> <meta name="keywords" content="Accessibility, Usability, Interoperability, Web Standard, Common Look and Feel, CLF, CLF3, government, Internet, Treasury, Board, Secretariat, How, government, works, Government, oversight, Government, communications, Assessment, Standards, Technical, specifications, for, the, Web, and, mobile, presence"/> <meta name="author" content="Treasury Board of Canada Secretariat"/> <meta name="dcterms.title" content="Technical specifications for the Web and mobile presence"/> <meta name="dcterms.description" content="The Government of Canada Standard on Optimizing Websites and Applications for Mobile Devices ensures Government of Canada online information and services are optimized for mobile devices."/> <meta name="dcterms.creator" content="Treasury Board of Canada Secretariat"/> <meta name="dcterms.language" title="ISO639-2/T" content="eng"/> <meta name="dcterms.issued" title="W3CDTF" content="2013-04-30"/> <meta name="dcterms.modified" title="W3CDTF" content="2013-04-30"/> <meta name="dcterms.audience" content="general public"/> <meta name="dcterms.spatial" content="Canada"/> <meta name="dcterms.type" content="education and awareness"/> <meta name="dcterms.identifier" content="Treasury_Board_of_Canada_Secretariat"/> <meta prefix="fb: https://www.facebook.com/2008/fbml" property="fb:pages" content="378967748836213, 160339344047502, 184605778338568, 237796269600506, 10860597051, 14498271095, 209857686718, 160504807323251, 111156792247197, 113429762015861, 502566449790031, 312292485564363, 1471831713076413, 22724568071, 17294463927, 1442463402719857, 247990812241506, 730097607131117, 1142481292546228, 1765602380419601, 131514060764735, 307780276294187, 427238637642566, 525934210910141, 1016214671785090, 192657607776229, 586856208161152, 1146080748799944, 408143085978521, 490290084411688, 163828286987751, 565688503775086, 460123390028, 318424514044, 632493333805962, 370233926766473, 173004244677, 1562729973959056, 362400293941960, 769857139754987, 167891083224996, 466882737009651, 126404198009505, 135409166525475, 664638680273646, 169011506491295, 217171551640146, 182842831756930, 1464645710444681, 218822426028, 218740415905, 123326971154939, 125058490980757, 1062292210514762, 1768389106741505, 310939332270090, 285960408117397, 985916134909087, 655533774808209, 1522633664630497, 686814348097821, 230798677012118, 320520588000085, 103201203106202, 273375356172196, 61263506236, 353102841161, 1061339807224729, 1090791104267764, 395867780593657, 1597876400459657, 388427768185631, 937815283021844, 207409132619743, 1952090675003143, 206529629372368, 218566908564369, 175257766291975, 118472908172897, 767088219985590, 478573952173735, 465264530180856, 317418191615817, 428040827230778, 222493134493922, 196833853688656, 194633827256676, 252002641498535, 398018420213195, 265626156847421, 202442683196210, 384350631577399, 385499078129720, 178433945604162, 398240836869162, 326182960762584, 354672164565195, 375081249171867, 333050716732105, 118996871563050, 240349086055056, 119579301504003, 185184131584797, 333647780005544, 306255172770146, 369589566399283, 117461228379000, 349774478396157, 201995959908210, 307017162692056, 145928592172074, 122656527842056"> <script type="text/javascript" src="https://www.canada.ca/public/4a968ba310e5637a73786685a4729cdd129476e35554" ></script><script src="//assets.adobedtm.com/be5dfd287373/abb618326704/launch-3eac5e076135.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous"/> <link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/theme.min.css"/> <link href="/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon"/> <noscript><link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/noscript.min.css"/></noscript> <script>!function(a){var e="https://s.go-mpulse.net/boomerang/",t="addEventListener";if("False"=="True")a.BOOMR_config=a.BOOMR_config||{},a.BOOMR_config.PageParams=a.BOOMR_config.PageParams||{},a.BOOMR_config.PageParams.pci=!0,e="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="KBFUZ-C9D7G-RB8SX-GRGEN-HGMC9",function(){function n(e){a.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!a.BOOMR||!a.BOOMR.version&&!a.BOOMR.snippetExecuted){a.BOOMR=a.BOOMR||{},a.BOOMR.snippetExecuted=!0;var i,_,o,r=document.createElement("iframe");if(a[t])a[t]("load",n,!1);else if(a.attachEvent)a.attachEvent("onload",n);r.src="javascript:void(0)",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="width:0;height:0;border:0;display:none;",o=document.getElementsByTagName("script")[0],o.parentNode.insertBefore(r,o);try{_=r.contentWindow.document}catch(O){i=document.domain,r.src="javascript:var d=document.open();d.domain='"+i+"';void(0);",_=r.contentWindow.document}_.open()._l=function(){var a=this.createElement("script");if(i)this.domain=i;a.id="boomr-if-as",a.src=e+"KBFUZ-C9D7G-RB8SX-GRGEN-HGMC9",BOOMR_lstart=(new Date).getTime(),this.body.appendChild(a)},_.write("<bo"+'dy onload="document._l();">'),_.close()}}(),"".length>0)if(a&&"performance"in a&&a.performance&&"function"==typeof a.performance.setResourceTimingBufferSize)a.performance.setResourceTimingBufferSize();!function(){if(BOOMR=a.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var e=""=="true"?1:0,t="",n="bdpnbeqx3ixo4z2grpvq-f-504890d78-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,_={"ak.v":"39","ak.cp":"368225","ak.ai":parseInt("231651",10),"ak.ol":"0","ak.cr":10,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"12944c5d","ak.r":47325,"ak.a2":e,"ak.m":"dscb","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":36832,"ak.gh":"23.211.252.169","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732676587","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==Pe63tB8pps7JYiqsvj1oGrbZi6VexjqNqpNgr63dJnrm5t3siaqMb5prZm0Y7wiM7jj8gy0NEPcYD9LNWQJBSCQW8vKvu20ubZKJNDA9vKKrm8ewZPylDXGRq39j2zDxQBh+M2ocElFZOEySSNe/KFhn3Fy733oZ8mTljIGRRfpLQ66XU5qB7uGKwa1L8aTmjKVP8E9ZoNIPGnkWiKiRUIa97ih6RgzJ8Jmgzn4JYk4CuwSnpRhMNQPaNdgNik+83tpEJuzcWTZdhVP69VmddelVgH4v7NyeZ1v/sassw395VjbLv9FZMvIjUAXd/qcyVCpPbk9gVkOh/SQET5u5VezqrZUqJ4tSj8trXqFO4R7rits3HmW3Un2q8ci/F/RHrf0csjcn+Jjxmb3P9aCnGy2FSr7bXeHH4BxJ0XIcBek=","ak.pv":"790","ak.dpoabenc":"","ak.tf":i};if(""!==t)_["ak.ruds"]=t;var o={i:!1,av:function(e){var t="http.initiator";if(e&&(!e[t]||"spa_hard"===e[t]))_["ak.feo"]=void 0!==a.aFeoApplied?1:0,BOOMR.addVar(_)},rv:function(){var a=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(a)}};BOOMR.plugins.AK={akVars:_,akDNSPreFetchDomain:n,init:function(){if(!o.i){var a=BOOMR.subscribe;a("before_beacon",o.av,null,null),a("onbeacon",o.rv,null,null),o.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body vocab="http://schema.org/" typeof="WebPage" resource="#wb-webpage"> <div class="newpar new section"> </div> <div class="par iparys_inherited"> <div class="global-header"><nav><ul id="wb-tphp"> <li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li> <li class="wb-slc"><a class="wb-sl" href="#wb-info">Skip to "About government"</a></li> </ul></nav> <header> <div id="wb-bnr" class="container"> <div class="row"> <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right"> <h2 class="wb-inv">Language selection</h2> <div class="row"> <div class="col-md-12"> <ul class="list-inline mrgn-bttm-0"> <li> <a lang="fr" href="/fr/secretariat-conseil-tresor/services/communications-gouvernementales/programme-federal-image-marque/specifications-techniques/relatives-presence-web-mobile.html"> <span class="hidden-xs" translate="no">Français</span> <abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase" translate="no">fr</abbr> </a> </li> </ul> </div> </div> </section> <div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" resource="#wb-publisher" typeof="GovernmentOrganization"> <a href="/en.html" property="url"> <img src="/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada" property="logo"/> <span class="wb-inv"> / <span lang="fr">Gouvernement du Canada</span> </span> </a> <meta property="name" content="Government of Canada"/> <meta property="areaServed" typeof="Country" content="Canada"/> <link property="logo" href="/etc/designs/canada/wet-boew/assets/wmms-blk.svg"/> </div> <section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4"> <h2>Search</h2> <form action="/en/sr/srb.html" method="get" name="cse-search-box" role="search"> <div class="form-group wb-srch-qry"> <label for="wb-srch-q" class="wb-inv">Search Canada.ca</label> <input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"/> <datalist id="wb-srch-q-ac"> </datalist> </div> <div class="form-group submit"> <button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> </div> </form> </section> </div> </div> <hr/> <div class="container"><div class="row"> <div class="col-md-8"> <nav class="gcweb-menu" typeof="SiteNavigationElement"> <h2 class="wb-inv">Menu</h2> <button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button> <ul role="menu" aria-orientation="vertical" data-ajax-replace="/content/dam/canada/sitemenu/sitemenu-v2-en.html"> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://travel.gc.ca/">Travel and tourism</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/health.html">Health</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li> </ul> </nav> </div> </div></div> <nav id="wb-bc" property="breadcrumb"><h2 class="wb-inv">You are here:</h2><div class="container"><ol class="breadcrumb"> <li><a href='/en.html'>Canada.ca</a></li> <li><a href='/en/government/system.html'>About government</a></li> <li><a href='/en/treasury-board-secretariat/topics/government-communications.html'>Government communications</a></li> <li><a href='/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html'>Federal identity requirements</a></li> <li><a href='/en/treasury-board-secretariat/services/government-communications/federal-identity-program/technical-specifications.html'>Federal Identity Program technical specifications</a></li> </ol></div></nav> </header> </div> </div> <main property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement" class="container"> <h1 property="name" id="wb-cont" dir="ltr"> Technical specifications for the Web and mobile presence</h1> <div><div class="mwstext section"><section> <div class="wet-boew-slideout"> <h2>Table of contents</h2> <ul> <li><a href="#p1">Introduction</a></li> <li><a href="#p2">Terms used in this document</a></li> <li><a href="#p3">How to use this document</a> <ul> <li><a href="#GraphicalElements">Images, icons and other graphical elements</a></li> <li><a href="#StandardizedTerms">Standardized terms</a></li> </ul> </li> <li><a href="#Optimizing">Optimizing websites and Web applications for mobile devices</a></li> <li><a href="#SmallDeviceScreens">Layout and design specifications for small device screens</a> <ul> <li><a href="#Section1">1. Content pages/screens</a> <ul> <li><a href="#Section1_1">1.1. Government of Canada navigation bar</a> <ul> <li><a href="#Section1_1_1">1.1.1. Canada Wordmark</a></li> <li><a href="#Section1_1_2">1.1.2. Home button</a></li> <li><a href="#Section1_1_3">1.1.3. Back button</a></li> <li><a href="#Section1_1_4">1.1.4. Menu button</a></li> <li><a href="#Section1_1_5">1.1.5. Search button</a></li> <li><a href="#Section1_1_6">1.1.6. Settings button</a></li> </ul> </li> <li><a href="#Section1_2">1.2. Site/application title</a></li> <li><a href="#Section1_3">1.3. Page/screen title</a></li> <li><a href="#Section1_4">1.4. Body</a></li> </ul> </li> <li><a href="#Section2">2. Server message pages/screens</a> <ul> <li><a href="#Section2_1">2.1. Site/application title</a></li> <li><a href="#Section2_2">2.2. Body</a> <ul> <li><a href="#Section2_2_1">2.2.1. Server message blocks</a> <ul> <li><a href="#Section2_2_1_1">2.2.1.1. Server message title</a></li> <li><a href="#Section2_2_1_2">2.2.1.2. Server message body</a></li> <li><a href="#Section2_2_1_3">2.2.1.3. Home link</a></li> <li><a href="#Section2_2_1_4">2.2.1.4. Contact information link</a></li> </ul> </li> <li><a href="#Section2_2_2">2.2.2. Terms and conditions link</a></li> <li><a href="#Section2_2_3">2.2.3. Canada Wordmark</a></li> </ul> </li> </ul> </li> <li><a href="#Section3">3. Splash pages/screens</a> <ul> <li><a href="#Section3_1">3.1. Welcome banner</a></li> <li><a href="#Section3_2">3.2. Site/application title block</a> <ul> <li><a href="#Section3_2_1">3.2.1. Site/application title in the first official language</a></li> <li><a href="#Section3_2_2">3.2.2. Site/application title in the second official language</a></li> <li><a href="#Section3_2_3">3.2.3. Site/application titles in additional languages</a></li> <li><a href="#Section3_3">3.3. Language links block</a></li> <li><a href="#Section3_3_1">3.3.1. Language link for the first official language</a></li> <li><a href="#Section3_3_2">3.3.2. Language link for the second official language</a></li> <li><a href="#Section3_3_3">3.3.3. Language link for additional languages</a></li> </ul> </li> <li><a href="#Section3_4">3.4. Terms and conditions links block</a> <ul> <li><a href="#Section3_4_1">3.4.1. Terms and conditions link for the first official language</a></li> <li><a href="#Section3_4_2">3.4.2. Terms and conditions link for the second official language</a></li> <li><a href="#Section3_4_3">3.4.3. Terms and conditions link for additional languages</a></li> </ul> </li> <li><a href="#Section3_5">3.5. Canada Wordmark</a></li> </ul> </li> <li><a href="#Section4">4. Content overlays</a> <ul> <li><a href="#Section4_1">4.1. Title bar</a> <ul> <li><a href="#Section4_1_1">4.1.1. Title</a></li> <li><a href="#Section4_1_2">4.1.2. Back button</a></li> <li><a href="#Section4_1_3">4.1.3. Close button</a></li> </ul> </li> <li><a href="#Section4_2">4.2. Body</a></li> </ul> </li> <li><a href="#Section5">5. Menus</a> <ul> <li><a href="#Section5_1">5.1. Title bar</a> <ul> <li><a href="#Section5_1_1">5.1.1. Title</a></li> <li><a href="#Section5_1_2">5.1.2. Back button</a></li> <li><a href="#Section5_1_3">5.1.3. Close button</a></li> </ul> </li> <li><a href="#Section5_2">5.2. Body</a> <ul> <li><a href="#Section5_2_1">5.2.1. Menu items</a></li> </ul> </li> </ul> </li> <li><a href="#Section6">6. Navigation overlay</a> <ul> <li><a href="#Section6_1">6.1. Title bar</a> <ul> <li><a href="#Section6_1_1">6.1.1. Title</a></li> </ul> </li> <li><a href="#Section6_2">6.2. Body</a> <ul> <li><a href="#Section6_2_1">6.2.1. Breadcrumb navigation</a></li> <li><a href="#Section6_2_2">6.2.2. Secondary navigation</a></li> <li><a href="#Section6_2_3">6.2.3. Site/application navigation</a></li> </ul> </li> </ul> </li> <li><a href="#Section7">7. Search overlay</a> <ul> <li><a href="#Section7_1">7.1. Title bar</a> <ul> <li><a href="#Section7_1_1">7.1.1. Title</a></li> </ul> </li> <li><a href="#Section7_2">7.2. Body</a> <ul> <li><a href="#Section7_2_1">7.2.1. Search input field</a></li> <li><a href="#Section7_2_2">7.2.2. Search button</a></li> </ul> </li> </ul> </li> <li><a href="#Section8">8. Settings menu</a> <ul> <li><a href="#Section8_1">8.1. Title bar</a> <ul> <li><a href="#Section8_1_1">8.1.1. Title</a></li> </ul> </li> <li><a href="#Section8_2">8.2. Body</a> <ul> <li><a href="#Section8_2_1">8.2.1. Sign-in/sign-out menu item</a></li> <li><a href="#Section8_2_2">8.2.2. Language menu menu item</a></li> <li><a href="#Section8_2_3">8.2.3. User-modifiable setting menu items</a></li> <li><a href="#Section8_2_4">8.2.4. About information overlay menu item</a></li> </ul> </li> </ul> </li> <li><a href="#Section9">9. Language menu</a> <ul> <li><a href="#Section9_1">9.1. Title bar</a> <ul> <li><a href="#Section9_1_1">9.1.1. Menu title</a></li> </ul> </li> <li><a href="#Section9_2">9.2. Body</a> <ul> <li><a href="#Section9_2_1">9.2.1. Language menu items</a></li> </ul> </li> </ul> </li> <li><a href="#Section10">10. About information overlay</a> <ul> <li><a href="#Section10_1">10.1. Title bar</a> <ul> <li><a href="#Section10_1_1">10.1.1. Title</a></li> </ul> </li> <li><a href="#Section10_2">10.2. Body</a> <ul> <li><a href="#Section10_2_1">10.2.1. Site/application title</a></li> <li><a href="#Section10_2_2">10.2.2. Version identifier</a></li> <li><a href="#Section10_2_3">10.2.3. Terms and conditions link</a></li> <li><a href="#Section10_2_4">10.2.4. Transparency link</a></li> <li><a href="#Section10_2_5">10.2.5. About us link</a></li> <li><a href="#Section10_2_6">10.2.6. Contact us link</a></li> <li><a href="#Section10_2_7">10.2.7. News link</a></li> <li><a href="#Section10_2_8">10.2.8. Stay connected link</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#MediumDeviceScreens">Layout and design specifications for medium device screens</a></li> <li><a href="#LargeDeviceScreens">Layout and design specifications for large device screens</a> <ul> <li><a href="#Section11">11. Content pages</a> <ul> <li><a href="#Section11_1">11.1. Header</a> <ul> <li><a href="#Section11_1_1">11.1.1. Government of Canada navigation bar</a> <ul> <li><a href="#Section11_1_1_1">11.1.1.1. Government of Canada signature</a></li> </ul> </li> <li><a href="#Section11_1_2">11.1.2. Site/application title</a></li> <li><a href="#Section11_1_3">11.1.3. Canada Wordmark</a></li> <li><a href="#Section11_1_4">11.1.4. Search</a></li> <li><a href="#Section11_1_5">11.1.5. Site/application navigation bar</a></li> </ul> </li> <li><a href="#Section11_2">11.2. Breadcrumbs</a></li> <li><a href="#Section11_3">11.3. Body</a></li> <li><a href="#Section11_4">11.4. Background </a></li> <li><a href="#Section11_5">11.5. Government priorities</a></li> <li><a href="#Section11_6">11.6. Date modified</a></li> <li><a href="#Section11_7">11.7. Footer</a> <ul> <li><a href="#Section11_7_1">11.7.1. Site/application footer</a> <ul> <li><a href="#Section11_7_1_1">11.7.1.1. Terms and conditions ("<span lang="fr">Avis</span>") and Transparency ("<span lang="fr">Transparence</span>") links </a></li> </ul> </li> <li><a href="#Section11_7_2">11.7.2. Government of Canada footer</a></li> </ul> </li> </ul> </li> <li><a href="#Section12">12. Server message pages</a> <ul> <li><a href="#Section12_1">12.1. Header</a> <ul> <li><a href="#Section12_1_1">12.1.1. Government of Canada signature</a></li> <li><a href="#Section12_1_2">12.1.2. Canada Wordmark</a></li> <li><a href="#Section12_1_3">12.1.3. Site/application title block</a> <ul> <li><a href="#Section12_1_3_1">12.1.3.1. Site/application title in the first official language</a></li> <li><a href="#Section12_1_3_2">12.1.3.2. Site/application title in the second official language</a></li> <li><a href="#Section12_1_3_3">12.1.3.3. Site/application title in additional languages</a></li> </ul> </li> </ul> </li> <li><a href="#Section12_2">12.2. Body</a> <ul> <li><a href="#Section12_2_1">12.2.1. Server message block in the first official language</a> <ul> <li><a href="#Section12_2_1_1">12.2.1.1. Server message title</a></li> <li><a href="#Section12_2_1_2">12.2.1.2. Server message body</a></li> <li><a href="#Section12_2_1_3">12.2.1.3. Home page link</a></li> <li><a href="#Section12_2_1_4">12.2.1.4. Contact information link</a></li> </ul> </li> <li><a href="#Section12_2_2">12.2.2. Server message block in the second official language</a> <ul> <li><a href="#Section12_2_2_1">12.2.2.1. Server message title</a></li> <li><a href="#Section12_2_2_2">12.2.2.2. Server message body</a></li> <li><a href="#Section12_2_2_3">12.2.2.3. Home page link</a></li> <li><a href="#Section12_2_2_4">12.2.2.4. Contact information link</a></li> </ul> </li> <li><a href="#Section12_2_3">12.2.3. Server message block in additional languages</a> <ul> <li><a href="#Section12_2_3_1">12.2.3.1. Server message title</a></li> <li><a href="#Section12_2_3_2">12.2.3.2. Server message body</a></li> <li><a href="#Section12_2_3_3">12.2.3.3. Home page link</a></li> <li><a href="#Section12_2_3_4">12.2.3.4. Contact information link</a></li> </ul> </li> </ul> </li> <li><a href="#Section12_3">12.3. Footer</a> <ul> <li><a href="#Section12_3_1">12.3.1. Terms and conditions link in the first official language</a></li> <li><a href="#Section12_3_2">12.3.2. Terms and conditions link in the second official language</a></li> <li><a href="#Section12_3_3">12.3.3. Terms and conditions link in additional languages</a></li> </ul> </li> </ul> </li> <li><a href="#Section13">13. Splash pages</a> <ul> <li><a href="#Section13_1">13.1. Header</a> <ul> <li><a href="#Section13_1_1">13.1.1. Government of Canada signature</a></li> </ul> </li> <li><a href="#Section13_2">13.2. Body</a> <ul> <li><a href="#Section13_2_1">13.2.1. Site/application title</a></li> <li><a href="#Section13_2_2">13.2.2. Language selection links</a></li> <li><a href="#Section13_2_3">13.2.3. Canada Wordmark</a></li> </ul> </li> <li><a href="#Section13_3">13.3. Footer</a> <ul> <li><a href="#Section13_3_1">13.3.1. Terms and conditions (Avis) link</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#Print">Layout and design specifications for print</a> <ul> <li><a href="#Section14">14. Content pages/screens</a> <ul> <li><a href="#Section14_1">14.1. Header</a> <ul> <li><a href="#Section14_1_1">14.1.1. Government of Canada signature</a></li> <li><a href="#Section14_1_2">14.1.2. Canada Wordmark</a></li> <li><a href="#Section14_1_3">14.1.3. Site/application title</a></li> </ul> </li> <li><a href="#Section14_2">14.2. Body</a></li> </ul> </li> </ul> </li> <li><a href="#ArchivedContent">Design specifications for archived content</a> <ul> <li><a href="#Section15">15. Archived content notice text</a></li> </ul> </li> <li><a href="#p10">Design specifications for social media icons</a> <ul> <li><a href="#Section16">16. Social media disclaimer</a></li> </ul> </li> <li><a href="#ApplicationIcons">Design specifications for application icons for device-based mobile applications</a></li> <li><a href="#ApplicationLaunchScreens">Design specifications for application launch screens for device-based mobile applications</a></li> <li><a href="#LaunchSequence">Design specifications for the launch sequence of device-based mobile applications</a></li> <li><a href="#p14">Enquiries</a></li> <li><a href="#AppendixA">Appendix A: Standardized terms</a></li> </ul> </div> </section> <section> <h2 id="p1">Introduction</h2> <p>This document is a companion to the <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227"><em>Standard on Web Usability</em></a> and to the <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27088"><em>Standard on Optimizing Websites and Applications for Mobile Devices</em></a>. It describes how to optimize websites and Web applications for mobile devices, as well as the layout and design specifications for websites, Web applications and device-based mobile applications. This ensures that Government of Canada websites, Web applications and device-based mobile applications are recognizable, easy to use and optimized for a wide variety of devices, such as smart phones (small device screens), tablets (medium device screens) and desktop computers (large device screens).</p> </section> <section> <h2 id="p2">Terms used in this document</h2> <p>In this document:</p> <ul> <li><span class="bold">Device screen</span> refers to the physical screen of a device used to view a page/screen.</li> <li><span class="bold">Page/screen</span> refers to the entire canvas upon which the elements of the site/application are laid out.</li> <li><span class="bold">Viewport</span> refers to the window through which the page/screen is viewed.</li> </ul> </section> <section> <h2 id="p3">How to use this document</h2> <p>If designing a website or a Web application, implement all of the following specifications:</p> <ul> <li><a href="#Optimizing">Optimizing websites and Web applications for mobile devices</a>.</li> <li><a href="#SmallDeviceScreens">Layout and design specifications for small device screens</a>.</li> <li><a href="#MediumDeviceScreens">Layout and design specifications for medium device screens</a>.</li> <li><a href="#LargeDeviceScreens">Layout and design specifications for large device screens</a>.</li> <li><a href="#Print">Layout and design specifications for print</a>.</li> <li><a href="#ArchivedContent">Design specifications for archived content</a>.</li> </ul> <p>If designing a device-based mobile application, implement all of the following specifications:</p> <ul> <li>One or more of the following screen specifications: <ul> <li><a href="#SmallDeviceScreens">Layout and design specifications for small device screens</a>.</li> <li><a href="#MediumDeviceScreens">Layout and design specifications for medium device screens</a>.</li> </ul> </li> <li><a href="#ApplicationIcons">Design specifications for application icons for device-based mobile applications</a>.</li> <li><a href="#ApplicationLaunchScreens">Design specifications for application launch screens for device-based mobile applications</a>.</li> <li><a href="#LaunchSequence">Design specifications for the launch sequence of device-based mobile applications</a>.</li> </ul> <section> <h3 id="GraphicalElements">Images, icons and other graphical elements</h3> <p>The images, icons and other graphical elements mentioned in this document are distributed as part of the GC Web Usability theme of the Web Experience Toolkit.</p> </section> <section> <h3 id="StandardizedTerms">Standardized terms</h3> <p>A list of standardized terms, in both official languages is available in <a href="#AppendixA">Appendix A: Standardized terms</a>.</p> </section> </section> <section> <h2 id="Optimizing">Optimizing websites and Web applications for mobile devices</h2> <p>Websites and Web applications are optimized for mobile devices by:</p> <ol> <li>Adapting the layout and design of websites and Web applications for small, medium and large screen sizes, and for different input methods, such as touch input and keyboard and mouse input. This can be accomplished by implementing the Web Experience Toolkit.</li> <li>Designing the content and interface of websites and Web applications for small, medium and large screen sizes and for different input methods, such as touch input and keyboard and mouse input.</li> </ol> </section> <section> <h2 id="SmallDeviceScreens">Layout and design specifications for small device screens</h2> <p>The specifications for small device screens are applied when:</p> <ul> <li>the screen (media query device-width) is less than 768 pixels wide; or</li> <li>the viewport (media query width) is less than 768 pixels wide.</li> </ul> <section> <h3 id="Section1">1. Content pages/screens</h3> <div class="pull-right"> <img alt="Content page/screen showing all elements described in Section 1. Content pages/screens." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure001-eng.gif" width="200"> </div> <p>Each content page/screen contains the Government of Canada navigation bar, the site/application title, the page/screen title and a body.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the viewport).</li> </ul> <section> <h4 id="Section1_1">1.1. Government of Canada navigation bar</h4> <p>The Government of Canada navigation bar contains the Canada Wordmark and home, back, menu, search and settings buttons.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the page/screen.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.</li> </ul> <section> <h5 id="Section1_1_1">1.1.1. Canada Wordmark</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the left edge of the Government of Canada navigation bar.</li> <li>Centred vertically.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 90 pixels.</li> <li>Height: 22 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Transparent.</li> <li>White flag symbol.</li> <li>Text equivalent: "Symbol of the Government of Canada".</li> <li>Image: wmms.</li> </ul> </section> <section> <h5 id="Section1_1_2">1.1.2. Home button</h5> <div class="pull-right"> <img alt="Content page/screen with the home button omitted as described in the exceptions for Section 1.1.2. Home button." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure002-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>When the menu button is present: Aligned horizontally with the left edge of the menu button.</li> <li>When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.</li> <li>When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 46 pixels.</li> <li>Height: 32 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Icon: House (<img alt="House icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure003-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Home".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the home button returns the user to the home page/screen.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The home button is omitted when:</p> <ul> <li>The page/screen is the home page/screen.</li> <li>The back button is present.</li> <li>Activating the home button is likely to cause user error or loss of data, for example, in a transactional workflow.</li> <li>The site/application does not have a home page/screen.</li> <li>The site/application is a single-page/screen site/application.</li> </ul> </section> <section> <h5 id="Section1_1_3">1.1.3. Back button</h5> <div class="pull-right"> <img alt="Content page/screen with the home button replaced with a back button as described in Section 1.1.3. Back button." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure004-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>When the menu button is present: Aligned horizontally with the left edge of the menu button.</li> <li>When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.</li> <li>When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 46 pixels.</li> <li>Height: 32 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Icon: Back arrow (<img alt="Back arrow icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure005-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Back."</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the back button return the user to the previously-viewed page/screen.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The back button is omitted when:</p> <ul> <li>There is no previously-viewed page/screen.</li> <li>The home button is present.</li> <li>Activating the back button is likely to cause user error or loss of data, for example, in a transactional workflow.</li> <li>The site/application is a single-page/screen site/application.</li> </ul> </section> <section> <h5 id="Section1_1_4">1.1.4. Menu button</h5> <div class="pull-right"> <img alt="Content page/screen with the menu button omitted as described in the exceptions for Section 1.1.4. Menu button." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure006-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>When the search button is present: Aligned horizontally with the left edge of the search button.</li> <li>When the search button is omitted: Aligned horizontally with the left edge of the settings button.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 46 pixels.</li> <li>Height: 32 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Icon: Three bars (<img alt="Three bars icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure007-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Menu."</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the menu button displays the navigation overlay.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The menu button is omitted when:</p> <ul> <li>Navigation is provided in the body.</li> <li>Activating a menu item is likely to cause user error or loss of data, for example, in a transactional workflow.</li> <li>The site/application is a single-page/screen site/application.</li> </ul> </section> <section> <h5 id="Section1_1_5">1.1.5. Search button</h5> <div class="pull-right"> <img alt="Content page/screen with the search button omitted as described in the exceptions for Section 1.1.5. Search button." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure008-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the left edge of the settings button.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 46 pixels.</li> <li>Height: 32 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Icon: Magnifying glass (<img alt="Magnifying glass icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure009-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Search".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the search button displays the search overlay.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The search button is omitted when:</p> <ul> <li>Search is not a function of the site/application.</li> <li>Search is a primary function of the site/application and is provided in the body.</li> <li>Activating a search is likely to cause user error or loss of data, for example, in a transactional workflow.</li> </ul> </section> <section> <h5 id="Section1_1_6">1.1.6. Settings button</h5> <div class="pull-right"> <img alt="Content page/screen with only the settings button displayed as described in the exceptions for the subsections of Section 1. Content pages/screens." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure010-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the right edge of the Government of Canada navigation bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 46 pixels.</li> <li>Height: 32 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Icon: Cog (<img alt="Cog icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure011-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Settings".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the settings button displays the settings menu.</li> </ul> </section> </section> <section> <h4 id="Section1_2">1.2. Site/application title</h4> <div class="pull-right"> <img alt="Content page/screen with the site/application title omitted as described in the exceptions for Section 1.2. Site/application title." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure012-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the Government of Canada navigation bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #6facd5 to #497bae.</li> <li>Font: Verdana, sans-serif.</li> <li>Font size: 19.2 pixels.</li> <li>Text: The title of the site/application.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The site/application title is omitted when:</p> <ul> <li>The page/screen cannot be accessed without first going through another page/screen of the site/application which displays the site/application title.</li> </ul> <p>Device-based mobile applications also omit the application title when:</p> <ul> <li>The device-based mobile application is launched by activating the application icon for the device-based mobile application, if the application title is displayed in conjunction with the application icon.</li> </ul> </section> <section> <h4 id="Section1_3">1.3. Page/screen title</h4> <div class="pull-right"> <img alt="Content page/screen with the site/application and page/screen titles omitted as described in the exceptions for sections 1.2. Site/application title and 1.3. Page/screen title." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure013-eng.gif" width="200"> </div> <p class="ViewParameter">Location:</p> <ul> <li>When the site/application title is present: Aligned vertically with the bottom edge of the site/application title.</li> <li>When the site/application title is omitted: Aligned vertically with the bottom edge of the Government of Canada navigation bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Border: bottom only; 1 pixel dotted #ccc.</li> <li>Font: Verdana, sans-serif.</li> <li>Font size: 21.76 pixels.</li> <li>Text: The title of the page/screen.</li> </ul> <p class="ViewParameter">Exceptions:</p> <ul> <li>The site/application is a single-page/screen site/application.</li> </ul> </section> <section> <h4 id="Section1_4">1.4. Body</h4> <p>The body contains the contents/interface for the site/application.</p> <p class="ViewParameter">Location and Dimensions:</p> <ul> <li>The body occupies all the page/screen real estate not used by the Government of Canada navigation bar, the site/application title and the page/screen title. When the site/application title or the page/screen title are omitted the body expands to occupy the unused space.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: White (#fff).</li> <li>Font: Verdana, sans-serif.</li> <li>Font size: At least 16 pixels.</li> </ul> </section> </section> <section> <h3 id="Section2">2. Server message pages/screens</h3> <div class="pull-right"> <img alt="Unilingual server message page/screen as described in Section 2. Server message pages/screens." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure014-eng.gif" width="200"> </div> <p>The server message page/screen contains the site/application title and a body.</p> <p>If the user's language can be determined, the server message is provided only in the user's language. If the user's language cannot be determined, the server message is provided in each language in which the site/application is available.</p> <section> <h4 id="Section2_1">2.1. Site/application title</h4> <p>The site/application title is displayed in each language in which the server message is provided.</p> <p class="ViewParameter">Location:</p> <ul> <li>First official language: Aligned vertically with the top edge of the screen/page.</li> <li>Second official language: Aligned vertically with the bottom edge of the site/application title in the first official language.</li> <li>Additional languages: Aligned vertically with the bottom edge of the previous site/application title.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: #295376.</li> <li>Background colour: White (#fff).</li> <li>Font: Verdana, sans-serif.</li> <li>Font size: <ul> <li>First and second official languages: 19.2 pixels.</li> <li>Additional languages: 15.3667 pixels.</li> </ul> </li> <li>Text: <ul> <li>First official language: The title of the site/application in the first official language.</li> <li>Second official language: The title of the site/application in the second official language.</li> <li>Additional languages: The title of the site/application in the additional language and in its native alphabet.</li> </ul> </li> <li>Border: <ul> <li>After the last site/application title: bottom-only; 1 pixel solid #666.</li> </ul> </li> </ul> </section> <section> <h4 id="Section2_2">2.2. Body</h4> <p>The body contains a server message block and a terms and conditions link in each language in which the server message is provided and the Canada Wordmark.</p> <section> <h5 id="Section2_2_1">2.2.1. Server message blocks</h5> <p>Each server message block contains a server message title, a server message body and links to the home page and the contact information.</p> <p class="ViewParameter">Location:</p> <ul> <li>First official language: Aligned vertically with the bottom edge of the last site/application title.</li> <li>Second official language: Aligned vertically with the bottom edge of the server message block in the first official language.</li> <li>Additional languages: Aligned vertically with the bottom edge of the previous server message block.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> </ul> <section> <h6 id="Section2_2_1_1">2.2.1.1. Server message title</h6> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the server message block.</li> <li>Aligned horizontally with the left edge of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the server message in the language of the server message block and in its native alphabet.</li> </ul> </section> <section> <h6 id="Section2_2_1_2">2.2.1.2. Server message body</h6> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the server message title.</li> <li>Aligned horizontally with the left edge of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The body of the server message in the language of the server message block and in its native alphabet.</li> </ul> </section> <section> <h6 id="Section2_2_1_3">2.2.1.3. Home link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the message body.</li> <li>Aligned horizontally with the left edge of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Home" in the language of the server message block and in its native alphabet.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the home link returns the user to the home page/screen.</li> </ul> <p class="ViewParameter">Exceptions:</p> <ul> <li>The site/application does not have a home page/screen.</li> <li>The site/application is a single-page/screen site/application.</li> </ul> </section> <section> <h6 id="Section2_2_1_4">2.2.1.4. Contact information link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the home link.</li> <li>Aligned horizontally with the left edge of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Contact us" in the language of the server message block and in its native alphabet.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the contact information link takes the user to the contact information.</li> </ul> </section> </section> <section> <h5 id="Section2_2_2">2.2.2. Terms and conditions link</h5> <p>The terms and conditions link is displayed in each language in which the server message is provided.</p> <p class="ViewParameter">Location:</p> <ul> <li>First official language: Aligned vertically with the bottom edge of the last server message block.</li> <li>Second official language: Aligned vertically with the bottom edge of the terms and conditions link in the first official language.</li> <li>Additional languages: Aligned vertically with the bottom edge of the previous terms and conditions link.</li> <li>Aligned horizontally with the left edge of the page/screen.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: <ul> <li>First official language: "Terms and conditions" in the first official language.</li> <li>Second official language: "Terms and conditions" in the second official language.</li> <li>Additional languages: "Terms and conditions" in the additional language and in its native alphabet.</li> </ul> </li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the terms and conditions link takes the user to the notices described in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>.</li> </ul> </section> <section> <h5 id="Section2_2_3">2.2.3. Canada Wordmark</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the last terms and conditions link.</li> <li>Centred horizontally.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 90 pixels.</li> <li>Height: 22 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background colour: White (#fff).</li> <li>Black text and FIP red flag symbol.</li> <li>Text equivalent: "Symbol of the Government of Canada".</li> <li>Displayed as a block-level element.</li> <li>Image: wmms.</li> </ul> </section> </section> </section> <section> <h3 id="Section3">3. Splash pages/screens</h3> <div class="pull-right"> <img alt="Bilingual splash page/screen as described in Section 3. Splash pages/screens." height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure015-eng.gif" width="200"> </div> <p>Splash pages/screens contain the welcome banner, a site/application title block, a language links block, a terms and conditions links block and the Canada Wordmark.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: White (#fff).</li> </ul> <p class="ViewParameter">Exceptions:</p> <ul> <li>Websites and Web applications that have a unilingual website addresses do not implement splash pages.</li> <li>Device-based mobile applications implement <a href="#ApplicationLaunchScreens">application launch screens</a> instead of splash screens.</li> </ul> <section> <h4 id="Section3_1">3.1. Welcome banner</h4> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the page/screen.</li> <li>Aligned horizontally with the left edge of the page/screen.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% (full width of the page/screen).</li> <li>Height: 189 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background image: splashpage-background.jpg.</li> <li>Text: "Welcome / <span lang="fr">Bienvenue</span>".</li> </ul> </section> <section> <h4 id="Section3_2">3.2. Site/application title block</h4> <p>The site/application title block contains the site/application title in each language in which the site/application is available.</p> <p class="ViewParameter">Location:</p> <ul> <li>Below the welcome banner.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> </ul> <section> <h5 id="Section3_2_1">3.2.1. Site/application title in the first official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the site/application title block.</li> <li>Aligned horizontally with the left edge of the site/application title block.</li> <li>On the same baseline as the site/application title in the second official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the site/application in the first official language.</li> <li>Alignment: Left-aligned.</li> </ul> </section> <section> <h5 id="Section3_2_2">3.2.2. Site/application title in the second official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the site/application title block.</li> <li>Aligned horizontally with the right edge of the site/application title block.</li> <li>On the same baseline as the site/application title in the first official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the site/application in the second official language.</li> <li>Alignment: Right-aligned.</li> </ul> </section> <section> <h5 id="Section3_2_3">3.2.3. Site/application titles in additional languages</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the site/application title in the first and second official languages.</li> <li>First, third and subsequent odd-numbered additional language: <ul> <li>Aligned horizontally with the left edge of the site/application title block.</li> <li>On the same baseline as the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>Aligned horizontally with the right edge of the site/application title block.</li> <li>On the same baseline as the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the site/application in the additional language and in its native alphabet.</li> <li>Alignment: <ul> <li>First, third and subsequent odd-numbered additional language: Left-aligned.</li> <li>Second, fourth and subsequent even-numbered additional language: Right-aligned.</li> </ul> </li> </ul> </section> </section> <section> <h4 id="Section3_3">3.3. Language links block</h4> <p>The language links block contains links to each language version of the site/application.</p> <p class="ViewParameter">Location:</p> <ul> <li>Below the site/application title block.</li> </ul> <section> <h5 id="Section3_3_1">3.3.1. Language link for the first official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the language links block.</li> <li>Aligned horizontally with the left edge of the language links block.</li> <li>On the same baseline as the language link for the second official language.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Text: The official name of the first official language in its native language and alphabet.</li> </ul> </section> <section> <h5 id="Section3_3_2">3.3.2. Language link for the second official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the language links block.</li> <li>Aligned horizontally with the right edge of the language links block.</li> <li>On the same baseline as the language link for the first official language.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Text: The official name of the second official language in its native language and alphabet.</li> </ul> </section> <section> <h5 id="Section3_3_3">3.3.3. Language link for additional languages</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the language links for the first and second official languages.</li> <li>First, third and subsequent odd-numbered additional language: <ul> <li>Aligned horizontally with the left edge of the language links block.</li> <li>On the same baseline as the language link for the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>Aligned horizontally with the right edge of the language links block.</li> <li>On the same baseline as the language link for the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.</li> <li>Text: The official name of the first official language in its native language and alphabet.</li> </ul> </section> </section> <section> <h4 id="Section3_4">3.4. Terms and conditions links block</h4> <p>The terms and conditions block contains links to the terms and conditions for each language in which the site/application is available.</p> <p class="ViewParameter">Location:</p> <ul> <li>Below the language links block.</li> </ul> <section> <h5 id="Section3_4_1">3.4.1. Terms and conditions link for the first official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the terms and conditions links block.</li> <li>Aligned horizontally with the left edge of the terms and conditions links block.</li> <li>On the same baseline as the terms and conditions link for the second official language.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.</li> <li>Text: "Terms and conditions" in the first official language and in its native alphabet.</li> </ul> </section> <section> <h5 id="Section3_4_2">3.4.2. Terms and conditions link for the second official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the terms and conditions links block.</li> <li>Aligned horizontally with the right edge of the terms and conditions links block.</li> <li>On the same baseline as the terms and conditions link for the first official language.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.</li> <li>Text: "Terms and conditions" in the second official language and in its native alphabet.</li> </ul> </section> <section> <h5 id="Section3_4_3">3.4.3. Terms and conditions link for additional languages</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the terms and conditions links for the first and second official languages.</li> <li>First, third and subsequent odd-numbered additional language: <ul> <li>Aligned horizontally with the left edge of the terms and conditions links block.</li> <li>On the same baseline as the terms and conditions link for the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>Aligned horizontally with the right edge of the terms and conditions links block.</li> <li>On the same baseline as the terms and conditions link for the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 50% of the width of the page/screen.</li> <li>Height: 36 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.</li> <li>Text: "Terms and conditions" in the additional language and in its native alphabet.</li> </ul> </section> </section> <section> <h4 id="Section3_5">3.5. Canada Wordmark</h4> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the page/screen.</li> <li>Centred horizontally.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 90 pixels.</li> <li>Height: 22 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background colour: White (#fff).</li> <li>Black text and FIP red flag symbol.</li> <li>Text equivalent: "Symbol of the Government of Canada".</li> <li>Displayed as a block-level element.</li> <li>Image: wmms.</li> </ul> </section> </section> <section> <h3 id="Section4">4. Content overlays</h3> <p>Each content overlay is displayed over the page/screen and contains a title bar and a body. Content overlays are used to present content such as full-screen images and videos or contextual help.</p> <section> <h4 id="Section4_1">4.1. Title bar</h4> <p>The title bar contains the title and the back and close buttons.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the content overlay.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: <ul> <li>When the content overlay title is present: 100% (full width of the content overlay).</li> <li>When the content overlay title is omitted: The width of the close button.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.</li> </ul> <section> <h5 id="Section4_1_1">4.1.1. Title</h5> <p class="ViewParameter">Location:</p> <ul> <li>Centred horizontally and vertically.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: The width of the title bar less the width of the back and close buttons.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Single-line, no wrapping.</li> <li>Overflow: ellipsis.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The title is omitted when:</p> <ul> <li>It contains a single element, for example, a map, a photograph or a video.</li> </ul> </section> <section> <h5 id="Section4_1_2">4.1.2. Back button</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the left edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 18 pixels.</li> <li>Height: 18 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Transparent.</li> <li>Icon: Back arrow (<img alt="Back arrow icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure005-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Back."</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the back button returns the user to the content overlay or menu from which the content overlay was launched.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The back button is omitted when:</p> <ul> <li>The content overlay was not launched from a content overlay or menu.</li> <li>The result of activating the back button is the same as the result of activating the close button.</li> </ul> </section> <section> <h5 id="Section4_1_3">4.1.3. Close button</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the right edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 18 pixels.</li> <li>Height: 18 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Transparent.</li> <li>Icon: X (<img alt="X icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure016-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Close".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the close button removes the content overlay from view.</li> </ul> </section> </section> <section> <h4 id="Section4_2">4.2. Body</h4> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: Up to 100% of the width of the viewport.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>When the contents are wider than the viewport, the contents: <ul> <li>are resized to accommodate the width; or</li> <li>scroll horizontally.</li> </ul> </li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>The body grows or shrinks to accommodate its contents.</li> </ul> </section> </section> <section> <h3 id="Section5">5. Menus</h3> <div class="pull-right"> <img alt="Menu with the back button omitted as described in Section 5. Menus and the exceptions in Section 5.1.2. Back button." height="176" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure017-eng.gif" width="198"> </div> <p>Each menu is displayed over the page/screen and contains a title bar and a body.</p> <section> <h4 id="Section5_1">5.1. Title bar</h4> <p>The title bar contains the title and the back and close buttons.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the menu.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: <ul> <li>When the menu title is present: 100% (full width of the menu).</li> <li>When the menu title is omitted: The width of the close button.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.</li> </ul> <section> <h5 id="Section5_1_1">5.1.1. Title</h5> <p class="ViewParameter">Location:</p> <ul> <li>Centred horizontally and vertically.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: The width of the title bar less the width of the back and close buttons.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Single-line, no wrapping.</li> <li>Overflow: ellipsis.</li> </ul> </section> <section> <h5 id="Section5_1_2">5.1.2. Back button</h5> <div class="pull-right"> <img alt="Menu with the back button displayed as described in Section 5.1.2. Back button." height="176" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure018-eng.gif" width="198"> </div> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the left edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 18 pixels.</li> <li>Height: 18 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Transparent.</li> <li>Icon: Back arrow (<img alt="Back arrow icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure005-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Back."</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the back button return the user to the previous level of menu.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The back button is omitted when:</p> <ul> <li>There is no previous level of menu.</li> </ul> </section> <section> <h5 id="Section5_1_3">5.1.3. Close button</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned horizontally with the right edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 18 pixels.</li> <li>Height: 18 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: White (#fff).</li> <li>Background colour: Transparent.</li> <li>Icon: X (<img alt="X icon" height="18" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure016-eng.gif" width="18">), 18 pixels by 18 pixels, centred horizontally and vertically.</li> <li>Text equivalent: "Close".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the close button closes all open menus.</li> </ul> </section> </section> <section> <h4 id="Section5_2">5.2. Body</h4> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the title bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: Up to 100% of the width of the viewport.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>The body grows or shrinks to accommodate its contents.</li> </ul> <section> <h5 id="Section5_2_1">5.2.1. Menu items</h5> <p class="ViewParameter">Location:</p> <ul> <li>If it is the first item in the menu's body: Aligned vertically with the bottom edge of the title bar.</li> <li>If it is the second or subsequent item in the menu: Aligned vertically with the bottom edge of the previous menu item.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: <ul> <li>When the menu body contains only menu items: 100% (full width of the menu).</li> <li>When the menu body contains menu items and other elements: 100% (full width of the body).</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating a menu item displays either a sub-menu, a page/screen or a content overlay.</li> </ul> </section> </section> </section> <section> <h3 id="Section6">6. Navigation overlay</h3> <div class="pull-right"> <img alt="Navigation overlay as described in Section 6. Navigation overlay." height="303" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure019-eng.gif" width="198"> </div> <p>The navigation overlay is identical to the <a href="#Section4">content overlay</a>, except for the following differences.</p> <section> <h4 id="Section6_1">6.1. Title bar</h4> <section> <h5 id="Section6_1_1">6.1.1. Title</h5> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Menu".</li> </ul> </section> </section> <section> <h4 id="Section6_2">6.2. Body</h4> <p>The body of the navigation overlay contains the breadcrumb navigation, the secondary navigation and the site/application navigation.</p> <section> <h5 id="Section6_2_1">6.2.1. Breadcrumb navigation</h5> <p>The breadcrumb navigation contains horizontal list starting with a home link, followed by links to each of the pages/screens above the current page/screen in the site/application's hierarchy, and ending with the title of the current page/screen.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: <ul> <li>Breadcrumb links: #295376.</li> <li>Current page/screen: #555.</li> </ul> </li> <li>Background colour: Top-to-bottom linear gradient from #f0efef to #dfdfdd.</li> <li>Text: <ul> <li>Home breadcrumb link: "Home".</li> <li>Breadcrumbs links and current page/screen: The title of the corresponding page/screen.</li> </ul> </li> <li>Separator: bcrumb-mobile.png.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Home breadcrumb link: <ul> <li>Activating the home link returns the user to the home page/screen.</li> </ul> </li> <li>Subsequent breadcrumb links: <ul> <li>Activating the breadcrumb link takes the user to the corresponding page/screen.</li> </ul> </li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The breadcrumb navigation is omitted when:</p> <ul> <li>The page/screen is the home page/screen.</li> <li>Activating a breadcrumb item is likely to cause user error or loss of data, for example, in a transactional workflow.</li> </ul> </section> <section> <h5 id="Section6_2_2">6.2.2. Secondary navigation</h5> <p class="ViewParameter">Location:</p> <ul> <li>When the breadcrumb navigation is present: Below the breadcrumb navigation.</li> <li>When the breadcrumb navigation is omitted: At the top of the body.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>100% of the width of the body.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The secondary navigation is omitted when:</p> <ul> <li>It is not used by the site/application.</li> </ul> </section> <section> <h5 id="Section6_2_3">6.2.3. Site/application navigation</h5> <p class="ViewParameter">Location:</p> <ul> <li>When the secondary navigation is present: Below the secondary navigation.</li> <li>When the secondary navigation is omitted and the breadcrumb navigation is present: Below the breadcrumb navigation.</li> <li>When both the secondary navigation and the breadcrumb navigation are omitted: At the top of the body.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>100% of the width of the body.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The site/application navigation is omitted when:</p> <ul> <li>It is not used by the site/application.</li> </ul> </section> </section> </section> <section> <h3 id="Section7">7. Search overlay</h3> <div class="pull-right"> <img alt="Search overlay as described in Section 7. Search overlay." height="96" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure020-eng.gif" width="198"> </div> <p>The search overlay is identical to the <a href="#Section4">content overlay</a>, except for the following differences.</p> <section> <h4 id="Section7_1">7.1. Title bar</h4> <section> <h5 id="Section7_1_1">7.1.1. Title</h5> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Search".</li> </ul> </section> </section> <section> <h4 id="Section7_2">7.2. Body</h4> <p>The body contains a search input field and a search button.</p> <section> <h5 id="Section7_2_1">7.2.1. Search input field</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the title bar; centred horizontally.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% of the width of the body.</li> <li>Height: 31 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Label: "Search".</li> </ul> </section> <section> <h5 id="Section7_2_2">7.2.2. Search button</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the search input field.</li> <li>Aligned horizontally with the right edge of the body.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% of the width of the body.</li> <li>Height: 39 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.</li> <li>Text: "Search".</li> </ul> <p class="ViewParameter">Behaviour:</p> </section> </section> </section> <section> <h3 id="Section8">8. Settings menu</h3> <div class="pull-right"> <img alt="Settings menu as described in Section 8. Settings menu." height="176" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure021-eng.gif" width="198"> </div> <p>The settings menu is identical to the <a href="#Section5">menu</a>, except for the following differences.</p> <section> <h4 id="Section8_1">8.1. Title bar</h4> <section> <h5 id="Section8_1_1">8.1.1. Title</h5> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Settings".</li> </ul> </section> </section> <section> <h4 id="Section8_2">8.2. Body</h4> <p>The body contains menu items for:</p> <ul> <li>The sign-in/sign-out.</li> <li>The language menu.</li> <li>The site/application's user-modifiable settings (other than language).</li> <li>The about information overlay.</li> </ul> <section> <h5 id="Section8_2_1">8.2.1. Sign-in/sign-out menu item</h5> <p>The sign-in/sign-out menu item is identical to a <a href="#Section5_2_1">menu item</a>, except for the following differences.</p> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: <ul> <li>When the user is signed-in: "Sign out".</li> <li>When the user is signed-out: "Sign in".</li> </ul> </li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>When the user is signed-in: Activating the sign-in/sign-out menu item signs the user out of the site/application.</li> <li>When the user is signed-out: Activating the sign-in/sign-out menu item allows the user to sign in of the site/application.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The sign-in/sign-out mechanism is omitted when:</p> <ul> <li>The site/application does not require the user to sign-in to use it.</li> </ul> </section> <section> <h5 id="Section8_2_2">8.2.2. Language menu menu item</h5> <p>The language menu menu item is identical to a <a href="#Section5_2_1">menu item</a>, except for the following differences.</p> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Language".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the language menu item displays the language menu.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The language menu menu item is omitted when:</p> <ul> <li>Changing the language is likely to cause user error or loss of data, for example, in a transactional workflow.</li> </ul> </section> <section> <h5 id="Section8_2_3">8.2.3. User-modifiable setting menu items</h5> <p>User-modifiable setting menu items are identical to <a href="#Section5_2_1">menu items</a>, except for the following differences.</p> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating a user-modifiable setting menu item either displays a sub-menu, a page/screen or a content overlay, or toggles or changes a setting.</li> </ul> </section> <section> <h5 id="Section8_2_4">8.2.4. About information overlay menu item</h5> <p>The about information overlay menu item is identical to a <a href="#Section5_2_1">menu item</a>, except for the following differences.</p> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "About"</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the about information overlay menu item displays the about information overlay.</li> </ul> </section> </section> </section> <section> <h3 id="Section9">9. Language menu</h3> <div class="pull-right"> <img alt="Language menu as described in Section 9. Language menu." height="176" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure022-eng.gif" width="198"> </div> <p>The language menu is identical to a <a href="#Section5">menu</a>, except for the following differences.</p> <section> <h4 id="Section9_1">9.1. Title bar</h4> <section> <h5 id="Section9_1_1">9.1.1. Menu title</h5> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Language".</li> </ul> </section> </section> <section> <h4 id="Section9_2">9.2. Body</h4> <p>The language menu body contains a menu item for each language in which the site/application is available.</p> <section> <h5 id="Section9_2_1">9.2.1. Language menu items</h5> <p>Each language menu item is identical to a <a href="#Section5">menu item</a>, except for the following differences.</p> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The name of the language in its native language and alphabet.</li> </ul> <p class="ViewParameter">Behaviour:</p> <p>On websites and in Web applications:</p> <ul> <li>Activating a language menu item changes the language of the site/application to the selected language.</li> </ul> <p>In device-based mobile applications:</p> <ul> <li>Activating a language menu item either changes the language of the device-based mobile application to the selected language or displays the instructions for obtaining the device-based mobile application in the selected language if the selected language is not installed.</li> </ul> </section> </section> </section> <section> <h3 id="Section10">10. About information overlay</h3> <div class="pull-right"> <img alt="About information overlay as described in Section 10. About information overlay." height="218" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure023-eng.gif" width="198"> </div> <p>The about information overlay is identical to a <a href="#Section4">content overlay</a>, except for the following differences.</p> <section> <h4 id="Section10_1">10.1. Title bar</h4> <section> <h5 id="Section10_1_1">10.1.1. Title</h5> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "About".</li> </ul> </section> </section> <section> <h4 id="Section10_2">10.2. Body</h4> <p>The about information overlay body contains the site/application title, the version identifier, links to the notices and the about us, contact us, news and stay connected links.</p> <h5 id="Section10_2_1">10.2.1. Site/application title</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the title bar.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <section> <h5 id="Section10_2_2">10.2.2. Version identifier</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the site/application title.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The version identifier is omitted when:</p> <ul> <li>A date of last modification is provided.</li> </ul> </section> <section> <h5 id="Section10_2_3">10.2.3. Terms and conditions link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the version identifier</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the terms and conditions link takes the user to the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a> and the End User License Agreement, where applicable.</li> </ul> </section> <section> <h5 id="Section10_2_4">10.2.4. Transparency link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the terms and conditions link.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Behaviour:</p> <p>Website and Web applications:</p> <ul> <li>Activating the transparency link takes the user either to the department's main transparency page/screen or, where the site/application is not departmental, to the Government-wide Reporting page on the Treasury Board of Canada Secretariat website.</li> </ul> </section> <section> <h5 id="Section10_2_5">10.2.5. About us link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the links to the notices.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "About us".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the about us link displays information about the site/application.</li> </ul> </section> <section> <h5 id="Section10_2_6">10.2.6. Contact us link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the about us link.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Contact us".</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the contact us link displays the contact information for the site/application.</li> </ul> </section> <section> <h5 id="Section10_2_7">10.2.7. News link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the contact us link.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "News"</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the news link displays media products, such as press releases.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The news link is omitted when:</p> <ul> <li>The site/application does not release media products, such as press releases.</li> </ul> </section> <section> <h5 id="Section10_2_8">10.2.8. Stay connected link</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the news link.</li> <li>Aligned horizontally with the left edge of the body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Stay connected"</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Activating the stay connected link displays social media, email subscription and/or Web feeds.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>The stay connected link is omitted when:</p> <ul> <li>The site/application does not have social media, email subscriptions or Web feeds.</li> </ul> </section> </section> </section> </section> <section> <h2 id="MediumDeviceScreens">Layout and design specifications for medium device screens</h2> <p>The specifications for medium device screens are applied when:</p> <ul> <li>the screen (media query device-width) is at least 768 pixels wide and less than 1024 pixels wide; or</li> <li>the viewport (media query width) is at least 768 pixels wide and less than 960 pixels wide.</li> </ul> <p>On medium screens, the view for small screens is applied with the following exceptions:</p> <ul> <li>On content pages/screens, the breadcrumb is displayed in the body as defined in the <a href="#LargeDeviceScreens">Layout and design specifications for large device screens</a>.</li> </ul> </section> <section> <h2 id="LargeDeviceScreens">Layout and design specifications for large device screens</h2> <p>The specifications for large device screens are applied when:</p> <ul> <li>the screen (media query device-width) is at least 1024 pixels wide; and</li> <li>the viewport (media query width) is at least 960 pixels wide.</li> </ul> <p>The pixel measurements and positions in the following layout specifications are relative to the inner and outer boundaries. These are 960 pixels for the inner width and 100% of the screen's width for the outer width.</p> <section> <h3 id="Section11">11. Content pages</h3> <div class="text-center"> <img alt="Content page with all elements displayed as described in Section 11. Content pages." height="534" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure024-eng.gif" width="540"> </div> <p>Each Web page contains the following common visual elements and structured into three main areas: header, body and footer.</p> <section> <h4 id="Section11_1">11.1. Header</h4> <p>The header includes the background image, the Government of Canada navigation bar, the Government of Canada signature, the site/application title, the Canada Wordmark, search and the navigation bar.</p> <p class="ViewParameter">Presentation:</p> <ul> <li>Background colour: White (#fff).</li> <li>Background image: background-withglow-andleaf.jpg), centred, 40 pixels from the top edge of the Web page, repeats horizontally.</li> </ul> <section> <h5 id="Section11_1_1">11.1.1. Government of Canada navigation bar</h5> <p>The Government of Canada navigation bar is located at the top of the header and includes header links and official language selection.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Height when using the Government of Canada signature: 41 pixels.</li> <li>Height when using the Arms of Canada signature: 65 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>13 pixels below the top boundary of the Government of Canada navigation bar</li> <li>Background (outer width): black (#000) for the colour</li> <li>Canada.ca, Services, Departments ("<span lang="fr">Minist猫res</span>"), and official language selection link are displayed from left to right, 10 pixels to the left of the inner right boundary of the Government of Canada navigation bar</li> <li>Each link is separated by a white (#fff) vertical bar with 13 pixels of space on each side of the vertical bar.</li> <li>Font: 9 point Verdana</li> <li>Foreground: white (#fff)</li> <li>Text is vertically centred in the Government of Canada navigation bar.</li> <li>Confirmation is requested from the user if switching between languages would cause the loss of data or a disruption in the process of a transactional service.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html</li> <li>Services links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/accueil.shtml</li> <li>Departments ("<span lang="fr">Minist猫res</span>") links to http://canada.ca/en/gov/dept/index.html or http://canada.ca/fr/gouv/min/index.html</li> <li>Language selection links take the user to the equivalent content in that language.</li> <li>The official language selection link takes the user to the same Web page in the other official language.</li> </ul> <p class="ViewParameter">Exceptions:</p> <ul> <li>For websites and Web applications in non-official languages the links to Canada.ca, Services, Departments ("<span lang="fr">Minist猫res</span>") are replaced with the additional languages. The official languages are displayed at the furthest boundary, with additional languages displayed across the navigation bar. For languages that read right to left, this would mean official languages are left aligned.</li> <li>For websites and Web applications that require users to be logged-in and provide the option of selecting, setting, or changing the language preference, the language selection links can be removed from the navigation bar.</li> </ul> <section> <h6 id="Section11_1_1_1">11.1.1.1. Government of Canada signature</h6> <p>The Government of Canada signature (sig-eng-bg or sig-fra-bg) is applied to all government Web pages of departments identified by the flag symbol. Departments identified by the Arms of Canada use their approved Arms of Canada signature or the Government of Canada signature. Departments who have received Treasury Board approval to be identified by a symbol other than the flag symbol or the Arms of Canada use the Government of Canada signature or their approved symbol.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the Government of Canada navigation bar</li> <li>Centred vertically in the Government of Canada navigation bar</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 234 pixels for Government of Canada signature</li> <li>Height: <ul> <li>22 pixels for Government of Canada signature.</li> <li>61 pixels for Arms of Canada signatures or approved symbols.</li> </ul> </li> </ul> </section> </section> <section> <h5 id="Section11_1_2">11.1.2. Site/application title</h5> <p>Provides the title of the site/application.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the banner</li> <li>Centred vertically in the banner</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Available width: 360 pixels</li> <li>Available height: 123 pixels</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Font: 22.5 point Arial or decreased to accommodate title length</li> <li>Text shadow: <ul> <li>Colour: dark grey (#333)</li> <li>Position (right, down): 1 pixel, 1 pixel</li> <li>Blur radius: 1 pixel</li> </ul> </li> <li>Foreground: white (#fff)</li> <li>Background: transparent</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Underlined for mouse hover and keyboard focus (not underlined otherwise)</li> <li>Links to the home page of the site/application.</li> </ul> </section> <section> <h5 id="Section11_1_3">11.1.3. Canada Wordmark</h5> <p>The Canada Wordmark (wmms-bg) is to be applied to all Government of Canada Web pages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the left of the inner right boundary of the banner</li> <li>39 pixels below the top of the banner</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 139 pixels</li> <li>Height: 33 pixels</li> </ul> </section> <section> <h5 id="Section11_1_4">11.1.4. Search</h5> <div class="text-center"> <img alt="Content page with the search omitted as described in the exceptions for Section 11.1.4. Search." height="532" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure025-eng.gif" width="540"> </div> <p>Location:</p> <ul> <li>"Search" ("<span lang="fr">Recherche</span>") button is 10 pixels to the left of the inner right boundary of the banner</li> <li>Search text input field is 5 pixels to the left of the Search ("<span lang="fr">Recherche</span>") button</li> <li>"Search" ("<span lang="fr">Recherche</span>") button and search text input field are 5 pixels above the bottom of the banner</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Button foreground: Dark grey (#333)</li> <li>Button background (normal): search-button for the image and grey (#ccc) for the colour</li> <li>Button background (hover/focus): search-button-focus for the image and grey (#ddd) for the colour</li> <li>Button and search text input field are enclosed in a container with the following properties: <ul> <li>Background: #146094</li> <li>Border-left: 1px solid #15527D</li> <li>Border-right: 1px solid #15527D</li> <li>Border-top: 1px solid #87AEC9</li> <li>Padding (top, right, bottom, left): 11 pixels, 10 pixels, 6 pixels, 12 pixels</li> <li>Font: 10 point Verdana</li> </ul> </li> <li>Search text input field background is white (#FFFFFF).</li> <li>Search text input field width is 27 characters.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Submitting a search query sends the user to a search engine results page.</li> </ul> <p class="ViewParameter">Exceptions:</p> <p>Search element can be removed where:</p> <ul> <li>search engine results are displayed,</li> <li>search is the primary task of the page; or</li> <li>the act of executing the search would cause the loss of data or a disruption in the process of a transactional service.</li> </ul> </section> <section> <h5 id="Section11_1_5">11.1.5. Site/application navigation bar</h5> <div class="text-center"> <img alt="Content page with the site/application navigation bar omitted as described in the exceptions for Section 11.1.5. Site/application navigation bar." height="516" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure026-eng.gif" width="540"> </div> <p>Provides links for moving from section to section across the entire website or application.</p> <p class="ViewParameter">Location:</p> <ul> <li>The site/application navigation bar is located immediately below the banner</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Top Level <ul> <li>Foreground: white (#FFF)</li> <li>Foreground (link, hover/focus/active): black (#000)</li> <li>Background (inner width): menu-bg for the image and #23447E for the colour</li> <li>Background (outer width): transparent</li> <li>Background (link, normal): transparent</li> <li>Background (link, hover/focus/active): grey (#CCC) for the colour</li> <li>Down arrow (for submenus): menu-arrow</li> <li>Border-bottom: 4 pixels solid grey (#CCC)</li> <li>Font: 13 pixels Verdana bold</li> </ul> </li> <li>Secondary menu <ul> <li>Foreground: black (#000)</li> <li>Foreground (link, hover/focus/active): black (#000), underline</li> <li>Background: grey (#CCC) for the colour</li> <li>Background (link, normal): transparent</li> <li>Font: 13 pixels Verdana and 16 pixels Verdana bold for mega menu column headings</li> <li>Border-bottom: 4 pixels solid blue (#0F315B)</li> <li>Link properties: <ul> <li>Border-left: 1px solid #124B79</li> <li>Border-right: 1px solid #15598F</li> <li>Padding (top, right, bottom, left): 6 pixels, 14 pixels, 6 pixels, 10 pixels</li> </ul> </li> </ul> </li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links are text-based and are the same throughout the site/application.</li> <li>Link appearance for mouse hover and keyboard focus must be visually distinct from the default link appearance.</li> <li>Link appearance for the item selected on the primary navigation bar must be visually distinct from the unselected state.</li> <li>Content is limited to within the inner boundaries of the navigation bar. Only prescribed background colours and images can be used outside of those boundaries.</li> </ul> <p class="ViewParameter">Exception</p> <ul> <li>The site/application navigation bar can be removed when menu links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.</li> </ul> </section> </section> <section> <h4 id="Section11_2">11.2. Breadcrumbs</h4> <p>Provides links to the pages above the current page in the site/application's hierarchy.</p> <p class="ViewParameter">Location:</p> <ul> <li>Immediately below the site/application navigation bar.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Horizontal list of breadcrumbs (text-based links) representing the pages above the current page within the site/application's hierarchy.</li> <li>The current page is displayed and is not hyperlinked.</li> <li>Breadcrumbs are separated by the greater-than sign ( > ).</li> <li>The first breadcrumb is "Home" ("<span lang="fr">Accueil</span>").</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>"Home" ("<span lang="fr">Accueil</span>") links to the home page of the site/application. Subsequent breadcrumbs are linked to the corresponding Web pages.</li> </ul> <p class="ViewParameter">Exceptions:</p> <ul> <li>Breadcrumbs are not displayed <ul> <li>on home pages; or</li> <li>where breadcrumb links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.</li> </ul> </li> </ul> </section> <section> <h4 id="Section11_3">11.3. Body</h4> <p>The body is located immediately below the header and includes a content area and may also include secondary navigation. The content area includes the Date modified and may include the Government priorities. The preferred fonts for the body areas are Arial, Helvetica and Verdana.</p> <p class="ViewParameter">Location:</p> <ul> <li>Immediately below the header</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> <li>Content area is the full width and height of the inner body except where accommodating secondary navigation.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Content area and secondary navigation are limited to within the inner boundaries of the body. Only background colours and images prescribed can be used outside of those boundaries.</li> </ul> </section> <section> <h4 id="Section11_4">11.4. Background</h4> <p class="ViewParameter">Presentation:</p> <ul> <li>Inner width: content-deco for the image and white (#fff) for the colour</li> <li>Outer width: transparent</li> <li>Background image repeats vertically</li> </ul> </section> <section> <h4 id="Section11_5">11.5. Government priorities</h4> <p>Provides links to government priorities, use is determined by the head of communications, in consultation with Privy Council Office.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned with the right boundary of the content area.</li> <li>Exact location to be determined by the head of communications, in consultation with Privy Council Office.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Dimensions to be determined by the head of communications, in consultation with Privy Council Office.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Section heading is "Priorities" ("<span lang="fr">Priorit茅s</span>")</li> <li>Remaining presentation aspects are determined by the head of communications of the department, in consultation with Privy Council Office.</li> </ul> </section> <section> <h4 id="Section11_6">11.6. Date modified</h4> <p>Provides the most recent date on which the Web page content was formally issued, substantially changed or reviewed.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned with the right boundary of the content area.</li> <li>Aligned with the bottom boundary of the content area.</li> <li>The date modified is removed where a version identifier is used.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>"Date modified:" ("<span lang="fr">Date de modification :</span>") using the ISO standard format (<abbr title="Four-digit year">YYYY</abbr> <abbr title="Two-digit month">MM</abbr> <abbr title="Two-digit day">DD</abbr>)</li> </ul> </section> <section> <h4 id="Section11_7">11.7. Footer</h4> <p>The footer is located immediately below the body and includes the site/application footer and the Government of Canada footer.</p> <p class="ViewParameter">Location:</p> <ul> <li>Immediately below the body.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>The background area is transparent.</li> <li>Content is limited to the two areas included in the footer. Only background colours and images prescribed can be used outside of those areas.</li> </ul> <section> <h5 id="Section11_7_1">11.7.1. Site/application footer</h5> <p>Includes links to the site/application's Terms and conditions and Transparency pages as well as About us, News, Contact us and Stay connected.</p> <p class="ViewParameter">Location:</p> <ul> <li>The site/application footer is located immediately below the body.</li> <li>"News" ("<span lang="fr">Nouvelles</span>") link is removed where the site/application does not release media products such as press releases.</li> <li>"Stay connected" ("<span lang="fr">Restez branch茅s</span>") link is removed where no social media, email subscriptions or Web feeds are available.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground: dark grey (#222)</li> <li>Background (outer width): foot-bottom-deco for the image and light grey (#efefef) for the colour</li> <li>Background image (outer width) repeats horizontally</li> <li>Background (inner width): footer-deco for the image and light grey (#efefef) for the colour</li> <li>Left-most column is 10 pixels to the right of the inner left boundary of the site/application footer</li> <li>Font: 10.5 point Arial for the column headings and 9.5 point Arial for regular column text</li> <li>Column headings are not underlined by default</li> <li>Includes the following four links arrayed from left to right in the same order: "About us" ("<span lang="fr">脌 propos de nous</span>"), "Contact us" ("<span lang="fr">Contactez-nous</span>"), "News" ("<span lang="fr">Nouvelles</span>") and "Stay connected" ("<span lang="fr">Restez branch茅s</span>").</li> <li>Additional links may be included in columns below the top-most links. Each column of links is left aligned with the associated top-most link.</li> <li>Top-most links are bolded while the additional links are not.</li> <li>Link appearance for mouse hover and keyboard focus are underlined.</li> <li>Links are text-based and are the same throughout the website or application.</li> <li>Content is limited to within the inner boundaries of the site/application footer. Only background colours and images prescribed can be used outside of those boundaries.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>"About us" ("<span lang="fr">脌 propos de nous</span>") links to a page with information about the site/application.</li> <li>"Contact us" ("<span lang="fr">Contactez-nous</span>") links to a page with contact information for the site/application.</li> <li>"News" ("<span lang="fr">Nouvelles</span>") links to a page with media products such as press releases.</li> <li>"Stay connected" ("<span lang="fr">Restez branches</span>") links to a page where social media, email subscriptions and/or Web feeds are available.</li> </ul> <section> <h6 id="Section11_7_1_1">11.7.1.1. Terms and conditions ("<span lang="fr">Avis</span>") and Transparency ("<span lang="fr">Transparence</span>") links</h6> <p class="ViewParameter">Location:</p> <ul> <li>Aligned with the inner left boundary of the site/application footer.</li> <li>"Transparency" ("<span lang="fr">Transparence</span>") link is to the right of the "Terms and conditions" ("<span lang="fr">Avis</span>") link.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Links are text-based.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>"Terms and conditions" ("<span lang="fr">Avis</span>") links to a page containing the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>, or links to those same notices.</li> <li>"Transparency" ("<span lang="fr">Transparence</span>") links to either the department's main Transparency page or, where the site/application is not departmental, to the Government-Wide Reporting page on the Treasury Board of Canada Secretariat website.</li> </ul> </section> </section> <section> <h5 id="Section11_7_2">11.7.2. Government of Canada footer</h5> <p>Provides links to common Government of Canada resources.</p> <p class="ViewParameter">Location:</p> <p>The Government of Canada footer is located immediately below the site/application footer.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Height: 57 pixels</li> <li>Width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background: #040707 for the colour</li> <li>Only background colours and images prescribed can be used outside of those boundaries.</li> <li>HEALTH (<span lang="fr">SANT脡</span>), TRAVEL (<span lang="fr">VOYAGE</span>), SERVICE CANADA, JOBS (<span lang="fr">EMPLOIS</span>), and ECONOMY (<span lang="fr">脡CONOMIE</span>) links are displayed from left to right 10 pixels to the right of the inner left boundary of the Government of Canada footer. The domain names appear on the second line</li> <li>Canada.ca link is 15 pixels to the left of the inner right boundary of the Government of Canada footer</li> <li>Canada.ca link is separated from the other links by a grey vertical bar (#666) with 45 pixels of space between the Canada.ca link and the vertical bar</li> <li>Other links are separated by 45 pixels of space <ul> <li>Font: Arial</li> <li>Font size ("Canada.ca"):16 point</li> <li>Font size (other links): 9 point</li> <li>Font colour is white (#fff)</li> <li>Background: transparent</li> <li>All links are vertically aligned in the middle of the Government of Canada footer</li> <li>HEALTH links to http://healthycanadians.gc.ca/index-eng.php, and <span lang="fr">SANT脡</span> links to http://canadiensensante.gc.ca/index-fra.php</li> <li>TRAVEL links to http://www.travel.gc.ca/index-eng.asp and <span lang="fr">VOYAGE</span> links to http://www.voyage.gc.ca/index-fra.asp</li> <li>SERVICE CANADA links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/acscueil.shtml</li> <li>JOBS links to http://www.jobbank.gc.ca/intro-eng.aspx, and <span lang="fr">EMPLOIS</span> links to http://www.guichetemplois.gc.ca/Intro-fra.aspx</li> <li>ECONOMY links to http://actionplan.gc.ca/en and <span lang="fr">脡CONOMIE</span> links to http://plandaction.gc.ca/fr</li> <li>Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html</li> </ul> </li> </ul> <p class="ViewParameter">Exception:</p> <ul> <li>No links are displayed when site/application is in non-official languages.</li> </ul> </section> </section> </section> <section> <h3 id="Section12">12. Server message pages</h3> <div class="text-center"> <img alt="Single-column, unilingual server message page as described in Section 12. Server message pages." height="204" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure027-eng.gif" width="540"> </div> <p>The following specifications apply to all server message pages. Each server message page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature, the Canada Wordmark, and the site/application title in each language. The body includes a content area. The footer includes a Terms and conditions ("<span lang="fr">Avis</span>") link.</p> <p>If the user's language can be determined, the server message is provided only in the user's language. If the user's language cannot be determined, the server message is provided in each language in which the site/application is available.</p> <section> <h4 id="Section12_1">12.1. Header</h4> <p>Includes the Government of Canada signature, the Canada Wordmark, and the site/application title block.</p> <p class="ViewParameter">Location:</p> <ul> <li>Top of the server message page.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>The background of the header is white (#FFFFFF).</li> <li>Content is limited to the three elements in the header.</li> </ul> <section> <h5 id="Section12_1_1">12.1.1. Government of Canada signature</h5> <p>The Government of Canada signature (sig-eng or sig-fra) is to be applied to all government server message pages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the header</li> <li>20 pixels below the top boundary of the header</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 214 pixels</li> <li>Height: 20 pixels</li> </ul> </section> <section> <h5 id="Section12_1_2">12.1.2. Canada Wordmark</h5> <p>The Canada Wordmark (wmms) is to be applied to all Government of Canada server message pages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the left of the inner right boundary of the header</li> <li>10 pixels below the top boundary of the header</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 126 pixels</li> <li>Height: 30 pixels</li> </ul> </section> <section> <h5 id="Section12_1_3">12.1.3. Site/application title block</h5> <div class="text-center"> <img alt="Two-column, bilingual server message page as described in Section 12. Server message pages." height="204" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure028-eng.gif" width="540"> </div> <p>The site/application title block contains the site/application title in each language in which the server message is provided.</p> <p class="ViewParameter">Location:</p> <ul> <li>17 pixels below the Government of Canada signature and the Canada Wordmark.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Columns: <ul> <li>When only one language is provided: 1 column.</li> <li>When more than one language is provided: 2 columns.</li> </ul> </li> <li>Foreground colour: #295376.</li> <li>Left margin: 10 pixels.</li> <li>Right margin: 10 pixels.</li> <li>Border: bottom only; 1 pixel solid #666.</li> </ul> <section> <h6 id="Section12_1_3_1">12.1.3.1. Site/application title in the first official language</h6> <p class="ViewParameter">Location:</p> <ul> <li>In the first column.</li> <li>When the site/application title in the second official language is present: On the same baseline as the site/application title in the second official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Font size: 14.5 point or decreased to accommodate title length.</li> <li>Text: The title of the site/application in the first official language.</li> <li>Alignment: Left-aligned.</li> <li>On hover / on focus: Underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> <section> <h6 id="Section12_1_3_2">12.1.3.2. Site/application title in the second official language</h6> <p class="ViewParameter">Location:</p> <ul> <li>In the second column.</li> <li>On the same baseline as the site/application title in the first official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Font size: 14.5 point or decreased to accommodate title length.</li> <li>Text: The title of the site/application in the second official language.</li> <li>Alignment: Right-aligned.</li> <li>On hover / on focus: Underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> <section> <h6 id="Section12_1_3_3">12.1.3.3. Site/application title in additional languages</h6> <p class="ViewParameter">Location:</p> <ul> <li>First, third and subsequent odd-numbered additional language: <ul> <li>In the first column.</li> <li>10 pixels below the previous site/application title in the column.</li> <li>On the same baseline as the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>In the second column.</li> <li>10 pixels below the previous site/application title in the column.</li> <li>On the same baseline as the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Font size: 11.5 point or decreased to accommodate title length.</li> <li>Text: The title of the site/application in the additional language and in its native alphabet.</li> <li>Alignment: <ul> <li>First, third and subsequent odd-numbered additional language: Left-aligned.</li> <li>Second, fourth and subsequent even-numbered additional language: Right-aligned.</li> </ul> </li> <li>On hover / on focus: Underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> </section> </section> <section> <h4 id="Section12_2">12.2. Body</h4> <p>The body contains the server message block in each language in which the server message is provided.</p> <p class="ViewParameter">Location:</p> <ul> <li>Immediately below the header.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page).</li> <li>Inner width: 960 pixels (centred).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Columns: <ul> <li>When only one language is provided: 1 column.</li> <li>When more than one language is provided: 2 columns.</li> </ul> </li> <li>Background: Transparent.</li> <li>Left margin: 10 pixels.</li> <li>Right margin: 10 pixels.</li> <li>Bottom margin: 12 pixels.</li> <li>Border: bottom only; 10 pixels solid #28507A.</li> </ul> <section> <h5 id="Section12_2_1">12.2.1. Server message block in the first official language</h5> <p>Each server message block contains a server message title, a server message body and links to the home page and the contact information.</p> <p class="ViewParameter">Location:</p> <ul> <li>In the first column.</li> <li>When the server message block in the second official language is present: On the same baseline as the server message block in the second official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Alignment: Left-aligned.</li> </ul> <section> <h6 id="Section12_2_1_1">12.2.1.1. Server message title</h6> <p class="ViewParameter">Location:</p> <ul> <li>At the top of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the server message in the first official language.</li> </ul> </section> <section> <h6 id="Section12_2_1_2">12.2.1.2. Server message body</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message title.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The server message body in the first official language.</li> </ul> </section> <section> <h6 id="Section12_2_1_3">12.2.1.3. Home page link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Home" in the first official language.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> <section> <h6 id="Section12_2_1_4">12.2.1.4. Contact information link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the home page link.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Contact us" in the first official language.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the contact information for the site/application in the corresponding language.</li> </ul> </section> </section> <section> <h5 id="Section12_2_2">12.2.2. Server message block in the second official language</h5> <p>Each server message block contains a server message title, a server message body and links to the home page and the contact information.</p> <p class="ViewParameter">Location:</p> <ul> <li>In the second column.</li> <li>On the same baseline as the server message block in the first official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Alignment: Left-aligned.</li> </ul> <section> <h6 id="Section12_2_2_1">12.2.2.1. Server message title</h6> <p class="ViewParameter">Location:</p> <ul> <li>At the top of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the server message in the second official language.</li> </ul> </section> <section> <h6 id="Section12_2_2_2">12.2.2.2. Server message body</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message title.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The server message body in the second official language.</li> </ul> </section> <section> <h6 id="Section12_2_2_3">12.2.2.3. Home page link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Home" in the second official language.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> <section> <h6 id="Section12_2_2_4">12.2.2.4. Contact information link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the home page link.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Contact us" in the second official language.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the contact information for the site/application in the corresponding language.</li> </ul> </section> </section> <section> <h5 id="Section12_2_3">12.2.3. Server message block in additional languages</h5> <p>Each server message block contains a server message title, a server message body and links to the home page and the contact information.</p> <p class="ViewParameter">Location:</p> <ul> <li>First, third and subsequent odd-numbered additional language: <ul> <li>In the first column.</li> <li>20 pixels below the previous server message block in the column.</li> <li>On the same baseline as the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>In the second column.</li> <li>20 pixels below the previous server message block in the column.</li> <li>On the same baseline as the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Alignment: Left-aligned.</li> </ul> <section> <h6 id="Section12_2_3_1">12.2.3.1. Server message title</h6> <p class="ViewParameter">Location:</p> <ul> <li>At the top of the server message block.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The title of the server message in the additional language and in its native alphabet.</li> </ul> </section> <section> <h6 id="Section12_2_3_2">12.2.3.2. Server message body</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message title.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: The server message body in the additional language and in its native alphabet.</li> </ul> <h6 id="Section12_2_3_3">12.2.3.3. Home page link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the server message body.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Home" in the additional language and in its native alphabet.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the home page of the site/application in the corresponding language.</li> </ul> </section> <section> <h6 id="Section12_2_3_4">12.2.3.4. Contact information link</h6> <p class="ViewParameter">Location:</p> <ul> <li>Below the home page link.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text: "Contact us" in the additional language and in its native alphabet.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to the contact information for the site/application in the corresponding language.</li> </ul> </section> </section> </section> <section> <h4 id="Section12_3">12.3. Footer</h4> <p>The footer contains the terms and conditions link in each language in which the server message is provided.</p> <p class="ViewParameter">Location:</p> <ul> <li>Immediately below the body.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page).</li> <li>Inner width: 960 pixels (centred).</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Columns: <ul> <li>When only one language is provided: 1 column.</li> <li>When more than one language is provided: 2 columns.</li> </ul> </li> <li>Background: Transparent.</li> <li>Top margin: 17 pixels.</li> <li>Left margin: 10 pixels.</li> <li>Right margin: 10 pixels.</li> </ul> <section> <h5 id="Section12_3_1">12.3.1. Terms and conditions link in the first official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>In the first column.</li> <li>When the terms and conditions link in the second official language is present: On the same baseline as the terms and conditions link in the second official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Bottom padding: 11 pixels.</li> <li>Font: 9 point Verdana.</li> <li>Text: "Terms and conditions" in the first official language.</li> <li>Alignment: Left-aligned.</li> <li>Not underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to a page in the corresponding language containing the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>, or links to those same notices.</li> </ul> </section> <section> <h5 id="Section12_3_2">12.3.2. Terms and conditions link in the second official language</h5> <p class="ViewParameter">Location:</p> <ul> <li>In the second column.</li> <li>On the same baseline as the terms and conditions link in the first official language.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Bottom padding: 11 pixels.</li> <li>Font: 9 point Verdana.</li> <li>Text: "Terms and conditions" in the second official language.</li> <li>Alignment: Right-aligned.</li> <li>Not underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to a page in the corresponding language containing the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>, or links to those same notices.</li> </ul> </section> <section> <h5 id="Section12_3_3">12.3.3. Terms and conditions link in additional languages</h5> <p class="ViewParameter">Location:</p> <ul> <li>First, third and subsequent odd-numbered additional language: <ul> <li>In the first column.</li> <li>Below the previous terms and conditions link in the column.</li> <li>On the same baseline as the next even-numbered additional language.</li> </ul> </li> <li>Second, fourth and subsequent even-numbered additional language: <ul> <li>In the second column.</li> <li>Below the previous terms and conditions in the column.</li> <li>On the same baseline as the previous odd-numbered additional language.</li> </ul> </li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Bottom padding: 11 pixels.</li> <li>Font: 9 point Verdana.</li> <li>Text: "Terms and conditions" in the additional language and in its native alphabet.</li> <li>Alignment: <ul> <li>First, third and subsequent odd-numbered additional language: Left-aligned.</li> <li>Second, fourth and subsequent even-numbered additional language: Right-aligned.</li> </ul> </li> <li>Not underlined.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Links to a page in the corresponding language containing the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>, or links to those same notices.</li> </ul> </section> </section> </section> <section> <h3 id="Section13">13. Splash pages</h3> <div class="text-center"> <img alt="Bilingual splash page as described in Section 13. Splash pages." height="247" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure029-eng.gif" width="540"> </div> <p>Each splash page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature. The body includes three elements: the site/application title in each language, the language selection links and the Canada Wordmark. The footer includes the Terms and conditions ("<span lang="fr">Avis</span>") links in each language.</p> <p class="ViewParameter">Exceptions:</p> <ul> <li>Websites and Web applications that have a unilingual website addresses do not implement splash pages.</li> </ul> <section> <h4 id="Section13_1">13.1. Header</h4> <p>The header includes the Government of Canada signature. The background is white (#fff).</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Content is limited to the Government of Canada signature. Only background colours and images prescribed can be used.</li> </ul> <section> <h5 id="Section13_1_1">13.1.1. Government of Canada signature</h5> <p>The Government of Canada signature (sig-eng or sig-fra) is to be applied to all Government of Canada splash pages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the header</li> <li>20 pixels below the top boundary of the header</li> <li>10 pixels above the bottom boundary of the header</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 214 pixels</li> <li>Height: 20 pixels</li> </ul> </section> </section> <section> <h4 id="Section13_2">13.2. Body</h4> <p>The body is located immediately below the header and includes the background, the site/application title in each language, language selection links and the Canada Wordmark.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Welcome / <span lang="fr">Bienvenue</span> or <span lang="fr">Bienvenue</span> / Welcome at the top of the body</li> <li>Color: Dark grey (#222)</li> <li>Horizontal alignment: centre-aligned</li> <li>Padding-top/bottom: 40px</li> <li>Font: 19. 5 point Verdana or decreased to accommodate title length</li> <li>Background outer: transparent</li> <li>Background inner: (splashpage-background.jpg) for the image and white (#fff) for the colour</li> <li>Background image begins 20 pixels to the left of the inner left boundary of the body and 42 pixels above the top boundary of the body</li> <li>Background image repeats horizontally</li> <li>Content is limited to within the inner boundaries of the body. Only background colours and images prescribed can be used.</li> </ul> <section> <h5 id="Section13_2_1">13.2.1. Site/application title</h5> <p>Provides the title of the site/application.</p> <p class="ViewParameter">Location:</p> <ul> <li>62 pixels below Welcome / <span lang="fr">Bienvenue</span> or <span lang="fr">Bienvenue</span> / Welcome</li> <li>Left-aligned site/application titles are 10 pixels to the right of the inner left boundary of the body</li> <li>Right-aligned site/application titles are 10 pixels to the left of the inner right boundary of the body</li> <li>Site/application title in the first official language is aligned with the inner left boundary of the body.</li> <li>Site/application title in the second official language is aligned with the inner right boundary of the body.</li> <li>Site/application titles for the first and second official languages are vertically aligned.</li> <li>Site/application titles for additional languages are below the site/application titles for the first and second official languages.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground: black (#000)</li> <li>Minimum height (total): 90 pixels</li> <li>Font: 14 point Verdana decreased to accommodate title length</li> <li>Font size (site/application title in another language): 11.5 point or decreased to accommodate title length</li> </ul> </section> <section> <h5 id="Section13_2_2">13.2.2. Language selection links</h5> <p>Provides links to the home pages in the supported languages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the body</li> <li>61 pixels below the site/application title</li> <li>Language selection links for the first and second official languages are vertically aligned below the site/application title.</li> <li>Additional language selection links are below the language selection links for the first and second official languages.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Text for each link is the official name of the corresponding language, in its native language and alphabet.</li> <li>Foreground: dark grey (#333)</li> <li>Background (normal): sp-pe-button for the image and grey (#ccc) for the colour</li> <li>Background (hover/focus): sp-pe-button-focus for the image and grey (#ddd) for the colour</li> <li>21 pixels of horizontal spacing between language selection links</li> <li>14 pixels of vertical spacing between rows of language selection links</li> <li>Font: Verdana</li> <li>Width: 139 pixels</li> <li>Horizontal alignment: centre-aligned</li> <li>Padding-top/bottom: 10 pixels</li> <li>Padding-left/right: 30 pixels</li> <li>Border-bottom:1px solid #999</li> <li>Border-right: 1px solid #999</li> <li>Border-top: 1px solid #fff</li> <li>Border-left: 1px solid #fff</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Each link is to the home page in the corresponding language.</li> </ul> </section> <section> <h5 id="Section13_2_3">13.2.3. Canada Wordmark</h5> <p>The Canada Wordmark (wmms) is to be applied to Government of Canada splash pages.</p> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the left of the inner right boundary of the body</li> <li>65 pixels below the site/application title</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 126 pixels</li> <li>Height: 30 pixels</li> </ul> <h4 id="Section13_3">13.3. Footer</h4> <p>The footer is located immediately below the body and includes the Terms and conditions ("<span lang="fr">Avis</span>") link.</p> <p class="ViewParameter">Dimensions:</p> <ul> <li>Outer width: 100% (full width of the page)</li> <li>Inner width: 960 pixels (centred)</li> </ul> </section> <section> <h5 id="Section13_3_1">13.3.1. Terms and conditions (Avis) link</h5> <p class="ViewParameter">Location:</p> <ul> <li>10 pixels to the right of the inner left boundary of the footer</li> <li>Links are 10 pixels below the corresponding language selection link</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Links are not underlined</li> <li>21 pixels of horizontal spacing between links</li> <li>Font: 9 point Verdana</li> <li>Width: 139 pixels</li> <li>Horizontal alignment: left-aligned</li> <li>Content is limited to the Terms and conditions ("<em>Avis</em>") link included in the footer. Only background colours and images prescribed can be used.</li> </ul> <p class="ViewParameter">Behaviour:</p> <ul> <li>Each link is to a page in the corresponding language containing the notices in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227&section=text#appC">Appendix C of the <em>Standard on Web Usability</em></a>, or links to those same notices.</li> </ul> </section> </section> </section> </section> <section> <h2 id="Print">Layout and design specifications for print</h2> <p>Only content pages/screens are required to offer a version optimized for printing.</p> <section> <h3 id="Section14">14. Content pages/screens</h3> <p>Each content page/screen contains a header and a body.</p> <section> <h4 id="Section14_1">14.1. Header</h4> <p>The header contains the Government of Canada signature, the Canada Wordmark and the site/application title.</p> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the top margin of the first printed page.</li> <li>Aligned horizontally with the right edge of the left margin of the first printed page.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% of the width of the printed page, excluding the gutter and the left and right margins.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Background color: White (#fff).</li> </ul> <section> <h5 id="Section14_1_1">14.1.1. Government of Canada signature</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the header.</li> <li>Aligned with the left edge of the header.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 214 pixels.</li> <li>Height: 20 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Image: <ul> <li>Pages in French: sig-fra.</li> <li>Pages in English: sig-eng.</li> </ul> </li> </ul> </section> <section> <h5 id="Section14_1_2">14.1.2. Canada Wordmark</h5> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the top edge of the header.</li> <li>Aligned horizontally with the right edge of the header.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 126 pixels.</li> <li>Height: 30 pixels.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Image: wmms.</li> </ul> </section> <section> <h5 id="Section14_1_3">14.1.3. Site/application title</h5> <p class="ViewParameter">Location:</p> <ul> <li>Below the Government of Canada signature and the Canada Wordmark.</li> <li>Aligned horizontally with the left edge of the header.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background colour: White (#fff).</li> <li>Font: Verdana.</li> <li>Font size: 16 points.</li> </ul> </section> </section> <section> <h4 id="Section14_2">14.2. Body</h4> <p class="ViewParameter">Location:</p> <ul> <li>Aligned vertically with the bottom edge of the header.</li> </ul> <p class="ViewParameter">Dimensions:</p> <ul> <li>Width: 100% of the width of the printed page, excluding the gutter and the left and right margins.</li> </ul> <p class="ViewParameter">Presentation:</p> <ul> <li>Foreground colour: Black (#000).</li> <li>Background colour: White (#fff).</li> <li>Font: Times New Roman.</li> <li>Font size: 12 points.</li> <li>Border-top: 3px outset #666</li> </ul> </section> </section> </section> <section> <h2 id="ArchivedContent">Design specifications for archived content</h2> <p>Archived content is identified by:</p> <ul> <li>Adding an archived content notice immediately before the archived content. The archived content notice informs readers that archived content is not subject to the Government of Canada Web standards and that readers can request alternate formats. <ul> <li>Where the archived content has been replaced or updated, the archived content notice includes a link to the most recent version of the content.</li> <li>Where the archived content notice cannot be added immediately before the archived content, the archived content notice is added to a content page/screen from which the content is accessed.</li> </ul> </li> <li>Where the content of a page/screen is archived in its entirety, adding the word "archived", in the language of the content, to the beginning of the screen title.</li> </ul> <p>Links to archived content are identified by:</p> <ul> <li>Adding the word "archived", in the language of the link, to the end of the link text.</li> </ul> <section> <h3 id="Section15">15. Archived content notice text</h3> <p><span class="bold">Archived information</span></p> <p>Archived information is provided for reference, research or recordkeeping purposes. It is not subject to the Government of Canada Web Standards and has not been altered or updated since it was archived. Please contact us to request a format other than those available.</p> </section> </section> <section> <h2 id="p10">Design specifications for social media icons</h2> <p>Social media icons displayed on Government of Canada websites link only to official Government of Canada social media accounts.</p> <p class="ViewParameter">Exceptions:</p> <ul> <li>Where social media icons are displayed for the express purpose of facilitating sharing information on personal accounts, for example, through a "share" widget, a mandatory disclaimer is displayed.</li> </ul> <section> <h3 id="Section16">16. Social media disclaimer</h3> <p>No endorsement of any products or services is expressed or implied.</p> </section> </section> <section> <h2 id="ApplicationIcons">Design specifications for application icons for device-based mobile applications</h2> <p>Each device-based mobile application must provide the applications icons required by the mobile operating system and associated main corporate store for which the application is developed.</p> <p>In addition to the requirements specific to the mobile operating system and associated main corporate store, each application icon:</p> <ol> <li>Displays the Canada Wordmark: <ol> <li>Vertically aligned with the bottom edge of the icon and centred horizontally.</li> <li>With a width equal to 85% of the width of the shortest edge of the icon.</li> <li>On either a white or a black background.</li> </ol> </li> <li>Does not use optional visual treatments, such as gloss or shine effects, provided by mobile operating systems.</li> </ol> </section> <section> <h2 id="ApplicationLaunchScreens">Design specifications for application launch screens for device-based mobile applications</h2> <div class="row"> <img alt="Application launch screen for device-based mobile applications as described in the Design specifications for application launch screens for device-based mobile applications." class="pull-right" height="384" src="/content/dam/canada/tbs-sct/migration/hgw-cgf/oversight-surveillance/communications/ws-nw/images/Figure030-eng.gif" width="200"> <p>Each device-based mobile application must provide an application launch screen when it is supported by the mobile operating system and associated main corporate store for which the application is developed.</p> <p>In addition to the requirements specific to the mobile operating system and associated corporate store, each application launch screen:</p> <ol> <li>Displays the Canada Wordmark: <ol> <li>Centred vertically and horizontally.</li> <li>With a width equal to 85% of the width of the shortest edge of the launch screen.</li> <li>On a black background.</li> </ol> </li> </ol> </div> </section> <section> <h2 id="LaunchSequence">Design specifications for the launch sequence of device-based mobile applications</h2> <p>Device-based mobile applications inform users of their rights and responsibilities by:</p> <ul> <li>Displaying the End User License Agreement described in <a href="http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27088&section=text#appD">Appendix D of the <em>Standard on Optimizing websites and Applications for Mobile Devices</em></a> the first time the device-based mobile application is launched. <ul> <li>If the user accepts the End User License Agreement, the execution of the device-based mobile application continues.</li> <li>If the user rejects the End User License Agreement, the execution of the application aborts and the End User License Agreement is displayed the next time the user launches the device-based mobile application.</li> </ul> </li> </ul> </section> <section> <h2 id="p14">Enquiries</h2> <p>Please direct enquiries about these technical specifications to your department's Web Standards Centre of Expertise. For interpretation of these technical specifications, Web Standards Centres of Expertise should contact:</p> <p>Web Standards Office<br> Chief Information Officer Branch<br> Treasury Board of Canada Secretariat<br> Ottawa ON K1A 0R5<br> E-mail: <a href="mailto:Webstandards@tbs-sct.gc.ca">Webstandards@tbs-sct.gc.ca</a></p> </section> <section> <h2 id="AppendixA">Appendix A: Standardized terms</h2> <table class="table table-striped"> <thead> <tr> <th>English</th> <th lang="fr">Fran莽ais</th> </tr> </thead> <tbody> <tr> <td>About</td> <td lang="fr">脌 propos</td> </tr> <tr> <td>About us</td> <td lang="fr">脌 propos de nous</td> </tr> <tr> <td>Archived</td> <td lang="fr">Archiv茅</td> </tr> <tr> <td>Back</td> <td lang="fr">Retour en arri猫re</td> </tr> <tr> <td>Canada.ca</td> <td lang="fr">Canada.ca</td> </tr> <tr> <td>Close</td> <td lang="fr">Fermer</td> </tr> <tr> <td>Contact us</td> <td lang="fr">Contactez-nous</td> </tr> <tr> <td>Date modified</td> <td lang="fr">Date de modification</td> </tr> <tr> <td>Departments</td> <td lang="fr">Minist猫res</td> </tr> <tr> <td>Economy</td> <td lang="fr">脡conomie</td> </tr> <tr> <td>Health</td> <td lang="fr">Sant茅</td> </tr> <tr> <td>Home</td> <td lang="fr">Accueil</td> </tr> <tr> <td>Jobs</td> <td lang="fr">Emplois</td> </tr> <tr> <td>Language</td> <td lang="fr">Langue</td> </tr> <tr> <td>Menu</td> <td lang="fr">Menu</td> </tr> <tr> <td>News</td> <td lang="fr">Nouvelles</td> </tr> <tr> <td>Priorities</td> <td lang="fr">Priorit茅s</td> </tr> <tr> <td>Search</td> <td lang="fr">Recherche</td> </tr> <tr> <td>Search website</td> <td lang="fr">Rechercher dans le site</td> </tr> <tr> <td>Service Canada</td> <td lang="fr">Service Canada</td> </tr> <tr> <td>Services</td> <td lang="fr">Services</td> </tr> <tr> <td>Settings</td> <td lang="fr">Param猫tres</td> </tr> <tr> <td>Sign in</td> <td lang="fr">Ouvrir une session</td> </tr> <tr> <td>Sign out</td> <td lang="fr">Fermer la session</td> </tr> <tr> <td>Signature of the Government of Canada</td> <td lang="fr">Signature du gouvernement du Canada</td> </tr> <tr> <td>Stay connected</td> <td lang="fr">Restez branch茅s</td> </tr> <tr> <td>Symbol of the Government of Canada</td> <td lang="fr">Symbole du gouvernement du Canada</td> </tr> <tr> <td>Terms and conditions</td> <td lang="fr">Avis</td> </tr> <tr> <td>Transparency</td> <td lang="fr">Transparence</td> </tr> <tr> <td>Travel</td> <td lang="fr">Voyage</td> </tr> <tr> <td>Welcome</td> <td lang="fr">Bienvenue</td> </tr> <tr> <td>Our mandate</td> <td lang="fr">Notre mandat</td> </tr> <tr> <td>The Minister</td> <td lang="fr">Le ministre</td> </tr> <tr> <td>Organizational structure</td> <td lang="fr">Structure de l'organisation</td> </tr> <tr> <td>Publications</td> <td lang="fr">Publications</td> </tr> <tr> <td>Site map</td> <td lang="fr">Plan du site</td> </tr> <tr> <td>News releases</td> <td lang="fr">Communiqu茅s</td> </tr> <tr> <td>Speeches</td> <td lang="fr">Discours</td> </tr> <tr> <td>Media advisories</td> <td lang="fr">Avis aux m茅dias</td> </tr> <tr> <td>Backgrounders</td> <td lang="fr">Notes d'information</td> </tr> <tr> <td>Statements</td> <td lang="fr">D茅clarations</td> </tr> <tr> <td>Photo gallery</td> <td lang="fr">Galeries de photo</td> </tr> <tr> <td>Multimedia</td> <td lang="fr">Multim茅dia</td> </tr> <tr> <td>Addresses</td> <td lang="fr">Adresses</td> </tr> <tr> <td>Telephone</td> <td lang="fr">T茅l茅phone</td> </tr> <tr> <td>Fax</td> <td lang="fr">T茅l茅copieur</td> </tr> <tr> <td>Teletypewriter</td> <td lang="fr">T茅l茅imprimeur</td> </tr> <tr> <td>Email</td> <td lang="fr">Courriel</td> </tr> <tr> <td>Find an employee</td> <td lang="fr">Trouver un(e) employ茅(e)</td> </tr> <tr> <td>Feeds</td> <td lang="fr">Fils de nouvelles</td> </tr> <tr> <td>Subscribe</td> <td lang="fr">Abonnez-vous</td> </tr> </tbody> </table> </section></div> </div> <section class="pagedetails"> <h2 class="wb-inv">Page details</h2> <dl id="wb-dtmd"> <dt>Date modified:</dt> <dd><time property="dateModified">2013-04-30</time></dd> </dl> </section> </main> <div class="newpar new section"> </div> <div class="par iparys_inherited"> </div> <div class="newpar new section"> </div> <div class="par iparys_inherited"> <div class="global-footer"> <footer id="wb-info"> <h2 class="wb-inv">About this site</h2> <div class="gc-main-footer"> <div class="container"> <nav> <h3>Government of Canada</h3> <ul class="list-unstyled colcount-sm-2 colcount-md-3"> <li><a href="/en/contact.html">All contacts</a></li> <li><a href="/en/government/dept.html">Departments and agencies</a></li> <li><a href="/en/government/system.html">About government</a></li> </ul> <h4><span class="wb-inv">Themes and topics</span></h4> <ul class="list-unstyled colcount-sm-2 colcount-md-3"> <li><a href="/en/services/jobs.html">Jobs</a></li> <li><a href="/en/services/immigration-citizenship.html">Immigration and citizenship</a></li> <li><a href="https://travel.gc.ca/">Travel and tourism</a></li> <li><a href="/en/services/business.html">Business</a></li> <li><a href="/en/services/benefits.html">Benefits</a></li> <li><a href="/en/services/health.html">Health</a></li> <li><a href="/en/services/taxes.html">Taxes</a></li> <li><a href="/en/services/environment.html">Environment and natural resources</a></li> <li><a href="/en/services/defence.html">National security and defence</a></li> <li><a href="/en/services/culture.html">Culture, history and sport</a></li> <li><a href="/en/services/policing.html">Policing, justice and emergencies</a></li> <li><a href="/en/services/transport.html">Transport and infrastructure</a></li> <li><a href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li> <li><a href="/en/services/finance.html">Money and finance</a></li> <li><a href="/en/services/science.html">Science and innovation</a></li> <li><a href="/en/services/indigenous-peoples.html">Indigenous peoples</a></li> <li><a href="/en/services/veterans-military.html">Veterans and military</a></li> <li><a href="/en/services/youth.html">Youth</a></li> </ul> </nav> </div> </div> <div class="gc-sub-footer"> <div class="container d-flex align-items-center"> <nav> <h3 class="wb-inv">Government of Canada Corporate</h3> <ul> <li><a href="https://www.canada.ca/en/social.html">Social media</a></li> <li><a href="https://www.canada.ca/en/mobile.html">Mobile applications</a></li> <li><a href="https://www.canada.ca/en/government/about.html">About Canada.ca</a></li> <li><a href="/en/transparency/terms.html">Terms and conditions</a></li> <li><a href="/en/transparency/privacy.html">Privacy</a></li> </ul> </nav> <div class="wtrmrk align-self-end"> <img src="/etc/designs/canada/wet-boew/assets/wmms-blk.svg" alt="Symbol of the Government of Canada"/> </div> </div> </div> </footer> </div> </div> <script type="text/javascript">_satellite.pageBottom();</script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="/etc/designs/canada/wet-boew/js/ep-pp.min.js"></script> <script src="/etc/designs/canada/wet-boew/js/wet-boew.min.js"></script> <script src="/etc/designs/canada/wet-boew/js/theme.min.js"></script> </body> </html>

CINXE.COM

Technical specifications for the Web and mobile presence - Canada.ca