Website Design

I work at a tech company called Apptio, who delivers a complicated suite of business software to IT departments of large companies. Luckily for me, this software is served entirely through the web in HTML, CSS, and Javascript, so I can use CSS to style and control it. I enjoy my work, but because we support browsers as old as IE7, have a complex codebase, and are generating HTML instead of writing it, I can only use a fraction of the technology that the web offers.

And everything is different with this website.

I’ve coded it from scratch, so I have complete control over its code complexity. I can write my own HTML (thank god). I can decide for myself what browsers to support (sorry IE7–and you’re next IE8). I also don’t have a whole lot of free time to spend on developing this website, so I’m cutting compatibility corners here and there.

I’m sure that members of the web development community would question some of my practices, and these are my reasons. I still felt dirty when I decided that I wouldn’t include Javascript fallbacks for CSS3 animations, and cringe a bit when I give IE7 the finger in just about every aspect of development. But I’m having fun.

Now to the other aspect of this website: the design. In the past, my designs have been a bit chrome heavy. Too many gradients and lighting treatments–bad habits that I view as crutches. With this website I took the challenge off of the UX portion and put it on design. My first and foremost design goal is to make a clean, open website with minimal-design.

So, what’s with all the dropshadows? Good question. I want to make this website have a cool factor, and I’m aiming to do so with unobtrusive CSS3 animations and transitions. Hover and click to take a look:

(animation requires Chrome 1.0+, Firefox 4.0+, or IE10+)

Sign Pivot


Fly Away


Fade and Hover


Live item one


Live item two


Weighted Grid

(Coming soon–it’s hard. Will skew whole grid based on which child is hovered. Pivot on y axis.)

What do you think?

This entry was posted in Blog. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted August 1, 2012 at 3:05 am | Permalink

    Hi Brent,
    I like what you’re doing here!

Post a Comment

Your email is never published, nor shared. Entering your website is optional, but good for networking!


Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>