DRAFTCommonLookandFeel4DRAFT–CLF4GovernmentInformationCenter
ABSTRACT
Delaware’sDRAFTpolicyonstatewideonlinebranding,webpolicy,anduser-centereddesign
DRAFTCommonLookandFeel/Feb2017
2
TableofContents
ContentsIntroduction.................................................................................................................................................5MissionofCommonLookandFeel...............................................................................................5DesignPrinciples..................................................................................................................................5FunctionalPrinciples..........................................................................................................................6AnalyticsforDelaware.gov...............................................................................................................7InspirationforCLF4.0.....................................................................................................................10
WhoThisPolicyAppliesTo................................................................................................................11Content........................................................................................................................................................12FunctionPrinciples...........................................................................................................................12LanguageandTone...........................................................................................................................14Organization.........................................................................................................................................14TheAlphaApproach.........................................................................................................................18SocialMedia..........................................................................................................................................20ToolsforAgencies:............................................................................................................................20
Images..........................................................................................................................................................21FunctionPrinciplesforImages....................................................................................................22ImageAccessibility............................................................................................................................23ImageSizes...........................................................................................................................................24ToolsforAgencies:............................................................................................................................25
UserDesignandFeedback..................................................................................................................26FunctionPrinciplesforUserDesignandFeedback............................................................27
DRAFTCommonLookandFeel/Feb2017
3
ToolsforAgencies:............................................................................................................................28Search..........................................................................................................................................................28SearchEngineOptimization(SEO).............................................................................................28MetaTags..............................................................................................................................................28MetaTag:PageTitleNamingConventions............................................................................29MetaTag:SiteTitle–TaglineinWordpress..........................................................................29PageDisplayinBrowserTab........................................................................................................30AnalyticsData......................................................................................................................................30ToolsforAgencies:............................................................................................................................31
PDFs,WordDocuments,Powerpoint,Excel,etc.......................................................................31Toolsforagencies:.............................................................................................................................32
Data...............................................................................................................................................................32Toolsforagencies:.............................................................................................................................32
URLs–AFormofCommunication..................................................................................................32Toolsforagencies:.............................................................................................................................33
StatewideBranding...............................................................................................................................33Headers.......................................................................................................................................................34NavigationLevels–Top..................................................................................................................34FirstLevelofNavigation-Delaware.gov,bluebar.........................................................34SecondLevelNavigation–Agencynavigation,whitebar...........................................34
Footers.........................................................................................................................................................36StatewideFooter–Delaware.gov,graybackground.....................................................36AgencyFooter–colorscanbeagencyspecific.................................................................36
Toolsforagencies:.............................................................................................................................38Accessibility..............................................................................................................................................38MustbeSection508compliant....................................................................................................38TestingandBrowserCompatibility...........................................................................................39
TechnologyPreferences......................................................................................................................39
DRAFTCommonLookandFeel/Feb2017
4
ApplicationCLF4.0................................................................................................................................40ApplicationsvsWebsites................................................................................................................40StyleDefaultsforWebsitesandApplications........................................................................41Links........................................................................................................................................................43Colors......................................................................................................................................................43Buttons...................................................................................................................................................43Dropdown.............................................................................................................................................44FormControls......................................................................................................................................44FormTemplates.................................................................................................................................44CheckboxesandRadios...................................................................................................................45Icons........................................................................................................................................................45Alerts.......................................................................................................................................................45Accordions............................................................................................................................................46Tables......................................................................................................................................................47Lists..........................................................................................................................................................47
WebPolicy.................................................................................................................................................48FederalPolicy......................................................................................................................................48Section508–AccessibilityforthosewithVisualImpairments................................48
Toolsforagencies:.............................................................................................................................48Dotgov–RulesforWebsiteswith“.gov”Addresses......................................................48FederalOMB....................................................................................................................................49
StatePolicy...........................................................................................................................................49DelawarePublicArchives..........................................................................................................49
Toolsforagencies:.............................................................................................................................49DelawareTechnologyandInformation...............................................................................49
Glossary.......................................................................................................................................................50
DRAFTCommonLookandFeel/Feb2017
5
IntroductionMissionofCommonLookandFeelTheDelawareWebsiteCommonLookandFeel(CLF)version4.0isdesignedto:
1) CreateandreinforceaconsistentDelawarebrand2) Understandrealusers’needsandexpectations,thenmeetorexceedthem3) EstablishconsistentelementsonDelawaresites,butallowforgreater
flexibilityindesignandsiteorganizationtohighlightuniquenessinagencies4) Guideapplicationdevelopersonuserinterfacefeatures5) Reinforcetheimportanceofaccessibility
Throughthisdocumentweaimtosetthebrandingstandardforstatewebsitesinordertomaintainaconsistentandcohesivewebpresence.
Includedintheseguidelinesisinformationondesignprinciples(i.e.mobile,commonheaders,typographydefaults,colors,andmore)andcontentguidelines(i.e.organization,tone,languageandmore),usercentereddesign,andoverarchingwebpolicies.
DesignPrinciples
Mobileresponsive/mobilefirstWithinthisCommonLookandFeel(CLF)wearestressingtheimportanceofdesigningmobileresponsivewebsites.Intheageofsmartphones,andadigitallyconnectedworldusersexpecttointeractwithususingmobiledevices.Itisouraim
AprimarygoalofCLFistoensurethatusersknowwhentheyareonanofficialDelawareStateGovernmentwebsite.
Theneedsofpeople–notconstraintsofgovernmentstructuresorsilos–shouldinformtechnicalanddesigndecisions.
DRAFTCommonLookandFeel/Feb2017
6
toensurethosecitizenscanaccessinformationwithclarity,ease,andthatthosewithlimiteddataplansarenotnegativelyimpacted.
UsercentereddesignUnderstandwhatpeopleneed.Fromtheverystartofawebdesignortechnologyproject,userneeds,expectations,andexperienceareatthecenterofalldecisions.Thebestdesignisintuitiveandthebestcontentisunderstandable.Aimtomeetorexceedusers’expectations.
AccessibleforwidestpossibleaudienceDelawarewebsitesshouldbeaccessibleforthebroadestpossibleaudience.Thismeansdesigningforthosewithvisualimpairmentsorotherdisabilities.Webmastershaveanongoingresponsibilitytomaintaintheaccessibilityoftheirwebsites(seeWebPolicyattheendofthisdocument).Allusers,regardlessofimpairmentordisability,shouldhavethesameaccesstoinformation.
FunctionalPrinciplesThefollowingareasetofguidingprinciplesforCLF4.0designs:
● Analytics:Weusedataandmetricstoinformcontentanddesigndecisions.● Audience:Weaimtomeettherisingexpectationsofcitizens,businesses,
visitors,jobseekers,andthegeneralpublictoeasilyconnectwithgovernmentservicesandinformationonline.
● Unique:Wecustomdesignforeachagency’suniqueservices,whilestillusingcommonandstandardelements.
● Contentfuelsdesign:Wedesignusingcontenttodriveourdecisions.● Sustainability:Weaimtoensurethatwebsiteshaveafeasible,practical
strategyinplaceforsustainablecontentmanagement.● Websitesfirst,socialmediasecond:Weusewebsitesasaprimarymethod
ofengagement,withsocialmediaassecondary.
DRAFTCommonLookandFeel/Feb2017
7
AnalyticsforDelaware.govVisitorstotheDelaware.govportalareevolvinginunderlyingtechnologychoices.Mostnotably,ChromehassurpassedInternetExplorerasthenumberonebrowser.BelowareselectionsofdatafromvisitorstoDelaware.gov.Overthelastthreeyears,screenresolutionshaveshifted,reflectingtheincreasingsizesofdesktops,andmobile/tabletshavebeenretiringsomeoldermobileresolutions,andcreatingnewresolutions.(SeeChart1below).Chart1.ScreenResolutions.
Operatingsystemsandversionshavealsoshiftedinthesameperiodoftime.Windows7isstilladominantoperatingsystemforpublicvisitors,althoughWindows10isgainingtractionin2016.Macisslightlyhigherthaninrecentyearswhenyoucombineversion10.10and10.11together.(SeeChart2below).
020000400006000080000100000120000140000160000180000200000
ScreenResolutionsofvisitorstoDelaware.gov2014-2016(minusstatenetworkvisitors)
Yr2014
Yr2015
Yr2016
DRAFTCommonLookandFeel/Feb2017
8
Chart2.OperatingSystemsandVersions.
VisitorstoDelaware.govarenowusingChromeinhighernumbersthanInternetExplorer(IE).AllversionsofChromerepresent40%ofthevisitorstoDelaware.govin2016,IEis25%,andSafariisaclosethirdat21%.(SeeChart3below).
0100000200000300000400000500000600000700000
Android4
iOS7
MacintoshIntel10.9
Windo
ws7
Windo
ws8
Windo
ws8
.1Windo
wsV
ista
Windo
wsX
PAn
droid4
iOS8
MacintoshIntel10.10
Windo
ws1
0Windo
ws7
Windo
ws8
.1Windo
wsV
ista
Windo
wsX
PAn
droid5
Android6
iOS9
MacintoshIntel10.10
MacintoshIntel10.11
Windo
ws1
0Windo
ws7
Windo
ws8
.1
Yr2014 Yr2015 Yr2016
OperatingSystemsandVersionsvisitorstoDelaware.gov
2014-2016(minusstatenetworkvisitors)
Total
DRAFTCommonLookandFeel/Feb2017
9
Chart3.Browsers,withoutversionnumbers.
Whentakingbrowserversionsintoaccount,IE11isthemostpopularbrowser.However,addingallChromeversionstogetherandaddingallSafariversionseasilyshowthatIEsecondinpopularity.(SeeChart3above,andChart4below).
Chrome40%
IE
25%
Safari21%
Firefox8%
Edge
5% Android1%
Browsers,withoutversions,ofvisitorstoDelaware.govfromJan2016-Feb2017
Chrome IE Safari Firefox
Edge Android AmazonSilk Safari(in-app)
Opera OperaMini
DRAFTCommonLookandFeel/Feb2017
10
Chart4.Browsers,withversionnumbers.
InspirationforCLF4.0
Usability.Gov:User-centeredresearchanddesignhttps://www.usability.gov/what-and-why/user-research.htmlTheFederalDigitalAgency,18F:https://18f.gsa.gov/how-we-work/TheFederalDigitalServicesPlaybook:https://playbook.cio.gov/Boston.govBrandGuidelines:https://www.boston.gov/departments/innovation-and-technology/brand-guidelines
050000
100000150000200000250000300000350000
AndroidBrow
ser4
Chrome35
Chrome36
Chrome38
InternetExplorer1
0InternetExplorer1
1InternetExplorer8
InternetExplorer9
Safari7
Safari8
AndroidBrow
ser4
Chrome40
Firefox3
5InternetExplorer1
0InternetExplorer1
1InternetExplorer8
InternetExplorer9
Safari7
Safari8
Safari9
Chrome47
Chrome48
Chrome49
Chrome50
Chrome51
Chrome52
Edge13
InternetExplorer1
1Safari10
Safari9
Yr2014 Yr2015 Yr2016
BrowsersandversionsofvisitorstoDelaware.gov2014-2016
(minusstatenetworkvisitors)
DRAFTCommonLookandFeel/Feb2017
11
WhoThisPolicyAppliesToToprovideaconsistentuserexperienceforthepublicandcitizens,thisCommonLookandFeel(CLF)4.0standardappliestoDelawareagencies,divisions,boards,commissions,andoffices.However,therearealimitedamountofwaiversavailabletostateboardsandcommissions,agencies,andofficeswhoneedtoworkoutsidetheCLF.Waiversaregrantedtothosewhodemonstrateaneedtodevelopauniqueagencybrandinordertogainacompetitiveadvantageintheeconomicmarketplace(forexample:DelawareStateLottery,theTourismOffice,DelawareStateParks,GlobalDelaware
Wewereinspiredbythemultilevelnavigationbaronespn.com.WeseeparallelsbetweentheESPNexample(complex,multi-levelnavigation)andthenavigation
needswithinstateagencies.
DRAFTCommonLookandFeel/Feb2017
12
andsimilaragencies).Waiverscanalsobegrantedforspecificlegacyapplications(i.e.DelawareiPayOnlinefortheDivisionofChildSupportServices,ePaymentDelawareCriminalJusticeInformationSystem,andotherpre-existingapplications)andnewwebapplicationsthatcannotbeaccommodatedintheCLF.Nonetheless,weaskthatallagencies,eventhoseunderthewaiverprovision,accommodatethewebpolicieslistedattheendofthisdocument–asthosewebpoliciesarefederallaworregulationorinternationalstandards,andarebroaderthanthescopeoftheDelawareCLF.
ContentContentisking,asthesayinggoes.Peoplehavegrowingexpectationsforpredictive,personalized,andeasytonavigatetransactionsandinformation,andtheyexpectgovernmenttoofferstreamlinedinteractions,onparwiththeprivatesector.
FunctionPrinciplesUsingtheFunctionalPrinciplesoutlinedinthebeginningofthisdocument,weaskthatyouconsiderthefollowingquestionswhendevelopingalltextcontent:
WhatDoYourAnalyticsSay?Itisimportanttoconsiderwhatyourusersareexpectingfromyoursite,andwhetheryouaremeetingthoseexpectations.Perhapsyouneedtocreatemorecontenttofillagrowingdemandforinformation.Useanalyticstobetterunderstandyouraudience.
WhoisYourAudience(Users)?Inordertoknowwhatcontentyoursiteshouldincludeyouneedtoknowwhotheaudienceofyoursiteistodayandwhoyouwishyouraudiencewillincludeinthefuture.Whatinformationareuserslookingforandhowcanyoumakeiteasierforthemtofindorcompleteanaction?Boththeaudienceyouwantandtheaudienceyoualreadyhavemustbeconsideredinallaspectsofyoursite.
DRAFTCommonLookandFeel/Feb2017
13
WhatMakesYourSiteUnique?Usersarecomingtoyoursiteforapurpose–applyingforbenefits,fillingoutaform,applyingforalicense,reservingacampsite,filingacomplaint,etc.Thinkabouttheuniquetransactionsofyouragencyordivisionandhowuserscanmoreeasilyaccessandcompletethosetransactions.Canusersfilloutformsonline,ordotheyneedtoprintthemout?What“actionoriented”contentdoyouhavetoday?Doyouhaveadefinedtoneofvoiceandstyleinyourtextcontent?Whatmakesyouragencyunique?
DoesContentDriveDesign?Textcontentisthebasisforallotherwebsitedecisions,likethechoicesmadeaboutyoursite’sdesignandarchitecture.Ifyouhaveadesigndesire(forexample,addingacalendarfeature,oraspecificdesignfeature)whatcontentneedstobeinplacebeforethatfeaturecanbeenabled?
IsYourSiteSustainable?Sustainabilityinthiscontextmeansthatcontentisrefreshed,updated,andrelevanttousers.Youragencyshouldconsidersustainabilitywhenmakingdecisionsaboutcontentanddesign.PartofyoursustainabilitystrategycanincludeleadingaContentInventoryandContentAuditwithinyourorganization.Makeacontentreviewschedule,totakearegularinventoryandpurge,reorganize,orrevisecontentaccordingtothecalendar.EngagewithPIOs,policyandprogramstaff,technicalstaff,andseniorexecutivestogetagencybuy-inonregularcontentreviewandupdates.
HaveyouIncludedDelaware.govIntegration?Agenciesshouldensureintegrationoftheirpageswiththedelaware.govportal,inparticular:
● CentralizedFOIAform,foia.delaware.gov● CentralizedPublicMeetingCalendar,publicmeetings.delaware.gov● TheNewsServer,news.delaware.gov● PhoneDirectory● LocationsDirectory● TheOpenDataPortal,data.delaware.gov
DRAFTCommonLookandFeel/Feb2017
14
WebsiteFirst,andSocialMediaSecond.Wefeelthatwebsitecontentisprimary,andsocialmediacontentservesinasupportiverole.Whenwebsitesarecumbersometoupdate,agencyPIO’smayprefertointeractwithsocialmediafirst,ratherthanyourwebsite.Webelievethatmakingwebsiteseasiertoupdate,suchasviaaContentManagementSystem(CMS)likeWordpress,agencyPIO’swillbebetterequippedtoleveragewebsitesfirst,andsocialmediasecond.Whatcontentexistsonyoursocialmediaaccountstoday,butisnotyetreflectedonyourwebsite,andwoulditbebettersuitedforyourwebsite?
LanguageandToneThegoalissimplifiedandclearlanguagethatisunderstandableforthewidestpossibleaudience.Hereisgreatresourceforaconsistenttoneandvoicefrom18F,theFederalDigitalAgency’swebsite:https://pages.18f.gov/content-guide/Forthewidestaccessibility,wesuggestaimingfor8th-10thgradereadinglevel.YoucananalyzeyourexistingcontentusingfreetoolsliketheHemingwayApp,http://www.hemingwayapp.com/,toevaluatewritinglevel.Inaddition,GICisusingtheYoastpluginforWordpresssites,asearchengineoptimizationfeature.Yoastwillanalyzereadabilityoneachpageofyourwebsite.Developandmaintainaconsistenttone.Withnumerouscontentcontributorsonawebsite,youmayfindyourselfwithamultitudeofvoicesandopinionsthatwilldistractfromtheinformationthatyouareattemptingtorelay.WorkwithPIOs,webmasters,andleadershipofyouragencytodevelopatoneofvoicethatisconsistentacrossyourwholeorganization.
OrganizationMostpeoplearenotexpertsinhowstategovernmentisorganized,orwherecertainprogramsarelocatedinthebureaucracy.Therefore,wesuggestorganizingyourcontentintodifferentpages(“topicpages”)basedoncommonsubjectmatterand/orthemesthatareeasilyidentifiablebyyouraudience.Belowaresomeexamplesofalreadyexistingtopicpages.
DRAFTCommonLookandFeel/Feb2017
15
● delaware.gov/topics:OnDelaware.gov’ssite,weorganizehigh-levelinformationontopicsthatcutacrossstategovernment
DRAFTCommonLookandFeel/Feb2017
16
● DelawareNaturalResourcesandEnvironmentalControl:DNREC’snew“alpha”sitefeaturestopicspagesonthehomepageandfromthetopnavigation.
DRAFTCommonLookandFeel/Feb2017
17
● DelawareHealthandSocialServices:DHSS’stopicpagescanbefoundrightonthehomepage.Throughthistheuserisonlyafewclicksfromfindingexactlywhattheywerelookingfor.Thispagecanbefoundat:dhss.delaware.gov/dhss
• ThedraftoftheAttorneyGeneral’ssiteisusingaudienceportalsontheir
homepage,includinginfoforthepublic,lawenforcement,media,victimsandwitnesses,andconsumers.
DRAFTCommonLookandFeel/Feb2017
18
• BelowisadraftoftheConsumerpage:
TheAlphaApproachIfyouragencyhasalargesite,orasitewithnumerouslayersofnavigation,considerthe"alpha"approach."Alpha"involvescreatinganentirelynewsitefromscratch,buildingitinpublicwithpublicfeedback,andretiringthecurrentsiteovertime.Ifyouragencyisinterestedinthismethodofbuildingasite,pleasecontacttheGIC.DNRECiscurrentlyintheprocesswithanAlphasite.
DRAFTCommonLookandFeel/Feb2017
19
● DNRECAlpha:
AboveisascreenshotofDNREC’sAlphasite,dnrec.alpha.delaware.gov
DRAFTCommonLookandFeel/Feb2017
20
● DNRECCurrent
AboveisascreenshotofDNREC’scurrentsite,dnrec.delaware.govOtherAlpha,Beta,andCompletedExamples:
● beta.phila.gov● alpha.nyc.gov● boston.gov
SocialMediaSocialmediacontinuestochangethewayorganizationsinteractwiththeirconstituencies–enablingcontent-specificinteraction.Asstatedpreviously,websitecontentshouldbeprioritizedfirst,andsocialmediacontentshouldbesupportive(orsecondary).
ToolsforAgencies:● GoogleAnalytics:ThroughGoogleAnalyticsyoucanreceivecrucial
informationthatwillhelpyoujudgeyouraudienceandhowbesttotailoryourcontenttotheirneeds.
DRAFTCommonLookandFeel/Feb2017
21
● ContentStrategy:Developingacontentstrategycanbeaseasyascreatinganinventoryandschedule.HerearesomebasicsfromUsability.govhttps://www.usability.gov/what-and-why/content-strategy.htmland18F,theFederalDigitalAgency:https://methods.18f.gov/decide/content-audit/
● HemingwayApp:Thisappanalyzesthereadingleveloftext.Agenciesshouldaimfora8th-10thgradereadinglevelwithinyoursite,toappealtoabroadaudience.Youcanfindthistoolathttp://www.hemingwayapp.com/.
● YoastReadabilityRating:ThisisafeaturethatavailableviatheYoastWordpressplugin.Itwillflagpagesthatcoulduseimprovementonreadabilityanditprovideshelpfultips.
ImagesImagescanbeapowerfulwaytoconnectwithyouraudience.Byusingphotosthatrepresentactionsyoumakeyourwholesitemorecompellingforyourusers.Reflectthediversityofthestateinyourimageryandphotography.
Photographyshouldbecandid,notposed,aspossible.Sometimes,youhavetousestockphotosbecauseyoudonothaveanimagethatfitsthesituation.But,trytoreducetheamountofstockphotosyouuseonyoursite.WeencourageyoutoshowcasebeautifulimagesofDelaware-forexample,parks,coastlines,historicalbuildings(exteriorandinterior),gardens,architecturedetails,historicalsites,artsofallkinds(dance,theatre,sculpture,etc),boardwalks,riverwalks,wildlifeareas,farmsandruralareas,skylines,downtowns,andimportantareastotheState.Agenciesareencouragedtobuildarepositoryforagencyphotography.Youcantellyouragency’sstorythruimagery.Foruseontheweb,pleaseusehighqualityimages(forexample,imagesshouldbetakenwitharealcamera,notacellphonecamera).Highqualityimagesdonotneedtobelargefilesthough,aslargefileswillimpactloadtimes,andwillimpactusersonstrictdataplans.
UserealphotosshowcasingDelawareansandtheStateofDelaware.
DRAFTCommonLookandFeel/Feb2017
22
Acceptablefileformatsare:JPG,PNG,andSVG.ImagefilesshouldnotbeinGIFformat.Agenciesshouldalsotakecaretofollowphotolicensingrestrictions,andfollowsharing/usagepolicy.Seebelowformoreinformationonphotolicensing.
FunctionPrinciplesforImagesReferencingbacktotheFunctionalPrinciplesoutlinedinthebeginningofthisdocument,weaskthatyouconsiderthefollowingquestionswhenconsideringallimages:
WhatDoYourAnalyticsSay?Whatimagesandphotographyarethemostengaginginthesitemetrics,andwhy?Byknowingthisinformationyoucanreplicatethosequalitiesonotherimagesinyoursite.
WhoisYourAudience?Consideryouraudience,lookintowhatimageryandphotoscouldimproveaudience-engagementwithyourorganization.Whenusersvisityoursite,aretheyplanningalongweekendatthebeach,oraretheyseekinginformationondivorce,unemployment,orcancerprograms?Trytouseimageryasatoolthathelpsusersfindwhattheyneedandminimizestressorconfusion.
WhatMakesYourSiteUnique?Explorewhatmakesyouragencyunique,andincorporateimageryandphotographythatrepresentsthosequalitiesinordertomakeyourorganizationstandout.Ifimageryshowcasingthatuniquenessdoesnotexist,considercreatingit.
IsYourSiteSustainable?Imageryandphotographycanquicklybecomeout-of-dateasfashioninclothingchanges,imagequalityimproves,andlandscapesevolve.Makeapointtoupdate
Startwithahighqualityimage,andreducethefilesizeusingimageresizerprograms.Thiswillreducepageloadtimes.
Considermobileusers–manyusershavedataplanswithlimits,soreducingimagesizeswillhelpthemaccessyoursitewithlimiteddata.
DRAFTCommonLookandFeel/Feb2017
23
imageryonaregularbasis.Ofcourse,historicalphotosofDelawareareengaging–considerwhereisthebestplaceforolderphotosonyoursite,andhowtheseimagescantellthestoryofyouragency,division,orprogram.
WebsiteFirst,andSocialMediaSecond.Whatimageryandphotographydoyouwanttorepresentyouragency,anddoyouhaveconsistentimageryacrossyouronlineplatforms(webandsocial)?PhotoLicensingInformationfrom18Fhttps://pages.18f.gov/content-
guide/images/:
GoodplacestosearchforpublicdomainCreativeCommons(CC0)images:
■ USA.gov
■ Flickr(select“U.S.Governmentworks”or“Noknowncopyrightrestrictions”fromthetopleftdropdown)
■ WikimediacommonsIfyoudousecopyrightedimages:
● TrytofinduseonewithfewrestrictionsonreuselikeaCreative
CommonsAttributionlicense.
● Getpermissionfromthecopyrightholder.
● Attributethephototothesource(especiallyifrequiredorrequested).
● Wherepossible,linktothesourceonline.
ImageAccessibilityImagesmusthavealternativetextinordertocomplywithaccessibilitystandards.Hereisasample:<img src="smiley.gif" alt="Smiley face"/>"
DRAFTCommonLookandFeel/Feb2017
24
‘Alt’=alternatetextforanimage.Thisalternatetextwilldisplayiftheimagecannotbedisplayed.Thealtattributeprovidesalternativeinformationforanimageifauserforsomereasoncannotviewit(becauseofslowconnection,anerrorinthesrcattribute,oriftheuserusesascreenreader).
ImageSizesTokeeppageloadtimesfast,pleasecompressimagefilesusingacompressiontool.Ifyoudonothavephotoshoporotherimageeditingsoftware,therearefreeonlinetoolsthatyoucanuselikeCompressor.IO,ImageResize,orpicresize.com.Compressingimageswillensurethatpageloadtimesarenotimpacted,andthatmobileusersonmetereddataplanswillbeprotectedagainstunnecessaryoverages.Bootstrapprovidesthefollowingexamplesformobileresponsiveimages.FromBootstraphttp://getbootstrap.com/css/#images:
Alttagshelpuserswithdisabilitiesunderstandthecontentonyourwebsite.Screenreaderswillspeakthewordsincludedinyouralttext,soit’sbesttodescribetheimageinyouralttextlike“PhotoofaredsunsetatCapeHenlopenStatePark”
ratherthan“Beach”.
DRAFTCommonLookandFeel/Feb2017
25
WithinWordpress,GICisbuildingthemecustomizerfunctionsthatwillgiveagenciesparametersforproperimageheightandwidthinfeatureslikecarousels,heroheaderimages,andothersections.Pleaseremembertocompressimagesbeforeuploadingusingthecustomizerfeature.
ToolsforAgencies:● Delaware.gov’sFlickrAccount:Weencourageagenciestojointhe"State
Agency"grouptosharephotosamongstategovernment.Thisisinvite-only,[email protected].
DRAFTCommonLookandFeel/Feb2017
26
● CreativeCommons:Thissitegivesmoreinformationonlicensingandsharingyoucanvisititatcreativecommons.org.
● PictureResizingSites:Throughsiteslikehttps://compressor.io/imageresize.organdpicresize.comyoucancropandresizeimages.
UserDesignandFeedbackAgenciesarestronglyencouragedtoseeknon-technicalandpublicinputforstatewebsites.Inordertoinsurethatthesiteremainsthemostwidelyaccessiblewesuggestthefollowingguidelines:
● Developafeedbackloopfordesignfromadiversegroupofindividualsthatrepresentsyourusers.
● Agenciesshouldtesttheirsitesfrompublicuserperspectives,notjustinternalusers.
● Focusgroups,interviews,andsurveysaregreatmethodsforreceivinguserfeedback.Acombinationofallthreemethodsisevenbetter.
DRAFTCommonLookandFeel/Feb2017
27
AboveisascreenshotfromUsability.govontheprocessofUserCenterDesign.Thisoutlinesaprocessandfeedbackloopforusercentereddesign.
FunctionPrinciplesforUserDesignandFeedbackKeepthefollowingquestionsinmind:
● WhatDoYourAnalyticsSay?● WhoisYourAudience?● WhatMakesYourSiteUnique?● DoesContentDriveDesign?● IsYourSiteSustainable?● HaveyouputyourWebsiteFirst,andyourSocialMediaSecond?
Byencouragingfeedbackfromawidediverseaudienceduringtheentiredesignprocessyoucanensurethatyoursiteisnotonlyfunctional,butthatitalsobestrepresentsyourdivision/agencyandtheworkthatyoudoforthecommunity.
DRAFTCommonLookandFeel/Feb2017
28
ToolsforAgencies:● Usability.govhttps://www.usability.gov/● 18FMethodshttps://methods.18f.gov/discover● ContactUs:Ifyouragencyneedsassistancewithuserfeedback(focus
groups,interviews,andsurveys),[email protected].
SearchWhendesigningandmaintainingawebsiteitisimportanttounderstandyouraudienceandtheirpurposeonyoursite.Someofthequestionsyoumayaskyourselfinordertomorefullyunderstandyouraudienceinclude:
● Whenuserssearchonyoursite,whataretheysearchingfor?● Aretheygettingadequateresults?● Whatdoresultslooklike(aretheydescribedproperly)?
SearchEngineOptimization(SEO)SearchEngineOptimizationisanimportantpriority.Whenyouareconsideringhowtoinsurethatyoursiteisseenbythepeoplewhowilluseitthemostfrequentlyyoumustlookatyourmetadataanddescriptions.Manysitesacrossthestatedonotuseadequatedescriptionstoday,andaremissingoutonviewsasaresult.
MetaTagsEachwebpageforastateagencyshouldincludebasicmetadatacontainedin“metatags”intheheadelementofthepage.Amongotherfunctions,basicmetatagelementsallowsearchenginestoproperlylocateandidentifypages.
● MetaDescription-Thedescriptionelementshouldprovideasuccinctdescriptionofthecontentsofthatparticularpage.Itisimportantthateachpagehasauniquedescription.SeemoreonYoast.comhttps://yoast.com/meta-descriptions/
● Title–PleaseseetheTitleNamingConventionsinthesectionbelow.● "Viewport"-Thistagisessentialtoresponsivedesign.Thistagsetsthe
viewportsize.PleaseseemoreontheW3Csite:http://www.w3schools.com/css/css_rwd_viewport.asp
● "Author"tag–Weareusingthisonallsites,andsettingtheauthorto“StateofDelaware”.
DRAFTCommonLookandFeel/Feb2017
29
● Ifthesiteisanapplication,then"application-name"and"generator"arerequiredmetatagstouse.
Anoteaboutkeywords:Searchenginealgorithmsareconstantlyevolving.Keywordsusedtobealonglistofwordsthatdescribeapage,butnowthesearchenginesareonlyrecognizingonekeyword(ratherthanalonglist).
ExampleofasearchlistingwithaPageTitleandMetaDescription:
Intheexampleabove,thekeywordis“Delaware”,anditisboldedintheURLandinthedescription.
MetaTag:PageTitleNamingConventionsMetaTagTitlesshouldusetitlecaseandfollowoneofthebelowstructures:
1."PageName-WebsiteName-StateofDelaware"Or,ifapageispartofaparentelementthanitwouldbe
2.“PageName–ParentName–WebsiteName–StateofDelaware”
MetaTag:SiteTitle–TaglineinWordpressIfusingWordpress,anotherplacetoreinforcethatusersareonaStateofDelawareofficialwebsite,istoadd“StateofDelaware”tothe“Tagline”.IntheWordpressbackendunder“Settings>Tagline”,youwillseehowtoedittheTagline.Usually,thetaglineisthemissionofthewebsitebutwealsosuggestadding"StateofDelaware"or“OfficialStateofDelawareWebsite”hereifyoudon’talreadyreferencethis.BelowisascreenshotoftheTaglinearea.
DRAFTCommonLookandFeel/Feb2017
30
PageDisplayinBrowserTab
AboveisascreenshotoftheGovernor’shomepageURLandhowitdisplaysinabrowsertab.TheGovernor’sOfficelogoisusedintheleftsideofthetab(asafavicon),andthetitleofthesiteisdisplayed(andamousehoverwillshowthefulltitle).Faviconsaresimplifiedlogosrecognizableatasmallsizeformobiledevices.Weareusingfaviconsinbrowsertabs,andrepeatingthesamelogointhetopnavigation.BelowisascreenshotoftheGovernor’shomepage,usingthelogointhetopnavigationasthehomebutton:
AnalyticsDataGoogleAnalyticsisencouragedonallsitestobetterdrivedecisionsaboutcontent,behavior,andhowsitescanbetterservethepublic.Agenciesareencouragedtoperiodicallyanalyzedatatodrivedecisionsoncontent,presentation,SEO,internalsearch,andotherstrategicdecisions.
DRAFTCommonLookandFeel/Feb2017
31
IfyouarenotusingGoogleAnalyticsonyourwebsitetoday,andyouplantoaddit,youmaywanttoupdateyoursite’sprivacypolicy(orpointtoDelaware.gov’sprivacypolicy).
ToolsforAgencies:● FaviconGenerator:thiswebsitetakescareofallsizesandtreatmentsofa
favicon.Youcanvisititathttp://www.favicon-generator.org/
PDFs,WordDocuments,Powerpoint,Excel,etc.FileslikePDFs,WordDocuments,Powerpoints,andExcel,canhelpyoubringyouraudiencemoreindepthinformationandcanbeinvaluableresources.Withdocuments,pleasekeepthesizeofthesefilescompressedsothatloadtimesanddataplansarenotimpacted.Wealsoaskthatyouensurethatyourlinkstothesefilesopenupinanewtabwith(target=”blank”).Documentscanbelargefiles.Compressthesefilesbeforepostingtothewebsousers
donotexperiencelaggingloadtimesormobiledataoverages.WesuggestaccompanyinganydownloadabledocumentwithaFontAwesomeIcon,asshowndownbelow.Thishelpsindicatetotheuserwhatfiletheyshouldexpecttoopenupwhentheyclickonthelinkthatyouprovide.HereisanexampleofPDFiconsusedongic.delaware.gov:
DRAFTCommonLookandFeel/Feb2017
32
Aspossible,weencourageyoutoturnPDFformsthatcitizens,businesses,orotherpeopleintofillableformsusingAdobetools.Often,agenciesfindthatformsusephysicalsignatures–butit’sworthlookingintoifaphysicalsignatureisinfactisrequired(bystatuteorregulation)orifsignaturescouldbere-considered(electronic,typed,oreliminated).
Toolsforagencies:● smallpdf.com:ThisisatoolthatwillcompressPDFsforyou,andyoucan
visitthissiteatsmallpdf.com● AdobeReaderExtensions:TomakePDFsfillableandsubmit-able,GIC
offersAdobeReaderExtensionslicensesfortheenterprise–[email protected].
DataDelaware’sOpenDataPortal(data.delaware.gov)isacentralizedportalofferingpublicaccesstodatasetsfromagenciesacrossgovernment.Ifyouragencypublishesdatatoday,considerputtingthesedatasetsintomachine-readableformats(ratherthanPDF)andsubmityourdatasetsforprioritizationtotheOpenDataCouncil.
Toolsforagencies:● TheDelawareOpenDataPortal:Data.Delaware.govismanagedbythe
DelawareOpenDataCouncil,andtosubmitsuggestionsforinclusionfortheportal,pleasevisitopendatacouncil.delaware.gov
URLs–AFormofCommunicationBystickingtonamingconventionsyoucanhelptheuserbecomeaccustomedtotheorganizationofthesiteaswellasmakingthetaskofnamingpageseasierforyourself.ThemodernwebgivestwopreferencesforURLnamingconventions:
DRAFTCommonLookandFeel/Feb2017
33
1) KeepURLsshortandclearsotheyareeasytotypeintobrowsers,easytoremember,andcanbeusedonmarketingmaterials,***AND***
2) MakeURLslongandspecificinordertogetrankedhigherinsearchengines.Thisisnotatrick;thesetwoprinciplesclashwitheachother!So,wearechoosingsidesandsuggestcreatingshorterURLs.However,steerclearofacronymsthatpeopledonotunderstandinyourwebsiteURLs.Forexampleifapageiscalled"TheGovernor'sAwardsforExcellenceinTechnology"theURLshouldnotbe"gafet.shtml"or"/gafet/".Instead,theURLcouldbe“/awards/”or“/techawards/”.YouarestronglyencouragedtodevelopnamingconventionswithinyourorganizationforyoursiteURLs.ThisbecomesevenmoreimportantintheWordpressenvironment.WealsodiscourageuseofunderscoresinURLs.Instead,weaskthatyouusedashesforexample:this-is-a-dash.
Toolsforagencies:● Yoast:ForagenciesusingWordpress,thereisanSEOpluginnamedYoast
thatisveryhelpfulforURLediting.HereisagreatarticleaboutSEOfriendlyURLs:https://yoast.com/seo-friendly-urls/
StatewideBrandingCommonLookandFeelistheconsistentunificationofthestate’swebsiteswithstatewidebranding.Standardizedbrandingbuildstrustwithusers.Withconsistencyofstatewidebranding,userswillknowtheyareonatrustedDelaware.govwebsiteorapplication,andthereforethesitecanbecountedontogiveaccurateinformation.
DRAFTCommonLookandFeel/Feb2017
34
Headers
NavigationLevels–Top
InCLF4.0,statewebsiteshavetwolevelsoftopnavigation.InpreviousCLFversions,weusedleftnavigation–butin4.0weareusingtopnavigation.ThefirstlevelistheblueDelaware.govheaderandincludeshasstandardelements(Agencies,News,Topics,Contact,andaSearchIcon).Thesecondlevelnavigationisthewhiteagencynavigationbar.Theagencynavigationusesdropdownmenus.AgencieshavemorefreedomwiththismenuthaninpreviousversionsoftheCLF,buttherearesomeparameters,outlinedbelow,toensurethatthismenuwillnotdegradeinamobileenvironment.
FirstLevelofNavigation-Delaware.gov,bluebar
TheDelaware.govheaderisthefirstlevelofnavigationandwillhavestandardelements(Agencies,News,Topics,Contact,andaSearchIcon).TheDelaware.govheaderusestheofficialstatecolor,theDelawareBlue,forthestatewidenavigationbar.ThehexnumberfortheDelawareBlueis#4bc1d2.
SecondLevelNavigation–Agencynavigation,whitebar
Agencytopnavigationisdisplayedonagainstawhitebackground.Theagencymenususedropdowns,anduseeitheroneortwo-wordnames.Agenciesshouldusenomorethan6or7itemsinthetopnavigation–otherwisethespacegetscrowded,
DRAFTCommonLookandFeel/Feb2017
35
andwilldegradeonatabletorsmallerscreendesktop.Wediscourageuseofacronymsintheagencynavigation.InthepreviousversionoftheCommonLookandFeel,therewerestrictrulesoncategoriesforsecondlevelnavigation-onlyallowing"Home","Services",and"Information"asthenamesforcategories.WearelooseningthesequiteabitinCLF4.0.InCLF4.0,"Home"isnolongergoingtobeanavigationcategory-instead,thehomebuttonistheiconthatrepresentsthesite(asmentionedabove).Wearesuggestingthatcategoriescurrentlylabeled"Home"arerenamedto"About".Navigationwillincludeabrandinglogoorimageforthesitethatwilltaketheuser"home”.Logosmustbemobilefriendly(logosmustbeablescaledowntoasmallsize).GICwillworkwithagenciesontransforminglogosintomobilefriendlylogos.ContactpagesinthepreviousversionofCLF,included“ContactInformation”and“OfficeLocations”astwoseparatepages.InCLF4.0wearemergingthesetwopagestobecome“Contact”.Contactpagesshouldincludemapstoofficelocations.Iftherearesocialmediaaccountsrelatedtothesite,agency,ordivision,thenweencouragelistingthesocialiconsinthenavigation.Thiscanbeunder"Social"asanavigationcategory,orcouldbethesocialmediaiconsthemselvesinthetopnavigation.Belowshowsanexampleofusingsocialmediaiconsintheagencynavigation:
Belowisanexampleusingamenuitem,“Social”,intheagencynavigationanddropdown:
DRAFTCommonLookandFeel/Feb2017
36
Noothericons(otherthansocialmedia)shouldbeusedintheagencynavigationmenu.
Footers
StatewideFooter–Delaware.gov,graybackground
AgencyFooter–colorscanbeagencyspecificGovernmentInformationCenterfooter:
DRAFTCommonLookandFeel/Feb2017
37
DNRECfooter:
DepartmentofStatefooter:
Theagencyfootercanbepersonalizedtoyourwebsite.Theagencyfooterincludeslinkstotheimportantpagesacrossyoursite.Somelinksarerequired:
• “About”–Linkstoyour“About”page.• “Contact”-Linkstoyour“Contact”page.• “FOIARequestForm”-TheFreedomofInformationActrequiresstate
agenciesofferacentralizedplacetorequestinformation.ThislinkmusteitherlinktotheagencyFOIApage(ifoneexists),ortothestatewide
DRAFTCommonLookandFeel/Feb2017
38
FOIAform(withagencypre-selected).Thisshouldbethelastlinkintheagencyfooteracrossallstatesites,inordertomaintainconsistencyandmakeiteasierforuserstofind.
Thesizeofthefootershouldappropriatelyreflectthesizeofthesite.Forlargesitesweaskthatthefooterbecontainedtothreecolumnsandnomorethanthirtylinks.Departmentscanusethe“Division”separatorasshowninscreenshotsabove.Theagencyfooteralsomustincludesablue"+"buttonthatbringsupthestatewideDelaware.govfooter.
Toolsforagencies:● LocationDirectory:GICcanaddyourofficelocationtotheStateLocations
Directory.● ESRIMappingFunctions:DelawareisusingESRIformappingfunctions.
Pleaseseefirstmap.delaware.govformoreinformationandcontactDTItosetupmappingfunctionsonyouragencysite.
● OpenDataMapping:Forshowingdataonmaps,youcanutilizetheDelawareOpenDataportalandembeddatavisualizationsintoyoursite.
● LogoDesigns:GICwillprovideupto5logodesignsforagenciesordivisionsthatwouldlikeredesigned,modern,andmobileresponsivelogos,and1roundofrevisions.Wedesignlogosthatareflat,modern,andsimpleyetelegant.Ifyouareinterestedinlogodesign,pleasecontactuswiththefollowing:
○ Overallmissionoftheorganization○ Colorsandsymbols,ifanyarepreferred○ Timeline
AccessibilityMustbeSection508compliantAllDelaware.govsitesneedtomeettheaccessibilitycriteriasetbytheUnitedStatesAccessBoardviaSection508(seehttps://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards).
• TopConsiderationsforAccessibility:
DRAFTCommonLookandFeel/Feb2017
39
o Alttextforimagesmustalwaysbeincludedo Webmastersmustregularlycheckforaccessibilityissueso Consideruserswhoaccessyoursitewithascreenreadero GICoffersReadSpeakerforAgencies
Seemoreunder“WebPolicy”inthisdocumentaboutthefederalrulesthatapplyforgovernmentwebsites.
TestingandBrowserCompatibilitySitesandapplicationsshouldbebuiltforthebroadestpossiblecompatibilitysothattheycanworkonmultiplebrowsersandoperatingsystemstoensurepublicaccess.Beforesitesandapplicationsarebuilt,agenciesmustconsidertheoldestpossiblebrowsersandsystemsthatcan/shouldbecompatible,andagenciesmustalsoconsidercompatibilityforthenewest/latestbrowsersandsystems.Agenciesneedtohavemaintenanceplansforcompatibilityforapplications-forexample,manyolderapplicationstodaydonotworkinlaterversionsofIEandEdge.Alistofthemostutilizedbrowsersandversionsisincludedinthebeginningofthisdocument.Thepublicusesamixofbrowsers,operatingsystems,andversions–andallwebsitesshouldbetestedforbroadcompatibility.GICusesBrowserStack.comanddevicestotest.Publicfacingapplicationsmustalsobecompatibleforthewidestpossibleaudience.
TechnologyPreferencesStandardsforDesignRelatedTechnologyToolsInCLF4.0thefollowingtechnologytoolsarerequired:
• Bootstrapformobileresponsivedesigninallwebsites• HTML5andCSS3,thelatestinternetstandards
InCLF4.0thefollowingtoolsarerecommended:
• FontAwesomeforouriconlibrary
DRAFTCommonLookandFeel/Feb2017
40
• WordpressistheContentManagementSystem(CMS)thatGICoffers.AgenciescanuseotherCMS’s.
PleasenotethenewHTML5tags:<header><section><article><aside><footer>
ApplicationCLF4.0
ApplicationsvsWebsitesInthenewversionofCommonLookandFeel,forthefirsttime,wearemakingadistinctionbetweenapplicationsandwebsites."Applications"separatefrom"websites"willhavelooserrulesforCLF4.0,withsomedefaultstylechoices.Generally,websitesareinformational,andapplicationsaretransactional.Inapplications,wearesimplifyingelements.
● Header–thestatewideheaderisrequiredforapplications.Theoptionalelementisthemenufloatthathappenswhenscrolling.
● Search-thesearchiconandbarintheheaderisoptionalinapplications(becausemanyapplicationshavetheirownsearch,andtwosearchescouldbeconfusing).
● Navigation–inanapplication,usethehorizontal(top)navigationbarfirst.Ifatertiarynavigationisneeded,useleftnavigation.Inconsideringnavigation,westronglysuggestthe“mobilefirst”approach–toconsiderthemobilemenusfirst,thentoexpandtolargerscreensizes.
● Footer–includetheapplicationfooterwithimportantnavigationlinksfortheapplication.Asimplifiedstatewidefooterisencouraged.
StandardDesignPrinciplesApplytoApplications:
● MobileResponsiveorMobileFirstDesign
DRAFTCommonLookandFeel/Feb2017
41
● BootstrapforresponsiveapplicationsispreferredinCLF4.0● IfBootstrapisnotpossible,thenelementsshouldmimictheBootstrap
look.Visithttp://getbootstrap.com/fortheentirecatalogofBootstrapelements.
ToolsforAgencies:GICwillworkwithyouragencyonafrontenddesignforyourapplication.Pleasereachouttous,[email protected].
StyleDefaultsforWebsitesandApplicationsAgenciesandstateofficescancustomizecertainelementsoftypographywithintheirwebsites.Transactionalapplicationsshouldfollowthedefaultsasmuchaspossible.Intheabsenceofaseparatestylesheet,weencouragethefollowingdefaults.OpenSansisthedefaultfontchoiceforwebandapplications.ThereissomeroomforuniquenesswiththeH1styleoneachCLF4.0website.But,otherheadingswillbeOpenSans.Heading1 font-family:‘OpenSans’ font-weight:700 font-size:44px line-height:1.3em/57pxHeading2
font-family:‘OpenSans’ font-weight:700 font-size:34px line-height:1.3em/44pxHeading3
font-family:‘OpenSans’ font-weight:700
DRAFTCommonLookandFeel/Feb2017
42
font-size:24px line-height:1.3em/31pxHeading4 font-family:‘OpenSans’ font-weight:700 font-size:19px line-height:1.3em/25pxHeading5 font-family:‘OpenSans’ font-weight:700 font-size:16px line-height:1.3em/21pxHEADING6 font-family:‘OpenSans’ font-weight:400 font-size:13px line-height:1.3em/17px text-transform:uppercaseLeadParagraph
font-family:‘OpenSans’ font-weight:400 font-size:22px line-height:1.5em/33pxBodyCopy.Aseriesofsentencestogetherwhichmakeaparagraph.
font-family:‘OpenSans’ font-weight:400
DRAFTCommonLookandFeel/Feb2017
43
font-size:15px line-height:1.7em/26px
LinksIfnocustomstylesheetexists,usetheU.S.DesignStandardforlinks:https://standards.usa.gov/typography/#links
ColorsIfnocustomstylesheetexists,usetheU.S.DesignStandard:https://standards.usa.gov/colors/
ButtonsUseBootstrapbuttonstyles:http://getbootstrap.com/css/#buttonsBootstrapbuttonoptionsareincludedattheabovelink,andscreenshotsarebelow.
DRAFTCommonLookandFeel/Feb2017
44
Ifnocustomstylesheetexists,thenusethebuttonstylesfromtheU.S.DesignStandards:https://standards.usa.gov/buttons/
DropdownBootstrapdropdown:http://getbootstrap.com/components/#dropdowns
(Pleaseseethedropdownoptionsinthelinkabove).
FormControlsBootstrapformstyles:http://getbootstrap.com/css/#forms
(Pleaseseetheformoptionsinthelinkabove).
Ifnocustomstylesheetexists,thenusetheformcontrolsfromtheU.S.DesignStandards:https://standards.usa.gov/form-controls/
FormTemplatesIfnocustomstylesheetexists,thenusetheformtemplatestylesfromtheU.S.DesignStandardshttps://standards.usa.gov/form-templates/
DRAFTCommonLookandFeel/Feb2017
45
CheckboxesandRadiosBootstrapforms:http://getbootstrap.com/css/#forms
(PleaseseethelinkaboveforcheckboxesandradiooptionsinBootstrap).
Ifnocustomstylesheetexists,usetheU.S.DesignStandardforcheckboxes:https://standards.usa.gov/form-controls/#checkboxes
IconsFontAwesomeLibrary:http://fontawesome.io/
AlertsBootstrapalerts:http://getbootstrap.com/components/#alerts
DRAFTCommonLookandFeel/Feb2017
46
Ifnocustomstylesheetexists,usetheU.S.DesignStandardforalertshttps://standards.usa.gov/alerts/
AccordionsBootstrapAccordion:http://getbootstrap.com/javascript/#collapse-example-accordion
DRAFTCommonLookandFeel/Feb2017
47
Ifnocustomstylesheetexists,usetheU.S.DesignStandardforaccordionshttps://standards.usa.gov/accordions/
TablesBootstrapTables:http://getbootstrap.com/css/#tables
(Pleaseseelinkabovefortableoptions).Ifnocustomstylesheetexists,usetheU.S.DesignStandardfortableshttps://standards.usa.gov/tables/
ListsBootstrapLists:http://getbootstrap.com/css/#type-lists (Pleaseseelinkaboveforlistoptions).Ifnocustomstylesheetexists,usetheU.S.DesignStandardforlistshttps://standards.usa.gov/
DRAFTCommonLookandFeel/Feb2017
48
WebPolicy
FederalPolicy
Section508–AccessibilityforthosewithVisualImpairmentsSitesmustbesection508compliant.Agenciesareencouragedtocheckaccessibilitycompliancearegularbasis,andfixerrorsassoonaspossible.FormoreinformationonSection508Standards,pleasevisit:https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards
Toolsforagencies:● AccessibilityRequirements:Therearefreeopensourcetoolsavailableto
checkforaccessibilityrequirements,foralist,pleaseseehttp://gic.delaware.gov/accessibility-central/
● Wave:Thereisafreetooltotestaccessibility,WAVEbyWebAim,
http://wave.webaim.org/.YoucanruneachpagethroughtheWAVEtoolanditwillflagaccessibilityissues.Werecommendfixingtheredflagerrorsimmediately.IfyouuseGoogleChromeyoucandownloadandinstalltheWAVEextensionwhichwillletyoutestwebsitesbehindafirewalloronalocalserver.
● ReadSpeaker:Screenreadersoftware(ReadSpeaker)isavailablefromGICfortheenterprise,andagenciesareencouragedtousethissoftwareontheirsites.Pleasecontactusatgic@state.de.usformoreinformation.
Dotgov–RulesforWebsiteswith“.gov”AddressesTheFederalGovernmentsetsrulesandguidelinesforsiteswith“.gov”addresses.Delaware.govsitesmustfollowtheserules,includingnonon-governmentadvertisingandnopoliticalorcampaigninformation.
DRAFTCommonLookandFeel/Feb2017
49
Agenciesareencouragedtoreadthepolicyandprogramguidelines:https://www.dotgov.gov/portal/web/dotgov/policy,andhttps://www.dotgov.gov/portal/web/dotgov/program-guidelines
FederalOMBPleasevisittheWhiteHouse/OMB’ssiteondigitalgovernmentpolicies:https://www.whitehouse.gov/sites/default/files/omb/egov/digital-government/digital-government.html
StatePolicy
DelawarePublicArchivesIn2013,theDelawarePublicArchivesissued“GuidelinesforMaintainingandPreservingRecordsofWebBasedActivities”(see:http://archives.delaware.gov/govsvcs/pdfs/Records%20Policies/Guidelines%20for%20Maintaining%20and%20Preserving%20Records%20of%20Web%20Based%20Activities%2020130411.pdf)
Toolsforagencies:● ArchiveIt:GIC,inpartnershipwiththeDelawareArchives,makesthe
ArchiveIttoolhttps://archive.org/web/availableforDelaware.govURLs.TheArchiveIttoolisprovidedforthepublictoaccessolderversionsofwebsitesforinformationpurposes.TheArchiveIttooltakesaregularsnapshotofwebsitesandmakesthosesnapshotsavailableonline.IfyouwouldliketoaddyourURLorchangethefrequencyofsnapshots,[email protected]
DelawareTechnologyandInformationPleasevisittheDTI’ssiteformoreinformationonstatewidetechnologystandardsandenterprisetools:https://dti.delaware.gov/information/standards-policies.shtml
DRAFTCommonLookandFeel/Feb2017
50
GlossaryAlttext/Alttagforimages‘Alt’=alternatetextforanimage.Thisalternatetextwilldisplayiftheimagecannotbedisplayed.Thealtattributeprovidesalternativeinformationforanimageifauserforsomereasoncannotviewit(becauseofslowconnection,anerrorinthesrcattribute,oriftheuserusesascreenreader).
CSS3isthecurrentstandardforCascadingStyleSheets,alanguageusedtospecifylookandfeelofdigitalcontent,andusedseparatelyfromthemarkuplanguage(e.g.,HTML)soastoseparatecontentfrompresentation.HTML5isthefifthrevisionoftheHypertextMarkupLanguagestandardusedtocodecontentfortheWeb.HTML5makesitpossibletoembedvideo,audio,animationsandotherfeatureswithouttheuseofthird-partypluginsandcanbeusedtobuildcross-platformmobileapplications.FontAwesomeistheiconlibrarythatGICusesandgivesyouscalablevectoriconsthatcanbecustomized(size,color,dropshadowandmore.FontAwesomesuppliesaCDNwhichyoucangrabonthewebsite:http://fontawesome.io/get-started/Metadataareinformationusedtodescribecertainattributesofapieceofdigitalinformation,suchaspagetitle,author,dateupdated,andotherclassifications.Consistentqualitymetadatataggingcanimprovesearchresultsandalsobeusedtostructurecontentsothatitcanbemorewidelydisseminated.SearchEngineOptimization(SEO)involvesunderstandinghowsearchenginesworkanddesigningcontentaroundthosestandardstoboostcontent’srankinginsearchresults.
DRAFTCommonLookandFeel/Feb2017
51
Section508oftheRehabilitationActof1973requiresthatfederalemployeesandmembersofthepublicwithdisabilitieshaveaccesstothegovernment’sdigitalinformationandservicescomparabletoindividualswithoutdisabilities,unlessanundueburdenwouldbeimposedontheagency.Seehttp://www.access-board.gov/508.htmformoreinformation.
WebAPIsareasystemofmachine-to-machineinteractionoveranetwork.WebAPIsinvolvethetransferofdata,butnotauserinterface.