Inspect Element Redesign

by Tom Kenny (@tkenny)

A month ago I launched Inspect Element with the aim of sharing what I learn in web design and development with the world. The basic problem was that the design just wasn’t up to my usual standard. It wasn’t rushed or pushed out early but had quickly become something that I wasn’t proud of. The combination of that and the fact that this is something I’ll be working seven days a week meant that I had to do something about it sooner or later.Old Design

There are a few things that were wrong with the old design.

Looked like almost every other blog on the internet

The standard homepage format of almost every blog is to have a list of most recent posts on the left and a sidebar on the right and this is what Inspect Element was like previously. Combined with the fact nothing about the design made it stand out, it just became another me-too blog. In my opinion, this was the main problem with the old design.

Couldn’t get the header into a style I liked

I fell foul of designer’s block with this one. I knew I wanted a colourful header but whatever I tried didn’t work. I knew that I would eventually get it right but after having a few attempts I needed to take a a different approach. This is very subjective and I may have been a bit too harsh on myself but upon deciding on the goals for the redesign, made perfect sense.

Too much grey

Again this is a subjective thing and something that I could have changed with relative ease but as part of the big picture, just had to go.

My initial approach was to take an iterative approach to the design and tweak things as time goes on but upon realising that I was enjoying my design less and less, my motivation for improvements was shrinking. I knew that I had to redesign in order to improve before I could even think about the iterative approach.

New Design


With all of this in mind, I could focus on the redesign much easier than I was able to than designing the first version. There are a few things that I wanted to achieve with the opportunity to redesign.

Better Typography

While the typography wasn’t an afterthought before, it certainly wasn’t up to the standard I like it to be. Probably the one weakest aspects of my work, so I took the chance to get it right. The use of @font-face helps.

Greater focus on content

The basis behind the removal of the sidebar on the homepage was to focus on the content. This ties in with better typography to draw more attention to the content.

More memorable design

By changing up the homepage, focusing on content and improving typography I believe I’ve that I’ve created a memorable design. Certainly more memorable than before.




Implemented this CSS3 technique to improve typography in modern browsers. Users of older browsers fall back on Arial as a web safe font which still does a good job.

@font-face { font-family: Anivers; src: url(../fonts/Anivers.otf) format("opentype") }

Comment Bubble Triangle

Believe it or not the triangle in the comment bubble is not an image but done purely with CSS. I came across a tutorial and adjusted it for my needs. There are a few positioning issues in certain browsers that I will fix in the coming days.

.speechTriangle { width: 0; height: 0; border-left: 7px solid transparent;
border-right: 10px solid #972324; border-bottom: 10px solid transparent; border-top: 0; }

Footer Link Backgrounds

To make the links stand out more against the black background, I gave them a red background with a bit of padding and a bit of border-radius thrown in for good measure.

#footer a { background-color: #972324; padding: 3px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

Opacity on Link Hover


This allows images linking elsewhere to distinctly change on hover making it more obvious that the images on the homepage click through to the article for example. Not supported in Internet Explorer but I will be using conditional comments to change the text appearance for the :hover state. Even added some transition effects for those of you using Webkit based browsers such as Chrome and Safari. The :active (click) state restores the opacity.

a { opacity: 1; }
a:hover { opacity: 0.5; }
a, a:hover { -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.2s; }

Better Form Design


Nice big form fields using red borders on :focus states to better indicate which field the user is active. Also, use of Webkit transitions for smooth transitions.

input:focus, textarea:focus { border: 3px solid #972324; }


Well hopefully you’ve learnt something rather than just read about me rambling on about the changes but I wanted to make clear the changes and why I made them and I think you can see that going forward this is a good start.

Please leave some feedback about the new design in the comments!

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.