What's New in the GSA.gov Design Refresh

The GSA.gov Design Refresh incorporates recommendations in the U.S. Web Design Standards to the extent possible.  For example, "Source Sans Pro" is the default font throughout the site. 

Please review the topics below for more background on the GSA.gov Design Refresh and for advice on issues that you may encounter on some pages.

Headers

The new design creates a consistent hierarchy of headings for page content. There are now styles available in the CMS visual editor ("Ephox") for Heading 2 <H2> through Heading 6 <H6>. Note that <H1> is reserved for page titles and should not be used in content.  Within the page title box in the CMS enter the correct title of the page which is be created, no other  header information or coding is necessary.

The previous styles for “Section Title” and “Subtitle” are obsolete and should not be used in any new content. They have been replaced by <H2> and <H3> respectively. The system will present the obsolete styles as if they were <H2> and <H3> so you do not need to replace them if your page appears OK as is.

Please replace the obsolete tags with new header tags in the CMS if you would like to change the appearance of the headers.

More on Headers

Links

All links in the new design are blue with no underlines. When the cursor hovers over a link, an underline appears. This is a change from the previous design.

If required, you can override the new default style to have a persistent link underline by applying the “links_underline” class in the Ephox editor.

More on Links

Banner Images

The fixed width of content in the old design is now flexible. Existing image banners that were intended to fill a specific width (say, between the left navigation and the right column) will no longer fill that space when pages are viewed on large monitors and may also disrupt the page on small screens.

If your page contains an image that is not responsive, you should remove any specific pixel dimensions from image tags and add the attribute width=”100%

More on banner images

URLs, Shortcuts, and Left Navigation

The URLs and shortcuts for pages remain the same in the new GSA.gov.

However, standard pages have been relocated in the new category structure and, as a result, pages have a new breadcrumbs.

The reorganization can affect the left navigation of microsites. If a microsite you manage has issues with left navigation, please contact webservices@gsa.gov

If you have questions or suggestions for further improving the organization of categories, please contact your Managing Web Editor.

More about left navigation issues

In-line Style Issues

Non-standard HTML on existing pages may create issues on the new site.

If your page appears obviously mis-styled, you may need to remove in-line style tags that were inadvertently included. This can happen if the content was “cut-and-pasted” from a Google Drive doc or a Word document without using the option to Edit > Paste Special > Clean HTML in Ephox.

If you need help removing inappropriate style tags, please contact webservices@gsa.gov

If custom HTML was purposefully included on your page to create a non-standard look, the styles may no longer work appropriately in the responsive design. Please report pages that have issues with custom HTML to webservices@gsa.gov

GSA Website Video Guidelines

When embedding a video on www.gsa.gov please add this code “?rel=0” to the end of each video URL manually, this code will prevent YouTube from putting the suggested videos at the end of embedded video. 

Additional CMS Topics

Please consult topics in the left navigation of this section for additional advice on using the CMS.

Also note, due to the technical constraints of the Ephox editor, it can only approximate the appearance of GSA.gov. You should send draft pages to staging for an accurate view.

Last Reviewed 2017-06-07