I jailbreaked my iPhone this weekend after I watched a few peers jailbreak theirs. It looked like a great idea at the time.

Jailbreaking was too easy with the instant jailbreaking tool JailbreakMe, so I got on with browsing the Cydia store in just a couple of minutes.

I came across the MyWi app that turns your phone into a Wi-fi hotspot. It came with another app store call Rock Your Phone (or just Rock) which seems better than Cydia itself. It’s faster and has a much better repository of apps.

I managed to get a new interface skin, called MP2 iOS4 which I have been in love with (watch the video review on Youtube). This has become my obsession recently as I get so show it to many people — even my boss.

The new interface is brilliant and it is designed with a refreshing amount of detail. The Weather app does not have a new icon, and it sticks out like a soar thumb because apparently, the theme management app WinterBoard does not have API for it. Therefore, the skin developers are waiting for an update so they can implement some more icons.

The downside is that it has noticeably slowed my phone down. It took 3 seconds for the lock screen to show when I pressed Home — but that only happened once.

Not sure if the theme is responsible for the slowdown of the phone or if it’s a common side-effect of jailbreaking.

On the other hand, MyWi starts up and I was able to connect to it, even with WEP security enabled. I was ecstatic since I can use it to get free internet anywhere without having to pay for it.

The app takes control of the Wi-fi chip and makes the phone work like a router. Do keep in mind that the Wi-fi chip is remarkable less powerful than that of a router as it can only perform as per it’s size.

It worked for the first few days and I enjoyed it although recently it does not seem to work consistently. Also heats up the phone significantly. This is perhaps the reason why the app was banned.

Most other apps on the Rock repositories are not worth installing on my phone. The collection of useful tools is very limited.

So basically, I have learned that the apps and skins that you get from Cydia and Rock can severely damage your experience with the iPhone. I am starting to believe there is good reason why they were not allowed in the store.

Since I pay a hefty sum every month to O2, I want my iPhone to remain a walled garden for now. So I am restoring the device with iTunes to remove all jailbroken apps and settings right now as I write this post.

Check out my first Premium Theme for WordPress: Harbour

Woes

The hard-drive started making noise and the box itself would get burning hot after long hours of usage. I learned to live with it. I would give it a bit “rest” every now and then. It was also a way of giving myself a break and take a walk.

Unfortunately more problems started appearing. At first, application crashes and then the dreaded blue screen of death. It started to disrupt my workflow and I found it rather distressing. TortoiseSVN failed to start (it would show a crash notification at system startup) which made life very difficult as there are very few alternative SVN clients that work as well. The Photoshop crashes cost me a lot of headaches. The PC had a bad temper and I tried not to anger it by not using it for too long.

The problem became acute after an automatic system update. The system would not boot and would restart over an over again. I was able to diagnose the problem and it turned out that Windows Update somehow managed to corrupt some system drivers hence the failure to boot. The System Repair application was unable to do anything after repeated tries. The only option left at this point was to reinstall a fresh copy.

Ubuntu Live-CD to the rescue.

Tried to salvage as much data as possible from the Hard Drive but repeated efforts to back up files from the hard-drive failed as the computer randomly shut down during file transfer operations. I managed to get some stuff out of the computer into a portable Hard-drive.

Luckily, my work files were backed up in Dropbox, which turned out to be a lifesaver.

Windows 7

I ordered a copy of Windows 7 which I thought might save the laptop. I installed a fresh copy wiping out my entire drive. I lost all my music, photos and everything I owned.

After the installation of Windows 7, I tried to get it to connect to the company VPN but after repeated tried, I failed. Even the company that manages our VPN failed to help me resolve this issue.

I missed a deadline and put myself in a very bad situation at work because of this. Telling the boss that I am having issues with the laptop is like telling the teacher that the dog ate your homework.

The final plunge

I went to the Apple Store in Brent Cross Shopping Centre and purchased an 27″ iMac.  It is a beautifully designed machine with an outstanding Operating System and a wide array of quality software. I can now understand why there is a fanboy culture around Apple products.

I am done with Microsoft and the world of PC. I am tired of fighting with the computer and making it work. Computers should “just work”.

I have taken the plunge and converted fully to the Mac platform.

Check out my first Premium Theme for WordPress: Harbour

This is a very personal post — not the techie type post that this site has seen before. I am blogging after such a long time and so much has happened since my last post that I feel like sharing a few bits a pieces. Not writing for anyone in particular — maybe just for myself.

Work

The past year was a year of extremes. When times were good, they were extremely good. Bad times were equally bad — I suppose to maintain equilibrium.

Started off working for an agency that provided regular work. It was a wonderful opportunity to design and develop quite a lot of corporate websites. But due to the recession, the agency was struggling to stay afloat. I suppose websites became a matter of lower priority compared to staying in business for a lot of our clients.

The troubles began when work was short and so was money, at least for me. I decided to leave the agency and work on my own. I even considered becoming a full-time blogger. Leaving a somewhat secure position and working on my own during the worst economic crisis of our generation was very scary. I started this blog around the same time of the year and hoped that a few contracts would start coming in soon.

And they did! Over the latter half of the year I have been tied to a contract with a small company. It has been a challenging but tremendously rewarding experience so far. What started off as a difficult year turned out to be a quite a good one.

Blogging

Azadcreative.com began its journey in 2009. I have given blogging a shot quite a few times before and even reached the front-page of Digg.com once (with an article called Javascript Libraries Roundup), but none of them were serious attempts. But this is my definitive attempt to build an online identity. Discarding the silly alias eDevil and developing a brand around my real name is what I had in mind.

The design completed around March and I started blogging around the same time. My first couple of months as a blogger were tremendously successful. A couple of posts received great feedback from readers.

Unfortunately I have not been a regular blogger due to exhaustion from work and a few health issues. Lacking the time and energy to spend on regular writing, I discarded the site and since the initial success here has been no posts. Although, I did manage to keep it spam free and respond to a few comments, I would have liked to do a lot more.

The other issue with technical writing is that readers often point out mistakes or ask questions about implementation and bugs. As the author of the site, it becomes the responsibility to provide “support” to the readers, which I have not been able to do.

Moving onwards, this year there will be a major redesign with a brand new portfolio and lab section. This website needs to be nurtured, polished and taken care of. I made a promise to write regularly this year. Hopefully I shall once again build a loyal readership that I once used to have.

Discipline

This year the aim is to bring discipline to every aspect of my life. From waking up at a regular time and showing up at work at 9 AM sharp, eating healthy and regular excercise to mainitaining my online influence through my blog. Another area of of great focus will be networking with people that matter on twitter and facebook.

Getting things done in an organized manner and meeting deadlines, managing time better to maximise productivity are on the new year’s resolution list. I know that they are far too generic but I am working on the development of methodologies that quantify the objectives and their progress.

For instance, I have developed a sophisticated calendar and bookmarks sync system between my iMac at work, my Dell Studio which I use at home and my iPhone. This helps me keep track of projects and tasks that need attention.

This year will be a year of personal development through disciplined actions and I am excited to share this journey through this blog.

Health Issues

Throughout 2009, I suffered from chronic pain issues and constant fatigue. What appeared to be a bad case of flu that I have been sufferring from August through to December turned out to be Tuberculosis (and Pneumonia affecting both sides of my lungs) when I was hospitalised a week before Chistmas. I went through a complete physical collapse and had to stay in the hospital for two whole weeks until I was released on New Year’s Eve.

I am currently going through active treatment by the NHS which has helped me recover quite a lot. The recovery from the collapse has been a blessing in a way. I feel refreshed — no longer burned out by fatigue or coughing like an old man.

The two weeks in an isolated chamber in the hospital gave me time to think about what has been going on in my life and what I need to do go get things done in the following months/years. In a strange way I am glad I ended up in a hospital. I came out a brand new man.

The new decade, a new beginning

Looking forward to making great positive changes to myself and things that surround me. New energy and drive to achieve new heights — both in the online and offline world. With a lot to look forward to in the year 2010, I am tremendously excited.

New work opportunities, chance to gain qualifications, connect with old friends, travel the continent and a whole lot more is on the cards. With a lot of discipline, this year might just end up topping the past year as the best ever. I do believe the best is yet to come – being the glass-half-full kind of guy that I am.

Check out my first Premium Theme for WordPress: Harbour

Let me show you a few techniques I use to craft readable, maintainable and easy to debug stylesheets.

File naming convention

I follow a simple file naming convention across all my projects. It is simple and very effective way of maintaining CSS files. I have seen many designers use obscure names such as main.css or style.css for their stylesheets. I think the names can carry a little bit depth so you know what each file does in a quick glance.

Here is the file structure for one of my client’s website:

CSS Naming Convention

style_all.css
Contains the CSS Reset and a few more goodies that applies to all browsers and platforms. This is also a good place to place the link colours and styles for elements generated from WYSIWYG editors in the CMS.

style_screen.css
The main stylesheet file that contains the style for the entire layout. We will have a deeper look into this file in a moment.

style_screen_IE7.css
Stylesheet specific to Internet Explorer 7. Most projects I work on does not need a specific stylesheet for IE7 but this is just for sake of understanding my naming convention.

style_screen_lt-IE7.css
Stylesheet that applies to all versions of Internet Explorer below version 7.

style_print.css
The print stylesheet where you are supposed to get rid of all images and present only the nice and clean text.

This convention is very flexible. If you need a specific stylesheet for IE6, for instance, go with style_screen_IE6.css. For handhelds, it would be style_handheld.css and so on so forth.

The commercial CMS system I work with at my agency has a function that checks the stylesheets folder for the files and applies appropriate Conditional Comments automatically. I might release that bit of code in the future (if I can convince my project manager!)

Modularize

Let us have an in-depth look at style_screen.css which is our main stylesheet. This file tends to get very large so it is very important to separate the styles into sections.

I declare the sections in the CSS at the beginning of the stylesheet.

Separate your CSS file into sections

Hint: Press Ctr+F (or Mac+F) and type in =FORMS and it skips straight to the Forms section. I find this quite a time saver.

Positioning

Define the layout structure and the positioning of the basic elements. The Header, the Content section, the Sidebar and the Footer. The first thing I do when I start coding a site is to get the frame right, not worrying about the details at this point.

Define the Basic Structure first

Typography

Contains font definitions for global and all general elements. Define the headers (h1, h2 etc) and paragraph styles, the lists, blockquotes and anything that deals with the presentation of text.

Separate Font Definitions from layout styles

Layout styles

Now that the layout positioning and typography is taken care of, you can now focus on the site design.

You can break this down further with sub-sections if this section starts to get too long. Maintaining proper code indentation and hierarchy (which is discussed below) will help unclutter the layout styles.

Other sections

Usually, I create a separate section for the Forms, CMS-specific code etc. Feel free to  create new sections for your own project, depending on your needs.

The advantages of splitting the code into sections becomes obvious once you have to debug or make changes to an old project. You will feel that it is much easier to browse the code and focus where you need to.

Indentation and hierarchy

Top level elements are indented least. The immediate children of the top-level element is indented once. Their children in indented twice, and so on so forth.

Indent properly and maintain the parent-child hierarchy

Not only does it look pretty and readable, it makes pin-pointing problems a lot easier. Yes, there is a not of white space that adds bytes to the file size but you can always compress the code before you publish.

For example, you are having issues with the Search box in your page. The code must be within the Layout section under the parent Sidebar. With proper modularization and indentation, you will see how easy it is to find what you are looking for.

Categorise, don’t alphabetise

Some designers have said that alphabetizing the CSS properties is an effective way of organisation because it makes maintenance easier. I beg to differ from that opinion. I find categorising the properties by type is a lot more effective.

selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;

padding: 10px;
margin: 5px;

background: #000;
border: 1px solid #222;
}

In the example above, the properties are grouped into ones that manipulate text, deal with space (margin and padding) and block-level visual cues  (background and border).

If the same selectors were alphabetised, this is what it would look like:

selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}

As you can see, the readability of the CSS is vastly reduced. I usually place the positioning properties first, followed by text-properties, spacing and the others.

Conclusion

As you can see, this is not much complicated. It is these simple things that can help a front-end developer keep their sanity. Beautiful stylesheets are a first step to coding zen.

Do you have any suggestions for creating beautiful stylesheets that are easy to maintain and debug? Please do share.

Check out my first Premium Theme for WordPress: Harbour

Harbour is the product of a month of sleepless nights and endless hours of work. I am very happy with the result and I was very excited when it was approved for sale.

The Idea

Inspired by a postcard sent by a friend from Australia. I loved the colours so much that I thought it would make a great website template. I started playing with Photoshop and came up with a neat and clean design in a few hours.

Desire for passive income

One of the main driving forces behind all the hours I put in was the desire to make some passive income. A few sales at ThemeForest could generate a steady stream of income.

I have been following a few popular designers at the Envato marketplaces and have seen them make quite a significant income. I thought I would use my spare time to make something to make a bit of money in these tough economic times.

Something to show for myself

Every designer wants to entend their portfolio and add as much quality work as possible. A premium theme in an Envato Marketplace is a good addition to the portfolio.

Also, it provides quite a bit of exposure in the design community, which has been one another driving force behind this theme.

Without further ado, let me introduce you to Harbour:

The Front Page

The Post Page Footer where you can save/share the article and leave a comment

The awesome live search

Visit ThemeForest.net to see more screenshots of the Harbour Theme.

Features

Harbour is a very smart theme. It takes 2 minutes to install and customise the theme to fit your needs, whatever it may be.

• It uses Cufon for text-replacement so the your brand-name and the tagline are automatically generated. There is no need to edit and slice the PSD to change logo and tagline!
• The CSS is incredibly modular and makes modifications very simple.
• The PSD files are layered and grouped. It also contains guides and slices for your convenience!
• The Theme Options let you customize your theme to your needs.
• You can design your own theme based on Harbour in a few minutes. Just follow a few simple steps as shown in the Documentation.
• Clickable, interactive Widget-ready sidebar.
• AJAX Live Search for ease of use.

There is a working live demo if you want to look in depth.

The cause

The money from the sales will go to my University fund. Please help me get a qualification whilst making your weblog look and feel new.

It is reasonably priced at 25USD. If you are feeling like your blog needs a refresh, please consider purchasing the theme. Thank you.

Check out my first Premium Theme for WordPress: Harbour

Let’s have a look the latest and the hottest techniques designers use for their own online portfolio.

1. The carousel

Everybody loves the carousel Javascript effect. Since its inception, it has quickly become the most popular choice amonst designers for showcasing their work. Here are few examples of cool implementation of the carousel.

Rob Young shows off his design work inside a Macbook Pro. Click on the screen and you are up for a surprise. Stunning and very original.

Viktor Jarnheimer uses an iMac carousel

Zarne Dravitzki showcases his work in a cool grunge photo-frame

Chris Sharp uses a simple and elegant way to showcase this recent work.

Rob Palmer's portfolio in a cloud is clean, simple and simply stunning.

2. Grid with Lightbox

This is perhaps the most common portfolio design technique. But some designers have taken it to the next level by adding that extra bit of style. Here are a few world-class portfolios:

Unnamed European designer who goes by the alias SofaSurfer.

Loïc Dupasquier uses cool onhover effects to make his portfolio look very cool.

Very well known designer Chris Spooner showcases his work in a sort of vanilla lightbox style but it is still worth a mention.

3. Cover Flow

Originated from Apple’s iTunes, the Cover Flow has been ported to the web with Javascript and Flash. A lot of designers have adopted this style. While some use Flash, others go with Javascript.

Corvus Design Studio uses a dynamically loading Flash to showcase their work

Excellent portfolio of Thomas Prior who uses Javascript instead. You have to drag the button at the bottom to scroll. I think it is ingenious and very original.

4. Accordion

Accordions are commonly used in webdesign but only a handful of portfolios are designed using this technique.

Lisa Moseley of Crush+Lovely uses a smooth accordion to showcase her work.

Marius Roosendaal's portfolio is one of my favourites. This is an outstanding piece of work.

Jackrabbit team showcases their print and web design work in a nice sliding accordion box.

Brazilian designer Fernando Kruger uses similar style as Roosendaal to show off his creative web design portfolio.

Call them deviant, call them creative

Although the last one is not a “trend”, I thought it was good enough to get a mention. Do you have any suggestions or have you come across a well designed portfolio that fall into any of the categories above?

Check out my first Premium Theme for WordPress: Harbour

If the reader has scanned though the page all the way to the end of the post, he/she must have enjoyed reading the post. So why not take this opportunity to promote a few things? Let me show you what you can do with it and how you can optimise it for best results.

Related posts

If your blog is well established and you have been blogging for a while, why not show a list of related articles at the bottom of your post? The readers may find something useful and stay on the site to read more.

Here are few examples:

For any blog with an archive of at least a year, I would recommend that you show a list of related articles below your posts. There are multiple plugins for WordPress that does this.

The Author

Most commonly used on multi-author blogs. It is usually a small paragraph about the author of the post containing links to his/her website or company. I suggest you keep it simple and tidy. A single paragraph with 3 or 4 lines is quite enough. Link to an ‘about’ page if you have more to say. Use a thumbnail picture of the author to make it more personal.

Social networks

Let your readers engage with your content. Allow them to use social bookmarking and promote your content on social news sites.

Promote your RSS Feed

Always, promote your RSS Feed whenever you can. When someone has read all the way to the end, they must have enjoyed the post. So why not ask them to subscribe to the RSS? It is simple trick that boosted the number of subscribers of my own blog. I always tell my clients to push the RSS feed as much as possible.

As you can see in some of the examples above, some people promote the RSS along with the Social bookmarking. Here are some more examples:

Things you might want to promote

Do you have an e-book or do you sell design services? Make a small subtle promotion at the bottom of the post. Keep it small and unobtrusive. The reader should not get the feeling that you are trying to make a sale but rather try giving the impression that you are offering something genuinely helpful.

I will not provide any examples for this section because it would be a form of advertisement for the product, even if it is just a screenshot.

Other little things

• Skip to comment form
  Give your readers a link to quickly skip to the comment form. Making them scroll all the way to the bottom is bad juju.

• Trackback URL
  Let other bloggers link to you if they post something related to your post.

Conclusion

To me the post footer is an important place to focus on when I design blogs. There are so many possibilities, depending on the type and niche of the blog. Another thing to keep in mind is to remember not to clutter the footer by adding too much content. Keep it neat and tidy.

Check out my first Premium Theme for WordPress: Harbour

Why you might want to separate comments and trackbacks:

• Makes the comment list look a lot more neat
• Trackbacks interrupt on the flow of conversation in the comments
• Trackbacks are basically link-juice for both sides, which you may want to show below the comments

What makes the comments and trackbacks show up together is this line in comments.php:

[/sourcecode]

Luckily, WordPress offers termendous flexibility to manipulate the template and basically lets you do almost anything imaginable. By simply adding a parameter, we can filter the comments. The following returns only comments:
[sourcecode language="php"]

We can further manipulate the presentation of the comments. By adding a callback function, we can now change the way comments are displayed. So this is what it looks like:

[/sourcecode]

The function <em>ac_comment</em> is called from functions.php. So add the following lines to your functions:
[sourcecode language="php"]function ac_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<div class="<?php if ($comment->comment_author_email ==">" id="comment-">
<div class="commentHeader">
<div class="gravatar">
' ); ?>
</div>
<div class="commentMeta">
<div class="commentAuthor">

</div>
<div class="replyDate">

<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"></a>

</div>
</div>
</div>
<div class="commentBody">

comment_approved == '0') : ?>

<em></em>

</div>
</div>

As you can see, you can do pretty much anything you want to it. Off course, replace you@yourdomain.com with your admin email address so that author comments get a unique classname which can be styled with CSS. Here’s an example of what it should looks like in my theme:

On the other hand, the Trackbacks and Pingbacks can be called with this function:

[/sourcecode]

It uses the parameter pings as type and calls on the ac_pings callback function.

Here is the code in functions.php
[sourcecode language="php"]function ac_pings($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<div id="ping-<?php comment_ID(); ?>" class="ping">

</div>

That should separate the comments and trackbacks quite neatly, giving you complete flexibility over the presentation. I will leave it to you style them with your own CSS.

Check out my first Premium Theme for WordPress: Harbour

Here are a few things that I have experienced myself and why I think most websites are, for lack of a better word, crap.

1.The Jack Of All Trade guys

As seen on most Job Search websites, the expectation from a “web designer” is far too high. Most web-design firms expect one single person to be an expert on Photoshop, HTML/CSS, Javascript, Flash and even PHP/Perl/ASP (and every other conceivable programming language in the world).

People who claim to be experts on all of the above mentioned subjects are not being truthful. The truth is that you would have to be some sort of a prodigious genius to be good in Design, Front-End and Back-End development at the same time.

What most companies do not realize is that the web is a very complex field and somebody who designs websites is probably is an artistic person. It is very unlikely that proper designers (by proper I mean those who have been to art school) know how to write code. Same argument goes for programmers, since they are logical problem solvers not visual people.

I am in favor of designers who know the possibilities and limits of the web and possibly know how to code HTML and CSS, but if they are too technical, their designs tend to be boxy and dull.

Someone who claims to be the jack of all trades is perhaps mediocre in both design and programming. The output they produce can only be mediocre at best.

2. Print designers designing websites

The problem here is that print designers fail to differentiate between print and web media. As a result, the output they produce contain non-web fonts (which leads to an excessive use of images), design patterns that become nightmares for developers, etc

It is really terribly easy to mock up something that looks pretty but is impractical. Something that looks cutting edge but is a nightmare to implement. Their lack of understanding of usability and implementation issues result in good looking PSD layouts which turn into awful, half-baked websites.

In my opinion, every “web designer” should be able to code HTML and CSS at least on a basic level. I am not talking about being a front-end wizard but just enough know-how on the way the web works.

3. It is a matter of revenue vs cost

Standards compliance and accessibility take second place in terms of priority to the cost of production. It is absolutely vital to reduce the number of days it takes to design and develop a website in order to maximize profit from a project. Which usually translates to the following things:

- No stylesheet for print or handheld
- Use of tables when floats get too complicated
- Use of CSS hacks to “make it work”
- No time to validate markup or style
- Bad browser support (As long as it works on IE, we’re fine.)

It is a sad reality that the quality of code, cross-browser support and accessibility issues are compromised for achieving cost-effectiveness.

4. Designers lack creative freedom

The Managing Director does not like green, or Chairman is not very fond of Georgia. Designers have to deal with asinine change requests from both their own managers and the client. In my experience, very few designs get approved without getting amended countless times before turning into an ugly bastard cousin of the original design.

5. Little concern for web standards

Very few Web Design Agency or Online Marketing firms employ a Front-End specialist for the HTML, CSS and Javascript. Developers usually take a “just make it work” attitude towards front-end coding. Getting it done fast is what matters, even if it means having to add non-standard attributes and ugly CSS hacks that do not validate.

I have to confess that I, myself have used ugly hacks just to “make it work” within the project deadline. I did have have time to research the actual cause of the issue and find a proper way to solve it. I knew it wouldn’t validate but I had to get it done in a short period of time.

Once again, the matter of cost-effectiveness arises here. Doing something the standards-compliant way usually takes more time and effort on the developer’s part. It is rather difficult to stick to the web-standards wagon when deadlines are tight, even for standards-conscious developers.

It is not a surprise to find table-infected, non-standard code coming out of even the biggest design firms.

Conclusion

The truth is that most web design firms are run by marketing professionals who diversified their product range by starting to offer web design solutions. Lacking the technical expertise, they hire the wrong guys for the job and output is often horrendous.

Got any other ideas why, despite having more web design firms than kebab shops, the state of the web is so poor?

Check out my first Premium Theme for WordPress: Harbour

Click on the image below to skip to the demo.

The problems with existing implementations

1. Not fully clickable
Douglas Bowman’s original CSS Sliding doors only has one problem. There are 9 dead pixels to the left of every button. I wanted the entire button to be clickable.

2. Uses empty <span> tags
Although it is perfectly valid to have empty spans, even in XHTML 1.0 Strict, I would rather not take this approach. I would like my markup to make sense to future developers.

3. Causes inconsistencies in IE6
Kailoon’s One Image solution works perfectly. This is perhaps the most compatible solution there is. But there is a slight rendering issue in IE6. There is an extra bit of padding to the left of  each button. Off course, it can be fixed easily with a little Conditional CSS but it is not the ideal solution.

Also, kailoon adds a 4px padding to the anchors and then uses -4px margin on the <span> to cover it up. Although this mechanism works well, I am not a big fan of negative margins.

4. Breaks when font-size is increased
The most common with most of these implementation is that they cannot cope with increased font-sizes.

5. Uses li:hover which does not work in older browsers
The :hover pseudo-class is not supported by IE6 and below when applied to anything but an anchor. Hence, Stu Nicholls’ 100% Clickable Sliding Doors does not function as expected on older browsers. Otherwise, I really like his solution.

The Solution

We start with a simple unordered list wrapped in a div. Also, the list items have class names to they can be used in conjunction with body ID to highlight a particular tab.

The Markup

<div id="navigation">
<ul>
<li class="home"><a href="#"><span>Homepage</span></a></li>
<li class="products"><a href="#"><span>Products &amp;amp;amp; Services</span></a></li>
<li class="contact"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

The CSS

First off, I will add some basic styling.

#navigation {
background: url(images/navigation.png) top left repeat-x;
overflow: auto;
display: block;
float: left;
width: 100%;
}
#navigation * {
padding:0;
margin:0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}
#navigation ul {
display: block;
float: left;
padding: 10px 0 0 0;
}
#navigation ul li {
list-style: none;
float: left;
margin: 0 0 0 5px;
}

What I have done here is:

• Add blue background to the entire navigation. You can ignore most of it since it is meant only for the menu I designed. Keep the overflow: auto for clearing the floating unordered list.
• Resetting everything inside #navigation using the very powerful star (*) selector, so they have no margin and padding and so that they inherit the font properties.
• Remove list-style from list items and make them float left.

The Images

I am using 3 different images. Off course, you can combine the 3 images and use background-position to switch the background colour but I can’t be arsed.

One noticeable thing about the images is that they are quite big, almost 3 times as much as what they need to be. It is so if the font-size is increased or the page zoomed, the buttons will expand and will not seem broken.

The CSS for links

#navigation ul li a {
background: url(images/onlink.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e0ebf3;
text-decoration: none
}
#navigation ul li a span {
background: url(images/onlink.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}

At this point, all the links should look the same. If you inspect the code, you’ll see a 15px padding on the right of the anchor. Also, the image is on the right-hand side so that the rounded corners show up on the right.

The CSS for :hover and selecting current tab

#navigation ul li a:hover {
background: url(images/onhover.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation ul li a:hover span {
background: url(images/onhover.png) top left no-repeat;
}

#home #navigation ul li.home a {
background: url(images/onselected.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation ul li.home a span {
background: url(images/onselected.png) top left no-repeat;
}

The code here is quite self explanatory. The image onhover.png is applied on both the anchor and span for the hover effect.

The #home at the front is the body ID. If the body id is set to home, the list item with class=”home” gets the white background image to make it appear selected.

But what about Transparent Images?

If you are using transparent PNGs for the buttons, you will notice that the images overlap.If your images have shadows, the overlap will cause rather ugly results.

I admit I had been wrong on this matter. I stand corrected after a reader has taken the effort to use my code with transparent images and posted it on his website.

The solutoin is to split the images into 2 sections.

Create slices in Photoshop

In the example above, the anchor has a padding of 15 pixels to the right. So we are creating a 15px slice as saving it as a separate image.

Here is the CSS for the 2-image solution:

#navigation2 ul li a {
background: url(images/onlink2_right.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e8e8e8;
text-decoration: none
}
#navigation2 ul li a span {
background: url(images/onlink2_left.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}
#navigation2 ul li a:hover {
background: url(images/onhover2_right.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation2 ul li a:hover span {
background: url(images/onhover2_left.png) top left no-repeat;
}

#home #navigation2 ul li.home a {
background: url(images/onselected2_right.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation2 ul li.home a span {
background: url(images/onselected2_left.png) top left no-repeat;
}

By splitting the images into left and right, I have eliminated the chance of an overlap. It works on all major browser except IE6 because of the alpha-transparency issue. So I have created alternate PNG-8 versions of the images and added the !important hack to make it work in IE6.

Take this step only if you want to support IE6.

#navigation2 ul li a {
background: url(images/onlink2_right.png) top right no-repeat !important;
background: url(images/onlink2_right_IE6.png) top right no-repeat;
display: block;
padding: 0 15px 0 0;
color: #e8e8e8;
text-decoration: none
}
#navigation2 ul li a span {
background: url(images/onlink2_left.png) top left no-repeat !important;
background: url(images/onlink2_left_IE6.png) top left no-repeat;
display: block;
padding: 10px 0 10px 15px;
}
#navigation2 ul li a:hover {
background: url(images/onhover2_right.png) top right no-repeat !important;
background: url(images/onhover2_right_IE6.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation2 ul li a:hover span {
background: url(images/onhover2_left.png) top left no-repeat !important;
background: url(images/onhover2_left_IE6.png) top left no-repeat;
}

#home #navigation2 ul li.home a {
background: url(images/onselected2_right.png) top right no-repeat !important;
background: url(images/onselected2_right_IE6.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation2 ul li.home a span {
background: url(images/onselected2_left.png) top left no-repeat !important;
background: url(images/onselected2_left_IE6.png) top left no-repeat;
}

Check out the updated demonstation.

Conclusion

In comparison to other methods, it is more functional, semantic and better supported in older browsers. It is also easier to deploy and maintain. Here is the live demo if you would like to see it in action. I have also done an extra theme with orange buttons (similar to Kailoon’s demos).

I hope you found it useful. Bugs, fixes and any feedback is very welcome.

References and Credits

CSS Sliding Doors by Douglas Bowman

CSS Sliding Door using only 1 image by kailoon

100% clickable Sliding Doors by Stu Nicholls

Sliding Doors meets CSS Sprites by FiftyFourEleven

Check out my first Premium Theme for WordPress: Harbour