Web Design Practices that Don't Suck

April 01, 2019

(This is NOT an April Fool's Day joke!)

A few months ago I tried writing a post, the title of which was: "Web Design Practices that do suck". I typed for days and days about the awful things people do to their websites. The more I wrote, the more I asked myself "why? Why do people do such stupid things?" Eventually I got too frustrated and smashed my computer.

Moral of the story? Millions of computers die every year because of bad web design.

This time around, however, I'm going to try focusing on good web design tips, things that make me feel warm and fuzzy inside! See, it's really easy to make a good website, and I'm going to talk about how (of course, I'll talk a *little* bit about the things I hate.)


Make Your Site Comfortable in Pure HTML

In the world of CSS and JavaScript, it's hard to remember the importance of HTML. The most important part of any website is the content inside, and usually that content is in HTML.

Many people don't care about CSS at all, and opt to use text-based browsers like Lynx, W3M or Eww. This type of browsing can actually be really efficient. In fact, it would be more efficient than GUI browsing if websites didn't require us to enable JavaScript just to load their site!

It might feel like a pretty restricting goal, but I want you to make text-based Web browsers a "top priority" in your design, with CSS/JS being an optional addition. As an example, here's what this website (muto.ca) looks like under Lynx:

This website is very clean in a terminal. Yes, thank you.


Simple CSS

A lot of websites overuse CSS, with 500+ rules, even! When you write a website, keep it simple. You're not putting on a performance, and you're not showing off your "sick skills". You're uploading information that people want to access. In fact, this is probably my main point of the whole article: Your site isn't for your site. It's for your viewer to get information. If info is not the first thing your user gets, you're doing it wrong.

CSS is what makes your site unique, but remember that your site has one purpose: for users to gain (or send) information. Failing to accomplish this is failing to build a website.

Write like someone else will read it. You want them to enjoy reading your CSS code (preferably in one sitting)! This mindset is what turned me into a perfectionist with my code. In fact, I recently switched from using Hexadecimal color values to X11 Color names. This is not something I particularly recommend doing, per se, but "Midnight Blue" is easier to understand for the human reader than "#191970". This is a personal choice, as I like natural language over numerical values, but name your colours however you want!

Oh yeah, and remember to stay away from "display: sticky". This one, in particular, is used to make a certain object "stick" to the screen, no matter where you scroll. This is annoying and usually useless. To make matters worse, slower machines have a really hard time with sticky stuff!

You can view the CSS file of this website if you want.


JavaScript...

The Web is too slow to animate every bit of your site.

There's a lot of pressure, for some reason, to build your site with lots of JavaScript animations in it. I don't know why this is. When I hover over a button that slowly fades to a different colour, it makes my brain think "oh, I'll wait until the button is 'ready' to be pressed". This is bad, in case you haven't already gotten that.

Your website should function just fine without JavaScript. Personally I find any kind of animation to be unneeded complexity, but if you must have animations, then use vanilla JS (don't use a framework like JQuery just to make a short animation!)

The Web is slow, really slow. Don't use much JS at all (I'd advise you to simply *never* use JS, actually.) It takes time to load in the Javascript to your client's machine, and if you decide to write something that takes readability away from your site, don't add it! (For instance, don't make text "fade in" while you scroll through the page. This does not make your site look "smoother", it makes you look like a kid who just discovered how to use JavaScript 15 minutes ago.)


Use Local Fonts

Remember: The most beautiful font is also the most boring font.

If someone visits your website, the first word that comes to mind should be "words", not "font". the font that most people are accustom to is the one that's already built into their computer! Many web development books and tutorials really push the idea of using external fonts from fonts.google.com or FontSquirrel.com, but I would strongly advise you to not do this! It's a common mistake. Loading a font from Google Fonts means that your viewer's computer will have to access your website, pull out a piece of data that says "oh the font we want you to use isn't here, go to Google for that", then access another site just to grab the font you want! It's a font! A much better way of doing this is by simply writing something like this in your CSS file:

body { font-family: "Deja Vu Sans", "Ariel", "FreeSans", "Helvetica", sans-serif; }

This makes way more sense than relying on an external server. Everyone has at least one font on their computer, and it's probably the one they're most used to, so let them use it!


Choose a light framework, if any

Although many website authors can easily get away with just writing plain HTML and putting it on the Web, sometimes it's nice to have a bit of automation done for you (for instance, if you run a blog like this one, you don't want to update the "recent posts" page, along with the atom.xml file manually). This is where a "static website generator" comes in handy. A static site generator builds your website locally on your machine, so all you have to do is push them to your Web server as plain HTML (in other words, it's still plain HTML, it was just generated on your computer, so your site is still just as fast as it would be if you manually wrote it all down!)

Mind you, I did not test any of the other ones on the list, so I don't know which ones are good or bad.

This site (muto.ca) was generated with Haunt, and you can find the source code for this site here!


Miscellaneous stuff


Other Writings On Web Design

That's it for this article. There are a lot of things I've been meaning to write about, but I've been lazy lately. This was fun and relaxing to put together. I hope it helps someone.