1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
+++
title = "Some thoughts on web design"
date = 2018-10-20T02:25:00Z
+++
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.
<!-- more -->
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://baymard.com/blog/line-length-readability](https://baymard.com/blog/line-length-readability)
* [https://www.paulolyslager.com/optimal-text-layout-line-length/](https://www.paulolyslager.com/optimal-text-layout-line-length/)
* [http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)
|
