MOUSELING.net
Hyper Text Muck-up Language
HTML is a wonderful language. It's simple, universal, renders on almost any device, and best of all when you combine it with CSS you can manipulate it to create diverse and beautful websites. A website can be elegantly simple or it can be deliciously dense and this versatility is a quality I really enjoy.
The thing is that thanks to that versatility allowing all sorts of website layouts—and thanks to the simplicity of the language allowing absolutely anybody to make a website—there are a lot of bad practices being passed around and reinvented, especially in hobbyist circles.
This isn't necessarily a bad thing. Newbies will always make mistakes when learning a new hobby or skill, and even I carry certain bad practices by my side no matter what! If you are a hobbyist learning for the first time, you're bound to make a few mistakes, or you'll see other people doing something and think you should do it too. This is especially the case in the website-making hobby, where many people want to invoke or recreate old websites from the 90s or 00s.
However, there are some things I see a lot, and I'd like to speak on them!
Note: Although this is filed under "tutorials" on this website, I don't consider it a tutorial, nor is it any kind of guide. This is a set of observations that you may or may not choose to reflect on.
Table of Contents
- Major Crimes
- Pet Peeves
Major Crimes
Unoptimised Images
Picture this...
Have you ever opened a website and had to wait patiently for the images used in the layout or content to load?
With many people having lightning-fast connection speeds these days, more often than not it is a problem with the website rather than a problem with the user. A visitor may become bored or upset by this slow loading process, especially if they wait all that time and the image is only decorative. Not to mention that it's eating up the server's bandwidth as well as their own, so the situation is actually double-misery!
Maybe this visitor is trying to access the gallery of an artist they could interested in—maybe even to commission—but the art is all loading in full-size at the same time. As a result of this, the visitor only sees a sliver of the tops of the images. It's totally impossible to look at this person's art thanks to the massive filesizes. In a situation like this where the artist needs their high-quality work available, what is to be done?
This is a common sin that many budding webmasters commit, but lucky for those same webmasters, the fix is very easy.
Explanation
Many people forget that images can actually take up a lot of space space, especially with our very capable hard drives. After all, it's a lot of work for a computer to encode every single picture in a photo! But some image file types are smaller than others, and some images are far larger than they need to be.
People also forget about the trusty thumbnail, something which allows people to see a smaller or cropped version of a larger image without the load time. If they are interested, usually they can click on the image, and viola! The full image appears in a new tab!
If you have many unoptimised images in one page with no thumbnails, that leads to drag.
My Recommendation
- Resize images if they don't actually need to be that big
- Create thumbnails for images not displayed at full size. You can link to the full-size images via the thumbnails.
- Use squoosh on your images, large or even small. There are many settings to play with!
Splash Pages
Picture this...
You see a cool-looking button on someone's website. When you click on it, you're not faced with a website, but with a giant ENTER sign. It gives you no idea as to what the website is actually about.
Maybe it tells you what the webmaster recommends to visit the website on, or maybe it's just a picture of an anime character with the word ENTER edited over the top. Maybe the link into the website is hard to find. Maybe it looks cool, but otherwise, it's kind of drab.
Maybe you come back again soon, and again, you see the exact same splash page. If you are a regular visitor you've seen this all before and if not you've probably read the same words on every other website's splash page.
Isn't knocking on the door every time you visit a bit pointless? Why should you choose to have or avoid a splash page?
Explanation
I don't blame anybody for creating a dedicated front door for their website. This is where people get their first imperssions, so one would obviously want to make it look good, and maybe convey some information about what the site is for.
What's more, splash pages used to have a genuine purpose. At first different browsers behaved very differently from each other, and computers were in varying levels of size and speed. Even when that was sorted out, a website might have needed a stripped-down version of itself to work on mobile (especially on the Japanese side of the Internet), or it might have had a Flash version and a non-Flash version.
The result of this: you see splash pages a lot on older websites. It's obvious that the Neocities community would follow in those footsteps. But now you must ask yourself: is it really necessary?
If you have a splash page, I want you to think about what might be on it.
- What the website is about?
- Your favourite browser?
- The recommended display size to view it on?
- That your website is not mobile friendly?
- Warnings for eyestrain?
- Warnings for sensitive content?
- A pretty entrance for new visitors?
- Does it only exist so that autoplaying music works on your homepage?
Most of this information is actually irrelevant in $CURRENT_YEAR. Let's go through these points one by one and explain what they actually mean.
- My site's purpose is... = I could really be saying this on the homepage. You might even already be reiterating this information on the homepage!
- Best on Firefox = worse everywhere EXCEPT Firefox. If you design a website you want people to look at, you should design it universally! HTML looks fine in any browser by default! I recommend you test your website on at least two browsers after major layout revisions.
- Best at 1280x720 = bad at higher or lower reslutions. If your site looks best on that resolution, why does that matter? Are you not taking others into account?
- Doesn't work on mobile = I broke it then gave up. HTML naturally displays wonderfully on any device with no styling, so why does your website not work on a phone? It doesn't have to be perfect (just access this page on a phone!) but it should still be usable and this is not hard to do.
- Eyestrain warning = my website is hostile to the visitor. ...I understand that this sounds a bit mean, but that's my honest opinion. Bright, abrasive, over-the-top colours can still be done in ways that don't hurt your visitors' eyes (and your own).
- Sensitive content = a valid reason. I actually think this is a very mature thing to have if your website has adult content or otherwise sensitive content, especially as which a visitor may only skim through the homepage (or the sensitive content might be on the homepage itself!) so I really have no arguments against this use case.
- This is my pretty front door = I don't want to decorate the inside of my house. Of course I'm not saying that websites made with a splash page look bad; many look incredible. But if your splash page is so nicely decorated, why would you not want to make your homepage look as wonderful?
- Warning! Autoplay! = this website doesn't respect the visitor. Many people listen to their own music when they browse the Internet, or they may just not want distractions. A polite music player that's turned off by default is always better than a player that blares the moment you open the page.
I'm speaking from a place of understanding. I had splash pages on every single one of my websites for five years! I stopped in 2025! But things don't happen for no reason; I put an end to that practice because I reflected and realised my own splash page was useless.
My Recommendation
- If your site has sensitive content or needs to be walled for a specific reason: perfect. Make sure your splash conveys what it needs to, though.
- If you want to create a moody entrace: just decorate your homepage, or at least do it with grace. Splash pages can become annoying to anyone who visits on a regular basis, so you must put extra effort into setting the mood.
- If your splash page is there to force autoplay: remove the autoplay AND the splash.
- Else: just trash the splash.
Nobody Else Has Your Setup
Picture this...
You open a website and the layout is so large and cluttered that you have to utilise sideways scroll. Those of us who have used a computer at a small display size or high scaling setting will have experienced this at one point or another while surfing the personal web.
Maybe you open a website and some stuff is attached to a far corner, while other stuff is in the opposite corner, and it would look very harmonious if only your screen were a different size...
Maybe you've opened a website on a phone and it's split between two halves of your vertical screen. To you this is totally unusable.
This is, obviously, not very nice. So what can be done if it happens to you?
Explanation
The basis of this is lazy design. Lucky for the aspiring webmaster, lazy errors usually have a simple fix. If something looks good on your screen, you might not think much of it, but it should look good on most other screens too.
If your page "looks best on Google Chrome at your PC's resolution", what does best mean? What you're really saying is that it looks bad on any other display. The thingis, nobody is going to switch browsers and monitor settings just because you told them to. Some people have vertical monitors. Some people still have freaky 16:10 or 3:2 or 4:3 monitors because they like it that way. So what will you do?
HTML is responsive by default. It doesn't have to be perfect on a tiny display, but a website shouldn't totally break on a phone.
Don't make your absolute-positioned sites rely on multiple points on the screen.
My Recommendation
- Use flexbox. It's easy to learn and can be manipulated in weird ways so that your content always fits nicely. Search engines are your best friend.
- Check your site in one other browser. If you use Chrome, check on Firefox, and vise versa. It never hurts to take a look!
- Use absolute units rather than relative ones. That is to say, you should use em or px rather than % or vh.
I use % units to limit image sizes and make text smaller, but over-relying on them for your layout (relative to the screen) can be a bad choice depending on the page.
I used to have a website where all the main content was 90% width. Using this example, on a super-wide screen like a serious gamer might have, your content is going to be very wide and look sparse. On a phone, things will feel cramped and can be annoying to navigate.
Layout Builders From Hell
Picture this...
You open a website and it takes a suspicious few seconds too long to load. Once it does, something tugs at you: you've seen this before. You might have seen it many times before, in fact. I see a lot of creative websites now, but back in the day, this was a serious problem.
Not only does it sap the creativity that comes with building websites away, it drains user excitement. Surfing the Web, especially this side of the Web, should feel exciting. Unless you have something that makes it worth reading, I don't recommend "layout builders".
...especially when they aren't responsive, or don't work on multiple screen sizes!!
Explanation
Many websites you might come across are built with layout builders. This is not necessarily a bad thing, but unless considerable effort is put in, they are a drag. The people using them often don't understand them, which means that bad code often gets spread. That's no good.
There is a certain layout builder I won't name that uses a layout.js file to put everything in order. Without it, the website won't even load. This is JavaScript, which many people turn off entirely, and slows down the browser. Why should my fans start whirring in order to load your static homepage?
Free templates are good; there are plenty of them. Plain HTML is even better.
My Recommendation
- Learn the basics. A basic website is better than a broken or overly samey one.
- Use a free to use template. There are many available if you just look!
Outdated HTML
Picture this...
You really like that charming, retro website you're on, so you check the source. It immediately becomes apparent that this website is a little too retro: <font> tags on just about every paragraph, maybe the whole layout is one big table... well, it's not good. At times it can almost be unreadable.
If you were to copy a lot of this code into your own website, it might not even work. What gives?
Explanation
The thing is that HTML is a standardised language. The newest standard is always expanding, but there are deprecated tags and practices from old versions of the language that people still use, or their websites are stuck as past relics, using old versions of the standard.
It's not the end of the world, but it's always good to double-check. Most things that were done with regular HTML tags are now done with CSS. Commonly-used deprecated tags include <center> and <marquee>.
My Recommendation
- Learn the modern equivalents. CSS handles almost everything you used to rely on tags like
<font>for. - Validate your HTML using the W3C Validator. It will tell you if any part of your HTML is either out of date or broken; very useful!
I'm a bit of a hypocrite; there's still some <center> tags hiding around in my website. But it's still good to keep in mind.
Stuck In Frames!
Picture this...
I'm sure that, if you're reading this, you know what frames and iframes are: a way to embed webpages inside of each other. This is great; this is part of what the Internet thrives on! And yes, it's a useful way to keep your pages consistent—but what if you're linking outside? Many people forget to take this into account, which leads to the dreaded "stuck in frames" situation.
You click on a website link, and instead of taking you straight to the website, you're stuck in someone else's website. The new page is cramped; the navigation from the old website remains; you're trapped!
Explanation
When you click on a link, its default target is to replace whatever page you are on; that is, if you are in one tab it will take you straight to that web page, and if you are inside a frame it will follow the link inside of a frame.
So, when you haven't set an alternative target for an external link, the link will always open inside of the frame.
Many visitors might right-click on your link and select "Open Link in New Tab", or they might ctrl+click it, but not everyone knows to do this— and even so, it's annoying.
My Recommendation
- Use target attributes such as
target="_blank"ortarget="_parent"on your links. These open links in a new tab and the parent page (the one housing the farme) respectively.
External File Hosts
Picture this...
You feel cheeky and decide to surf the Web on your school or work network. The problem: you've come across a website where absolutely nothing loads.
Maybe you're scrolling a gallery and none (or only half) of the images or links work. You realise, upon opening them in a new tab, that they're not even hosted on the same domain as the website you're on. What on Earth is the deal?
Explanation
This, my friends, is the work of external filehosts. Relying on external sites is risky; they can go down at a moment's notice, and often they do.
Catbox and Filegarden are just plain bad. They are blocked on many networks (including entire countries), go down all the time, and if one goes down for good all your images will be gone.
Self-hosting is better, and even on the free plans that come with hosts such as Neocities and Nekoweb, you almost certainly have the space. Try optimising your images for a start. If you really have too little space, it may be time to properly rent some server space. Neocities' Supporter plan is only 5 United States dollars a month; Nekoweb's is 3.
My Recommendation
- Host your own assets. All your files should live on the same server as your site whenever possible. Always make sure to keep a local backup, too.
- Upgrade if needed. These days, storage is very cheap. It's worth the peace of mind.
- Avoid relying on services. You won't be so glad if things start breaking on you.
Autoplay
Picture this...
You open a website and, suddenly, music is assaulting you! Maybe it takes a few moments because it's an MP3, or maybe it's even a MIDI. You know, MIDI files take considerable work to get playing in the browser these days, so it's even more of an insult that they put so much effort into it.
If you have your own music playing, this is bad. If you're in public, it's even worse. When I was in high school I was embarrassed by sudden DnB tracks from random websites I was visiting during class, several times.
Explanation
Autoplay is a magical feature, and it can be useful—if your visitor clicked a link to a page showcasing one video, it's great to immediately have that video play. The problem is that nobody uses it in this way.
Autoplay takes control away from the visitor, uses their bandwidth without permission, and almost always annoys them. Browsers themselves even block it by default. It was a plague back in the day and it's a plague now.
The sad part is that autoplaying music can absolutely be used tastefully, to set a mood, but it almost never is. A "play" button is fine. Generally, you should learn the rules before you break them.
My Recommendation
- Don't use autoplay. Always assume your visitor is listening to something already.
- Add an optional music player. There are plenty of these out there for free!
Pet Peeves
Empty Websites
Picture this...
You come across a new website. It's got a very cute layout, and you can tell a lot of love went into that, but... you click around and there's nothing to see. Nothing to read, no galleries, maybe only a links portal.
Maybe the links on the sidebar don't work at all. There are no signs of life anywhere, and it's just a shame... heartbreaking, even...
Explanation
To create a website, you need something to put on that website. Many people substitute content for design in their early days, thinking it's enough, but then they abandon the hobby or leave it be, and they end up with very empty websites indeed.
I understand this. I kept rather empty websites for a long time, in fact. But a website with nothing to say for itself does not attract visitors, nor does it satisfy the person making it, nor does it provide anything to the world.
An about page isn't really passionate.
My Recommendation
- Figure out what you want to share. Information all about a video game? A blog? Your artwork? Is it just a place to play with CSS?
- Teach people something - about the world, your opinions, or that thing you like
- Offer something useful - free to use layouts, resources, guides
- Showcase a personal pursuit - your co-ords, your tennis hobby, your collections
I keep some advice for this on my hosting offer, because I'm slightly selective about the kind of thing I want on my server. Maybe it could help:
Or anything along these lines. If you work hard, the passion for what you produce will shine through, and your visitors will probably love it even if they know nothing about it.
All About Me
Picture this...
You're on a new website, but then it dawns on you: every page is secretly an About Me page. The homepage has information about the webmaster; the About page tells me more about the webmaster; the Links page, miraculously, has information on the webmaster.
Explanation
Related to empty websites. The sad part is that I absolutely understand; however, this could easily be taken care of via a Carrd, or something like that. It's not bad to make an "about me" website, but people who do this don't even seem to realise they are doing it, and then when frustration overtakes them they can't understand why.
My Recommendation
- Find something else to talk about. It's a little silly to say but it's true, be it your interests, your lifestyle, or even your personal relationship with the world. Your website can strictly be "about you", but a list of interests is boring—I'd much rather hear about your worldview, or how those interests changed you.
Decorative Images Covering Content
Picture this...
You're on a nicely decorated website, but to use the sidebar, you have to click on a certain area of the links. Some image used for decoration is blocking the links. That's inconvenient, isn't it?
Explanation
The order of HTML is important. Anything that comes afterward will be "on top of" anything that comes before. Sometimes this is needed, for decoration's sake, but now that blocks content, be it the sidebar or the footer or even a part of the main content.
There are ways around this.
My Recommendation
- Remove the offending image. Is it truly necessary?
- Use
{ pointer-events: none }. This makes it so that the image isn't interactable, and anything below it has room to breathe.
Button Walls
Picture this...
You're on a website and you see it: the Wall of Buttons. I mean, it's hard not to have seen it. I'm sure you have. Maybe you even have one on your own website.
But maybe you've seen most of these buttons before, because it's a tight community; maybe some of them aren't even links, just used as badges and thrown in the same category; maybe you don't know what to click on at all, because it's all pictures and you have no ieda what you'll be coming across.
Isn't that a little disheartening?
Explanation
We've all had or at least seen a button wall. There's nothing wrong with the phenomenon, per se, but in my opinion it promotes only linking to people who have made buttons for their websites. Some of the most interesting websites lack buttons, because their webmasters are too focused on writing to create a graphic.
If you are linking to a website, you should have a reason to link to that website, and the visitor would benefit from knowing that reason. Even just, "this is my friend", or, "I like the art here", next to the button. If you insist on using a button for every website, it is not hard to create a "no banner" image.
Not only does the whole thing with linking to a website with a button discourage people from linking to sites without one, it also encourages visiting sites based on how cute or cool their buttons look and pressures new sites into making their own buttons to be "normal". Is that fair? When plenty of webmasters prefer banners, or a different size of button (120x60 is amazing!), or just don't want it?
My Recommendation
- Add descriptions to your link page. It's the least you can do, and very helpful to your visitors.
- Keep your "link" buttons separate from your "statement" buttons. I have some "decoration" buttons on my index page for good measure, but they're nowhere near my "links" page.
Low Contrast
Picture this...
You click on a cute looking link, and suddenly it hits you: a very light or very dark website. The text is practically a part of the background, and worst of all, the graphics are too. It's dreamy, or it's cawaii, or it's creepy, but it's not usable.
Maybe the text size is small, too. Now, combined with the low contrast in the website's palette, the website becomes hard to read and therefore navigate. Is that any good?
Explanation
People just like pretty websites. That's fine, but it's not very accessible. I'm not going to whine about every single element on a web page not perfectly following accessibility standards, as that's futile, but major problems like this hurt even your visitors without disabilities. There are ways to be cute or brooding with just a little more contrast.
If I, a half-blind person, have to use the zoom feature on my browser to read things on your website, it's probably not worth my time. If it breaks when I zoom in on it, that's two problems.
My Recommendation
- Change your palette. I know soft pinks are tempting, or lovely greys and blues, or a brooding black and dark red, but just a little bit more contrast will make it ten times more usable and stop your visitors working extra hard.
"Do Not Interact"
Picture this...
Either on the homepage or "about" page of a website you're visiting, there's a large DO NOT INTERACT! section. You immediately think: why??
This is your website; this is not Twitter. Nobody is going to come to your profile and harass you. Why are you telling people not to interact with you? If anything, it makes you look hostile.
Explanation
This is a reflex from social media refugees. While I understand the intent, you must remember you have full control now; you can block people on Neocities, and you won't know if someone you don't like is looking at your art. If they're making themselves known, you can probably add extra moderation to your guestbook or chatbox.
My Recommendation
- Ignore people. Ignore flames, ignore people you don't like, ignore people. It's that simple. :-)
