New Site Who Dis?

New Site Who Dis?

Not long ago, I announced on Twitter that I would be building a new personal site. Well, it’s here. For real, this is it.

How It Started

It started with a desire to rebuild this site. Based on that basic desire, it left me with a few options:

  • Customize an existing design, then build something based on that.
  • Hire a designer to design something for me.
  • Utilize my horrendous eye for design and build something myself.

Considering that I’m absolutely garbage at designing anything, the first two options solve a major piece, but come with a downside - as the site evolves, I’m going to have to create additional components that fit within that overall aesthetic. For a designer, it’s no big deal to come up with soolutions using an existing design, but for me, it means making more decisions that I already suck at making.

So I got to thinking… what if I could come up with something that embraced chaos? Could I encourage bad design practices with total disregard for consistency, therefore minimizing any design choices whatsoever?

Conceptualizing the New Site

Now that I had an idea of how I would approach this new site, I had more to think about:

  • I still plan on putting useful information on here. How do I make a chaotic site that’s still readable?
  • Accessibility matters. I want the new site to be painfully ugly, while still providing sanity for those who may need it.
  • Can I minimize the negative SEO impacts of a site that intentionally goes against the status quo?
  • I still don’t want it to be “just bad”. I want it to be so bad that it’s good. How do I build this site in a way that makes my intentions immediately apparent, encourage exploration, and show off some cool ideas?

Calming the Chaos

Dark and light modes are awesome - they satisfy aesthetic preferences while also addressing accessibility benefits in whatever way best suits the user.

That got me thinking - what if I added a third mode that puts all of the chaos aside? Thus, Sanity Mode was born.

By introducing a third mode, I can still take users on a wild ride through this beautiful disaster of a website, while still offering an accessible mode that can either be switched to or automatically detected based on browser needs. Everybody wins.

(Accessibility expert friends, reach out and let me know how it works - I’m far from an expert on this.)

Plain, Machine-Readable Markup

I’ve been writing content for what seems like ages. One thing that drives me crazy is when the main body content becomes bloated and convoluted. It’s not a good experience for anyone; it’s hard to maintain, complicated to parse, and worst of all, it provides a substandard user experience for those who just need to consume it. I’m looking at you, news sites.

To keep it clean, I’ve taken the Geocities approach. Static, simple markup that anyone could produce. Not only does it help to eliminate complexity, it also makes it easier to consume for both humans and bots. The styles might be ugly AF, but the markup doesn’t have to be.

Thanks to static site generators, partial hydration, and server side rendering, I don’t have to deal with a bunch of client side scripts either. The only things rendered client-side are the interactive elements, and only when necessary. Light, fast, clean, easy to maintain, and easy to consume.

Putting the Dumpster Fire on a Pedestal

As I said earlier, the primary design descision was to disregard design decisions; a point that I want to make immediately apparent to tech and non-tech folk alike. How? Wrap the whole damn thing in a Windows 2000 lookalike window, of course!

After I got to work building the wrapper, I thought to myself “what do I do with these window actions?“. Then it occurred to me - that’s my navigation. It fits the aesthetic, I can just reproduce what’s been done in the past, and it eliminates the need to figure out where to put these other miscellaneous controls. Since it’s all a reusable component, it’ll probably come in handy when applying to other contexts too.

Overengineered solutions to stupid problems hold a special place in my heart. Since most of you reading this are developer friends, I decided to put a little bit of icing on the turd-flavored cupcake and publish the entirety of the site on GitHub. Easter eggs and all. Who knows, maybe there’s even something useful there for you.

What’s Next?

Who knows. At the very least, I plan on blogging here, sharing useful snippets, or implementing bizarre features that have no purpose other than to scratch an itch.

Poke around and let me know what you think. Most of all, have fun with this stupid site.

Comments

And now Hot Dog Stand. Thanks, I hate it.
Here via Topher who sent me this when I was fretting about my own website looking too amateurish. And I have to say I LOVE THIS!!!! This is giving me Y2K frenzy and early 2000s Geocities aesthetic. Made my day!
I love every aspect of it. So well thought out! 😎
comment author avatar
Robert
Amazing font choices 😂 and kudos for bringing some fun back to the web 💯
This is fantastic! Love it.
comment author avatar
BobWP
Sanity mode? Who needs that!
Love the new design haha
Love it but missing one thing. A scrolling marquee. Miss you man!
comment author avatar
Harry
I'm bringing guestbooks back - those other websites don't know how to act. I hope you sang that out loud reading it :-)
I want to see what I look like all pixelated and stuff
Where’s the toggle for the Mac version? 😄
You are missing a construction worker gif.
RSS feeds are now added!
comment author avatar
JJJ
I hate it. It’s perfect.
comment author avatar
Skyler
I'm a fan. That is all.
This beautiful disaster made my morning!
It's one of the first things I do after I get a few other fixes in!
Hi. Do you have a RSS feed as I cannot get my reader to find one. Look forward to seeing how the crazy design goes. Dale.
Leave a comment