From ae3927e0f12101bb8a788b4564657e1632f7e29d Mon Sep 17 00:00:00 2001 From: Yaroslav Date: Tue, 17 Mar 2020 22:39:16 +0300 Subject: migrated Oct 2018 posts --- .../2018-10-20_thoughts-on-web-design/index.md | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 content/weblog/2018-10-20_thoughts-on-web-design/index.md (limited to 'content/weblog/2018-10-20_thoughts-on-web-design/index.md') diff --git a/content/weblog/2018-10-20_thoughts-on-web-design/index.md b/content/weblog/2018-10-20_thoughts-on-web-design/index.md new file mode 100644 index 0000000..9929277 --- /dev/null +++ b/content/weblog/2018-10-20_thoughts-on-web-design/index.md @@ -0,0 +1,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. + + + +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/) -- cgit v1.2.3