4a Seed TO Attachment 2 Formal_Website_Layout_for_Water_Management.pdf

1 Last Updated: July 26, 2026

Overview In this section we will be covering Water Management content found in the center of the webpage between the header and footer. We will be organizing our content the same for each district while keeping unique elements for specific district needs. This will help stakeholders, upper management, and neighboring districts find information that they need easily. We will organize everything in two parts a sidebar on the left “Water Management Data System Menu” and content off to the right. For our landing page, we will have a partial hero banner across the center with a Water management label as seen below (The image will be unique to your district).

For support we have a list of Division Lead for each region. If you have a general question, you can reach out to one of them or the National PDT lead (a full list can be found below). If you have a question on a specific topic such as reports, plots, or migration, there are specialists that you can reach out for that.

Formal Website Layout for Water Management - District Level Content

2 Last Updated: July 26, 2026

Division and National Leads:

Region Technical Lead Focus

National Diana Hanbali WMIST PDT Lead

SWD Charles Graham Web Migration and Branding

NWD Dinh Quan Water Management Data

SAD Troy Weber Coop

SPD Daniel Osborne Reports (RepGen)

MVD Hailey Laurent Reports (iText)

NAD Stephen R Kissock Plots

LRD Tracy Fraley Situation Maps (Dashboards)

Section One – Sidebar Organization

We will be dividing the content into three areas, Mission Essential, Unique to each district, and Contact/Links to Other Districts as seen below. Mission essentials covers the content that is fairly standard across the board, Reports and data. Many districts have situation maps of their region (dashboards). If you do not have one of these, you can simply omit this from that section. To customize the site for your district’s needs, we have a section below mission essentials for this content, “Unique to Each District”. These items include DCP Monitor, Snow Melt, forecasts, and anything that does not fit in the first category. At the end of the list on the sidebar we have contacts and Water Management districts. If you currently have contact information on your sites, you would use this link for that content.

Some districts do not have this on the current site and may choose not to use this. The “Water Management Districts link” We will be providing this page for you. It will be a link to all of the other district sites as a georeferenced layout (District map).

3 Last Updated: July 26, 2026

1.1 List of Mission Essentials (omit what you do not need): Keep the Exact Text as listed below.

This section has the critical items that have a higher priority, reports, data, information for our projects, and status map of our system. We will be placing these items at the top of the list in the sidebar. If you do not use one of the items listed, you can omit that one and move to the next. To make it easy to locate information, we will keep the naming convention and order the same as listed below. If your content does not fit this standard, let one of the district leads know and we will help find a solution for

it. Multiple reports or datasets can be listed in a dropdown menu. An example is listed in the following section.

Mission Essentials Description Project Status Map interactive map of your project, this usually includes real time data (Optional) Water Management Reports mission essential reports that include daily, monthly Project Information Static information about the projects e.g.

https://www.swf-wc.usace.army.mil/pertinentdata/

Water Management Data Realtime data/plots

1.2 Unique to each district (omit what you do not need):

In this section we you be adding items that are unique to your district. A full list of those items can be found below. If you have something that is not on the list, append it at the end of this section. All items must be Water management items only. Related links will be placed in the ribbon at the top (guidance for this will be provided in the Header and Footer handout) https://www.swf-wc.usace.army.mil/pertinentdata/ https://www.swf-wc.usace.army.mil/pertinentdata/

4 Last Updated: July 26, 2026

Unique to each district Description DCP Monitor DCP district information Snow Melt Snow melt products Water Quality Information in water quality at your sites Hydropower Information regarding hydropower Forecasts Forecasted products Hydrologic Query Stakeholder can fetch data from this tool exp:

https://www.swl-wc.usace.army.mil/Data_Query/ Additional Dashboards

(Naming convention is flexible)

Any Dashboard that are not your primary status map

*Name* - Additional Content (Naming convention is flexible)

Anything that does not fit in the above list append at the bottom (this must be Water Management content only)

Things like recreation will be kept on the PAO USACE site and not linked here.

Additional Links Non- USACE links

1.3 Last Items on the list

End of list Items Description Contact Information This will be for your WM contact information. If you have a large team and would like to use a common DLL, this will help distribute the information to the first available

Water Management District Links This will be a standard for all districts and provided by the National Team

All content added to this section will be WM related only. A few of the districts host information for Dam Safety, Levee Safety, Recreation, and Project Office information. If this is currently hosted on your site, contact one of the leads for support, and we will help you organize this. Our goal is to preserve what you currently have and organize it based on the guidance provided.

5 Last Updated: July 26, 2026

Section Two - Header (global level content) The Header will be standard for all districts. The left-hand side will be dedicated to A2W content as seen below. A Search option for the district website will be placed on the right (this is a 21st Century requirement). This will search the pages made by the district only, A2W content will not be included.

The official government banner will be at the top. The Gray section will include the districts name with the “US Army Corps of Engineers” as seen below. While we are migrating over to the new site, place a banner below the gray section indicating changes are being made.

Section Three - Footer (global level content) The footer will be standard for all districts with two areas to customize “Our Mission” and “About this Website”. Fill these in as your district sees fit. The links on the right-hand side will be customized by the district, omit what you do not need. Keep in mind Facebook, X, and YouTube are unique to each district, so make sure they are for your area if you decide to use them. Having this area blank is also an option for the districts.

6 Last Updated: July 26, 2026

Section Four – Supplementing Large Amounts of Information

For water management reports or date, you will have the option to use drop down arrows to consolidate your content. This will be for any area on the website that has more than one item. This will keep the information organized without overwhelming the sidebar.

Figure 1: Drop-Down Arrow for Additional Content

Another option if you choose to use it, will be a page of links to pertinent information/regions. The example below is the list of items for Fort Worths “Project Information”. What you chose to put here is subject to your locality’s needs and requirements.

7 Last Updated: July 26, 2026

Figure 2: Links to Information Option

8 Last Updated: July 26, 2026

If you have 5-10 items, consider creating tiles to better fill the space, as seen in Figure 3

Figure 3: Medium tiles used to link to reports

Third option, if you have a page that has a lot of information and needs the real estate, you can use a there and back function. For this one, you can omit the sidebar and add a home icon/button at the top left corner to return to the home page with breadcrumbs.

If this guidance does not work for your district’s needs, contact your Division Lead for support. We can also set up a working session to go through your site and help with organization. You may run into areas that may not fit the requirements above, so feel free to reach out.

9 Last Updated: July 26, 2026

Section Five - Suggested Steps to Organize Your Content

Step one – Inventory Status and Reduction:

Take inventory of your current pages, see what fits into the mission essential items and what is unique to your district. This is a good time to find redundancies and outdated content that needs to be removed.

If you have Google analytics, use that to determine areas that do not get much traffic. For this initial migration, we will be taking what we currently have. There is no need to create new content to fit into this format.

Step Two – Data Layout and Display:

Once you have your content organized determine how you would like it displayed. If you have a lot of links for one subject like reports, WM data, or pertinent information, determine if you would like to have a drop-down arrow on the sidebar for the content (good for 3-7 items) or a page with additional links (too large to fit in a dropdown). The other option would be a there and back page that omits the side bare to open up additional real estate (this is good for interactive maps and other intricate items).

Step Three – Using Components to Build Out Your Site:

When developing your site, the National Team will have components that are already built for the sidebar. You will omit the items that do not fit your website and append items that are not listed above to the “Unique to Each District” section. If you have question on any of these items reach out to one of the Team Leads for support.

For a list of currently available DISPLAY components see Groundwork:

https://usace.github.io/groundwork/#/ For a list of currently available DATA components see Groundwork-WATER:

https://usace-watermanagement.github.io/groundwork-water/

Step Four - Transfer your content to the new site:

There will be many components already built in React to start this process. If something has not been developed by another district, you will want to be consistent with the USACE branding. Charles Graham oversees Migration and Branding; he can assist with how this should be put together. The National Team will also be hosting webinars on commonly used items.

Step Five - Ensuring the content is what the end user needs:

We will continue periodic checks with PAO to ensure content is user friendly. We can provide a scan for compliance as needed (request this through your Team Lead). This should be done before launching the site.

https://usace.github.io/groundwork/#/ https://usace-watermanagement.github.io/groundwork-water/ https://react.dev/learn

10 Last Updated: July 26, 2026

Once we get the foundation set up, we will be inviting the public to test out our new sites. This is expected to start by next April (2025).

We will overlap our sites for at least 6 months to get stakeholders, public, HQ, ancd other interested parties time to acclimate to the new content. (May-October 2025) During this time, you will add links to your current page (www.<dis>-wc.usace.army.mil) to the new one (water.usace.army.mil/<dis>) and add banners stating the upcoming changes.

We will create various webinar to help assist in the cutover process to the new site. s Consider sending out an email to let stakeholders and other third party contacts know we will be making changes to our websites and transitioning to a new domain.

During this process, if you have any questions or need help with anything, reach out to your team lead for help. You are also welcome to request a workshop on any specific topic. Email Diana Hanbali, National Web PDT Lead with any concerns to request.

Additional Resources:

For a list of currently available DATA components see Groundwork-WATER:

For a list of currently available DISPLAY components see Groundwork:

QUICKSTART REACT

Link to all of our How Tos tutorials in the National Teams Channel:

TDL-CESWF-EC-H-National Web Development | How Tos | Microsoft Teams https://usace.github.io/groundwork/#/ https://dod.teams.microsoft.us/l/channel/19%3Adod%3Aaf62b73422bb4bd982ee8f606d430a34%40thread.skype/How%20Tos?groupId=8691da4e-313c-47f3-9ca1-92d4c0942678&tenantId=fc4d76ba-f17c-4c50-b9a7-8f3163d27582

11 Last Updated: July 26, 2026

Report Generation – getting started onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-

CESWF-ECH-

Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Start ed%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1- 30F6-48FB-83B5-C6F14B0B7079%7D&end onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-CESWF-ECH-Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Started%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1-30F6-48FB-83B5-C6F14B0B7079%7D&end onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-CESWF-ECH-Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Started%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1-30F6-48FB-83B5-C6F14B0B7079%7D&end onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-CESWF-ECH-Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Started%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1-30F6-48FB-83B5-C6F14B0B7079%7D&end onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-CESWF-ECH-Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Started%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1-30F6-48FB-83B5-C6F14B0B7079%7D&end onenote:https://usace.dps.mil/sites/TDL-CESWF-ECH-WebDevelopmentWorkshops/SiteAssets/TDL-CESWF-ECH-Web%20Development%20Workshops%20Notebook/General.one#Repgen%20Webinar/Getting%20Started%20Guide&section-id=%7BB0331732-DBB4-47F6-9E4D-06BFD68B2EB8%7D&page-id=%7BBAE153A1-30F6-48FB-83B5-C6F14B0B7079%7D&end