A Rant on my Style

I never really liked the clean or modern or flat look of most websites to be honest. I mean, I'll admit that it is simple and easy to understand, but I think that its purpose no longer really applies. Lemme explain…“”

You remember not too terribly long ago when the web was flashy? A lot of people did  it very poorly, but it was a thing people did a few years ago. You weren't likely to see it on popular websites, but quite a few individuals with a blog were obviously rather fond of making things shiny. I'm not saying it was exactly a good idea, but it could be made to look good and give a page some character. That era of the Internet ended a few years ago, and we have phones with Internet access and responsible developers to thank for that.

The problem with those not-so-simple websites was that they took up a lot of bandwidth and often required Flash. With the rise of the mobile era, these designs became impractical. They would take forever to load, and just couldn't render properly due to various limitations. There were certainly some terrible designs, but it was compatibility that caused them to meet their demise.

Fast-forward a couple of years and you get the web that we know today - boring, in my opinion. Seriously think about it, everything looks the same! Aside from a few variations in color, it is almost impossible to distinguish on website from another without reading. That isn't a bad thing though, designers just found a formula that works and it became the standard. It does, however, remove a lot of character and eliminate the possibility of making an impression.

And do you want to know the crazy thing? Most of those simple websites load a lot more slowly than mine, use more images, are more complex, and really aren't optimized as well for mobile. The reason for that is that CSS and SVG are just amazing today!

Let's take a quick inspection of all of the things on my website that you would probably expect to be some rather large image:
  • The background of the page - SVG (12.79 KB and resizes perfectly to any size)
  • The page title in the header - CSS (font and shadow)
  • The buttons in my main header - All CSS (gradient, border-radius, font)
  • The glass-like background for the main content area - CSS (gradient, border-radius)
  • Headers in articles and sidebars - CSS (gradient, border, and font)
  • Article, sidebar, and footer backgrounds - CSS (gradient and shadow)
  • Icons for tags, buttons, etc - CSS (font)
  • Icons in my footer (SVG, < 4KB a piece and look good at any size)
  • The Copyleft icon - CSS (transform of regular ©)

The Grand-total of all images used on this website is just under 88KB, and I will be reducing that by quite a bit when I get around to combining them into a single file. The cursor that I use on click-able things makes up for half of all images in terms of size, and I've been wanting to change that for a while now because I think it's too big.

Screenshot of my load times according to Pingdom

The downside to all of that is that gradients, SVG, etc. are not supported in most versions of Internet Explorer, and unfortunately developers and designers still have to make things work in IE8. I would have done things differently except for the fact that my target audience is web developers like myself, and I expect for them to be using good browsers. Also, as I talk a lot about the cool things you can do in modern browsers, I figured that I should probably make the website itself a showcase of the things that I'm talking about.

No, I don't think that designers should all start adding flashy graphics again. I just wanted to point out that CSS and SVG make it possible to have some very graphical designs without causing an increase in load times.