DRAFT Common Look and Feel 4 · DRAFT Common Look and Feel / Feb 2017 5 Introduction Mission of Common Look and Feel The Delaware Website Common Look and Feel (CLF) version 4.0 is

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


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


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


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.


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.


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


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


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


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)


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.


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.


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


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.


15

● delaware.gov/topics:OnDelaware.gov’ssite,weorganizehigh-levelinformationontopicsthatcutacrossstategovernment


16

● DelawareNaturalResourcesandEnvironmentalControl:DNREC’snew“alpha”sitefeaturestopicspagesonthehomepageandfromthetopnavigation.


17

● DelawareHealthandSocialServices:DHSS’stopicpagescanbefoundrightonthehomepage.Throughthistheuserisonlyafewclicksfromfindingexactlywhattheywerelookingfor.Thispagecanbefoundat:dhss.delaware.gov/dhss

• ThedraftoftheAttorneyGeneral’ssiteisusingaudienceportalsontheir

homepage,includinginfoforthepublic,lawenforcement,media,victimsandwitnesses,andconsumers.


18

• BelowisadraftoftheConsumerpage:

TheAlphaApproachIfyouragencyhasalargesite,orasitewithnumerouslayersofnavigation,considerthe"alpha"approach."Alpha"involvescreatinganentirelynewsitefromscratch,buildingitinpublicwithpublicfeedback,andretiringthecurrentsiteovertime.Ifyouragencyisinterestedinthismethodofbuildingasite,pleasecontacttheGIC.DNRECiscurrentlyintheprocesswithanAlphasite.


19

● DNRECAlpha:

AboveisascreenshotofDNREC’sAlphasite,dnrec.alpha.delaware.gov


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.


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.


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.


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"/>"


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


25

WithinWordpress,GICisbuildingthemecustomizerfunctionsthatwillgiveagenciesparametersforproperimageheightandwidthinfeatureslikecarousels,heroheaderimages,andothersections.Pleaseremembertocompressimagesbeforeuploadingusingthecustomizerfeature.

ToolsforAgencies:● Delaware.gov’sFlickrAccount:Weencourageagenciestojointhe"State

Agency"grouptosharephotosamongstategovernment.Thisisinvite-only,[email protected].


26

● CreativeCommons:Thissitegivesmoreinformationonlicensingandsharingyoucanvisititatcreativecommons.org.

● PictureResizingSites:Throughsiteslikehttps://compressor.io/imageresize.organdpicresize.comyoucancropandresizeimages.

UserDesignandFeedbackAgenciesarestronglyencouragedtoseeknon-technicalandpublicinputforstatewebsites.Inordertoinsurethatthesiteremainsthemostwidelyaccessiblewesuggestthefollowingguidelines:

● Developafeedbackloopfordesignfromadiversegroupofindividualsthatrepresentsyourusers.

● Agenciesshouldtesttheirsitesfrompublicuserperspectives,notjustinternalusers.

● Focusgroups,interviews,andsurveysaregreatmethodsforreceivinguserfeedback.Acombinationofallthreemethodsisevenbetter.


27

AboveisascreenshotfromUsability.govontheprocessofUserCenterDesign.Thisoutlinesaprocessandfeedbackloopforusercentereddesign.

FunctionPrinciplesforUserDesignandFeedbackKeepthefollowingquestionsinmind:

● WhatDoYourAnalyticsSay?● WhoisYourAudience?● WhatMakesYourSiteUnique?● DoesContentDriveDesign?● IsYourSiteSustainable?● HaveyouputyourWebsiteFirst,andyourSocialMediaSecond?

Byencouragingfeedbackfromawidediverseaudienceduringtheentiredesignprocessyoucanensurethatyoursiteisnotonlyfunctional,butthatitalsobestrepresentsyourdivision/agencyandtheworkthatyoudoforthecommunity.


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


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.


30

PageDisplayinBrowserTab

AboveisascreenshotoftheGovernor’shomepageURLandhowitdisplaysinabrowsertab.TheGovernor’sOfficelogoisusedintheleftsideofthetab(asafavicon),andthetitleofthesiteisdisplayed(andamousehoverwillshowthefulltitle).Faviconsaresimplifiedlogosrecognizableatasmallsizeformobiledevices.Weareusingfaviconsinbrowsertabs,andrepeatingthesamelogointhetopnavigation.BelowisascreenshotoftheGovernor’shomepage,usingthelogointhetopnavigationasthehomebutton:

AnalyticsDataGoogleAnalyticsisencouragedonallsitestobetterdrivedecisionsaboutcontent,behavior,andhowsitescanbetterservethepublic.Agenciesareencouragedtoperiodicallyanalyzedatatodrivedecisionsoncontent,presentation,SEO,internalsearch,andotherstrategicdecisions.


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:


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:


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.


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,


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:


36

Noothericons(otherthansocialmedia)shouldbeusedintheagencynavigationmenu.

Footers

StatewideFooter–Delaware.gov,graybackground

AgencyFooter–colorscanbeagencyspecificGovernmentInformationCenterfooter:


37

DNRECfooter:

DepartmentofStatefooter:

Theagencyfootercanbepersonalizedtoyourwebsite.Theagencyfooterincludeslinkstotheimportantpagesacrossyoursite.Somelinksarerequired:

• “About”–Linkstoyour“About”page.• “Contact”-Linkstoyour“Contact”page.• “FOIARequestForm”-TheFreedomofInformationActrequiresstate

agenciesofferacentralizedplacetorequestinformation.ThislinkmusteitherlinktotheagencyFOIApage(ifoneexists),ortothestatewide


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:


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


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


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


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


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.


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/


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


46

Ifnocustomstylesheetexists,usetheU.S.DesignStandardforalertshttps://standards.usa.gov/alerts/

AccordionsBootstrapAccordion:http://getbootstrap.com/javascript/#collapse-example-accordion


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/


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.


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


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.


51

Section508oftheRehabilitationActof1973requiresthatfederalemployeesandmembersofthepublicwithdisabilitieshaveaccesstothegovernment’sdigitalinformationandservicescomparabletoindividualswithoutdisabilities,unlessanundueburdenwouldbeimposedontheagency.Seehttp://www.access-board.gov/508.htmformoreinformation.

WebAPIsareasystemofmachine-to-machineinteractionoveranetwork.WebAPIsinvolvethetransferofdata,butnotauserinterface.