usda web standards and style guide v1.1 docs...! 7! 3. overall!style!guidelines! a. fonts!!...

30
USDA Web Standards and Style Guide Version 1.1

Upload: others

Post on 07-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

 

 

 

   

USDA  Web  Standards  and  Style  Guide    

Version  1.1                                

Page 2: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  2  

Table  of  Contents  

USDA  WEB  STANDARDS  AND  STYLE  GUIDE   1  

INTRODUCTION   3  

1.   FEDERAL  LAWS  AND  REGULATIONS   4  

2.   OVERVIEW   4  

3.   OVERALL  STYLE  GUIDELINES   7  A.   FONTS   7  B.   LINKS   7  C.   DOMAIN  NAMES   8  

4.   REQUIRED  ELEMENTS   8  D.   COMMON  ELEMENTS   8  E.   HOMEPAGE  STRUCTURE   14  F.   LANDING  PAGE  (SUB  PAGE)  ATTRIBUTES   23  

5.   ACCESSIBILITY   27  

6.   MULTILINGUAL   28  

7.   SOCIAL  MEDIA   28  

8.   PLAIN  LANGUAGE   28  

9.   USABILITY   29  

10.   SEARCH  ENGINE  OPTIMIZATION1   30  

11.   RECORDS  MANAGEMENT   30  

12.   CONTACT  INFORMATION   30                  

Page 3: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  3  

 

Introduction    The  USDA  Web  Standards  and  Style  Guide  was  created  to  ensure  a  consistent  look  and  feel  for  all  USDA  websites,  and  provide  a  seamless  online  experience  for  USDA  customers  who  are  potentially  traveling  across  multiple  USDA  Agencies  and  Offices  during  their  online  sessions.    Adherence  to  the  Web  Standards  and  Style  Guide  is  a  priority  for  the  Secretary’s  “One  USDA”  vision,  and  assists  with  the  objectives  for  accomplishing  that  vision.    Every  USDA  website  contributes  to  the  user’s  perception  of  the  Department.    To  ensure  a  unified  web  presence,  all  official  USDA  websites  and  web  pages  should  appear  visually  related  to  help  reinforce  the  USDA’s  brand  identity.    As  part  of  a  branding  strategy,  it  is  expected  that  all  USDA  branded  websites  will  adopt  the  standards  and  style  elements  outlined  in  this  document.        This  guide  should  be  used  as  a  blueprint  for  building  out  your  Agency  and  Office  websites.    Although  consistency  is  important,  this  guide  recognizes  and  takes  into  consideration  the  fact  that  USDA  Agency  and  Office  websites  offer  a  different  customer  experience  than  USDA.gov  based  on  many  factors  including  missions  and  audiences.    The  design  standards  built  into  USDA.gov  were  developed  in  a  way  to  allow  flexibility  for  other  USDA  websites  to  incorporate  the  common  look  and  feel  while  maintaining  individual  Agency  and  Office  identity.    With  flexibility,  however,  it  is  required  that  all  USDA  websites  conforming  to  the  new  look  and  feel  be  vetted  through  the  Office  of  Communications  prior  to  public  launch  to  ensure  adherence  to  the  USDA  Web  Standards.    Throughout  this  document,  you  will  find  references  and  links  to  resources  to  USA.gov.    USA.gov  was  created  as  a  resource  for  Federal  Web  Managers  as  an  aggregated  source  of  best  practices  and  information  for  creating  and  maintaining  Federal  websites.    Rather  than  duplicate  that  information  in  this  Guide,  links  to  those  resources  are  provided  as  those  resources  are  updated  regularly.    In  addition,  the  USDA  Web  Standards  and  Style  Guide  is  part  of  a  larger  Style  Guide  package  for  the  Department.    This  complete  guide  includes  branding  style,  writing  style,  print  style,  etc.    This  Guide  should  also  be  treated  as  a  “living”  document.    Although  the  majority  of  guidance  and  specifications  outlined  in  this  document  are  final  and  can  be  used  to  map  out  your  Agency  and  Office  websites,  various  resources  will  be  updated  on  a  regular  basis.    Always  refer  to  the  latest  version  on  USDA  Connect:    http://connections.usda.gov  

Page 4: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  4  

     

1. Federal  Laws  and  Regulations    

USDA  websites  should  adhere  to  all  applicable  Federal  laws  and  regulations.  Laws  and  regulations  have  been  listed  on  USA.gov.  

 Federal  Laws  and  Regulations  for  Government  Websites  

2. Overview    

USDA.gov  has  been  developed  using  IBM  RAD  V  7.0  for  IBM’s  Websphere  Portal  V  6.2  environment.    It  uses  standard  theme  CSS  to  control  the  general  presentation  of  the  website.  USDA.gov’s  content  architecture  is  backed  by  an  Oracle  Database  and  managed  by  Oracle’s  Universal  Content  Management  System.    

Page 5: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  5  

 

Page 6: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  6  

   

Page 7: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  7  

3. Overall  Style  Guidelines  a. Fonts  

 Absolute  font  sizes,  defined  by  Cascading  Style  Sheets  (CSS),  allow  for  the  control  of  the  font  size  that  will  be  displayed  to  users  in  a  Web  browser.    The  downside  to  absolute  sizes  is  the  inability  for  users  to  control  the  size  of  the  fonts  on  their  screen.  USDA.gov  uses  absolute  fonts  on  the  homepage  to  ensure  a  consistent  screen  size  and  to  avoid  distortion.  

 Relative  font  sizes  allow  the  user  to  increase  or  decrease  font  sizes  by  changing  the  settings  on  a  Web  browser.  Agencies  can  choose  to  provide  this  flexibility  to  users  in  the  center  content  area,  left  navigation  column,  and  footer  of  the  page.    Fonts  on  USDA.gov  are  coded  in  a  series,  such  as  Arial,  Helvetica,  Sans  Serif.    This  allows  for  browsers  to  use  the  first  font  that  is  available  in  the  series;  using  the  latter  fonts  when  the  previous  fonts  are  unavailable.  

 The  designated  font  for  Titles,  Headers  and  Section  Titles  is  Arial.    The  designated  font  for  content  text  is  Verdana.    Verdana  was  chosen  for  its  readability  for  large  amounts  of  text.      The  designated  font  for  all  graphical  text  is  Helvetica.        

b. Links    

Links  to  third  party  websites  outside  of  the  .gov  domain  must  explicitly  indicate  that  the  link  goes  to  a  nonfederal  site/resource  by  one  of  the  following:        •  Identify  the  full  URL  of  the  destination  link  and  open  that  website  in  a  new  browser  window.                      Example:  “…as  reported  here  (http://www.pbs.com)”,          •  Inserting  an  exit  page  that  displays  after  the  user  selects  the  link    

 All  links  to  non-­‐Web  information  that  are  application-­‐dependent  (e.g.  pdf  files,  Word  documents)  must  display  the  file  format  name  and  

Page 8: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  8  

size.    These  links  must  open  in  a  new  browser  window.    The  files  launched  must  be  in  industry  standard  format  so  as  not  to  impose  a  burden  on  the  intended  audience.    Base  your  choice  of  file  format  on  both  the  needs  of  your  intended  audience  and  the  business  needs  of  your  agency.      Example:  Link  text  (PDF;  1.3Mb)      The  only  exception  to  this  rule  applies  to  live  streaming  media  (e.g.  video  and  audio  clips)    

c. Domain  Names    

All  USDA  Agency  and  Offices  must  follow  the  following  syntax  for  the  websites:    http://agencyname.usda.gov    Creation  of  new  domains,  although  easily  attainable,  should  always  be  vetted  through  the  Office  of  Communications.    A  “www”  redirect  must  be  put  in  place  so  that  users  typing  in  “www”  before  the  Agency  Name  can  resolve  to  the  proper  address.          

4. Required  Elements  

d. Common  Elements  Common  elements  are  those  that  are  static  on  all  web  pages  of  the  USDA.gov  website.    Maintaining  a  static  masthead  and  footer  will  ensure  a  consistent  navigational  path  throughout  the  USDA.gov  website  and  enhance  the  browsing  experience  by  positioning  navigational  elements  in  areas  that  repeat  throughout  the  website.                  

Page 9: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  9  

i. Logo  and  Department  /  Agency  Title    The  logo  and  Department  name  appear  in  the  top  left  corner,  flush  with  the  corner  of  the  masthead  on  every  page.  

   Logo  and  Department  name  on  USDA.gov    

     Logo  and  Agency  name  –  Example    

   Attributes:  Font:  Helvetica  Bold  for  Department  name,  15px;  Helvetica  Regular  for  Agency  name  18px;  flush  left  or  center  depending  on  position  of  Department  and  Agency  names    Logo  filename:    TBA                          

Page 10: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  10  

ii. Masthead  Art  USDA.gov  uses  a  static  masthead  on  all  of  its  pages.    The  masthead  incorporates  the  standard  branding  with  the  USDA  logo,  Department  name,  background  image,  and  3  functional  navigation  elements.    Agencies  can  define  the  colors  and  background  image  for  their  websites.          

         

iii. Navigation  1  –  Main  Tabbed  Navigation  Dropdown    

The  Main  Tabbed  Navigation  acts  as  the  primary  navigation  element  on  the  masthead  and  all  USDA  pages.    Agencies  have  flexibility  on  determining  which  menu  items  are  appropriate  for  their  agencies.    Depending  on  real  estate,  Agencies  also  have  the  flexibility  to  add  or  remove  menu  items,  however,  the  menu  should  not  extend  the  length  of  the  page  and  should  not  encroach  upon  the  navigation  elements  for  Search  and  Help.    For  USDA.gov,  the  menu  items  are  as  follows:    

• Topics  –  A  list  of  topics  selected  from  a  larger  A-­‐Z  website  topic  list  that  represent  the  over-­‐arching  topics  or  subject  matter  under  the  USDA  umbrella.  

• Programs  and  Services  –  Items  in  this  area  represent  a  program  or  service  that  USDA  provides.    These  items  have  been  selected  based  on  USDA’s  Strategic  Plan  and  the  goals  outlined.  

• Newsroom  –  A  link  to  the  USDA  newsroom  with  Newsroom  items  listed  in  the  dropdown  box.  

• Blog  –  No  dropdown.    Link  to  blogs.usda.gov.            

Page 11: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  11  

   

   

Attributes:    Font  Series:  Arial,  Helvetica,  Sans  Serif  Bold  Font  Size:  12px  Font  Color:    #ffffff  Hover:  #d0d0d0  Background  filename:  TBA  Corner  background  filenames:  TBA  

   Dropdown  Menu    

   

Page 12: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  12  

Attributes:    Background  color  =  #ffffff  Font  Series:  Helvetica,  Arial,  Sans  Serif  Bold  Font  Size:  12px  Font  Color:    #  005782  Hover:  underline    

   

iv. Navigation  2  –  Informational  Navigation    

   

Attributes:    Font  Series:  Arial,  Helvetica,  Sans  Serif  Bold  Font  Size:  11px  Font  Color:    #ffffff  Hover:  underline  Background  filename:  TBA  

     

v. Navigation  3  –  Search  and  Help  Navigation      

     Attributes:    Background  color  =  #ffffff  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  11px  Font  Color:    #000000  Hover:  underline    Search  Button  filename:  TBA  

Page 13: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  13  

vi. Breadcrumbs  (N/A  on  homepage)  The  Bread  Crumb  Trail  is  a  navigation  element  that  allows  a  user  to  see  where  the  current  page  is  in  relation  to  the  Web  site’s  hierarchy.    Any  page  visited  (other  than  the  current  page)  will  be  an  HTML  link.  The  Bread  Crumb  Trail  allows  users  to  know  where  they  are  and  where  they  have  been  at  any  time.    

   

Attributes:    Background  color  =  #ffffff  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  11px  Font  Color:    #000000  Link  Color:  Default  Hover:  underline  

   

 

vii. Stay  Connected  (Not  including  homepage)  The  Stay  connected  bar  serves  as  a  static  point  of  reference  to  USDA  social  media  tools.        

   Attributes:    Background  color  =  #ffffff  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  16px  Font  Color:    #005782  Bold,  Italic    Icon  dimensions:  Width  =  27px,  Height  =  27px  Icon  filenames:  TBA                  

Page 14: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  14  

viii. Footer    

The  Footer  consists  of  two  lines  of  HTML  links.          

USDA.gov  |  Site  Map  |  Policies  &  Links  |  Our  Performance  |  Report  Fraud  on  USDA  Contracts  |  Visit  OIG    FOIA  |  Accessibility  Statement  |  Privacy  Policy  |  Non-­‐Discrimination  Statement  |  Information  Quality  |  USA.gov  |  Whitehouse.gov    

   

Attributes:    Background  color  =  #000000  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  11px  Font  Color:    #ffffff  

     

e. Homepage  Structure    

i. Area  1  –  Popular  Topics  The  Popular  Topics  area  has  been  designated  to  highlight  those  topics  that  are  of  most  interest  and  receive  the  most  page  views  during  a  specified  period  of  time.    Interest  can  be  determined  by  most  requested  pages,  current  events,  and  issues  most  requested  through  social  media  channels  such  as  Facebook  and  Twitter.    The  purpose  of  the  Popular  Topics  area  separate  from  a  larger  Topics  list  is  to  provide  immediate  access  to  Topics  and  subject  matter  users  are  most  likely  to  come  to  the  website  in  search  of.    This  area  also  provides  direct  links  to  our  main  social  media  channels  and  a  sign  up  box  for  our  email  distribution  system.        

Page 15: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  15  

   Attributes:    Background  color  =  #  f6f3e7  Border  color  =  #  e9dfb9    Header:  Popular  Topics  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  16px  Font  Color:    #005782  Bold    Links  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  13px  Font  Color:    #000000  Bold  Hover:  underline        Icon  dimensions:  Width  =  37px  /  Height  =  37px  Icon  filenames:  TBA  

Page 16: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  16  

Arrow  filename:  TBA  Arch  background  filename:  TBA      

 

ii. Area  2  –  Photo  Carousel    

The  Photo  Carousel  is  the  main  visual  element  of  the  USDA.gov  homepage  and  represents  the  great  work  we  do.    The  carousel  features  a  diverse  range  of  images,  focusing  on  achievements  and  initiatives  taking  place  within  USDA,  its  Agencies  and  Offices.    All  photos  are  clickable  and  should  have  a  destination,  whether  it’s  a  news  release,  blog,  or  web  page.    Links  from  the  photo  carousel  should  never  link  to  an  outside  source.    USDA.gov  rotates  the  photos  based  on  a  weekly  schedule.  Agencies  have  the  flexibility  to  create  their  own  rotation  schedule  or  to  reserve  this  space  for  a  static  image.    Understandably,  it  can  be  challenging  to  feature  new  images  on  Agency  websites  on  the  same  aggressive  schedule  as  USDA.gov.    It  is  up  to  each  Agency  to  determine  their  rotation  schedule.    

   

Background  color  =  #  277bb1  Border  color  =  #  e9dfb9  Photo  Dimensions  –  513px  x  320px    Title  text  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  12px  

Page 17: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  17  

Font  Color:    #ffffff  Bold  Hover:  underline      Description  Text  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  11px  Font  Color:    #000000    Arrow  filenames:  TBA    

   

iii. Area  3  –  News  Feed,  Center  Content,  and  Key  Initiatives    

Background  Color  =  #f3f3f3  Border  size:  2px  Border  Color:  #bbbbbb  

 

News  Feed    

The  News  Feed  area  shows  3  tabs  where  news  items  are  automatically  fed  from  their  respective  sources.    On  USDA.gov,  the  blog  feed  is  featured  first,  as  our  blog  consistently  receives  more  traffic  than  other  news  sources,  followed  by  the  News  feed  and  Agency  Reports.    Agencies  should  determine  how  they  will  use  this  area  but  should  concentrate  on  news  items.      

Page 18: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  18  

   Active  Tab  Title  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  13px  Font  Color:    #000000  Bold      Inactive  Tab  Title  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  13px  Font  Color:    #ffffff  Bold    Links  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  12px  Font  Color:    #000000  Hover:  underline  Bulleted    

Page 19: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  19  

 Tab  Background  filename:  TBA  

     

Center  Content    Information  for:  This  area  contains  a  list  of  audience  driven  content  (the  old  Browse  by  Audience  area).    Secretary’s  Priorities:  A  list  of  topics  and  priorities  identified  by  the  Secretary.    Feature  Graphic  Area:  This  area  of  real  estate  is  reserved  to  highlight  important  items  in  visual  form.        Agencies  can  use  the  center  content  area  as  best  needed  for  their  Agency,  however,  the  graphic  feature  should  remain  as  an  area  to  highlight  important  items.  

   

 

Page 20: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  20  

 Attributes:      Header:  Information  for  /  Secretary’s  Priorities  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  14px  Font  Color:    #005782  Bold    Links:  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  12px  Font  Color:    #000000  Hover:  underline  Bulleted    Graphic  Feature  dimensions  =  250px  x  100px                                                      

   

Page 21: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  21  

Key  Initiatives    

     Attributes:    Font  type:   Arial,  Helvetica,  Sans-­‐Serif  Font  size:   13px  Font  Color:    #000000  Bold    Thumbnail  dimensions  =  50px  x  37px  Thumbnail  files:  TBA  

               

Page 22: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  22  

iv. Area  4  –  Mission  Areas,  Offices,  or  Agency  Focus    

The  Mission  Areas,  and  Offices  area  was  created  to  allow  users  to  quickly  see  a  big  picture  of  USDA’s  core  mission  structure.    Agencies  can  use  this  area  to  show  their  program  areas,  divisions  or  branches,  or  other  organizational  structure.  

 

     

Attributes:    Title:  Mission  Areas  and  Offices  Font  type:   Arial,  Helvetica,  Sans-­‐Serif;    Font  size:   15px  Font  Color:    #ffffff  Bold    Font  type:   Arial,  Helvetica,  Sans-­‐Serif;    Font  size:   14px  Font  Color:    #ffffff  Bold    Font  type:   Arial,  Helvetica,  Sans-­‐Serif;    Font  size:   12px  Font  Color:    #ffffff      Background  filename:  TBA              

Page 23: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  23  

v. Agency  Adaptation  and  Customizations    

All  areas  are  highly  customizable  for  Agencies,  however,  adherence  to  this  Guide  is  critical  for  Agency  sites  to  have  the  same  common  look  and  feel  as  USDA.gov.  Colors  are  also  customizable  and  selection  of  colors  will  rest  on  the  Agencies  with  final  approval  from  the  Office  of  Communications.        It  is  required  that  all  USDA  websites  conforming  to  the  new  look  and  feel  be  vetted  through  the  Office  of  Communications  prior  to  public  launch  to  ensure  adherence  to  the  USDA  Web  Standards.  It  is  recommended  that  Agency’s  provide  OC  with  design  drafts  prior  to  redesigning  Agency  websites  in  order  to  ensure  compliance  early  on  in  the  process.        

 

f. Landing  Page  (Sub  Page)  Attributes    The  new  landing  pages  for  USDA.gov  have  been  designed  to  maximize  the  real  estate  in  the  main  content  area  and  to  minimizing  scrolling.    In  addition  to  the  common  navigation  in  the  masthead,  Left  Column  navigation  has  been  added  to  help  users  navigate  specific  areas  of  the  website.      

Page 24: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  24  

       

i. Breadcrumbs  (N/A  on  homepage)  The  Bread  Crumb  Trail  is  a  navigation  element  that  allows  a  user  to  see  where  the  current  page  is  in  relation  to  the  Web  site’s  hierarchy.    Any  page  visited  (other  than  the  current  page)  will  be  an  HTML  link.  The  Bread  Crumb  Trail  allows  users  to  know  where  they  are  and  where  they  have  been  at  any  time.    

   

Attributes:    Background  color  =  #ffffff  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  11px  Font  Color:    #000000  Link  Color:  Default  Hover:  underline  

Page 25: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  25  

   

ii. Stay  Connected  (Not  including  homepage)  The  Stay  connected  bar  serves  as  a  static  point  of  reference  to  USDA  social  media  tools.        

   Attributes:    Background  color  =  #ffffff  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  16px  Font  Color:    #005782  Bold,  Italic    Icon  dimensions:  Width  =  27px,  Height  =  27px  Icon  filenames:  TBA  

                                               

Page 26: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  26  

iii. Left  Column      

     Attributes:    Background  color  =  #  f6f3e7  Border  color  =  #  e9dfb9    Header:  Popular  Topics  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  16px  Font  Color:    #005782  Bold    Links  Font  Series:  Arial,  Helvetica,  Sans  Serif  Font  Size:  13px  

Page 27: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  27  

Font  Color:    #000000  Bold  Hover:  underline    Arrow  filename:  TBA  

 

iv. Center  Content    

 Attributes:    Page  Header  Font  type:   Arial,  Helvetica,  Sans-­‐Serif  Font  size:   18px  Bold    Secondary  Header  Font  type:   Arial,  Helvetica,  Sans-­‐Serif  Font  size:   15px  Bold    Section  Title  Font  type:   Verdana,  Arial,  Sans-­‐Serif  Font  size:   12px  bold    Font  type:   Verdana,  Arial,  Sans-­‐Serif  Font  size:   13px  

 

5. Accessibility    

What  It  Is    Web  accessibility  is  ensuring  that  persons  with  any  disability  type—including  motor,  auditory,  cognitive,  seizure/neurological,  and  visual  impairments—are  able  to  use  web  content,  and  ensuring  that  content  is  "perceivable,  operable,  understandable,  and  robust."    

Page 28: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  28  

   Why  It's  Important  In  creating  an  accessible  experience,  it's  essential  to  understand  the  needs  of  each  disability  type  and  build  agency  sites  accordingly.  Doing  so  provides  the  opportunity  for  all  citizens  to  participate  in,  and  contribute  to,  the  web.    Specific  Requirements  To  meet  the  mandates  of  Section  508,  content  managers,  developers,  designers,  and  all  those  involved  in  building  government  websites,  must  endeavor  to  provide  all  U.S.  citizens  with  timely,  usable  access  to  government  information.  As  agencies  have  embraced  the  use  of  social  media,  more  than  ever,  it's  important  that  our  users  have  the  ability  to  interact  with  government  at  every  level.  

 http://www.usa.gov/webcontent/accessibility/  

6. Multilingual  Providing  appropriate  access  to  people  with  limited  English  proficiency  is  one  of  the  requirements  for  managing  Federal  websites.  You  need  to  determine  how  much  information  you  need  to  provide  in  other  languages,  based  on  an  assessment  of  your  website  visitors.    Information  on    implementation  and  examples  for  Multilingual  Websites  can  be  found  here:    Multilingual  Websites    

7. Social  Media    

New  Media  Policy  pending.      

8. Plain  Language    

Plain  language  (also  called  Plain  English)  is  communication  your  audience  can  understand  the  first  time  they  read  or  hear  it.  Language  that  is  plain  to  one  set  of  readers  may  not  be  plain  to  others.  Written  material  is  in  plain  language  if  your  audience  can:  

• Find  what  they  need;  • Understand  what  they  find;  and  • Use  what  they  find  to  meet  their  needs.  

Page 29: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  29  

There  are  many  writing  techniques  that  can  help  you  achieve  this  goal.  Among  the  most  common  are:  

• Logical  organization  with  the  reader  in  mind  • "You"  and  other  pronouns  • Active  voice  • Short  sentences  • Common,  everyday  words  • Easy-­‐to-­‐read  design  features  

No  one  technique  defines  plain  language.  Rather,  plain  language  is  defined  by  results—it  is  easy  to  read,  understand,  and  use.  

 http://www.plainlanguage.gov/  

9. Usability  In  general,  usability  refers  to  how  well  users  can  learn  and  use  a  product  to  achieve  their  goals  and  how  satisfied  they  are  with  that  process.  

 A  key  methodology  for  carrying  out  usability  is  called  User-­‐Centered  Design.  

Usability  measures  the  quality  of  a  user's  experience  when  interacting  with  a  product  or  system-­‐whether  a  Web  site,  a  software  application,  mobile  technology,  or  any  user-­‐operated  device.  

It  is  important  to  realize  that  usability  is  not  a  single,  one-­‐dimensional  property  of  a  user  interface.  Usability  is  a  combination  of  factors  including:  

 • Ease  of  learning  -­‐  How  fast  can  a  user  who  has  never  seen  the  user  

interface  before  learn  it  sufficiently  well  to  accomplish  basic  tasks?  • Efficiency  of  use  -­‐  Once  an  experienced  user  has  learned  to  use  the  

system,  how  fast  can  he  or  she  accomplish  tasks?  • Memorability  -­‐  If  a  user  has  used  the  system  before,  can  he  or  she  

remember  enough  to  use  it  effectively  the  next  time  or  does  the  user  have  to  start  over  again  learning  everything?  

• Error  frequency  and  severity  -­‐  How  often  do  users  make  errors  while  using  the  system,  how  serious  are  these  errors,  and  how  do  users  recover  from  these  errors?  

• Subjective  satisfaction  -­‐  How  much  does  the  user  like  using  the  system?  

 http://www.usa.gov/webcontent/usability  

Page 30: USDA Web Standards and Style Guide v1.1 docs...! 7! 3. Overall!Style!Guidelines! a. Fonts!! Absolute!font!sizes,!defined!by!CascadingStyleSheets(CSS),allow!for the!control

 

  30  

10. Search  Engine  Optimization    

Creating  search-­‐friendly  web  pages  is  called  organic  or  free  search  engine  optimization,  meaning  that  web  pages  contain  the  details  search  engines  seek,  putting  them  up  farther  in  search  results  without  the  web  owner  having  to  pay  for  this  ranking.  

 http://www.usa.gov/webcontent/technology/search/optimization.shtml  

11. Records  Management    

http://www.usa.gov/webcontent/reqs_bestpractices/laws_regs/web_records.shtml    http://www.usa.gov/webcontent/reqs_bestpractices/omb_policies/records.shtml  

12. Contact  Information    

Peter  Rhee  [email protected]    Amanda  Eamich  [email protected]