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
Results: Dynamic and Focused Content
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.
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.
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.
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
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.