A Web Designer I am Not

At long last I have updated the web design of all my web pages. That includes this blog, the KarjaSoft homepage, the game pages for Wildhollow and Sheeplings…and, most importantly, the Spandex Force series pages.

The word “series” is key in the sentence above. Previously I viewed the Spandex Force and Spandex Force: Superhero U as completely separate pages, for two very different games. However, given the upcoming Champion Rising I’m forced to realize that I have in fact created a series of games. As a consequence I aligned the design for all three game webpages, and added more visible links to each game. After all, if someone likes the humor in one of the games it’s highly likely that they’ll be interested in the other games too.

Which of course means that I will have to make a buy-all-three-games bundle as a promotional item, once I launch the newest game. Not doing so would be criminal neglect from my part!

Another thing worth noting is that the design is…serviceable, but not great. I’ve tried to make innovative and cool web designs in earlier years, but right now I find myself focusing on usability rather than pure looks. All sites are designed to scale up or down according to the device screen size. As I have a Galaxy S3 phone and a 1920 laptop I’ve made the pages scale decently to both of those resolutions – but with a bit of luck they will look good on all in-betweens as well. Bootstrap is really a godsend for all of these nitty gritty responsive design issues – but I wouldn’t recommend anyone to use it plain vanilla style. The only way to get a page you’re happy with is to do some manual editing of certain aspects.

For example, having a completely collapsable menu is something I just don’t like. It looks ridiculous and is much too cumbersome to use on small devices. So I’m overriding a lot of the default behaviors like that. Also, I had to dig into how the @media CSS items work. I know that all “true” web designers will scoff at simplifications like this, but I found that the only way to keep sane is to limit the responsiveness to two levels: @media (max-width: 767px), and @media (min-width: 768px). Keeping track of all other variations outside of that just becomes ridiculously complex.

Finally, something struck me that I should have seen a long long time ago. In my games I’m adamant about always giving the player feedback – scale buttons when hovering over them, or change the opacity, or do something at least. On my web pages I’ve been using non-responsive static images as links for way too long. So, in an attempt to join 2014 I’ve finally employed some simple CSS3 opacity transitions as well, to try to give a more playful experience to the visitor of my sites. We’ll see if it works out well or not.

All in all, I’m happy that I spent these long hours digging into Bootstrap and modifying all the pages. I still have some work left on the actual game as well – but this little detour was necessary!

Leave a Reply