What this site used to look like

I’m not a web designer. Well, that’s not strictly true. I can (and have) built and launched websites, it’s just that no one has ever actually paid me for doing so. As a result, all of my design chops have been developed by working on my own websites, of which of this is but one. This is a quick history of what my music reviews website used to look like over the years.

2007: Beginnings

Site Name: “Rafi’s Reviews” or something corny like that
Tech Stack: Adobe Dreamweaver MX 2004
Site Launched: Summer 2007
Why I Stopped: I didn’t know to how use CSS or create page templates. Or menus for that matter.

It’s tiny, I know. Apologies.

So I don’t actually have any screenshots for this, but being that it was my first attempt at creating a site, I can assure you it looked absolutely grotesque. I had no understanding of design principles or colour theory, so the website had a dark gray background, white text (awful for contrast), and the bane of pre-2010 site layout, TABLES! The site’s header image was a dim photo of an amplifier. I no longer have the original image, but I was able to retrieve a cropped version from Sputnikmusik, where I used it as a profile photo. Some of my older reviews are still there. I had several reviews on Epinions.com as well, and wanted to have a single digital home for all my writings.

I was in college then, and every student had access to a personal web server with the URL community.middlebury.edu/~your_email_id . I had access to Dreamweaver, a WYSIWYG website builder as I worked at the school’s IT Helpdesk; we had license codes for a bunch of tools like that. Dreamweaver had a feature that let you connect directly to the FTP server, and edit the live site on the fly. These days I know this is really bad practice, but at the time, it felt like the fastest way to do things. Why waste time saving changes locally, making a backup and then uploading the latest version to the server? Why not just cut out the middleman and edit directly on the server itself??

The site was most active during the summer of 2007. I was living in Baltimore, doing a summer internship at the coal and gas finance division of an energy company. Pottering away on the site in the evenings with some music on was a nice way to wind down after work. That summer, two records reigned supreme on my playlist: The Fratellis’ Costello Music and Black Rebel Motorcycle Club’s Baby 81 .

Once school started up again in the fall, I rarely had time to update the site. Plus, I was getting frustrated because I couldn’t figure out how to update menus. If I added a navigation menu item to Page A, I would have to duplicate that on Pages B, C, D, etc. And I’d seemingly have to do this every time a menu was updated! This was a static HTML site, so there was no way around that. Of course at the time I didn’t know about PHP includes that would neatly solve that problem.

I graduated in 2009, and I think the web server was shut down shortly after.


2015: A Humble Reboot

Site Name: Shoegaze Haze: For the Discriminating Distortion Connoisseur
Tech Stack:
Skeleton 2.0 CSS, Sublime Text 2.0
Site Launched:
December 2015
Why I Stopped: I liked the design, but a fully static site just wasn’t going to work with the number of pages I had

I’ll add a link to the old site once I upload the folder to my server

At this point, I’d been working for a small tech company for a couple of years, and found myself managing a software redesign project. I’d taken HTML/CSS video courses on Treehouse to familiarize myself with the basics, and that got me thinking about bringing back my old reviews site. I had started a Tumblr in 2014 which was exclusively about dreampop and shoegaze reviews, and felt that material was a good candidate to include on my own site. I hadn’t visited Epinions for years at that point, so I hadn’t even realized that the site had been shut down in 2013. The rationale for creating a site to host all my own writing was stronger than ever. I purchased the “shoegazehaze.com” domain and got to work.

I’m quite proud of how this design turned out, even though I didn’t stick with it for very long. At this point, Dreamweaver was long gone. The site was created by writing HTML and CSS in a code editor just like a real programmer! I used the Skeleton 2.0 CSS library for setting up a grid with rows and columns (bye-bye, <table><tr><td>). It seemed simpler than the alternative Bootstrap, which had a heavier library with a bunch of bells and whistles I didn’t need. With Skeleton, I could focus on brushing up on the million other things that make for good design: margins, line-heights, whitespace, typography hierarchy, etc. I still think that the track listing table is the pinnacle of my design work. I’ve just never made anything else that made me sit back and think ‘Hey, this looks pretty nice’.

old website reviews page design
The review page index.
A drop cap on the first word, so you know that this is a classy site

What I also liked about building this site was that I was finally able to solve my 2007-era problem of dynamic menus. Learning about external CSS styles showed me to make changes in one place, and have them be applied site-wide. I started searching for ways to do the same with HTML, and came across the magical <?php include 'page_name.php ?> . Of course this meant that I now had to rename all my .html pages to .php. Also, I could no longer view pages in the browser by just double-clicking the file location on my hard drive. I had to create a local Apache server with MAMP and access the pages in the browser with localhost:8888/site_name/site_page.


2016: Switching to WordPress

Site Name: I’m still strangely attached to “Shoegaze Haze”, even though it doesn’t exactly roll off the tongue
Tech Stack:
Bootstrap, WordPress + ACF, Sublime Text
Site Launched:
Summer 2016
Why I Stopped: The way I built the site made it a giant hassle to add track listing tables to review pages

The live site doesn’t work anymore because I just dragged the folders on to my hard drive, thinking that’s all it took.

Around this time, I had quit my job, and was thinking about getting into freelance web development. Doing that meant learning how to code for a Content Management System, or CMS. WordPress was the biggest CMS by far, and free and open source, so that’s the direction I went in. Going from static HTML (with PHP includes) to full on WP was a very steep learning curve, because everything works differently inside a framework. With regular HTML, a page is literally a file in a folder, which is a concept that’s easy to wrap one’s head around. Your website link structure works exactly like your folder directory structure. With WordPress, pages are NOT individual files. WP saves post data (like your article content) to a database. When you click a link, the web server pulls data from different tables in the database and dynamically generates a page. So if you “back up” your WordPress site by dragging everything from your FTP folder to your hard drive, it won’t work, because the PHP and CSS files provide scaffolding only. All the content still resides in the database.

Because I was learning all this new stuff, and using Bootstrap instead of Skeleton, the site design suffered. I wasn’t content with replicating the 2015 design with Bootstrap, so I came up with this monstrosity. I’ve been using Bootstrap ever since, as it’s extremely powerful and as I grew more familiar with it, I began using more and more of its UI components on other sites I was working on. You can assume that all future versions of the site were created with it as well.

With responsive design, the layout possibilities are endless!

You can’t see it, but the header image is animated. it scrolls vertically, showing a mosaic of various shoegaze album covers in pathetically low resolution, to keep the file size down. I also gave the page an ugly grey background. All the images are monochrome by default, and the colour versions are visible only on mouse hover. Why? I don’t know honestly. I was caught between doing old-school web stuff where things were designed for desktop users only, and playing around with cool new CSS filters for our brave new world of responsive web design.

WordPress made me think about structuring data in a more streamlined way. I began using the Advanced Custom Fields plugin to add special field groups to page templates. For a music review page template, there were special fields for “Artist”, “Album”, “Release Date”, etc. Usually I would have stored this info in the article body. But splitting them up into their own fields, allowed me to query and display this data on the “All Reviews” index page as well. So instead of using a variable like “Post Title” underneath a thumbnail link for the page, I could use “Artist Name” and “Album Name” for a cleaner look.


2017: Dark Mode Introduced

click for the full image

Site Name: still Shoegaze Haze
Tech Stack:
barebones PHP, HTML/CSS
Site Launched:
Summer 2017
Why I Stopped: My shared hosting package with Bluehost made the site slooow

click for the full image

WordPress has a nasty habit of breaking in largely invisible ways. Because I was a newbie, I didn’t realize that changes made in the wrong places on functions.php and wp-config.php can result in a terrifying blank white screen when you load your site. I decided to go back to PHP includes only, thinking that I didn’t need all the cruft of a full WordPress install. Also, I wanted my pages to be flat files, so to speak. None of this database nonsense, thank you very much. Also, this gave me an opportunity to refresh the design once more. Introducing the new, dark-mode Shoegaze Haze! Now with sections differentiating shoegaze, noise pop and dream pop!


2019: A new domain, web host and an interactive homepage

Site Name: Fuzzcrush
Tech Stack:
barebones PHP, Figma/Sketch, Metafizzy Isotope
Site Launched:
February 2019
Why I Stopped: to switch back to WordPress once more

Retiring the Shoegaze Haze name

I reached a point where I was tired of writing about shoegaze. The adjective well had run dry: I simply could not describe a song as ‘swirling’, ‘ethereal’ and ‘oceanic’ without wanting to throw up. My Epinions and Sputnikmusik profiles were more representative of my musical tastes, which span across numerous genres. I had limited myself to shoegaze because I thought a single-topic website would be cool and also rank well in search. Well, it didn’t. And trying to make a popular personal website in this day and age seemed futile without promoting the content on FB, IG, Twitter, Reddit — which I didn’t want to do.

I tend to be indecisive about names, but Fuzzcrush for some reason made sense to me. It originates from “Fuzzthrower”, a song by British shoegazers The Cherry Wave. I picked the name and an cheap TLD .xyz from Namecheap and started creating what is now a repository of writings going back to 2004. I’d later discover that my office’s IT department had blocked access to all .xyz domains. Which is understandable; I mean, what are the chances that something with the domain .xyz is work-related?

This site reboot featured an interactive homepage. Rather than a boring, static listing of reviews, you could now filter the reviews based on genre, with a nice animated transition. This was made using the Isotope library. The design did need to be re-jigged to work well and look good on mobile.

A new interactive homepage for Fuzzcrush. Bye, Bluehost!
A screenshot of the review page template

Hosting

When I started out, I bought the cheapest hosting I could, around $3/mo. for 2 years, and then after that the price jumps up quite a bit. Shared hosting can be slow, and there would also be numerous instances where I’d try to access the site and the loading indicator would just spin for a long time before timing out. I had read on Hacker News about people setting up their websites using a US $5/mo VPS on Digital Ocean. VPS have dedicated bandwidth and processing power from what I understand, so sites should have much lower downtime and significantly more speed.

So I had to learn to configure a Digital Ocean VM. The VM runs a completely barebones Ubuntu install, with no graphical user interface. To get my site running, I had to install PHP, which has to be done using the command line. A bit scary, but I did manage to get it working. One of the things I missed from WordPress were the ‘prettified’ URLs: there was no .html or .php file extension shown at the end of the web address. I found out that URLs can be re-written to trim that stuff by editing the .htaccess file in the root directory of the web server, so I copy/pasted in some code I found on Stack Overflow to get it working. I now had nice URLs!


2020: Crawling back to WordPress + new design

Tech Stack: WordPress, Bootstrap Studio, Pinegrow Theme Converter
Site Launched:
February 2020

Another New Design

There wasn’t really anything wrong with the existing design, but I did notice that the dark theme didn’t look as legible in bright daylight. I used to go to Starbucks after work, and during daylight hours it’s really bright in there. So I wanted to go with a lighter colour theme. I had purchased a book about punk zines in the ’70s and ’80s an wanted to give my site that kind of DIY look, but y’know, without looking like a full-on Geocities site.

I thought a more casual look with a bit more frivolity would be OK, as this is after all a personal website. After a few years of Google Analytics data to look at, it’s clear that this site will not supercede the likes of soundsbetterwithreverb.com in search rankings for shoegaze records. The site hasn’t updated since 2018, but the sheer volume of content on it means it’s more likely to rank on search results. To date, the most popular page on my site is a review for Singapore shoegazers Stellarium’s 2009 debut. Second is a review for Alison Halo’s Eyedazzler 92-96 record, so it’s usually long tail search queries that lead to my site.

Knowing that I won’t be able to beat established sites makes me feel more comfortable about using it as a digital garden, a place for me to play around with new things and experiment. During lockdown, I made a series of zines for my Instagram account. They now reside on my website as simple image carousels. The SEO is awful as I haven’t added in a transcript, but IMO, this is still fairly unique content that you won’t find elsewhere, and it gives the site some of that old-school DIY flavour I’m going for.

Fuzzcrush - 2020 update
A bright new theme for 2020

WordPress once more

After years of writing HTML by hand, I started looking at page builders once more. HTML is great, but for a site of this nature, I’d like to be able to play around with layout and see changes in real time instead of painstakingly creating the layout in code and then previewing it in the browser. I took a look at Elementor, Beaver Builder and Oxygen, but none of these really met my needs. Ultimately, it was a combination of two WYSIWIG tools that did the job.

Bootstrap Studio is a one-time purchase (love those!) for an IDE software that lets you visually create websites using Bootstrap. I need to be able to edit HTML and CSS as I work, so BS Studio is a really great fit for this, as it includes code editors for this exact purpose. it also introduced me to a bunch of useful components Bootstrap has, that I previously had not used, such as accordions and popovers. It’s nice to be able to drag and drop these into your canvas, to check out basic functionality instead of using the code snippets on the official documentation.

Pinegrow Theme Converter is a standalone add-on for Pinegrow Web Editor. It can convert static pages made in Bootstrap Studio into dynamic templates for WordPress. So for example, I can select the <nav> element and set that as pre-defined template part, such as the navigation menu. Or I can select a Heading element and set it to display the value of an ACF field.

That’s all for now

I’ll keep this page updated to report on future facelifts. Thanks for reading!