Some thoughts on web design

I am no designer by any means, I mostly prefer to deal with the technical side of things. However I do appreciate when things aren't an eyesore, and most importantly regarding technology, when the design doesn't get in the way. That is, I value more UX, than an overtly designed UI.

Early on websites were designed to just contain information, things like text and images, without any of the fancy things that come with today's websites. Nowadays it seems almost like a must that a website should have some kind of interactivity, even if it doesn't add any actual value to the website.

I am not trying to say that websites should stay the same static things that they were in the past, rather, that a lot of bloat has been added to them in an attempt to make them more "appealing" and interactive, which is not a bad thing in and of itself.

However, that trend has spawned a lot of bloated websites with unnecessary or even annoying gimmicks. Gimmicks like menus that open up automatically blocking the view of what you are reading, and assume that you actually need it at the moment. Or the worst offender, autoplaying videos.

Setting aside my rants about the modern offenses of design and UX in web development, I want to focus on a couple of issues.

Typography/Readability

I have started to notice lately that a great deal of websites tend to neglect what I think is one of the most important aspects in a good user experience (maybe except for media sites like youtube), and that is the text itself.

The people who design these sites seem to pay too much attention to the overall style of the site and its elements, but don't seem to care about the actual legibility of them. One might think that font type and size should be enough, but those are far from the only important aspects to consider for comfortable reading. Line length and spacing are also key aspects, and might be even more important than the font you choose (just don't choose some quirky font like Comic Sans, for your readers sanity's sake).

I came to the realization that line length is a really important aspect for a comfortable read, after having worked some time with LaTeX and wondering why it always defaulted to the same line length. I always noticed that documents produced in LaTeX were more pleasant to read than, for example, Word documents, and it was not only the font.

So after some reading on the internet about the choices of the default styles for LaTeX, I realized how important line length is. I now understood why even PDFs were more pleasant to read than your average website.

Consider a book. Have you ever read a book whose line length was more than 80 characters? If so, that's a terrible book.

There seems to be some consensus that an optimal line length should be between 50-75 characters, spaces included (right now my blog's articles are at about 80 characters, so there's room for improvement).

If the line is too narrow, it breaks the reader's rhythm, and stresses them. If it is too wide, the read will have a harder time focusing on the text, it will be harder to gauge where the line ends and the next begin, and the reader's eyes will end up moving more horizontally, also stressing the reader in the end.

A lot of websites tend to present the text in lines too long for comfortable reading. That factor ends up contributing in more readers skimming through text and not paying much attention to what has been written.

One more thing would be line height. I've noticed that many websites tend to use most of the default styles for text, and sometimes the line height ends up being too small for the font used and the lines of text being crammed. It's not as bad as with the line length, but it is a problem present in some websites.

Bloat

Oh boy, there's a lot that can be said about bloat on modern websites. I'll try to keep it short. I'll begin by writing about some "addons" that end up making sites heavier than they should.

I feel like for most use cases JQuery is a really unnecessary thing to use. Most website don't need half the features that JQuery provides, and most of its features are just "shortcuts" that JS already offers by default. I mean, if you're using JQuery, most of the time, you're being lazy. JQuery makes your site unnecessarily heavier, although if your site is already JS-heavy, and the focus of your site is actually on providing some specific functionality, JQuery can be a great tool.

Another thing that bloats sites, are CSS frameworks (e.g. Bootstrap). They can make life easier when building templates for your sites, but most of the time, as is the case with JQuery, you're not going to use half the features it provides. In this case, it can get worse, since you will most probably end up overriding a great deal of the default style provided with the framework anyway, especially if you don't want your site to look generic.

Finally, on the topic of bloat, is feature and visual bloat.

The biggest offenders I have found to be news sites, especially those kinds of "specialized" magazine type of sites. You enter the site to read the article, and most of your screen is occupied by ads, useless images and links to other articles and associated websites that distract you from your reading.

And don't get me started on the autoplaying videos (I'm looking at you CNN, although I don't even know why I bother to read their ~~biased bullshit~~ articles). If I opened up an article, I want to read. READ, not watch or listen some dude babbling about what I'm intending on reading. If I wanted to watch a video, I would have gone to the videos section of the site, or to YouTube.

Might be just my humble opinion, but when I am reading, I like to see only the text in front of me, with maybe some links to the sides or top/bottom, to help me navigate, and maybe some images relevant to what I am reading.

Conclusion/Final words

Keep those lines at a sane width, let your lines and characters breathe with a little bit of space, and maybe up your font size a bit if you notice you start squinting when trying to read.

Fluid design doesn't mean that the container where your text is should occupy the entire width of your screen.

Make beautiful, but lightweight (in bytes, and visually) websites, that are comfortable to read, and your readers will thank you.

Some links that might be of interest:

https://www.yaroslavps.com/weblog/thoughts-on-web-design/