The new WhiteHouse.gov website is built in WordPress, and takes advantage of many recent developments in WordPress to craft a future-forward site.
By reverse-engineering the site, we can see how recent trends, best practices, and a commitment to transparency and accessibility has informed much of the decision-making that went into the site in terms of the intentional deployment of various plugins and practices.
Tools like Built With or WhatWPThemeIsThat allow for a glimpse under the hood for tech deployed by the developers, but don’t tell the whole story, so some of this post is based on my prior experience with a number of different tools, with an eye to user experience.
This theme is a custom theme called White House, Version 46. Though it looks like a completely custom theme (the stylesheet is complete in itself, not referencing any parent theme), the effect is that it also looks like it could be a customization of the TwentyTwenty or TwentyTwentyOne theme. It looks like it incorporates the overlapping block patterns which debuted with TwentyTwentyOne (see the overlap of the image over the text block in the screen capture below). It looks on the surface like it could also use the Twentig or other white label plugin to allow for various page layouts which include featured images. On the interior pages, the text width in a centered column with plenty of margin on either side is also standard of the TwentyTwenty/TwentyTwentyOne default layout. Other pages like the Administration Overview make use of other block-editor capabilities in terms of using interactive images to access page content. Though a custom theme, the general layout is achievable using free tools available to anyone with a WordPress site, rendering the effect highly relatable and within reach of the average WordPress website owner.
As one can see from the same screen capture above, there’s an accessibility widget (WP Accessibility) on the left that allows for viewers with impaired vision to change the contrast and text size. Additionally, the site’s Accessibility Statement emphasizes the commitment to accessibility, inviting feedback.
By eliminating popups and speedy, fancy or uncontrollable animations altogether, the site eliminates the risk of causing seizures, and keeps the user in control. At the same time, it provides an interactive user experience: the site responds haptically (ie upon the mouseover of, for example, items on the Administration page), rewarding interaction with responsiveness of movement.
The Spanish language switcher is also a break from the prior administration and return to the Obama-era site – enabled by the Multilingual Press plugin, which, among other options like the WPML language plugin, allows for deep customization and hand-translation (great!) of the content. I’d love to see the site offer additional languages, (see the State of Oregon covid-19 site (though it uses a Google Translate automated translation widget) for an example) and to get more of the site content into the other languages (at this point, the Contact form is only available in English).
Beyond the typical plugins for analytics, troubleshooting, Font Awesome font customization, and Gravity Forms, the site uses one called CK Editor, which allows for easy cutting and pasting from word processing programs like Google Docs – often the formatting gets dropped when one tries to do this on a typical WordPress site as the text formatting is translated (or not) into html. This would make the editing experience much easier for anyone who needs to work on the site without a lot of html experience. It also allows for easy export of the site content into PDF format, which makes archiving and use of the information for different purposes a breeze. Internally, the site is built with consideration for the content creators and maintainers.
Room to grow:
The site also looks set up with room to add more robust information in some specific areas – I saw a Covid-19 widget by the WHO which is not yet deployed in a public-facing manner, but this would allow for current Covid-19 statistics and information to be ported directly from the WHO into the site’s front end using a widget.
Additionally there’s functionality to include Twitter feeds to add real-time Twitter-based updates.
In line with the new administration’s proclaimed devotion to transparency, the Privacy Page is incredibly and unusually detailed, providing not just the standard information but addressing an array of web standard frameworks. It looks like they also had a legal team involved.
I haven’t seen a cookie consent widget, though this may be localized to only appear in countries which enforce cookie consent laws at this time, like the European Union. When I used my VPN to access the site from Berlin, no Cookie Consent notification appeared.
The role of red:
The top menu rolls over into red when one mouses over the navigation or other links. Generally, it’s considered risky to put things people should click on like buttons or menu items in an aggressive red, as people generally associate red with “stop” and danger. As a powerful color, it’s important to deploy it thoughtfully. On the national seal, red symbolizes “hardiness and valor.” In light of this, it’s interesting to see how red is used on the site and becomes associated with action on the part of the user, though the buttons to submit and sign up for news reward the user with a shift in the shade of blue.
The other reddish accent color used (ie for drop caps and pull quotes) is more of a warm brown. Yes, those are the exact colors I found in the code.
On the Trump administration site, red was used as an accent color untethered from user interaction, and some section headings have stars which are a deep yellow.
Other user experience considerations: Biden site / Trump site / Obama site:
For this section, it’s worthwhile to open the sites of all three administrations in different browser tabs (links below).
On the Biden White House site, the edges of images are rounded, creating a softer and friendlier feel. Orange-brown and cream colors add warmth. This stands in contrast to the sharp corners and darker colors of the Trump White House site. Even the favicon (browser icon) of the Biden site is rounded.
In contrast to the haptic elements on the Biden White House site (moving images, links which change color), the most interactive the prior Trump administration’s site got was that moused over links became underlined, but remained otherwise inflexibly fixed in terms of color. The colors featured most on the Trump site are dark blue and grey – both colder colors.
Also, while the Trump administration site featured a very large hero image (seemingly always featuring the former president) on every single page, the interior pages of the Biden administration site often feature content alone, or content alongside an image.
The Obama administration site (built with earlier and thus less robust web technologies) had images with sharp corners and red as an accent color, though still a rounded main logo. One central difference between the Obama and Biden sites is how incredibly information-dense/text-dense the site of the former is. The text is in general really small and dense – which was not so good for accessibility and might have been intellectually intimidating to the casual visitor. The images on the site all serve to support the text content, often appearing alongside the content. There is a lot of variability – even experimentation – in terms of the layouts of the internal pages. Also, it’s not mobile-friendly, but again, we’re talking about a much earlier era of web development.
The content at this point is clean and concise. However, some telling trends have already emerged which again emphasize inclusivity:
The “First Ladies” section has been renamed “First Families.”
The site’s contact form collects voluntarily demographic data, which includes a widened gender pronoun spectrum. The contact form is not yet available in Spanish, however.
I did not find a land acknowledgement on the site, which also would have been nice to see.
By now, many people have seen the Easter egg in the code inviting those who view it to apply to work for the new administration – a clever touch; being developer-friendly never hurts. 🙂
By utilizing easily-available best practices in terms of accessibility and committing to transparency, the new WhiteHouse.gov site takes a stride forward from the sites of prior administrations and sets an example in terms of what users can and should expect in terms of experience with governmental and other informational and service web tech, demonstrating responsive and responsible website development that puts information and, through the user experience interface, power into the hands of the users. Though the site has room to grow in terms of inclusivity, it offers multiple channels to submit site feedback and otherwise connect, which could lead to extended inclusivity.