Some of you may not know that Inspect Element is a one-man-show and basically I’ve just become too busy lately to doing any work on new tutorials and articles. You may have noticed that I haven’t posted any content for weeks and have even been too busy too write this post up until now! Apologies for that but the last few weeks have been a combination of new job, moving and currently having extremely limited and painfully slow internet access (tethering via iPhone) in my new place.

I hope to be back up and running in the first half of may. Follow me on twitter to get updates closer to the time. I’ve still got plenty of original ideas for new articles and tutorials. My Evernote is bursting with new content ideas so stay tuned!

One More Thing…

There will be fewer posts on Inspect Element than previously. Likely to be every two weeks rather than every week. This is so I can focus on quality content as there has been some work I haven’t been 100% happy with and that needs to be rectified.

Once again, apologies for not keeping you up to date but get ready for the return of Inspect Element soon!

Hopefully this new design conveys a sense of higher quality, something that I have been trying to do with my writing after writing for the last couple of months.

Here are some of the improvements and additions that I’ve made to help make you time here, not only more usable but more enjoyable.

Improved Search Pages

Embedded into the title when searching for something is what you’ve searched for as well as the number of articles found. Your search word is highlighted with a different colour to stand out and the background is a different colour to indicated you’ve performed a search to get to this page.

Tags

Now there is more than enough content, you’ll see a list of all the tags used on Inspect Element in the sidebar. It was pointless having this previously as there wasn’t enough content available to make it worthwhile. Similar to the search result pages, the title clearly indicates you’re on a tag page.

Awesome Buttons

Zurb put together some amazing buttons using the power of CSS3 and wrote about it on Smashing Magazine. Inspect Element is using slightly modified versions of these buttons because they really are awesome.

CSS Transitions

Using a few CSS transitions that visitors with the latest versions of Safari, Chrome and Firefox will see. Find out more about CSS transitions in this excellent article on 24ways. I’ll let you discover them for yourself.

Threaded Comments

File this one under ‘finally’ as it was something that I wanted to implement into the old theme for a while but just didn’t get around to.

Only the Beginning

There are still some things left to do that I haven’t had time for including a print style sheet and a mobile version. Also, I’ll be making tweaks as time goes by and depending on feedback.

Opinions Welcome

Ultimately, this redesign is for you, the readers. So please let me know what you think about it. Constructive criticism welcome.

I’ve decided to take a break until January 4th to recharge my batteries, spend time with my family and friends through Christmas and New Year, play some video games (Xbox Live GamerTag – KennySim) and make sure that Inspect Element returns in 2010 bigger and better than before.

Talking of better…

Redesign

Another reason for taking the next week or so off is to finish off the redesign of Inspect Element. That’s right, when we return on January 4th, you’ll see a brand new, much improved design. The current design has become messy and a disjointed to the point where a complete overhaul is the only remedy. Lacking from the current version are things like a print style sheet, mobile version and threaded comments which will all be addressed amongst other things.

It’s nearing completion as we speak so here’s a small teaser of what to expect:

All will be revealed next year along with a blog post about redesigns, including the motivation, picking out a few interesting elements of the new version of Inspect Element and how to achieve it with a healthy mix of Photoshop work and designing in the browser.

Happy Holidays!

Have a fantastic Christmas (if you celebrate it!) and an even better New Year!

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.

Techniques

@font-face

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; }

Progress

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!