The first six months of Inspect Element have been great but it’s time to step it up a level. If you’ve been following Inspect Element lately, you’ll notice that everything looks new! Times have changed and the site was in desperate need of a redesign in order to grow and improve. Although saying that, I wanted to carry over the fundamentals from the previous design including keeping a minimalistic appearance to keep the focus on the content.
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.
Hi Tom, I’m glad you’re back and ready to start posting more content for 2010.
Here is my opinion of the redesign:
Why I like the minimalism of the new site, I do feel like it lacks a bit of character. I personally liked the old design better. The contrast of the old site was good. I do like some of the CSS3 features that you have implemented. I like the hover effect of the logo. Also, I actually liked the unique way you did the posts on the homepage before, but I guess this redesign is more of a conventional blog.
One last thing, I noticed that you are using Helvetica Light. On a mac, it renders really well, but on my PC, it’s barely readable. Oh, and I just noticed, since my comment is long, the comment box doesn’t have a scrollbar, thereby preventing me from viewing my comments. You might want to fix that.
Anyway, that’s just my opinion. Looking forward to reading your posts in 2010, especially that one about the PS3 interface. Sounds intriguing.
Oh, and when I left a comment, the “Your comment is awaiting moderation” is overlapping the actual comment. Here is a screenshot. http://dl.dropbox.com/u/774908/inspect-element.jpg – Notice how it is barely readable? Hope this helps in fixing and tweaking the site.
Thanks for the feedback Jad. The comment box is supposed to grow as you type beyond the original size but it seems like I need to do some more testing on that so I’ve removed it for now. I’ve fixed the comment moderation issue. Thanks for bringing that to my attention.
As for the design of the homepage, I also liked the way the way it was before but you’re exactly right. I think it was ultimately suffering from not following the standard conventions of a blog. I’ll plan on reviewing the homepage in the coming months.
Good work! I like the new design, it is clean and neat. The first things I noticed was logo, rss&twitter area and title (in that order) which is good.
There are a few minorities that grabbed my attention. The big search bar at the bottom is somewhat confusing, at the first I thought it is a part of the comment form. The other thing is comment button on the right. Both these things affect clear path to completion to some extent. Maybe moving search bar to the top of the page on the right side of the menu? Just a thoughts.
Oh, yes, buttons are really awesome! I like the effect on :active state. Keep up the good work, Tom.
I understand what you are saying with the search bar and it did cross my mind during the development. That is one of the things that I’m likely to be tweaking soon.
Hello,
I’m french and I like your blog ;o
I don’t know if you’re aware of it but on IE6 your sidebar is at the bottom, under the content. and the header is quite messy.
But I love the CSS transition on FF !
Thank you.
I’m aware of the issue in IE6 and know it would be a fairly simple fix but not worth my time as only 0.63% of visitors are using it and most, if not all, are like yourself and just have a quick glance.
So basically, I’m not supporting IE6!
I totally digg the redesign. All the small CSS3 touches combined with attention to details make this site more than awesome!
Great work!
I like the new look and feel, I am still exploring all the newness. Will let you know my thoughts…
Great work on your redesign. I love the way you have stripped everything down to the bare essentials, yet kept the site visually appealing. Content is king in a blog and not showing how many Photoshop tricks you know.
With that said, the only aspect of the new design I feel is awkward is the search bar at the very bottom of the post. Perhaps you should have one at the very top and another at the bottom (if you don’t want the user constantly scrolling to have to find it). I have to agree with Janko that I found it to be slightly confusing at first as I, too, thought it was part of the commenting system.
Good job on the redesign, I really like it.
The new design looks good, I love the hover effect on the logo, the buttons and the style of the Twitter & RSS stickers.
I agree that the location of the search form may be confusing. Now that you are showing tags, when you have some spare time, you can review the names (wallpaper and wallpapers are the same).
Love the new design.
One little thought is as IE don’t support rgba, it could use the hexadecimal color values for button borders.
Hi!
Nice design, very light and welcoming. One thing, your pagination isn’t working.
Nice redesign! I like that fact you used Bello™ for the logo, what a great font – and the CSS transitions are a really nice touch, too
Thanks Jon. Bello is a great font and I knew it was perfect for what I need as soon as I saw it.