migrated Oct 2018 posts

1 files changed, 131 insertions, 0 deletions

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.
+
+<!-- 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/)