Homepage

VeeTwo - The Rebuild

This site's had a few months for me to break in, get comfortable with, and figure out what I like and don't about it. And as much as a lot of the improvements I want are stuff I could tack onto this, I'd rather not let this snowball into an undocumented mess of experiments and ideas. I'm going to rebuild it, and if nothing else use it as an excuse to get used to making devlogs.

The Starting Line:

The Old Logic:

  • The aesthetic I wanted was some sort of semi-transparent frame. Sort of like a monitor.
  • A way to colour code pages to indicate visually where you are.
  • Aesthetics is largely secondary to function. It should be easy to read and use first of all, and then dress it up in ways that don't feel too terrible.
  • Responsive on devices. Obviously certain devices will always be better suited to different content, but it should all be bearable even if suboptimal.

The Reaction:

  • Conceptually, it has merit. Just so far none of it is outstanding.
  • I hate the dead space at the bottom on desktop.
  • I hate the header filling up the top on mobile. This also creates two tiers of scrolling, as the device figures out if you’re swiping to refresh the page or to go down the contained element.
  • The background is exclusively taken up by the main screen. In some ways this benefits the sillier backgrounds, but I’d like the ability to scroll past it.
  • The buttons are cute, but they can get their own page, or be called when they’re relevant. An RSS feed or a follow reminder doesn’t need to chase you around the site when it could remind you at the bottom of posts.
  • Breadcrumbs aren’t hugely useful when the potential depth is 3 pages deep. It is a little arrogant of me to say as a creator, but I'd like to think if you get lost here, that's on you.
  • The homepage sucks. The changelog is out of control. The rest of it doesn't sell you on the page.

The Limitations:

  • Not many. This site is small enough to correct changes manually in a feasible time.
  • Ideally I’d like to reuse existing systems to reduce the effort where possible.
  • I’d like to not leave bloat from the total redesign. To support the archive page at the top of the post, I’ll need the previous css, but the rest of the data could be baked into the website.

The Future Vibes:

  • The way blockquotes are filled with only a left side border and conjoin with hr elements has potential to shape the design
  • More with coloured themes on each page, and experiment with iconography so I can stop fretting about colourblind accessibility.
  • I like a good gradient, although I have no idea if that’ll look good.
  • In theory I enjoy the idea of a faux screen holding the site above a background. In practice selling the effect is harder and probably requires textures, which I can’t guarantee to make work across multiple devices.
  • The logo/return to home button should sit in the top left.
  • Direct information, minimalist. These lists. So I should style ul tags.
  • Test Drive Unlimited (PS2, at least)’s menus and chill tone is in my head.

The How:

  • The background sits first, probably built into the body, simply calling an image
  • On top of that sits a grid of a blank dive grid split into three segments, where the central element holds everything. This element is what scrolls.
  • I’m fuzzy on the specifics but I want to make the maximum scrolling distance something like (100% + 100vh), so you can scroll past the screen and see the background cleanly.
  • The further into the foreground I get the less clear I am. The blockquote and code css can stay verbatim. Fonts are fine.

The Ponderings:

  • Would using the details tag to extend the scroll to view the background feel natural? The alternative is giving every page an entire screen more of scrolling than needed.