As most are aware, the EU GDPR privacy rules specify data privacy regulations for websites, information about cookies and data ownership.

But what about working with data overseas where the end user is not directly involved?

What’s the best way to handle data and navigate data privacy laws when collaborating across the pond?

For example, if an entity in the EU wants help with a website, a mailing list, or a CRM setup from someone like me who is located in the USA, where I would have access to end-user email addresses and other information, do we need to do anything special? The answer is definitely YES. But the good news is that the steps are fairly simple.

There are a couple of options outlined in this highly informative article which covers a number of organization types and scenarios.  The EU-based company can include language in their policies that end users agree to about overseas data processing, but often this is a one-off need where it end user consent is impractical to secure. These solutions assume that end users have not explicitly consented.

One solution (more for corporations) is for the US-based counterpart to apply for Privacy Shield Certification.  The process is fairly easy, one has to provide one’s own privacy policy (maybe necessitating hiring an attorney to draft or proof), and the application for the certification costs $375.00. Once certified, the provider can work just like an EU-based company with the type of data specified by the certification. This is a good option for large companies which work routinely with EU-based data.

The second is for both parties in a transaction to sign a Standard Contractual Clause (SCC). Any kind of business can use this.

Here’s an example of the clause both my client and I would need to sign if they wished to hire me to work on a website or mailing list that collected personal information such as email addresses.  For independent contractors with occasional overseas clients, this fits the bill better.  It adds a small additional step to the contracting process, but the peace of mind and privacy protection it affords is more than worth the trouble.

Of course, if the systems where the data is handled lack up-to-date antivirus software, backup software, or insecure browser software, it’s not worth much, but the Standard Contractual Clause provides incentive to use every possible precaution to safeguard and responsibly handle the data involved.

Cross-pond collaboration raises interesting queries, but is more accessible than it may first appear when reading about the GDPR and admirably tight EU data protection laws.

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.

Theme:

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.

Accessibility:

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.

Languages:

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).

Additional plugins:

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.

Privacy:

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.

Content:

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.

Around the end of the year especially, domain scammers tend to proliferate. The below examples arrived via snail mail, but occasionally similar notices escape junk email filters.

If you’re unsure, here’s how to tell if a domain renewal notice is a scam or something you should pay attention to and pay up. If it is for real, you definitely want to pay it and not risk losing the domain where you’ve staked your business and advertised on business cards and everywhere else your clientele goes to find you.

1. First, search your documentation for where you originally purchased your domain. Often, this is where you built your first website. Domain names aren’t necessarily (and don’t need to be) moved to new hosts along with web files so may not be the same as where your website is currently hosted. If you want to move your domain to your current host for convenience, the process usually takes a week and you’re required to renew for an additional year at the new host.
2. If you don’t remember where you initially purchased your domain name, go to the domain WhoIs lookup: https://www.whois.com/whois
3. Typical domain renewals don’t typically cost more than $25, so if companies are asking for much more than that (the examples below ask for around $180 per domain) that’s a pretty sure tell that it’s a scam.
4. It’s usually not snail mail. Typical renewal notifications come via email, with a warning arriving 30 days in advance, additional notifications as the deadline approaches, and a final reminder on the deadline. Make sure these don’t go to spam and don’t rely on these notifications alone; put your renewal date for next time on your calendar in advance. If you’ve lost track and wonder when your renewal is, the WhoIs link in step 2 can tell you.

The whois file in step 2 above tells you where your domain is registered (and renewed), where your site is hosted (or if it’s routed via a CDN) and provides publicly available details about ownership and contact.  If it matters to you, you can hide this information while renewing your domain via some domain protection add-ons. Some companies, like Namecheap, hide your personal contact information (the WhoisGuard service) for free.

Usually, the name listed as the Registrar is where your domain will be renewed. Occasionally domain companies register or shift registration to a third party without necessarily telling you, so you may need to do some sleuthwork.  For example, FastDomain Inc. is the registrar for a number of domains purchased through Bluehost, which can still be renewed via Bluehost.  Look for the domain Registrar WHOIS server in the Raw WhoIs Data at the end of the WhoIs listing.  If you don’t recognize the company listed, definitely find them online and write to them.

One scam example:

 

Another scam example:

 

As many venues are considering plans to partially or fully reopen or to organize events, many companies may need covid-related liability waivers for the first time, or to adapt existing waivers with new information. This allows for the opportunity to rethink the standard PDF waiver and to bring the process into greater ease of use and to save time with online automation; no pens or paper need change hands, and the process of administering a waiver need not bring administrative headache.

The challenges:

a) Sites need secure, user-friendly forms that work on both desktop and mobile.  Typically, waivers and other legal docs are completed and submitted in PDF form.  However, even standard, fillable PDF forms are not navigable on mobile devices. It’s unwieldy and inconvenient for people to need to download and fill PDFs and then upload them back to a site – especially on mobile devices, and especially when this process needs to happen in a hurry and on the go.

b) Where should the completed waivers go?  It’s unreasonable to have all waivers sent to an client email address to be manually filed away, which is where most standard web contact forms send to. Your website should save you time, not add a layer of administrative tasks. It’s also not very secure to store them entirely on one’s website; if the site goes down or the files become corrupted, all of that data can be lost. Also, they take up server space. Finally, someone should not need to login to their website every time they want to make sure everyone in a class or at an event has completed a waiver. Data about who has completed the form and other form details need to be at the fingertips of those who need to use that data in the course of their work. Thus, the forms and data about who has completed them need to go to external storage, like Google Drive/Google Sheets.  Google Forms is an example of a service which allows front-end file upload to Google Drive, but for someone who has completed a waiver to upload a completed pdf to a Google form, one needs a Google email address – unrealistic to expect of everyone who needs to complete a waiver.

c) What happens after submission?   In the case of waivers and other legal documents, signees often need a copy of of the document they’ve signed. Typical contact forms just show a “your message has been successfully submitted” notification.

 

Recently, I had a client whose waiver form needs presented all of these challenges.

First we looked at a few 3rd party Doc signing services like Docusign or HelloSign/HelloWorks, which sometimes offered good security as well as a good mobile presentation and convenience, but there’s not a good integration to Google Drive without purchasing a super-expensive enterprise-level API subscription, which was unrealistic for a small or medium-sized business.  Leaving the data on the service would make it difficult for the client to access and manage information on a daily basis. There were also questions about how the signee could access the forms they’ve signed. It was unacceptable on all fronts that the forms would have been vaulted in the black box of the 3rd party service.

 

The solution:

This client already had a secure and robust WordPress website infrastructure, which made it easy to add a few pieces along with automation to place the information where it needed to go, and to keep all of the data within the client’s control.  Within 3 hours, we established, completed troubleshooting on, and published an optimal solution.

A secure, user-friendly form that works on both desktop and mobile:

We rewrote the PDF as an mobile-friendly online form, which, using the conditional logic a higher-end form-builder brings to the table, allows users to view and complete the fields that pertain only to them, thus avoiding needless visual clutter.  The form is also auto-populated with easy date-picker fields, and includes e-signature areas which play well on touch screens.

Automating the form to send to external storage: 

Next, we used Zapier to connect the webform to external storage, which sends the form contents to a spreadsheet for quick, sortable reference about who has completed it along with their contact and other form information.

A takeaway for my client’s clients: 

Finally, we incorporated an application which turns the completed waiver form into a PDF file which is instantly available for download in the “form successfully submitted” notification.  The PDF is also automatically sent to the the signee’s email address for their personal records, and is made available to the waiver venue.

 

It gets better: this waiver can be seamlessly integrated into the client’s other forms, so that, for example, three complex processes of lesson sign-up, waiver-signing and payment can all happen on-site and within the flow of one online form.

Need help with an online waiver form? Hit me up.

Many businesses and individuals may need to quickly build or expand an online presence to sell goods online as we endure lockdowns and quarantines.  WordPress offers a great way to get up and running quickly in a way that you can continue to scale. Here I offer a quick-start guide for spinning up a basic online presence on wordpress.com, one which is easily transformed into a self-hosted site which can later be built out by a developer with additional functionality ranging from eCommerce to paywall content, learning management systems, and membership sites.

If you need a presence now, this sheet compares WordPress with other available builders, walks through how to get up and running, and includes resources which may help you to develop your content along the way.

Adult Community Center Talk – Stoffel handout

see also:

How to build out a portfolio site on WordPress.com