The Problem: An Outdated and Unwieldy Site
The Informatics and GIS (IGIS) Statewide Program was established in 2012 to meet UCANR's growing need for geospatial research and technical training. We created our website using ANR's Site Builder content management system, which was state of the art at the time. Like many programs, our website grew organically over the years, until we woke up one day and discovered we had over 70 subpages!!
The size of our site made it not only unwieldy to navigate, it was also difficult to maintain and keep relevant. You know the drill: multiple subpages that you forgot about; no one updating; a general sprawl of information that only a few knew how to navigate. With feedback from UCANR Strategic Communications, we came to realize that our site was highly focused on our own needs and that of an internal (UCANR) audience. Clearly, we needed to redesign the website with a more external focus, and make it easier to navigate and get information. We did a collective “Sprint” during the COVID-19 shutdown, and revamped the site.
Goals for the New Site
Rather than merely do a superficial makeover, we decided to reorganize our site from the ground-up. We started out thinking about our communication goals, and the needs and interests of our clientele. Some people come looking for a specific resource, such as a software license or Tech Note. Others come looking for info about our upcoming training programs, or to learn more about our GIS and Drone Services. Still others just want to see what we do, and how we fit into ANR's overarching program umbrella.
Our new site is organized around four themes: Research, Services, Training, and Resources. To convey the breadth of what we do, we decided to develop “cards”, or nuggets of information about our work. A common thread in everything we do is connecting-the-dots, so we decided to make heavy use of tags and hyperlinks that connect our work to ANR's Strategic Goals, Public Value Statements, and our collaborators around the state.
Solution: Customization via Site Builder
Through conversations with the ANR Communication Services (CSIT), we decided to continue to use Site Builder and the tools it provided. In 2018, ANR conducted a redesign of the main ANR homepage. As part of this redesign, several new website elements, or assets, were created within Site Builder. However many of these new assets were not available to subpages like our own. So we worked with CSIT to allow us to create custom style sheets (CSS) and lightweight programming (Javascript) files to drive our new website and recreate some of the new assets that were created for the UCANR site.
Results: Dynamic and Focused Content
Using the new Site Builder template and a small amount of CSS and Javascript, we've developed a site with several custom features.
Custom Section Dividers
To help visitors navigate the home page and find the content they're looking for quickly, we developed attractive page dividers that split the landing page into sections. Under the hood these are simple DIV tags with custom background and color attributes, and are super-easy to make.
Icon Buttons
Another visual enhancement that makes a web page look less generic is achieved by using custom icons as buttons. We modified some standard clipart images to use as links on the ‘Client Services' toolbar which take users to different parts of our site. For a little branding flourish, we used colors that match the ANR palette, and created an ‘inverse' version of each images which appears when you hover over it. This is all very standard HTML and easy to implement.
Integration with Google Sheets
Over the past couple years, we've migrated the bulk of our program planning and tracking into Google Sheets. Nearly everything we do - workshop offerings, drone flights, service projects, publications, surveys - are recorded in a collection of easy-to-update Google Sheets. For this project, we created a new sheet to hold content specifically for certain parts of our website - including the project cards, metrics about our training and GIS services, and even quotes from our clientele.
We bring this stuff into our website via the Google Sheets API and some simple JavaScript. The key to maintaining data security is to not draw from your source sheets, but rather employ a special ‘aggregator' Google Sheet that pulls in data from other (private) Google Sheets using the IMPORTRANGE function. It's very effective, and makes maintaining our site a lot easier.
Keeping Things Fresh through Randomization
To avoid stale content, we built in some randomization. Every time you come back to the home page, or refresh it, the video loop, project cards, and other content changes. As we add more content on the backend, the selection will be even more varied, making every visit seem new and fresh.
Embedded Video
We've been looking for a way to show off some of our drone video for a long time, but the standard embedded YouTube player just wasn't cutting it. After creating a custom space for a video loop on the homepage, we used a command line utility called ffmpeg to clip, resize, fade, and encode some of our favorite drone video clips at a low bandwidth (see if you can guess which RECs they come from!). Adding the videos to the page was super easy using the standard HTML5 video tag, and getting them to auto-play and loop simply involved a couple of extra arguments. The video files live on our server, and the file names are randomized, so every time you refresh the page a new video starts playing.
Encoding video for webpages is standard practice these days, so to make life easier for others (and ourselves!) we typed up this workflow in a new TechNote entitled Encoding Drone Video for the Web. In it. you'll find a link to a Google Sheet that reduces the pain of using ffmpeg by generating the command line for you. Simply substitute your own video file name, start & stop times, and crop parameters, and the command is generated for you ready to copy-paste into a command window.
Modularizing Content for Flexible Placement
Knowing that we'd inevitably move things around on the website, we modularized how content comes into the page. Although not quite as user-friendly as Site-Builder's built-in assets, we bundled all the Javascript functions and CSS styles into chunks of HTML that can be copied and pasted anywhere we want it to go. This includes a ‘Counter' container that imports and formats count data from Google Sheets, a ‘Card' container which brings in snippets of research and extension impact with hyperlinked tags to UCANR Strategic Goals and Public Value Statements, and a ‘Testimonial' container which renders a random selection of quotes from our clientele. Being modularized, we can move these content containers within or between pages in a few seconds.
Conclusion
Good site design starts with thinking about your visitors, your content, and your communication goals. Transitioning to the new Site Builder template was a good excuse for us to jettison eight years and 70 pages of accumulated web content, and think about what really matters. We really like the new Site Builder template, and managed to get the look and feel we were hoping for with a modest amount of HTML customization and Google Sheets integration. Web pages are never ‘done', but future development will be a lot easier now that we have the building blocks in place. And we'd love feedback! Check out our new site if you're interested, and contact us if you have thoughts or would like to learn more.
Author - Director, Statewide IGIS Program, Professor and Cooperative Extension Specialist