Kernic

Just my toughts.

Mistakes in Web Design

Common mistakes in modern web design that I keep noticing. From unreadable fonts to confusing navigation - I analyze what many websites get wrong. With examples and better alternatives.

๐Ÿ”Š Read out blogpost
๐Ÿ“ฅ Download MP3

I started getting into website creation even before the new millennium. Back then, I was using an HP Jornada 680, which had limited functionality and convenience. Accordingly, my first websites were hand-built in HTML. CSS and external libraries were in their infancy back then, and PHP and mySQL weren’t available on Windows CE.

So, you could say I got into the nitty-gritty of web design quite early on. Of course, I also made the classic mistakes of that era. Marquee text, auto-playing background audio, blinking GIFs, and, of course, the good old frames and iFrames. But you grow out of that and start building your website with invisible tables. As I said, CSS was still in its infancy and was complicated. Tables were simpler. But they aren’t meant to be layout tools; they’re for structuring content.

After that, I stepped back a bit from web design and relied more on the expertise of others. To this day, I find web design with CSS disgusting. But even though most of the ugly methods mentioned above are no longer used, new mistakes have appeared - some of which are considered absolutely normal (and are probably used in this theme here as well).

External Content

Take what you can get, and give back even more.

A number of frameworks have sprung up for lazy web designers. What are these frameworks good for? They provide basic CSS and JavaScript functions so you don’t have to program them yourself. Examples include image galleries, responsiveness to screen size, or special scrolling effects.

Unfortunately, there’s a problem: The frameworks aren’t delivered with the web design. Instead, they are loaded from an external server. This way, they are always up-to-date, and bugs are fixed centrally. Sounds practical, but it has crucial disadvantages:

  • You are dependent on the provider of the external content. If they disappear, the websites often become non-functional.
  • By embedding them, the visitor’s browser fetches the content from an external server and thus automatically sends data to the external operator. This is not directly visible.

This also applies to small pieces of content: fonts, preferably from Google. Since these fonts are so widespread, it’s hard for users to avoid Google. All of this is rightly criticized, and I can be criticized for it as well. I’ll check in the coming weeks if I can’t just host the scripts on my own server.

Design Over Content

Lots of design, few topics

Alright, a web designer isn’t primarily responsible for the content of the web designs they build. The responsibility lies with the site owners. But I’m still amazed at how homogenous designs look these days. There’s a lot of science behind it now. For years, analyses have been done on how visitors view a page, where they look first, and in what pattern their eyes scan the website. Unsurprisingly: You start at the top left, then move down a bit and toward the middle. The classic structure of websites, even before these groundbreaking discoveries.

But what’s often missing? Real content. A large portrait, contact details, and some generic text, and the company website is done. There’s actually nothing there, but the design bloats the page. You have to scroll just to get to the actual content, and on top of that, the pages are over a megabyte in size - external libraries aren’t small.

The content should be supported by the design, not be a byproduct of it.

It Can Be Simple

But not very pretty

The interesting thing is that a website doesn’t actually need any CSS or JavaScript. HTML is the foundation of every website and is actually based on the structure of a normal document. Paragraphs, headings, tables, images, and links are the basic elements of a webpage. Websites built this simply are not only extremely lean but also fully responsive - apart from the images.

The following site sums it up well and is also an example: https://motherfuckingwebsite.com/ WARNING: The language is very direct and should be seen as sarcasm.

I tried that with my previous blog as well. Little design, focus on the content. But in the end, it’s 2023, and many visitors are put off by the plain design alone. It’s also not easy to direct the visitor’s attention with such a design. They are overwhelmed by the content and find nothing for their eyes to linger on.

That’s why I switched to Ghost and chose a simple but modern theme. A theme that also offers me some design options. In return, it also makes one or two mistakes that are considered “best practice” today. You can’t have it all.