Web Development Blog

OK, as from this point I’m calling it out of fashion to use “SEO” as a buzz-word. (I know it should have been called long ago, but hey, we all got distracted by “Web 2.0″) So can we please stop throwing it around like its.. well.. going out of fashion.

The reason that I’m bringing this up is because this is something I see quite often with clients who don’t have a clue about the Internet and doesn’t like new design trends and as a result keep the companies they represent in the dark ages.

Wait, let me give you some background information about myself. I started out in the industry as a SEO consultant for a online casino company. So for the 1st 6 months of my web career, I did everything in my power to rank high, and let me tell you the main thing I’ve learned:

Good content structured in a proper HTML document (which is W3C compliant) will do wonders in search engines.

We easily forget that even though we would like our sites to rank well in search engines, the visitors to our site is real people like you and me, and the chance of them returning is a lot better if the site contains good copy that wasn’t raped with bold and italics and id the site was esthetically pleasing… and this is something that gets dumped daily as a result of “SEO”.

I want to give you real world examples.. but I like my job I’m sure that if you have been in this industry for longer than a year you will have some examples of your own…

One of my day to day working requirements is the ability to code mailers that’s compatible with all the major email clients and that off course includes the new stubborn member of the family, Outlook 2007.

By following the following set of guidelines you will be able to code mailers that will not only look good, but will also work in most email clients.

1. Do not use divs or any styling associated with div layouts. That means no floating, no padding or even margins. Rather use table, I know its old school, but this tried and tested and it works

2. Do not use styles in the head section of your page. Some coders tell you that you can, but you need to move it inside the body section. I find this practice to be equally ineffective. Rather use inline styling… I know it can turn out to be a lot more code, but most of the time you can get away with a lot of copying and pasting.

3. Do not use any form of background images. Previously you could successfully call background images by using the background= command in tables, but Outlook 2007 killed that for us as well… so if you are in a company where your responsibility does not include design, you can create an email design guideline document for the designers to use when designing.

4. OK, so now we are using tables… now we have to learn to use these tables to the maximum. Try not to use tables within your tables. Try using single tables. The reason for this is that Outlook 2007 will discard background colors if it’s for a table within a table or if there is another table in that cell. I always try to use colspan= and rowspan= to their full potential, otherwise I will split the mailer code up into smaller tables.

5. Do not leave measurements open for misinterpretation. Rather use the width= and height= properties on all your tables, td and img tags. This is not as important as some of the other guidelines, but I find that the less I leave to chance the better the initial outcome.

6. Do not use the paragraph tag to space lines of copy, rather use double break tags where the spacing should go. Some coders insist on using the paragraph tag and then styling them inline with margin 0 and padding as desired, but I find these methods to fail horribly on the web based clients like gmail, yahoo and hotmail.

7. Do not use the border css property on tables, as it will not end well. If you need to insert table content in your mailer (like a pricelist or something similar) and it needs to have a border, make cellpadding what you think it should be and make cellspacing= 1 and give your table a bgcolor. Now give each td bgcolor= #ffffff . This will give your table cells a border that will work on most of the clients.

There we go, I can’t think of anymore at this present moment. Maybe there is guideline you use when coding mailer? Feel free to add your tips and guidelines in the comment section below!

Unless you have a photographic memory (and I don’t believe any person with normal brain function does), you probably have a hard time remembering all the functions, options, tags, etc. that you need in everyday development.

The fact that documentation can be a total pain in the ass most of the times makes cheat sheets a favorite of mine.

You can print them out and paste them on the wall of your cubicle or office, or just keep them handy in your bookmarks for quick reference.

Here is a list of over thirty cheat sheets that you as a developer might find useful.

Web Development Cheat Sheets:

- JavaScript
- CSS
- CSS
- CSS
- Colour Hex Codes
- HTML
- HTML Entities
- XHTML / HTML
- XHTML

Databases / SQL Cheat Sheets:

- MySQL
- MySQL
- Oracle
- SQL
- Sybase
- PostgreSQL

Language Cheat Sheets:

- ColdFusion
- PHP
- Ruby
- Regular Expressions
- JSP
- Java 1.5
- Python

Version Control Cheat Sheets:

- CVS
- Subversion
- Subversion

Other:

- Google
- Windows
- Unix
- Unix
- Unix
- Vi
- Vim
- mod_rewrite
- ASCII Character Codes
- htaccess
- Debian
- Perl
- Perl

Do you have one in your bookmarks that’s not on the list? Feel free to post it under comments.

A question I get asked a lot by die IM posse is how to “get that little icon in the tab on Firefox” so after giving these instructions quite few times I have decided to put a post on here so that I can just direct the next person directly to a complete guide to installing a favicon (Yep, that’s what the little icon is called )

So, firstly we have to create this icon that we want to use, and the best way to do this would be with a graphical application like Photoshop or Paint Shop Pro and create an image with the dimension 32px x 32px. You can also have transparent parts in your favicon, just remember to save it in PNG8 format for that.

OK, so now you got your creative on and you have a favicon that you absolutely love! Now you just need to get it to the .ico format and for that I am going to direct you to a online converter at http://tools.dynamicdrive.com/favicon/

On there you basically browse for the file, say “convert” and tada! You have a favicon.ico file and even ‘n preview of what it will look like.

All that is left to do is to ad the file to your website and that is also a pretty easy thing to do. Firstly upload the favicon.ico file into your root folder of your site. (This is the same place where you can find you index file)

All you need to do now is to enter the following line into the head section of your site:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

There you go, that was pretty easy hey.. Your site can now boast with his/her own little piece of site bling!

When I started 3 years ago with HTML I never thought that I will any good at it, it was simply a job at that stage. My only “live” site was somewhere on Geocities and was a fan site for the band Slipknot. My code was a mess and only worked in Internet Explorer and looked like shit in Netscape. (Yeah people actually used to use Netscape)

A lot has changed from then, not just in my camp, but also on the rest of the Internet. Coding standards is more important these days as it’s more efficient and more compatible with the FOUR main browsers thats on the market.

Good reference sites, that I could use on a daily basis, was a must! Here are the main 5 sites that separate the men from the boys:

Web Design From Scratch
This site is a great starting block! If you are new to HTML and CSS and you want to learn quickly and learning the correct theory behind things, this is the site to do it on.

Meyerweb CSS2 References
I still use this site whenever I get stuck, Its easily the most comprehensive online reference for CSS coding that I know of!

Listamatic
I can almost guarantee that if you don’t use styled lists yet you will definitely start using it after going through the Listamatic site. Lists are great for accessibility

DHTMLSite
Every once in a while you will need a little trick to do something out of the ordinary or to please that one designer at work’s creative impulse. This site is almost like a library at this stage for code snippets and gimmicks you can use to do just that.

Smashing Magazine
When you work on deadline after deadline and you just code non-stop it’s easy to get tunnel vision, this site is nice to keep you up to date with daily progressions in the field of HTML/CSS/JS

I would love to see your sites in comments section!