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!

If you’re wondering, I have plenty of great blog post ideas lined up (my Evernote account is chock full of them) so hopefully it will be worth the wait!

Snippets

Snippets are a way for me point out interesting links in the world of web design and even provide some of my own insight along the way. It’s very similar to a technique that has been used by John Gruber on his superb blog, Daring Fireball. I’m seeing it more and more these days with the likes of Cameron Moll and Dan Cederholm using it via the tumblr blogging engine. As you can see it mixes the more traditional long-form method of blogging with a short-form style that is too much for micro-blogging services such as Twitter.

So why bring this approach to Inspect Element? Mainly because it brings more quality content to your attention. There are many very well written articles out there that I occasionally share via Twitter but that isn’t always the best way to add what my own opinion or thoughts to the mix so it allows me to do that more effectively too.

As you can see above, a snippet is indicated by an icon of a pair of scissors along with smaller font size for the title text which links directly to the article or page itself. For those coming through via RSS will be taken to a page with the full snippet and a link to the source at the bottom.

Other Small Changes

The width of the sidebar has been reduced to focus more on the content. At the same time, a number of ads have been eliminated. I was never doing this to make money, all I need to do is cover the bills of hosting and even with the reduced number of ads I think this is still viable.

Tags have become part of the main navigation in the form of a mega drop-down. This allows the sidebar to become less cluttered but keeping them readily available and always within reach. Tags will become more and more useful as snippets, just like normal blog posts, are being tagged too.

Stick around, there’s plenty of quality content on the way!

So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.

The downside of vendor prefixes is declaring the same value more than once. Combine this with the single line approach above and you can see it starts to get messy with every CSS3 declaration on the same line. This will only get more difficult to read, with more CSS3 properties used.

I’m a designer so I can’t have my code looking messy and ugly, especially when you’re working on sites you know your workmates will be working on some point too. My solution is to keep the regular old CSS on a single line but split CSS3 onto separate lines defined by vendor prefixes. Not exactly earth-shattering but now it’s cleaner and much easier to read and edit all those declarations of the same property. They all sit under each other making them easier to compare to one another. I also start with the shortest at the top working my way to the longest, again just keeping everything consistent, neater and easier to read.

It even works well with extra CSS3 properties.

I take the same approach if I’m using rgba for the background colour of an element. The first declaration is for older browsers such as IE which ignore the rgba line.

Over to You

How do you deal with keeping your code beautiful and using multiple CSS3 vendor prefixes?

Update: As a few people have pointed out in the comments as well as a tweet from @nathansmith, you should be putting the vendor prefixes first and the final spec version last. See CSS-Tricks‘ comprehensive explanation.

Here are two of the most negative comments:

Demonstrations of CSS3 are lame. What, 10% of the internet uses a browser capable of showing this stuff. What a waste of time.

That’s a pretty slick trick! I just wish I could use it now and not have to wait 3 years for the general public to catch up with their browser updates…

I work on corporate websites in my full time job and I use CSS3 all the time. In fact I’m using that spinning icon technique in a site redesign I’m working on at the moment and their usage stats show IE at 67.1% for the last month. However, that number is trending down and usage stats for other browsers are increasing including Chrome, Safari and Firefox. This is not unique to this one site. Every corporate site I’ve checked is showing same characteristics with their users. Chances are, if this is happening in the corporate world, the stats will look even better in other industries.

It’s true, visitors with current versions of IE won’t see the example used in my tutorial but with good use of CSS3 you can enhance interaction for users of newer browsers and people who are upgrading. Browser usage is trending towards newer browsers if you look at the stats. For example, a year from now people who had older browsers and have upgraded their browser (or been upgraded by someone else) will start to notice these enhancements possibly giving them a sense of discovery. They may even notice them more than someone who hasn’t upgraded because they saw it IE first (still fully accessible of course) and then saw it in a modern browser. Certainly not a bad thing.

However, the average visitor who still uses older browsers will still see a fully accessible version of your site and they won’t check sites in multiple browsers to see what the differences are. That just doesn’t happen outside of the web design and development community. In the case of the tutorial in question, everything looks the same initially, so everyone is still getting the same access to content, just the interaction has been enhanced for more recent browsers. That’s the key. As long as everything is still accessible, start embracing CSS3 or you’ll get left behind.

Web Designers

I subscribe to the idea that all web designers should be able to write the HTML and CSS for everything they design, even if they don’t always (or ever) code the sites they design themselves. Doing so allows you to know the limitations of what you can do. More importantly, you can get more out of your designs if you really know how to get the best out of HTML and CSS.

In a previous role as a web designer, I was able to help some of our web developers with CSS as I had a better understanding of it than they did. We didn’t have any specialist front-end developers, only back-end developers who could also write CSS (to a good but not great level) but that’s another issue. Actually, it isn’t. For a back-end developer, CSS is absolutely a related skill so more time improving that would mean faster turnaround in work. Only one or two developers showed any sign of improving their CSS, while others produced code that didn’t always match designs causing delays in projects. Delays could have been reduced significantly if they had improved their related skills although a web developer really should know CSS well.

A great example of a designer and his ability with CSS is Benjamin De Cock and his CSS playground. His high level of knowledge of CSS allows him to push his designs to the next level. Take his vCard for example.

Web Developers

A web developer who has some knowledge of design and usability, even at a basic level, can be a great asset to a company. If a designer has to pass something on to a developer but has missed a usability issue, the developer who posses some knowledge of usability may spot it and discuss it with the designer, avoiding a problem before it goes live or even before it enters final testing, saving time, money and potential headaches for users.

With my background in design and currently working as a web developer, I’m always looking at usability issues, no matter how small they are and I should be otherwise it would be a waste of what I’ve learnt from previous roles. I can also chip-in with any design work if the designer is too busy or is away on holiday.

One developer who has the ability to design is Shaun Inman. It’s clear that he is a very talented developer having created Mint and Fever and even a quick look at his projects will show you that he can also design. The advantage for him is he can control every aspect of his work. Shaun shows just what can be achieved if you work hard at related skills to the ones you develop first.

Valuable Asset

The final point and perhaps most important is, you’re a more valuable asset if you have skills and experiences in related fields. It’s great to specialise in one or two things as that’s how you’ll become great at something but you’ll get even better at your specialities if you learn other disciplines around your own.

That’s right Inspect Element is changing although don’t worry, it will still have the blog at the heart of the machine but there are going to be a couple of additions. I can’t reveal exactly what they are just yet but what I can confirm is:

• It will still be run and maintained by myself (with possible contributions from elsewhere further down the line)
• It’ll be more than articles and tutorials (and snippets)
• There will be a more even balance of both design and development (HTML and CSS)

It’s also worth noting that it’ll be a good few months until it’s ready purely due to the amount of work to be done and it could be ready potentially as long as early next year but stick with it as it will be worth the wait, I can assure you of that. At some point I will give you a peek at the design so keep an eye on @tkenny on Twitter to find out when.

Stats

I’m a bit of a stat geek so let’s get it on!

Inspect Element launched on June 8th 2009 and at the time of writing has had:

• 1,039,676 unique visitors
• 1,520,712 total visits
• 2,650,607 page views

The most popular posts have been:

• Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 with 136,782 page views
• 10 Fantastic and Creative Web Design Styles with 104,902 page views
• Create a Button with Hover and Active States using CSS Sprites with 89,031 page views

The single page HTML5 portfolio site I created seems to be extremely popular so I’ll be doing another one which will be much better and possibly with a PSD file for you to download. To be honest, that one was a bit rushed and doesn’t look that great as I designed it in the browser as a quick experiment which I clearly didn’t have the hang of just then!

A very big thanks to every single one of the million+ visitors. There’s no doubt with your support I’ve become a better designer and writer since Inspect Element began. Judging from my experience, one of the best things you can do as a designer is start a blog and just get your thoughts and ideas out there.

New Logo

Inspect Element’s new logo represents two fundamental areas of creating websites:

The pixels of the design and the building blocks of development. If you hover over the logo, you will see these blocks falling into place, something I have always aimed to help you do by sharing anything I learn.

After being primarily focused on design, Inspect Element has shifted slightly towards front-end development but will now have more of an even balance of the two, so I thought it was important to have something to encapsulate both in one simple presentation.

You can only see three blocks in the logo but there is a fourth, hidden block, sitting underneath the one that rests on top. It represents what we want to hide from the user. The average visitor to a site doesn’t care about what we care about, they only care about the experience. We want them to use our designs effortlessly without having to think too much about what they’re doing.

Freebies

I want to share more. It’s the main reason why I set up Inspect Element and designing is my passion so this gives me an excuse to design more and you’ll also benefit. Win win!

Not only will I be creating my own free designs and other goodies, freebies will also focus on great work created and released for free by others as well as other little things like free photos for you to use in your own designs.

If you have any work of any kind that you would like to release for free or feature here, please let me know and if it’s good enough, I’ll link to it or possibly even host it directly.

Snippets

Snippets are the same great links you’ve been used to on the old version of Inspect Element. Any external link that’s worth a mention with some commentary by me will go here. I may experiment more with this space in the future but I’m not sure exactly how just yet.

No Comment

Comments are no more, at least directly through the site. This is mainly because I just don’t have the time to moderate them as well as reply but also because I think it keeps the site cleaner and less cluttered. Instead, it’s best if you leave a comment on Google+ or @reply to me on Twitter here.

Premium WordPress Themes

This is the big new addition. WordPress is something I now use day-in, day-out in my full-time job so I’ve decided to start selling WordPress themes.

The first release, appropriately named Origin, which I believe is the beginning of greatness for what’s to come. Origin is a responsive magazine/blog theme which has a simple and clean design, easy-to-use theme options but is also powerful through the use of widgets. See more about it here.

Now for the aforementioned help I need to make Inspect Element perform to its full potential. For me to get the best out of Inspect Element I would absolutely love it if you could buy a WordPress Theme to support my efforts. If you like what I do it’s absolutely the perfect way to get the best out of Inspect Element as I hope one day to give it my full undivided attention and not just something I dedicate most of my spare time to. I’ve had nothing but positive feedback in the period I’ve been running it and I would love to help even more by dedicating as much of my time to it as possible. Of course, you’ll be getting a high quality WordPress theme too. So, once again, win win!

If you like Inspect Element, it would also be great if you could share it with anyone you know in the web design/development industry who you think might benefit from it and please share it in the usual places on Twitter, Facebook, Google+ or wherever you can. Last but not least, please let me know what you think. Thanks!

Don’t sit still. Set aside some free time to design interfaces of your own or whatever it is you want to do. The only way you’re going to get into doing what you really want to do is to, well, do what you want to do! I worked for a company where it was written into our contracts that we were not allowed to do any freelance work at all. To me, this is a lack of trust. If you don’t trust your employees doing freelance work (or any kind of extra design/development work) then you’re holding them back. Think of all the extra exposure and more knowledge gained by doing more work and if someone has the desire to do more work then it’s clear they want to improve. It really bugs me to think employers actually prevent their employees from gaining more experience to get better at what they do.

To be honest, I ignored this backwards rule because I have a desire to learn. You should too if any such restrictions are placed upon you. I was working in the corporate world, so I desperately needed to do something more creative or I would have gone mad. I know I am a better designer and developer as a result because I began doing the work I wanted to do and the more you do something, the better you will get at it.

Ironically I learned that I didn’t really enjoy freelance work and wanted to create something substantial of my own. I didn’t really know what that was until late last year when I decided I wanted to try and take Inspect Element to new heights. I’m already working with WordPress in my current job but I knew that if I wanted to take it to the next level, I had to learn even more about it during my own time and hence why I’m now selling WordPress themes. This is what I want to do and I’m now doing it. If it’s successful then great and if not, I’m no worse off. In fact, I’ll be better off whatever happens as I’ll have learnt a great deal, even about failing if it comes to that. Something also to think about is I don’t see it as ‘work’. When I’m in control and designing and developing my own product, it’s fun.

Inspect Element is the only project I’m involved in where I can say I truly care and that’s because it’s what I really want to work on.

Improvements

More Cohesive

Photoshop now feels more like a Mac app than ever before. The fresh interface design looks great and you’ll notice it immediately. I especially like the default dark UI which contrasts nicely with your content as well as the move to a one window layout. Hooray!

Layer Searching and Filtering

Finally!

This seems like something that should have existed a long time ago but then again, this is Adobe. You can also filter the type of layers to be shown (pixel, adjustment, type, shape and smart objects) as show in the screenshot below:

Layer Styles on Groups

… you can now have two or more drop shadows by nesting layers inside groups and applying layer styles to the groups.

Finally!

Rotating 90° fixed

Rotating vector and bitmap layers by 90°, 180° and 270° is now perfect. Another hack can be removed from my bat utility belt.

Finally!

Dotted Lines

Another feature that should have existed a long time ago but here it is. You’ll notice it when you use the shape tool.

Finally!

Annoyances

As good as this update is (and it really is very good), there are some annoying things that have been changed or even removed.

Lack of Interactivity through the Title in Mac OSX

I don’t know what this feature is called, or even if it has a name, but in OSX you can click and drag on the little icon next to the name of the file title in the window which is basically the same as dragging the file from the Finder. You can do this on CS5 and lower but it it has been removed in the default window view of CS6. Go back to the old layout by going to Window > Application Frame but then you lose the benefits of the new, more cohesive look and feel.

You can right click the file tab and click Reveal in Finder to get to the file which I suppose will have to do. I liked being able to drag the file icon directly into Safari to view the .psd in the browser to get a better feel of how it will look in it’s native environment but I guess another step in the process isn’t too bad. There is still time for Adobe to change this for the full version but I doubt it to be honest.

No Changes to the Layer Styles

The ability to do things like add rounded corners or dotted lines through the use of layer styles would be very welcome but it doesn’t seem like there are any changes to them  whatsoever. In fact, I just spotted a change: the layer styles have been re-ordered. Wow.

Save for Web

The slow save for web bug still exists. I’ve barely used the feature in CS6 and have come across it the infamous beach ball once already. I don’t know why this is still the case as it’s been the number one bug that us web designers have been complaining about for years.

More!

• Russell Brown’s 6 Favorite Photoshop CS6 beta Features
• Free 2.5 hour Photoshop CS6 Beta Preview on Lynda.com

See the demo

You may have noticed I released my latest theme here on Inspect Element. It’s called Expressive and I thought it would be a good idea to show you around.

The aim of Expressive is for creative people to express their work effectively. It’s great for web designers, photographers, graphic designers and any other creative work. The demo shows off photography work but it can easily work just as well for other styles of work.

Homepage

The homepage is setup as a WordPress page template which you can easily set up as your home page by going to Settings > Reading and selecting the static page you’ve created.

The homepage is then created entirely by widgets in a simple to use format I’ve laid out for you to see below:

That’s it, very simple and easy to use.

Widgets

Here are the widgets as seen in the demo with a little bit of info about them each:

You can see more screenshots on the theme page.

Theme Options

The theme options included with Expressive include:

• Easy Logo Upload (with optional text alternative)
• Colour Scheme — choose between light or dark themes
• Main Colour Choice — choose the main colour in the theme (default of light blue)
• Contact Form Email Address — where the contact form data gets sent to
• Footer Text — insert information you would like to include in the footer here

Portfolio Custom Post Type

The portfolio section is setup as a custom post to make it easy to manage for you and ties in with it’s own widget which you can see in the diagram above.

Two Extra Themes Included for Free

The ultimate version of Expressive includes Origin Ultimate which includes Origin Classic completely free and for a limited introduction time is only $15, which is only 50% of the full price.

Support Inspect Element

Buying a WordPress theme, such as Expressive, is the absolute best way to support Inspect Element. You’ll also get support for the themes you buy incase you encounter a problem.

If you have any questions at all, please let me know and I’ll answer as soon as I can.