Top 13 Things Not to Do When Designing a Website Anno 2020

Inspired by the endless ingenuity of designers of annoying websites, I am continuing the tradition to publish an article like this every few years. The original one, last edited in 2010, was succeeded by a new version in 2014, and then another one in 2017. Here is the 2020 edition, now also superseded by the newest current edition which you may want to read instead.

My hope is that many people will read this and consider it when making or updating their websites. Or at least complain to webmasters if they encounter it in other sites. But the main purpose of this text is mostly to spit my bile and vent my (and many others') frustrations. This means it will contain a large amount of sarcasm, and may seem threatening or insulting to sensitive readers. Read it at your own risk and don't come complaining afterwards. It also means it are my personal opinions. If you think you have good reasons to do any of the things mentioned here, just go ahead. After all, I'm not the Pope or anything.

As always, the points are sorted roughly from most annoying and most relevant to least.

Dropped since the previous version

• Resize the window upon loading the page: this is not entirely gone but usually it only still occurs on the more dodgy kind of websites one should not be visiting anyway.
• Put frantically flashing or shaking things on your site: this unfortunately is not entirely dead, it has merely evolved to new nuisances like video backgrounds.
• Prevent right-clicking: this unfortunately is not banished from the internet either, but I simply had to drop something from the list to be able to add something new.
• Use anything that only works on a certain operating system and/or browser: luckily most website designers now understand that this is prehistoric and a very dumb thing to do.

Infinite scrolling webpages

This is one of the most prevalent fads that started around 2012 and is still going strong in 2020. I load a page and see no indications of page numbers or how much items there are. The only indication is a moderately-sized scroll bar in my browser. I happily start scrolling, assuming I can quickly get an overview of the entire page. But when I almost reach the bottom, it suddenly sprouts new items and the scroll bar jumps up. As I continue scrolling, this happens over and over again. It never ends and I get the feeling I am inside Zeno's paradox, or one of those feverish nightmares that seem to have no end. The phenomenon is called ‘infinite scrolling’ and some believe it is the logical evolution onwards from pagination. I beg to differ.

In ancient times people stuck paper together until it was one immensely long ribbon. Terribly unwieldy, therefore they rolled it up into scrolls. Accessing information inside the scroll involved transferring paper from one roll to the other until the desired information showed up. Unpractical, time-consuming, and difficult to estimate how much information was in a scroll. Finding a particular section in the scroll was a chore.

Then people invented books with pages. Scrolls got out of fashion very quickly because one can bookmark in a book and jump to a page immediately after looking it up in an index. A similar evolution happened with audio and video. A cassette is basically a scroll in a box, and has the same problems. This is why since the advent of random access media like CDs, hard drives, and solid-state memory, almost nobody uses cassettes anymore.

The web never had a prehistoric sequential data period. It has always been a collection of separate pages with hyperlinks. Bookmarking a page used to be trivial, and a quick glance at the scroll bar when opening a page revealed how much information it contained. Jumping to the oldest entries was trivial: just go to page 1. For some reason web designers decided this lack of a prehistoric period has to be compensated for. To be trendy and hip, a modern website must now mimic ancient text and multimedia storage systems. Just imagine that when viewing YouTube, you need to fast-forward through hundreds of videos of kittens and people performing dumb antics until you find what you want, as was the case with a VHS tape. Why would something similar be justified for text-based content?

It is not hard to figure out where it all went wrong and why history seems to be going in reverse here. The two main culprits are touchscreen devices and the general inability of humans to cope with more than a single paradigm, or perhaps utter laziness of web designers. It is rumoured that Twitter was one of the first services to introduce infinite scrolling. There it does make some sense because tweets are short and nobody really wants to scroll beyond the first dozen newest tweets. On many other websites however it doesn't. Infinite scrolling also somewhat makes sense on touchscreen devices that can only be controlled by pushing and swiping one's meat sticks across a display. Scroll bars are awkward on such devices and eat away the often scarce screen real estate, so Apple Inc. got the idea of almost entirely obliterating them. On a device with the aforementioned limitations this was an OK trade-off between ease of use and ease of retrieving data. On a desktop PC or laptop it makes no sense. If you want to offer infinite scrolling on mobile devices, fine. But please at least give people with less constrained computing devices the option of pagination.

Next to making content difficult to find, infinite scrolling pages also have a risk of choking the browser. Ironically, this risk is highest on mobile devices which generally have limited computing power compared to a desktop PC. Therefore the option to view content in paginated form is useful even on a mobile website.

Infinite scrolling is also horrible for visitors with reduced accessibility. I don't even know whether screen readers can cope with it, maybe they will only present the first chunk of loaded data. Even if they can keep loading more content like a regular browser, it must be pretty horrible for anyone with accessibility problems to find anything in the endless flood of data with no means to jump to a particular part. Again, it will be similar to having to find a song on a cassette of which you don't even know beforehand what is on it and how much.

If you still believe infinite scroll is the best thing since sliced bread, this presentation by Dan McKinley shows what can happen when blindly making the assumption that infinite scroll will improve your particular website just because it seemed successful for others.

Trigger pop-up or pop-over ads or nag screens at certain moments

Now that most browsers successfully block pop-up windows, the arms race has moved towards ‘soft’ pop-ups or so-called ‘pop-overs’ that are incorporated in the websites itself, by means of HTML elements. The latest fad is to either wait a specific time after the user has loaded the webpage, or moves the mouse outside the tab or main window, and then shove a HTML-rendered overlay in their face. The overlay will either be a nag screen not to leave the website or subscribe to something, or it will just be a classic ad. It uses a glass-screen effect to prevent the visitor from doing anything before the pop-up has been dismissed.

This is yet another type of nuisance that will prove counter-productive in the long term. I do not want to be interrupted while I am reading an article. And when I move the mouse outside the window, I am not necessarily planning to leave the page. This gimmick gets especially old if the website cannot remember that the pop-up has already been shown a few times during this same browsing session, and it keeps on annoying the visitor who has already clicked away the obnoxious thing five times. I wouldn't mind if this kind of pop-up is shown once, but if I have dismissed it twice already, it surely is not likely that I'll fall for it the third time, so please stop trying.

Video backgrounds / spontaneously moving layouts

Oh HTML5, what have you done? This is another example of: “it is not because it is technically possible, that it is a good idea.” You probably know what I'm talking about: upon opening a page, the entire background starts moving because it is simply a huge high-resolution video file. There is often no way to stop it, or the button is hard to find… as is anything else amidst all the moving stuff.

Now that this feature is widely supported, it has become trendy to use huge full-screen videos as backgrounds on main pages and sometimes even deeper pages. At some point, the Chrome browser had a toggle for autoplay, which was great. A bit later however, they thought it to be sufficient to always prevent autoplay on videos with sound while allowing it for muted videos, hence they removed the user-configurable option. This has left the floodgates open for stupid video backgrounds.

I have written an article about web graphics ages ago, back in the days when animated GIFs were the only means to animate backgrounds. Even then it was obvious that a non-static background is an absolute no-no except on gimmicky pages in rare circumstances. Your website's home page is, hopefully, not a rare gimmicky affair, is it? Moving backgrounds are damn annoying for multiple reasons, the first of which is of course that it is distracting. When I want to buy RAM upgrades, I want to select my computer model from a list and get the list of compatible modules. I do not want to play a game of finding this list amidst a sea of flashing moving garbage. It is OK to add moving elements to a page, but they must not cover more than like 20% of the area, must stay in place, and must be easy to turn off.

Another reason why this is annoying, is that it eats bandwidth and CPU or GPU power. Battery life is precious, so I hate it when someone runs away with it for no good reason. I have seen this fad come and go on a major bank website, without any doubt they removed it after many complaints. It came back after a while however, apparently the marketing idiots truly believed it was a good idea. I still see this stupid design trend pop up on recent website overhauls, so the wisdom of it being likely to anger customers, has not seeped through everywhere. Hence this fad deserves to be up high in my ranking of things not to do when designing your website.

A slight variation on this, is advertisements or other elements being refreshed automatically without any user interaction, and causing the layout of the page to suddenly change because the refreshed elements have a different size than the previous ones. Is there any need to explain why this is annoying? Just imagine someone snatching your newspaper or book out of your hands, cutting it up in a split second, and handing this mixed version back to you. Don't do this. It is only OK to replace elements on a live page, if this does not cause anything else to move.

Block ad-blockers (i.e. use an ad-blocker-blocker)

This has become a noticeable trend in 2016. Quite a few internet users nowadays rely on ad-blockers to remove the often obnoxious advertisements that make it a nuisance to view webpages. Some websites responded by incorporating ad-blocker-blockers in the pages. A JavaScript checks whether certain ads have been loaded, and shoves a nag screen into the visitor's face if this test fails, prompting to either disable their blocker or just bugger off. I fail to see why this could be a productive strategy. Those people who install ad blockers are generally also the kind of people who will never click an ad anyway. They install those things because ads annoy them. Sane people do not spend attention on annoying things. Still, this obvious fact does not seem to deter website owners from trying to force even those people to load their ads. The only explanation I have for this, aside from possible blatant short-sightedness of who made the decision, is that apparently some advertising networks are stupid enough to pay revenue based on the number of times an ad was viewed. This can be the only reason why forcing ads onto people who will never click them, can still produce revenue. This is a very bad economical model. An ad is only worth something if people click on it, and even then it is only really certain to be worth anything if the visitor bought something.

If you scroll down to the bottom of this page, guess what you will find—if you are not using an ad-blocker—that's right, an ad! I don't give a damn if people block those ads. They produce enough revenue to cover the hosting of this website, which is the only thing I care about. The mere fact that the ad is positioned on the page in a way that would make advertising ‘specialists’ scream, already shows that I believe forcing people to watch advertisements is counter-productive. Initially I placed the ads there with the specific intent of limiting the income I would get from them, because the tax system in my country is so messed up that I might get into trouble if those ads would make a considerable amount of money. Yet, I think this kind of ad placement is not that bad at all. Think about it, when is someone more inclined to click an ad: when it is at the start of an article they would like to finish reading, meaning the ad will be scrolled out of sight by that time, or when the ad only appears just at the moment when they actually finish reading and don't immediately know what they'll do next? “Hey, that looks interesting… click!”

Grey text

Mobile websites that still look like mobile websites on a desktop browser

I see an increasingly frequent occurrence of websites with humongous text as if the page is intended for toddlers, with the same kind of nearly endless scrolling vertical lay-out that I used on my very first amateuristic website back in 1997. Using such layout with big clunky page elements is OK if the website is meant specifically for mobile devices but I have seen this kind of lay-out on a promotional page for a desktop computer application! Here's another example. Those pages remind me of my very first books when I was learning to read. They are webpages about Mac OS X software, hence people will mostly be viewing them on proper computer monitors. The “tap to hide sidebar” gives it away: the site was designed for mobile devices, even though it has content pertaining to desktop machines. This is just as bad as videos in portrait mode, awkward and only suitable for viewing on the smartphones of people too lazy to rotate their screen 90°.

Please provide a paginated alternative for desktops, with normal-sized text when the website is not exclusively geared towards smartphones and tablets. Making one's webpage look good on any device with any screen resolution is not rocket science. A bit of googling and StackOverflowing will get get you a long way.

Bury the main content inside loads of useless elements

What bothers me a lot about the much-hyped era of “web 2.0” is that it has spawned an endless series of very similar websites where form is favoured over function. There is the typical blog with some photo at the top, which might be intended to give the website an identity. Unfortunately this identity gets completely lost due the site template being used at a gazillion other sites. Even if the photo was made by the authors themselves and is not a stock photo, it obediently follows Photography 101 rules, making it utterly forgettable like the rest of the site.

Then there are variations on this theme where more crap is added that makes the site even more forgettable. Tag clouds, photo streams, tweets, social media ‘like’ buttons and random faces of people who liked this page scattered everywhere. Ads or surveys that pop up after viewing the page for ten seconds. Somewhere amidst this crap might be the actual content, but often it is a challenge to find it, and people might have clicked one of the dozen distracting elements before getting to that point.

Turn the website into a resource hog by adding unneeded and untested bloat

In the early days, a website used to be a mere collection of static webpages. Nowadays, a website is only considered cool if it is stuffed with tons of Javascript and HTML5 gimmicks. The result is that quite often, I'll hear my laptop fans spin up when leaving a website open for longer than a minute. Sometimes, the entire machine will become slow and unresponsive, and when investigating why, it proves to be a certain webpage that has eaten all the RAM.

Both problems are the result of copy-paste web design where frameworks are piled on top of each other, used improperly such that resources start to leak and are never cleaned up. The designers of such websites are skilled enough to string the frameworks together, but not to make a neat design and validate it through testing. The website may look nice at first sight, but eventually it will kill the computer or mobile device that tries to keep it open for an extended period. Next time you want to ‘enhance’ your website, ask yourself whether it really is necessary. Sometimes less really is more.

Make hyperlinks invisible

With the advent of CSS, the possibility to use “text-decoration: none” arose. This means that people can actually turn off the underline for hyperlinks, which has been the default since the invention of the web browser. This is not bad as such, as it allows to tailor the appearance of links to a custom web design. However, many people like to use this to make links totally identical to the surrounding text. Only when the user hovers over them with the mouse they become visible, and sometimes even that has been disabled! The only pointer that the word is clickable in the latter case, is the cursor changing to a hand icon.

Now tell me, do you believe anyone wants to scan every word in every webpage with the mouse, in order to detect where the wonderfully hidden links are? No! Links must be visible at first glance. Whether with an underline, different style, colour, or whatever. Blue-coloured underlined text is burned so deeply into the common knowledge of people, that it is the ideal way to indicate links. On any webpage where the hyperlinks are the main feature (for instance, a search results page), both underlines and the blue colour must be used. On other pages it is OK to drop either the blue colour or the underline, but never both. Neither underlines nor blue text should be used for anything else than links, unless their meaning is clearly indicated. There is never a good reason to make links invisible, except in a game “find the hidden links”. There is one hidden link in this very paragraph. Did you find it?

In this regard, the new layout that Google rolled out for its search results around March 2014 baffled me. They removed the underlines, in what seems to me a change just for the sake of change. They seem to have attempted to bring the layout more in line with the current awful trend of whiteout-inducing user interfaces, with text floating around in a sea of white space with no separators anywhere.

Make the rendering of pages dependent on the loading of non-essential content like ads

This has been a topic since my original article, but ironically it has recently become much worse due to the practice of ad-blocker-blockers I discussed above. Therefore I now limit this to the case where plain poor webpage design causes unimportant content to block the actual content.

Some sites somehow manage to include non-essential content like banner ads, word clouds, social media widgets, or bookmark buttons, which are implemented so badly that browsers are unable to render the rest of the page before this content has been loaded. If the content cannot load at all, visitors see nothing until they wait for a timeout. If the ‘stop’ button is pressed before this timeout, the page will often stay blank. When I visit a webpage with some text on it, I expect to be able to read that text. I do not care much about being able to ‘like’ the text or linking it to some trendy online tool that I won't be using anymore in a few months anyway. Mostly I just give up and go to another site if I can't see anything within reasonable time, and most other people will do the same.

There appear to be some websites whose sole purpose is to pretend to have useful content, but actually to load as much fringe garbage as possible around what is only a very superficial remnant of the purported content. Obviously, those sites are all about making people click ads or dodgy money-making schemes (hmm, is there any difference?) There should be some general quality mark for every website, and such sites should get negative marks.

Make it impossible to navigate the website by manipulating the URL

Suppose I enter a website through a hyperlink or a search engine, but it is in too deep a level, e.g.
www.site.com/products/rubberduckies/yellow/aggressive/model2.html
Now imagine I want to see all rubber duckies, but I can't immediately find a navigation link to go to that higher level. The logical thing to do, is to cut off all the parts of the URL after ‘rubberduckies’. In other words, go to
www.site.com/products/rubberduckies/
In a well-designed website, I would then arrive at the page with the overview of all rubber duckies. But in many cases I get ‘permission denied’, although I am pretty certain that I have permission to see all duckies. I might also get a ‘404 not found’ or heaven forbid, ‘500 internal server error’ depending on the skills of the web developers. This forces me to go back all the way to the main page and re-traverse the navigation structure. That sucks. To prevent this on a basic static web server, it is as simple as naming the main page of each subdirectory ‘index.html’ (or ‘index.htm’ or ‘index.php’). In more advanced servers, there certainly always are ways to make sensible redirects pointing to the kind of page a visitor expects to see when entering a certain URL path.

Send incoming users always to the main page

I search for something in a search engine, I find a page with the answer, I click on it, it loads… and then POOF! It vanishes into thin air and I get the main page shoved up my nose. It is tedious and sometimes impossible to find that specific page by starting from the main page. The only solution is to disable JavaScript to thwart this mechanism, and go back. Now I really would want to know why people put this kind of nonsense in their sites. Is their main page really so neat that they want everyone to see it? Mostly, it isn't. Maybe they believe people will look at other parts of the site when sent back to the main page. Well, I personally tend to never want to visit a site again if it denies me the viewing of a page without manually digging for it.

The only reason why this could be justified, is to prevent ‘deep linking,’ i.e. other sites linking directly to pages deep within the site. Then again, there should be nothing wrong with that, it is the whole idea of the internet. Any properly designed site shows its identity on each webpage, with a navigation system that allows the visitor to go to the home page. Even in sites with frames, where a deep link would not load the entire frameset and leave the visitor stranded without navigation, this technique is still not justified. Of course frames are utterly obsolete, but in case someone is still forced to use them, it only takes a little bit of scripting to detect a deep link and reload the entire frameset with the linked page inside it, instead of going for the lazy solution of kicking the visitor to the home page.

Use only relative dates

It is now trendy to annotate blog and forum posts or anything else with relative dates such as “today, yesterday, 2 hours ago,” and the like. This may seem more natural but it plain sucks when it is somewhat important to know exactly when the thing was posted. It is also terribly annoying when saving a copy or screenshot of a webpage, or printing it. After a few weeks one has no clue anymore to what exact date the vague relative dates refer to, unless somehow the date when saving/printing it was preserved. Even if the latter was the case, then one still has to do cumbersome date calculations in one's head.

Please provide at least some way to switch to actual dates, or better: display both the relative and absolute date, like: “2019-12-24 (8 days ago)”. Maybe it is even possible to automatically switch to absolute dates in a style sheet for printing? When you do believe relative dates are the best thing to display, please provide a mouse-over or option to toggle it to an absolute date.