Modern Web Design
I recently stumbled upon a website, SAFE House [archive] [screenshot], which provides a safe place to live for children in abusive families. While I like what they're doing, one particular design aspect caught my attention, and not in a good way. As I continued thinking about this design aspect, I started to think about other common web design issues, which inspired me to write this article.ESCAPE
So, first off, what was the issue I noticed? Was it the fact that they quite obviously used a wix.com theme I've already seen a thousand times? Nope. Was it the fact that the header bar on their desktop site takes up way too much of the screen and isn't even positioned properly? Nope. It's their little red "escape" button, which is intended to allow visitors to conceal their use of the site, but instead only makes things slightly more dangerous for visitors who actually need it.
The point of the aforementioned escape button is to provide visitors a quick way to conceal their activities. This makes sense, considering abusive parents might not like the idea of their kids leaving. Their kid leaving means they can't hurt them, and the inability to hurt their kid takes away their sense of control. As such, the kid trying to leave might be interpreted as an offensive and selfish act. Yeah, it's fucked up, but some people actually think that way.
The problem isn't with the idea, it's the execution. The button works reasonably well on desktop, if you overlook the fact that the header bar takes up half the screen on a standard 1366x768 display. However, it takes about a second to load the Google homepage, during which time the original site is still clearly visible. The other issue is on mobile, the button scrolls with the rest of the page. This means a user would have to scroll all the way up, click the unnecessarily-small button, then wait said second for Google to load. For obvious reasons, neither case is exactly great for the intended purpose.
onclick event that hides the page content immediately, while loading the content of its target (in this case, Google). Also, make sure the button is absolutely massive, so as to be easily accessible by even the largest of sausage fingers. The source to do this is pretty simple; just embed the following snippet somewhere in your page:
Note: Some versions of Safari on iOS seem to hide the browser's header bar without adjusting the HTML viewport. This leads to the button becoming partially-hidden. While I would consider this a browser bug and not a bug in my code, this nonetheless needs to be accounted for. Possible fixes include:
- Moving the button down slightly. This will give the button a small bit of room to move without going off the screen and becoming hidden
- Moving the button to the bottom of the screen, instead of the top of the screen. This works on the same principal as the first fix
But this article is about more than just designing the perfect "escape" button for a website (especially since alt-tab, alt-F4, or win-D can all work just as well). So, after careful consideration (and by that I mean this is off the top of my head), I bring you:
NobodySpecial's cardinal sins of web design
- 3rd-party content, including content hosted by CDNs
- Any 3rd-party content adds opportunity for users to be tracked, and infrastructure to be hijacked. And while HTML includes security options for detecting tampered-with CDN-hosted content in the user's browser before loading it, this still doesn't address the issue of user tracking. As a general rule, anything 3rd-party should be (a) mirrored as a first-party resource, or (b) not used at all
- 3rd-party captchas, including reCaptcha, and hCaptcha
- CloudFlare, or other similar services
- CloudFlare inserts itself as a man-in-the-middle (MitM) between the user and the website they visit. This requires users to trust a 3rd-party simply to visit a website. Of course, users rarely get the opportunity to know whether a site is using CloudFlare unless they specifically check for it on every site they visit. This undermines the user's ability to trust the websites they visit.
- Webs, Wix, Weebly, GoDaddy, SquareSpace, etc
- While these services make it easy for non-technical people to create websites, they also violate every design principal listed on this page, as well as every design principal listed in my previous article. They undermine the very foundation of a secure, decentralized, and open web that respects users. They also make websites look boring - spend enough time dealing with web development and you actually learn to identify what themes websites use at a glance. Thanks to these services, websites are bloated, slow, non-private, insecure, untrustworthy, uncreative, poorly-designed, and boring.