Artmov: PSD to HTML

Overview: A CSS Standard Naming Convention?

I couldn’t stop asking if a standard naming convention for CSS’ IDs and Classes existed. I couldn’t find anything that’s suited for me and for CSS WITH COLOUR’s coding style, but I’ve found a solution: creating my own naming convention – which will, eventually, become part of Artmov’s handcoding style guide – an ideea that I’ve started working at the end of June, 2009 and I’m still working on it.

Besides the regular header, footer, left, right naming stuff I couldn’t find anything on Google, but some useful ideas that can help me start a handcoding style guide. The biggest disadvantages that I’ve found is that I didn’t like how the naming were written in CSS. I prefer #right-column, rather than #rightCol.

1. Every frontend developer has it’s own coding style

An important step to I’ve considered when started a style guide for the code written at Artmov. Nevertheless, a certain guide for writting the code is important for maintainability of the code and it’s more recognizable afterwards. This is why I’m looking for a standard convention on the IDs and Classes of each CSS stylesheets that I use and write.

In the style guide that I’m talking about I try to find a convention that’s suitable for me in naming the images/files and what directories should it be positioned, etc.

2. Abbreviation in CSS?

A good website will need to keep it’s size at a low level – this would apply to CSS too, right? For a general website, the general stylesheet wouldn’t be higher than 30KB, my guess. But abbreviation in the IDs and Classes of the CSS stylesheet will remove a few bytes from the stylesheet (not much at all, but a very few).

Also, to better maintain and recognize the CSS code, abbreviate the general IDs and Classes. An exception is the website’s structure IDs/Classes, like: header, footer, page, etc – which is better to remain the same and not abbreviated.

For example. I’ve used the abbreviation btt for anything that’s a button, both in CSS and in the image filename. btt_submit.png will be the name for the submit button and .btt-submit will be the CSS Class in style.css

Button is not abbreaviated btt, but btn - to be changed.

I found out AcronymFinder which I’ll use in finding abbreviation of some general names that will occur in the procces of slicing a website at CSS WITH COLOUR.

3. IDs and Classes written in lowercase and separated by “-”

I’m working on a big project that uses a lot of IDs and Classes and after writting more then 150 lines of code I’ve found out that the code is more beautiful if it’s written in lowercase and separated by “-”, rather than not separate it and non-lowercase. Besides the beautiful part, it’s more easier to maintain the code and find whatever IDs or Classes you’re looking for.

An ideea post. An ideea that I’ve started working on very intensively in the last period; I’ll also write a post with the abbrevations that will be used in the stylesheets used at Artmov later on.

Optimizing PNG images: PNGGauntlet

I usually work in PNG in most of websites that are sliced at Artmov. PNG offers me a great quality, but with the price of higher sizing. But the high sizing in PNG images can be easily optimized with several online tools (Smush.it) or, even a application for Windows folks (PNGGauntlet).

I’ve put to test both applications that I’ve worked over many website sliced. The online tool, Smush.it and an application installed on a Windows operating system, PNGGauntlet.

Smush.it, unfortunately, remove it’s functionality to upload the images for optimizing, leaving only the where you need to write down the URL path to the image. And since many website are sliced on a local computer and later on uploaded for testing, a good solution will be an application that can be installed on a computer or uploading the images fast.

A PNG image of 439.96 KB has been tested, both on Smush.it and on PNGGauntlet. The results are below.

Smush.it

The 439.96 KB PNG image optimized by Smush.it:

• Resulting Size: 46.46 KB
• Saving Size: 393.50 KB Saving
• Saving in %: 89.44

PNGGauntlet

13 PNG images, with a total of 2.07 MB in size, with only one GIF of 47 bytes.

• Xtreme! Strategy: 2.07 MB into 139 KB
• Intense Strategy: 2.07 MB into 140 KB
• Longest Match Strategy: 2.07 MB into 189 KB
• Huffman Only Strategy: 2.07 MB into 754 KB
• Uncompressed Strategy: 2.07 MB into 1.84 MB

I don’t take in consideration the last strategy, the Uncompressed Strategy. The 541% showed in a red color / probably an error or the PNG couldn’t be optimized properly.

The result.

Smush.it successfully optimized the PNG file into a 46.46 KB and PNGGauntlet into a 49.31 KB (considering the slowest strategy). The difference between is only 2.85 KB.

Smush.it can be added as an add-on for Firefox browser. Download YSlow.

Conclusion.

I’ll go with Smush.it and PNGGauntlet for optimizing the PNG images.

PNGGauntlet’s biggest advantage is that I can easily optimize the images from my local computer without going online everytime I need a smaller size for PNGs.

Smush.it’s advantage is that it’s installed as an add-on on Firefox, along with several add-ons that I use to slice websites (Firebug, Web Developer Tool, etc)

Please note that I’ve taken in consideration and in testing only these 2 applications to optimize PNG images. Below are links to several other applications that can optimize PNGs – choose what’s best suited for you.

[1] 10 Free Tools to Optimize  and Compress PNG Images

[2] 5-Minutes PNG Image Optimization

[3] 17 Excellent Image Optimization Tools

Updating the browser. IE6 is losing field.

On 22 May 2009 I’ve stated that supporting IE6 depends who are your users and who do you address to. I’ve said not to rush by not supporting a old browser, such as IE6 without knowing who do you address to.

Along with the above thought was that IE6 had a considerable market share when I’ve written the article.

The debate continues.

According to Market Share, IE6 had a market share of almost 30% in 2009 and dropping down heavily. W3Schools shows IE6 with a 13.6% usage in August, 2009.

Internet Explorer 6 will lose a lot of field in the next coming months (Google Chrome is winning a lot of market share, it appears). IE6 will lose a lot, but it’s important now to see how are your users and what browser they use.

It’s stupid to ignore the 30% of your visitators who are using IE6 and you’ve decided not to support the browser.

A solution.

A solution (see the below campaign) is to let your IE6 users know of disadvantages of still using Internet Explorer 6. The disadvantages are for the both sides, both users and both developers that still find it difficult to support IE6.

Although it’s not the first campaign of it’s kind, Richard Barros launched updateyourbrowser.net for users to update their browsers, targeting the IE6 users mainly.

A solution for IE6’s users to update is by inserting the Javascript in the HEAD section:

Also, you can opt by inserting a banner on your website or blog’s sidebar:

As a result of IE6 dropping down in market share Artmov will only support IE6 by request only.