Designing a website is a piece of cake for a good designer. Really for me it is as easy as writing an essay. I open up Photoshop make a PSD, slice it and code it. Does not sound very hard, then why good designers charge a lot of money? Well because good designers offer Cross Browser Compatibility for all their designs. You should always ask when you are getting a design coded, for cross browser compatibility and confirm it by checking it once the project is done and before paying.

What is Cross Browser Compatibility?

It is exactly what it sounds like. It basically means that the output of your website should look the same in all browsers. That is the ultimate goal so you do not lose any audience due to non-compatibility. You might wonder why would the browser show it differently anyways?

Think of your browsers as a translator of HTML language. Now you ask two Spanish Speakers to translate a long essay, they will translate it using different words, but give you the same idea. Browsers work similarly. They would represent the same idea meaning your header would be at the header, but the space between your images might differ.

Now we would wish that there was only one browser so designers won’t have to work a lot, but there are a lot of browsers and a lot of versions of those browsers. Take in consideration the main ones like Internet Explorer, Firefox, Safari, and Opera. Then there are versions of these main ones like Internet Explorer 6, 7, 8 then Firefox 2 and 3 aside from all the other minor browsers. So what should you do as a designer? or as a client? How do you check all these browsers if you don’t have them in your computer.

Well there is a website called Browser Shots which will let you check all browsers.

Now most top of the line designers have more than one operating system and a lot more computers using all sorts of different systems. I mean I personally have two Windows Notebooks, one running Vista, and the other XP. Then a Power Mac with all Macintosh browsers, and then Linux on another PC. So I can check the website all in my computer but those who can’t use the site above.

There will always be a time when you would have to settle with some differences but try to get them to the minimum possible if not none.

How do you ease the process of Cross Browser Compatibility?

Cross Browser Compatibility is a frustrating process because it requires a lot of trial and error. When you are experienced you get an easy go, but often for new designers it is a tough process. I think you should always start with having your codes w3c Valid.

A w3c Valid website means that your codes does not have any error according to the standard web guidelines. I have written a detailed article with tips on w3c Validation for your website. Use it for your advantage if you need it.

Next Step would be setting a goal. When I start coding, my goal is to get IE 6.0, and Firefox 2 to match. I have noticed that if I get the older versions to match, the new ones almost always match. Once I have these two to match, Firefox 3 usually do not give a hard time. The problem comes with Internet Explorer 7.0 and if you can get that then IE 8 won’t be any hassle.

So set your priorities and analyze your stats. See what browsers are being used by your users. If majority of your audience uses IE you want to make sure that you make your website compatible with IE. Always try to get the majority of users satisfied and then move towards the minority.

Another major reason of problem during this process is font-availability. Not all of your users are using the same system, so if you decide to use a Vista font it would work on all Vista Users, but a XP user who does not have that font will not see the font, and often times the sizes in the font would differ and it will cause your spacings to get messed up. Which in all results in a not compatible website. I suggest you check out the list of Browser Safe Fonts when you are coding.

One of the common mistakes new designers make is using programs like Dreamweaver or Frontpage. It is ok to use them for learning process, but when you enter the next level you have to know that these program adds codes to your coding and make your site w3 invalid which can also result in a non-compatible website.

While you are in the process of Trial and Error you must make sure that you keep a back up copy of the most stable version. So you always have something to fall back on. Also make sure that you take frequent breaks because when you stare at the same codes for a long period of time, you don’t see the simplest errors.

Learn from the Best and Forget the Rest

The best websites on the web are the top ones. Like ebay, amazon and others even though they use so much applications on their website, they are almost always cross browser compatible. The reason is they are not using flash and other fixed applets. They are using dynamic technology. If they are using JavaScripts then they are using it with CSS files that governs the script. Avoid using the applications that does not give you control because that is when you will lose.

At the End Day, Don’t feel disappointed or hopeless if you can’t get this to work because browser bugs exist and there is nothing you can do about it. Just do your best and enjoy while you work. If you get stuck and think you need help urgently shoot me an email, and I might help if time permits.

Have you ever seen one of those cool little buttons in some blogs that says Email This. It is not just on blogs, it is on a lot of other sites like Yahoo, and others. Well what is the point of those, and how do they do it?

This actually is a great way of word of mouth advertising. Your users can suggest a great article to their friends, and you get new readers. That is why a lot of sites use this sort of feature.

In this post I will show you how you can put one on your blog. It is quite easy actually because you are using a javascript. This javascript lets the user click on the link, and it will open up their default email program with the link to your post. It does not jeopardizes anyone’s email, so it is secure.

<script type="text/javascript">
<!– Begin
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write(‘<a class="contact" HREF=\"mailto:\?subject\=Check out this page I found, ‘ + document.title + ‘?body=You can view this page by following this url: ‘ + window.location + ‘\” onMouseOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page”>Email to a Friend<\/a>’);
}
else { document.write(’<a class=”contact” HREF=\”mailto:\?body\=Check out this page I found ‘ + document.title + ‘. You can view this page by following this url: ‘ + window.location + ‘\” onMouseOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page” rel=”nofollow”>Email This!<\/a>’);
}
// End –>
</script>

I don’t have this on Balkhis but hopefully whenever I redesign, I will add this feature in. This is a great way of making connections with your reader’s friends. So implement it when you can.

Tab-Based Interface (TBI) is a growing phenomenon on the web. Designers and developers have worked hard to incorporate this feature in many well-known websites. Tab-based interface is an extremely user-friendly way of highlighting quality content because it allows developers to maintain multiple content on one page navigated by tabs which avoids users to open multiple windows to access the important content.

You have seen it being used on many famous websites and it often looks complex. But it doesn’t have to be. Creating tab based interfaces and customizing it to match your design is a matter of few minutes. With the combination of CSS, JavaScript, and DHTML this is made possible and doable. Content is not loaded separately instead it is being loaded all in one page using Ajax-based techniques.

So lets check out some of the freeware tab interfaces that will let you create and implement tabs on your website within minutes.

Free Tab-Based Interfaces

jQuery Tab Script

Control Tabs

Ajax Tab Content Script

Tab Panes

JavaScript Tabifier

Crackajax Tab

DOMTab – Navigation Tab

Tabtastic

Kollermedia Tab Menu

We all know that tab based interface is being used on many blogs now a days. Why, because there is a switch to Magazine Style Themes now. Bloggers want to highlight more content on their home page, so readers can get to see the important stuff without going into their archives. This is a perfect way. Simple edits to CSS and you will have a beautiful tabber running on your blog.

We all know that the first impression is everything. Do you know how your website make a good first impression? It is by the good design. An excellent layout. That is what gives your website a good first impression. But you can never keep up with technology on your own. New technologies are coming out every day, so in order to keep the competitive edge, and know the future trends, you must read design magazines.

In every business, the entrepreneur must be updated with the market. Online business is no different. You need to know what is going around the web. It does take a lot of time to find a good magazine. Sometimes you might not even find a good magazine. Well here is a list that you can start from:

Web Design/Development Related Magazines

Smashing Magazine

Web Developer’s Journal

Before & After Magazine

Web Design from Scrach

Noupe

Read the whole post to get the entire 22

Recently, As I have been designing one of the most compatible and customizable theme, I have been looking into fonts and styling as I wanted this theme to be the best one. I came across some very important tool which I will share later on when I put it into use on a live website, but I also came across this resource.

I know people want to use other fonts that looks even better. Below I made a list of fonts that are safe for all browsers on all operating systems. Just in case if you guys ever need it.

Btw Have a Happy New Year Eve and even better Happy New Year