Introductory Tips
- Be a beginner. Enjoy the newness of it all! It's okay to make mistakes, forget what you just learnt, and need lots of help as you pick up new skills. That doesn't mean you can't be ambitious or that certain designs are beyond you. You just gotta be patient on your way there.
Try the Socratic approach. "Admit you don't know anything; you'll begin to know more."
- Take it slow. You're doing this for fun, aren't you? Unless your website is a school project, you won't have a deadline. You can learn and create at your own pace, without pressuring yourself to be the best ASAP.
I promise, all your favourite websites, all your favourite works of art, everyone's favourite ANYTHING, took lots of time, effort, and dedication to create.
- Don't be afraid to start over. It took me 3 or 4 tries to create my first functional website— and that was just functional. As you see it now, Vivarism is the product of 5+ years spent refining my aesthetic, learning CSS tricks, and generally just developing as a human being.
Basically, be prepared to hate a webpage that once made you proud. That's one sign that you're growing!
One day I want to just rant and rant and rant about my favourite HTML+CSS things... But that's for a different article!!!
blahhh
Compress Your Images
For the love of God, please, if you take nothing else away from this article... COMPRESS YOUR IMAGES! When all you want to do is immerse yourself in someone's handcrafted internet aesthetic, doesn't it jostle you out of ~the zone~ if the page loads too slow? Many different factors contribute to load times, but the simplest one to solve is oversized images. Trust me, "anime_girl.png" does not need to be 3.44MB.
You don't even have to make your images physically smaller— as in resizing the height and width. We live in an age where you can still have a giant, highres image with an appreciably smaller file size. It's all thanks to the magic of image optimisation! That said, I do advocate for making images only as big as they need to be. If your anime girl only occupies about 300sqpx (square pixels), her original image does not need to be three thousand sqpx.
I use a free software called Caesium Image Compressor. It's so simple, it requires no elaboration. It's fast, robust, and can do things in bulk. I personally have it set up to automatically replace the original image, just for ease of use. If you want to have an uncompressed backup, make sure your settings DO NOT look like mine. Either designate a folder just for the compressed versions, or have it add a suffix like "_xs".
To compress .gifs, I use EZGif. TBH, I use EZGif for all my .gif related activities. It's such a stand up little site, I've never felt pressured to find an offline alternative.
When To Leave Images Un-Compressed?
Image optimisation works by reducing the overall number of colours in the picture. Very small images like pixels, or images with very few colours/faint variation between colours, should be left as they originally are. Use my art as an example, and the bg i used on MARCHsite...
Start With Templates
blah blah
Not All Templates Are Created Equal
When choosing which template to use, you should ask yourself what you want this page/your website to be. Do you want it to look good on both desktop and mobile? Do you want blah blah blah? Remember, a template is only as skillfully made
My Recommended Templates
One day I plan to make some of my own! But until then, I highly recommend Nenrikido's work. I can vouch for her as both an excellent webdesigner and phenomenal person.
Organise Your Files
Work Offline/Local
Create Interactive Designs
The best thing about a website is that you can point and click on it. Seriously! Make an interactive example?? links that do nothing, links that change colour on hover, links that slide... YEAH.
It's not very hurrdurr indie web of me, but seriously, one of my favourite instances of an interactive webpage is Apple's page for Airpods 2. blah blah. I was just trying to replace my stupid, worthless, wireless earbuds that I both love and hate, so I was pleasantly surprised to see so much care put into this design. The background moves based on your scroll position.
Protect Your Privacy
Anonymise Yourself
How many people know your first name, date of birth, and the state or province you live in? Well, that's the number of people who can find you with a single Goo*le search. It's up to you how fast and loose you play with you real identity, but I advise everyone to reserve 3D dealings for friends you genuinely trust. And just because someone else tells you a lot of their personal details does NOT mean you owe them the same information in return.
Basically, just be careful what you disclose online and to whom. For years I've been butting up against stories I want to tell or pictures I want to post on here, but Godly intuition curls in my gut and reminds me, "Flonne, anybody with a personality disorder could use this to find out what high school you went to." And then I don't post it!
Remove EXIF Data from Photos
EXIF data is some fancy code that tells you when and where a photo was taken, what kind of camera was used, and more. If you don't want internet people knowing where you live, then while you're compressing your pics, you should wipe the EXIF, too. At the bottom of Caesium's "compression" tab, there's a checkbox that says "keep metadata." Leave that unchecked.
Many social media websites— and I think Neocities, too— automatically remove the EXIF for you. But if you're hosting on your own, or otherwise unsure what privacy protections the platform offers, better safe than sorry. Plus, you're compressing your pictures anyway, aren't you?! It's easy!
Most Importantly...
☆ Have fun!!! ☆
I'm being so for real right now. What's the most fun and interesting thing about making or maintaining a website? What motivated you to start? What keeps you coming back? Whatever your answer is, focus on that. That's what turns problems into puzzles.
I make websites because I adore CSS. I'm not so good at drawing or drag-n-drop type graphic design. Being so easy to write and reproduce, CSS lets me create adorable, interactive visuals that would otherwise stay trapped behind a skill barrier. For me, the entire process— the flash of inspiration, laying everything out in HTML/PHP/CSS, finally populating the page with all my illustrious words... It's just so satisfying!
I love the culture on the indie web, too. Here, we expect slow-paced, long-form content, and the connections I've made through Vivarism outpace my long-forgotten social media mutuals by miles. This is the only online space I want to exist in. Cultivating a cute little corner of the web, just for me, my friends, and whoever else might stop by... This is my greatest joy.
What About You?
Yeah, YOU! Why do you make websites, or want to start making one? Tell me everything— get your inspiration flowing!