Website Tips

Tutorials

Upload unallowed file types

If you want to embed files that aren't allowed to be uploaded (the list of allowed extensions can be found here) such as music or videos, a simple way to do this is to upload it to Google Drive. If you just want to link to the file so people can download it, then you just need to select "get link" in the file options and use the link it gives you on your page.

If you want to be able to embed the file in your website (so that the contents of the file show up on the page as opposed to just a download link), then you will need to edit parts of the link. This is because when you get the link directly from Google Drive, it's not a link to the actual file, but rather a link to a page that has the file on it. When you get the link, it will be in this format:

https://drive.google.com/file/d/[long string of gibberish]/view?usp=share_link

Copy and paste that string of nonsense into this format:

https://drive.google.com/uc?id=[insert long string of gibberish here]&export=open

Then use that link on your site and it should work. If you're thinking that all that copying and pasting is a huge pain in the ass, you're correct and that's why I made this Google Drive link converter. If you're looking to upload videos, you can also just upload them to Youtube, which makes embedding much easier but has the downside that they'll be subject to Youtube's policies (ie. if you use copyrighted music, use Google Drive unless you want your account terminated).

On a completely irrelevant side note, because you're allowed to upload text files with the .md extension, you can also upload Sega Genesis ROM images because they often use the same extension. Neocities has no idea whether you're uploading a text file or a video game, just what the file extension is. Just don't try to open them in your browser because it will probably cause the browser to crash.

Reduce storage usage

To reduce the amount of storage used by your Neocities site:

  • Upload images and other files to a separate place such as Google Drive (see above). If you're worried about using up all your storage on your Google account, just make a new one specifically for the purpose; it's free.

  • Make your images smaller. The photos you get directly from your camera usually have dimensions in the thousands of pixels and can be several megabytes each. It usually isn't necessary to keep them this big (and can negatively impact loading), so make them smaller! If you're already editing them in GIMP, you can go to Image>Scale image and resize it that way; if you don't have GIMP, open it in MS Paint and hit "Resize". What size should you make it? No bigger than the largest size it will be displayed at on your site (basically if you set the image to display at 700px wide on your site, make the image file 700px wide).

  • Run your images through an image compressor such as TinyPNG. This will reduce the number of colours in the image, as well as delete any unnecessary data such as camera information that was saved when it was created, which can reduce the file size significantly. Just don't run pixel art through one of these because in its attempt to reduce the number of colours it will likely destroy it.

  • Use the same CSS file for multiple pages. If you have multiple similar pages, try condensing all of your CSS files into one. This may just be a matter of adding all your class names and rules to one document. If you have many pages with a similar format but with different colours/backgrounds, consider using a style tag in the head of the HTML document to define colours, and then condense all other shared rules into one document. This way, the same code will not be repeated multiple times unnecessarily.

  • Delete the stuff you aren't using. Obvious, I know, but I'm sure we all have old pages we replaced that never got deleted and versions of photos we never ended up using. If you think you might want it in the future, save it on your computer where your storage isn't limited to 1 GB (hopefully). Also make sure to go through your CSS files and delete any rules that aren't being used anymore; again, you can copy and paste them to a text document on your computer if you're worried you'll need them eventually.

Improve loading times

To improve loading of your website:

  • Reduce the number of images. On a website, text is relatively quick to load, while other files such as pictures are much more resource-intensive and are usually the cause of slow loading. If you have many photos to display, consider splitting them up into several pages. Also consider whether all the images used are necessary; if you have a set theme that you use for all pages that contains a section of buttons, for example, you might want to get rid of the buttons on a photography page so fewer images have to load.

  • Reduce the size of images. As described above, reducing image dimensions and using image compressors can make the file size smaller, which will in turn making loading quicker because less resources are needed to load them. Note that reducing the display size of an image in the HTML will not make it load quicker because you still have to fetch the same large file from the server, it just gets resized by your browser.

  • Make sure images are saved as interlaced (for PNG and GIF) or progressive (for JPEG). Normally when an image is loaded, it starts loading at the top of the image and goes row by row until it reaches the bottom. While this is fine for small images that load quickly, for large images you may be stuck looking at a grey box while the loaded rows slowly expand and have no idea what you're looking at until it's nearly done. What interlacing does is it allows every other row to be loaded and a low resolution image to appear first, then it fills in the gaps to create the high resolution image. This way, you at least get some semblance of an image before it's done loading. For JPEGs saved in GIMP, they should already be saved as progressive by default. For GIFs and PNGs, you have to manually check interlacing in the export dialog. Note that interlacing in PNGs and GIFs can make the file size bigger which can make page loading even slower, so it's best to use it only on larger images where it's really needed.

  • Preload fonts. Have you ever visited a website and had it load everything in one font, then suddenly the font changes and everything shifts and now you've accidently clicked some sketchy as hell ad? Basically what's happening is that the font takes some time to load, so the browser loads the text in a default font then replaces it with the right font once it's ready. If you're using a font that isn't a "default" font (so you had to upload the font file to your site or use Google Fonts or something), you should tell the browser to load the font first:
    <link rel="preload" href="yourfont.woff" as="font" type="font/woff" crossorigin>
    Put this in the head of your HTML document before you link to the CSS, and the browser will only load the text once the font is loaded. Make sure that if you use a font of a different type that you change the "type=" to the correct MIME type for your font.

  • Upload the most important files on Neocities. Yes, I know I said that you can reduce storage usage by uploading things to Google Drive, but if you really need something to load quickly, Neocities is a better choice. I think it has to do with the Google Drive link not being to the file itself (in the sense that it doesn't end in a file extension) so it takes a second to access it. I'm not 100% certain that's why, but I've noticed that some of the Google Drive links I've used take a bit of loading. It's really up to you whether to prioritize speed or saving storage.

Make my website more accessible

Let me preface this with the fact that I'm definitely not an expert at this as website accessibility is often complicated. There are countless rules and the requirements for a commercial website might not be fully obtainable for the novice website coder; you probably won't get it perfect, but the important part is that you try.

The biggest thing you can do to improve accessibility? Add alt text to your images. The visually impaired often use screen readers to access websites, but screen readers cannot read off an image unless there is alt text associated with it. Without the alt text, your page might appear blank to these users, and if you use images as links, they will not know where the links go. To add alt text to an image, add alt=[description] to the image tag. When describing the image, consider what the purpose of the image is, and try to capture that in your description. If the image is simply a button with fancy text that links somewhere, it's best to make the description just the text of the button (so you would put "page 1" as the description and not "button with fancy text that says page 1").

Ensure readability. There are four characteristics to your text that can affect its ability to be read: font, size, colour, and spacing.

  • Font. When choosing a font for the body of your website, your best bet is to use a simple, easily readable font. This will likely be something like Arial or Verdana. "Fancier" fonts, such as the one I use for titles and headings, are nice but they can be hard to read at paragraph size. While this would likely just annoy the average user, it may make your website completely useless for a dyslexic or visually impaired reader.

  • Size. It's generally recommended to make paragraph text 14px or greater so that is easily readable. However, this will be dependent on the font, so really just aim for it to be easily readable without squinting at 100% zoom. Any headers should be an even larger size to differentiate them from the paragraph, but don't use header tags to simply create large text. More on that later.

  • Colour. In the case of accessibility, it's not really the colour of the text that causes an issue, but the colour in comparison to the background. If there is not sufficient contrast, it will be difficult to read, especially for those who are colourblind or otherwise visually impaired. The easiest way to ensure good contrast is to use an online contrast checker to check whether the colours you have chosen are acceptably different from each other. Reading this, you may be thinking "ok, well I'll just use the most saturated eyeburning colours available to increase contrast", and while this may have that affect, you'll likely just cause more accessibility issues because this can result in eye strain and headaches in some people. Just try playing around with the contrast checker until you find something you like with a contrast ratio of 4.5:1 or greater, aiming for a contrast something between "yellow text on white background" and "sparkle dog I drew on DeviantART in 2011."

  • Spacing. Have you ever opened a page and had it resemble a neverending wall of text? Not only does no one want to read that, but some people may simply not be able to at all due to vision, reading, or attention difficulties. Try to separate your writing out into easily manageable paragraphs so that it's easier to parse, and ensure you have good top and bottom margins on your paragraphs so that you can easily tell them apart. You may also want to use bold, italics, or a different colour to emphasize the main point of each paragraph like I have on this page.

Ensure functionality for screen readers. Aside from adding alt text to images, here are some other things you can do to help users of screen readers:

  • Add the language to your HTML tag. To help the screen reader know what language to read your website in, add lang="en" to your <html> tag (as long as your website is in English!). If your website is not in English, replace the "en" with the proper language code for your language. You should also add this attribute to any tags containing text of a different language than the rest of the page.

  • Use headings properly. The screen reader uses the headings (<h1>, <h2>, <h3> etc.) to help the user find what section of the page they want read. If you use these tags to create larger text for emphasis instead of using CSS styles, it will be very confusing for the user. Likewise, if you only use CSS styles to make headings without using the heading tags, it will appear as if there is no content on the page. It's therefore important you only use headings as headings, and use a CSS class to create larger paragraph text if you need to. Use the <h1> tag for the title of your page and the further heading tags for any subheadings.

  • Add page regions. Another thing that can improve usability for screen readers is to add <header>, <footer>, and <main> tags to your pages. The <header> and <footer> tags go around, well, your header and footer. The <main> tag goes around everything in the middle. This helps people to access the part of the website they want. Additionally, you should use the <nav> tag around the main navigation (set of links) on your site, so they can easily be found and used.

  • Be mindful of what you type. Now, you might ask, "so what does the screen reader do if it gets to text it can't really read?" The answer to that is it can get really fucking annoying. Misspellings and censoring (i.e. typing f*ck or d1e instead of the real word) can result in the program mispronouncing the word or even just spelling it out, both of which hinder comprehension. Excessive punctuation and emojis can also be an issue; the program may read off the name of the symbol or a description of the emoji for every instance of it, which makes getting through content slow and painful. Make sure to proofread your writing, keep the exclamation points and emojis to a minimum, and for the love of God, don't censor your words. This is Neocities, not social media. You won't get banned for saying die or fuck or woman or whatever ridiculous shit you have to worry about on there.

Make cool buttons

There are three ways to go about this: the easy way, the slightly harder way, and the "this is really cool but probably overkill" way. The easier it is, the worse results you're going to get (though even the worst results are still decent).

Embed a Flash game

Learn Javascript

Haha good luck!