Anyone who has ever really gotten into web design I'm sure knows all the fun that comes from making their website cross-browser compatible. This meaning, your website looks the same in both IE6, IE7, Firefox, Safari, Opera, and any other browser. For the most part, Safari, Opera, and Firefox all work about the same so there isn't always the need to change things to make it render the same in those browsers. Microsoft's Internet Explorer on the other hand brings about a challenge sometimes.

Microsoft is known for pushing for it's own standards, the biggest one now being OOXML (Office Open XML) but that's a different story. W3C created the HTML, CSS standards so that web developers and designers would have a good guide and of course a good standard for building sites. With few exceptions all the browsers follow these, even Microsoft to an extent. What mostly annoys me about IE is how Microsoft incorporates a few differences in the way IE renders compared to lets say Firefox. The biggest one I've run into is say the width of a box. In Firefox and the W3C standards, padding is added on to the width, in IE it's incorporated into the width of the box. So lets say you want a box with a total width of 500 pixels and a padding of 5 pixels. In Firefox, you would want to set the width to 490 pixels and then set the padding to 5 pixels (490 + 5 + 5 = 500). In Internet Explorer, all you would need to do is set the width to 500 pixels and the padding to 5 pixels. Here is what I mean:

Now I will say that I kind of like IE's way of doing it better, at least in a case like this, but I would much rather have ONE standard than have to worry about tweaking things for the different browsers.

There are work-arounds to avoid this issue, but the annoyance of having to do so is still a pain. I'm hoping the reports that IE8 passes the ACID2 test are true because that would indicate a change for the better in my opinion, but I guess only time will tell.

I'm still not as experienced a web developer as many others out there so I'd be curious as to how they handle the problems caused by the slight differences in how IE handles things as compared to the other browsers, or what other differences even exist. I'm not trying to hate on Microsoft with this post, I just think having a set standard that ALL browsers follow would make the job of a web developer so much easier rather than having to test things out and tweak things just so they render properly across all the browsers.

This definitely shows us why standards are good to have.

So web developer gurus, what other bugs have you found that exist between browsers?

Tags: webdevelopment, ie, firefox, browsers, html, css

I started this website back in July or August sometime, I honestly forget which month, but that doesn't matter. Initially it was just to help me learn CSS, PHP, and MySQL, but since it has become much more than that. Over the last 6-7 months, I have learned many things about web design and how to get it off the ground so I figured I'd share some of the things I've learned. These tips and suggestions are in no particular order of importance.

1.) Start Off Small

If you're just starting out a website, don't try to do too much at once. Start off small and add to it along the way. Trying to do too much can cause problems, especially when you realize that in order to solve one problem, it causes you to overhaul a lot more. By starting off small, you can piece things together as needed and in my opinion, get a better understanding of what the best way to piece in the next part of your site.

2.) Use Templates or Include Files When You Can

I should have done this from the beginning, but didn't think of it until it was too late. The sidebar and top bar are the same on every page of the site. Initially I just copied and pasted the code for the bars in every page. It worked, but if I needed to change something, I would have to go into each and every page and change the piece individually. I have since switched over to using the php include() function so I can simply create 1 file for the top bar, and 1 for the side. I would then simply include them in the file. This in itself may sound obvious, but for a newcomer, it can solve a lot of time and trouble.

3.) Use a Good Color Scheme

Choosing a good color scheme is very important to any website, however coming up with one that you like isn't always the easiest thing. Too many times people want to use 20 different colors on their site without realizing that it makes those who view it's eyes bleed. You want to find a good color scheme to use. Once you have one, using it isn't that hard, you really just have to decide what you like.

4.) Try to Plan Ahead

Let's face it, your initial design probably is going to eventually undergo at least some changes whether adding, deleting, modifying pages and files. One thing to try to do is to plan ahead and try to build for easy additions and not make everything based off of one component you don't plan on keeping.

5.) Be Dynamic

Databases are your website's best friend. My site is almost purely based off of a MySQL database. It allows for you to grab data, entries, many things and use them without having to constantly cut and paste. PHP ties very nicely into MySQL, and ASP.NET ties in nicely with Microsoft SQL Server. There are plenty of resources online to help you out with this.

6.) Find a Good Way to Back Up Your Code

Hardware failures happen, with technology that is pretty much a give-in. Find a good way to back up your code often. This can be simply copying it to a thumb drive, burning it to DVD, placing it on an external hard drive, or if you're a little crazy like me, set up a subversion repository for it on a separate computer and use that. Subversion (SVN) is nice because you can use it as a place you can sync files between separate computers, you can revert back to previous versions of the file easily if you realize that what you just did screws everything up, and you can just bring in all the files if you needed to reformat your machine for whatever reason.

7.) Don't Be Afraid to Experiment

If you want to try something new but are afraid you might screw something up, don't be. Experiment a little, see if your new changes would work or do what you want them to do. Just make a copy of whatever file you're working on and make your changes on that. If you later realize it can't be done, delete the copy and just use the original. You then at least get the satisfaction of realizing you tried. If you get it all working, replace the original and go with the new one. You'll never realize what all you can do if you're unwilling to try something new.

8.) Layout is Important

This one may sound pretty obvious, but here it is anyway. Creating a good layout is important for any website. Users should be able to find your content without having to search all over your page. Have your imporant links easily able to be found. No one is going to spend a lot of time trying to find something, so make it easy for them.

9.) Use a Pencil and Paper

One thing that I found that helped me out was before I made my site, i drew a sketch of what I wanted my site too look like. I could then build my CSS and layout around it.

10.) Search Engine Optimization

Make sure to use the keyword and description meta tags on your website to help search engines find your site. A site map is also a good thing to have. I myself don't have a lot of experience with this, so I would suggest looking into this yourself to help you out.

11.) Don't be Too Graphics, Flash, Javascript Intensive

Don't use too much Flash, Javascript or too many large images with your site. Users want to be able to access your site with some speed and adding these things only slows down the load time. Users tend to just close the window or tab if your site is taking too long to load. This is not to say use absolutely no graphics, Flash or Javascript, just keep these things in mind.

I know I am not the best web developer in the world, but I figured I'd share some of the things I've learned over my time working on my website. Hey, if this post helps just one person, I'll be happy.

So what about it? Anything else you'd like to add?

Tags: webdevelopment, website, help, tips, php, html, css