Skip to main content

Designing Simple Websites

Published by on under the Web category.

I have been setting myself a challenge in my recent web projects. When I start working on a new site, I like to ask how I can make the site as simple as possible. I aim to build the most stripped down version of a site that I can that works.

I’ve been growing tired of the modern web for a while. Most websites I encounter today are bloated. I don’t want to have to download so many images and JavaScript files to do something as simple as read a blog. Unfortunately, it does not look like the web will be pivoting back to the way it was. Tools like WordPress have made it easier to establish a presence the internet. This is arguably a good thing.

On the flip side, tools like WordPress only offer creators a certain level of control over their work. I believe you can develop your own plugins for sites like WordPress but it’s not something I could do. I much prefer to design a website myself. When you only know how to use WordPress, you don’t know that there are other options out there. One of these options is building a website yourself.

Elegance in Simplicity

The fewer tags on a page, the better. This has become a pseudo-mantra for me. This website is a great example, and to date one of only two examples that I can cite. I hope to build more simple websites as I come up with ideas. I have periods where I get a lot of ideas and times when I have none. I’m presently still figuring out what my next website will be. Anyway, to the point.

I used to be a big believer in complex code. It made me feel good, honestly, to know how to write complex websites. Telling other people that I had built my website in React meant something to me. It shouldn’t have meant anything. Technologies don’t matter as much as the end result. It did, and I used it as a way to over-engineer every aspect of my site. Hence, I decided to start from scratch with this one.

Code does not need to be inherently complex. It is just that it’s so easy to make it complex. It is easy to add in new features because I have the technical aptitude to do so, without first considering whether they are necessary. Just because you have the skills to do something, it does not mean you need to do it. I have the skills to build more advanced websites; I am just choosing not to use them.

It’s for the Users

Simplicity is not just for me. It’s for you, the users, the readers, whatever you want to call yourself. Open up this web page in your browser’s developer console. You will see that it is simple. There are two web requests made: one to this HTML file and one to the corresponding CSS file. I have already said this in another post. It bears repeating because how important I consider this to be. My site is simple. It could just be a plain HTML file with no styles, but I did want to take some creative liberty over its design.

You get information quick on this site. The site loads almost instantaneously. Imagine if this was the experience you had on all websites. What I was thinking about today is how much easier it would be if technical documentation was written in plain text, with embedded code snippets when necessary. It would make finding documentation so much easier. You wouldn’t have to learn how every company or API structures their documentation. It would just be in plain HTML, maybe with some basic CSS.

Having a simple site is good for me. It is easier for me to maintain. Uploading new posts is a bit manual but that is the price I have chosen to pay for having this website. I don’t mind dragging a markdown file into the Jekyll version of this site every day or so. I may not do it every day but I try to do it when I can. This is much better for me than having a site over which I have little control. I know what every line of code on this site does; I could not say the same if my site was hosted on another platform.

Design Simply

Design simple websites. I want to reduce the number of tags that I use on my sites. When I use a tag, I want to make sure that it is semantic. I recently added in an <article> tag onto my blog for the purposes of clarity. It’s much better than enclosing the contents of every web page in a <div> tag. If you happen to read the source code for this blog, you may want to thank me for this clarity. It makes it so easy to know what is going on.

The modern web has enough bloated sites with unnecessary HTML. It used to be the case that if you pressed “view source” in your browser you would be able to read most of what you see. I can recognize the basic HTML tags. Modern sites go a step further. They have complicated structures and element IDs and massive JavaScript files. It’s difficult to learn from them. This will impact the next generation of web developers. Viewing source will not be what it used to be. It will no longer be a way to see best practices. If a site is generated using React, it’s hard to learn HTML from it.

I do not believe that simplicity means you need to compromise on quality. It just means considering the intent behind a webpage before building it. Google Maps could not be in plain text. It couldn’t work without JavaScript. This site, on the other hand, is only for sharing some facts about me. It’s fine if it is plain text. Ask yourself when you are building your next website: what do I want this site to do? Only build what you need to accomplish your goals.

Webmentions (0)

Have you written a response to this article? Send me a webmention.

Go Back to the Top