NEOPICKS

The Neocities Sins

?

My list of what I believe to be the crimes of the neocities and related communities with fixes where I can add fixes. Please do not take this as an attack on any particular persons website or your website. I do not think your site is less worthy because it includes any of these "sins" just that they are something to think about foryour website and web design goals.


I've been making websites for 3 years of my life and I have made all these mistake and way worse in my webdev experiences (multiple times). Hopefully this document can help you out or even just help you think about web design more in depth. I want only the best for the indie web community and I hope that putting in some fixes can help to create better websites.

wiggle room

1

The greatest sin of all is what I call the curse of the wiggle room. It is defined as when a site has a small scroll that reveals nothing more than just the background of the site not only does it give your site the default chrome/firefox scrollbar (if its not been customised) breaking the themeing of your site but it also can add to sin number 2


The Fix

body, html {
    height: 100dvh;
    margin: 0;
    /* overflow: hidden */
}

Using height: 100dvh; is powerful anti wiggle technology on its own and should fix all extraneous wiggles from your website. It should be applied to your container divs usually being html or body but your site might be different. Overflow hidden is the tactical nuclear bomb to the wiggle and will kill the wiggle although I view it as the cheated solution as it works by just cutting off all the overflowing content on your website.


If your website is not wiggly and proud of that fact here is a fun button for you

nested scrollbars

2

Having a div with a scrollbar inside a scrollable area is a bad design choice as when the user is scrolling the outer div they can be stopped to scroll the smaller nested div which feels awful as a user. Usually on neocities sites these nested scrollable divs will be things like site updates or blog posts where just cutting off with an elipses and a link to read more would suffice well.


The Fix

Here the fix requires some creativity on your part as it will be different for different websites but overflow: hidden can cut off the overflow and remove the scrollbar temporarily. My suggestion is to add some sort of "Read more at this link!" or "See all blog posts here!" after a few of the blog posts so people using your website know there are more blog posts to read and that your homepage is only showing a small selection of them

uncentering

3

Some people have the most beautiful delicious lovely websites that are for some reason stuck to the left side of my screen. Of course im not saying there isnt a time and a place for non centered websites and there are plenty of websites that benefit from being non centered. That being said most websites would benefit from centering their content


The Fix 

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

If this messes stuff up on your site you can try making a wrapper div around your whole site and then apply the above css to it as it may remove unwanted interaction

automusic

4

While nowadays autoplaying music is rare it is still alive and kicking. Please do not create a website with autoplaying music you have no idea how loud someones volume is turned to or if they have music playing in the background.


The Fix

If you really really really want autoplaying music here is how to make it less bad. On your splash screen before autoplaying music you can ask for if the user wishes to turn on autoplay music and then save the result to local storage for use on the main page

<input type="checkbox" id="music" value="0">
<label for="music">Would you like autoplay music?</label><br>

const checkbox = document.getElementById('music');
const status = document.getElementById('status');

// this snippet will check music autoplay status put on main page
const saved = localStorage.getItem('musicstatus');

if (saved == 'true') {
    console.log("Music is enabled");
} else {
    console.log("Music is disabled");
}
// end snippet

if (saved !== null) {
    checkbox.checked = saved === 'true';
}

checkbox.addEventListener('change', () => {
    localStorage.setItem('musicstatus', checkbox.checked);
    console.log("Saved:", checkbox.checked);
});

just replace the console logs with turning on the music or muting the music however you want to do it

april wrote this