Spike to determine the level of effort required to move to a fluid rather than fixed-width template across the site.

[MelissaBraxton]

Notes

Things to consider when doing the spike:

• What components are fluid, and what are fixed. The uswds uses fluid 100% width header, and top nav, but the rest of the components are fixed-width, center aligned.

• On pages with left nav, the uswds uses a fixed with nav and main content area, but rather than center aligned, they are left aligned on the page.

• The example implementations use fixed max-width, centered components throughout the pages, even if it includes a sidebar navigation.

Acceptance criteria

• [x] level of effort and changes needed are understood

Tasks

• [x] compare implementations of the uswds (seth)

[sethalt]

@lauraGgit @MelissaBraxton @ASprinkle After researching other implementations of the web design standards, @bryanmcfadden and I have concluded that we should not change the layout of the permits website.

After looking at many implementations of the uswds, the majority of sites utilize a fixed, max-width layout where page elements are within a container that is centered on the screen even when a sidebar is included. The following are sample implementations that follow the same design pattern: https://www.usa.gov/ https://www.vets.gov https://www.usich.gov https://www.usds.go https://www.stopbullying.gov https://www1.grc.nasa.gov https://innovation.gov/ https://open.gsa.gov/events/ https://federalist-docs.18f.gov/ https://home.dotgov.gov/

Other than https://designsystem.digital.gov/ and https://freshdirect.github.io, I could not find other examples of sites using 100% width in any of the page components.

https://designsystem.digital.gov/ is not consistent in their use of 100% width components. The header and nav are 100% width and elements are fixed to the left and right of the screen, while the main content elements, on most pages, have a fixed max-width containers that are centered on the screen.

Pages with a left sidebar deviate from that paradigm by fixing the nav and content to the left of the screen, vs. centered like on non-sidebar pages.

The main deviation from the uswds that the e-permitting site implements is an increased sidebar width from 1/4 to 1/3 to support longer navigation items on the intake forms.

In conclusion, the e-permitting site does have a fluid, responsive template that follows the recommended and widely implemented design pattern. Following the implementation of the uswds at https://designsystem.digital.gov/ would be an anti-pattern.

[MelissaBraxton]

This is great! I appreciate you looking into and providing this background.

I agree that we should keep the existing fixed width template.

Now we just need to apply it to the Forest Service WDS page so that its consistent across the site. I created a new story to represent that work. #414