this is the personal blog of brandon quintana.

There was an article on .net magazine giving 20 pretty good tips for web designers out there. It’s always a good idea to have a plan of action when doing something. If you can learn from other’s that’s even better. It will save you time and in the end that saves money. I’ll go over the 20 tips they provide and give some insight and experience I have had with each situation.

Planning. This is probably the most important step that a lot of people overlook. Most people jump into projects and tackle obstacles as they happen. Proper planning of each project can save a lot of time and help avoid the obstacles in the first place. Of course it’s always easier said than done.

Do it by hand. I have always found that coding by hand takes longer but you will get a much better result than using drag and drop programs out there. In the end you will know what code is there and hopefully know what it is doing. On top of that you will have all the control over it.

Stylesheets: Importing vs. Linking. For all my design I have decided to focus on the most modern browsers. I signed up for Google Analytics on my site and noticed that the majority of my site users have modern browsers and platforms as well as a decent screen resolution. For this reason I have moved to importing all of my stylesheets.

Smarter gradient backgrounds. To make gradient backgrounds I tend to use the smallest images possible. Also on their example you can use the short hand version: body {background: white url(background.jpg) repeat-x;}. This strategy will keep the file size small and still get a nice look to your designs.

Commenting. I think almost all of the tutorials that give advice for programming talks a little about commenting. It is an important part especially on larger projects and having the ability to come back to code at a later time. This will ultimately save a lot of time.

Use simple PHP to build sites. Now that I have been writing PHP for a long time I write the majority of my sites using object oriented PHP. By writing the objects correctly the first time, reusing objects becomes a lot easier and another good suggestion to save time.

Set fonts using ems. For a long time I used pixels as my unit of choice. I had a lot more control over the layouts. Now I have slowly started transitioning into ems and I think it will be a better choice in the end.

IE Box Model Hack. The IE Box Model Hack is well documented around the web. This is one suggestion that might help people. I tend to stay away from hacks. It makes it easier for me to avoid problems. It is good however to see how the IE Box Model Hack works in case you ever come across it.

Space Saver. I have a better suggestion for this. Since each browser might have its own padding and margin for each particular element, I eliminate all margin and padding initially and add it to each element where necessary. The CSS line I use is: * { margin: 0; padding: 0}. That line will eliminate all margin and padding in all elements.

Test, test, and test again. It is important to test across all modern browsers. Even though IE might be the leader that might change over time. The majority of people that view my sites use Firefox as an example. I test over all modern browsers and I think people should have the ability to choose their browser of choice as long as its not too old in age.

Format fundamentals. I use a mix of GIF, JPEG, and PNG. In particular cases I will use the PNG hack for transparency in IE 6. The transparency is supported in Firefox, Safari, Opera and a few other browsers that I can’t think of off the top of my head and will be supported in IE 7.

The “title” and “alt” attributes. In order to be XHTML valid and pass 508 standards, the “title” and “alt” attributes are required by specific elements.

The correct format for pseudo classes. This is important that you follow the order and it will save you a lot of debugging time. Right now there aren’t too many pseudoclasses supported but this will soon change in the next versions of CSS.

Use semantic mark-up. This is important in order to stay XHTML/CSS valid and I consider that the “right” way to do web design. It’s good practice to follow standards and it usually works out better for most projects.

Favicons. There are different ways to implement favicons and you can point to different directories with code as opposed to just putting the icon in the root directory. Also I use a photoshop plug-in to create my ICOs on a Mac.

Change capitalization using CSS. If all the letters are capitalized then it?s more of a style and layout attribute as opposed to a content change. For this case, CSS should be used.

Wrapping text around images. I would not recommend the method stated because it is not CSS valid. Wrapping text around images is easy in CSS by floating them right or left.

Universal character sets. Since I use XHTML for my code now the standard XML declaration on the top of the page will work for declaring the universal character set.

Print styles. Sometimes CSS does not print well. By having a CSS print sheet for only printing out content this seems to help users a lot.

Learn from others. This is am important concept and hopefully you can pull something from the original article as well as my comments. That’s why I always encourage people to leave comments on this site in order to give insight to others.

I hope this is helpful to you and if there are any other articles to suggest let me know.