7 easy steps - Checklist for your web sites to improve the HMTL
Have you ever struggled with your HTML-code?
You know the cross-browser issues, the invalid markup, the quirks and the browser bugs. We've all had those issues sometimes. Your site looks great in one browser and it looks like something your neighbors nephews younger sister made during the computer lab in kindergarten...
Anyway, thank's to my checklist, I've been able to save myself a lot of trouble over the years, so I wanted to share it with all of you!
NOTE: You don't have to do all these steps in this specific order, actually you might end up doing some steps several times and completely unordered.
Let's begin!
1. Start by validating your code using W3C's free online validator: The W3C Markup Validation Service
If the code has a lot of errors, then start by fixing those errors. It doesn't have to be perfect at this step, but valid code will make debugging more complex issues a lot easier later.
2. Validate your stylesheet (.css) with another free tool from W3C: The W3C CSS Validation Service
Ok, same here, it doesn't have to be perfect but if you have lots of errors, then you can expect a lot of issues as well.
3. Test the website on your own computer using these four browsers:
Internet Explorer from Microsoft
Firefox from Mozilla
Chrome from Google
Safari from Apple
If your website looks and behaves the same in those four, you're already on your way to success! If not, make changes to the HTML-code until you get most of it right.
Don't care about different versions of each browser right now, leave that for later.
4. Clean up your code
So by now, you should have a website with code that is somewhat following the standards and looks the same in four different browsers. Now, you can optimize the code a bit to make sure you keep a high standard and only product quality code. Sounds like a boring task? It is, so use the tidy-module to indent the code and do other cool stuff with the output.
You can read more about tidy here:
PHP: Tidy - Manual
PHP: Examples - Manual
HTML Tidy Configuration Options Quick Reference
5. Once you're done with step 1-4, do them one more time to make sure your code still validates, looks the same in those four browsers and looks good when you view the source.
6. The final step is... to verify that your site looks good in as many browsers as possible.
To do that, you can use the service at browsershots.org, where you can input the URL to your site and get screenshots from 81 (!) different combinations of browser, version and operating system.
If something looks really strange (in IE6 most likely) then try to fix it without breaking the others... Repeat step 1-6 until you get it right.
7. Exhale... you're done! Now your website looks great in all browsers, the code is close to perfect and you've never been happier. Congratulations!
That's the outline of the process I've been using for years now and it works well.
Enjoy
You know the cross-browser issues, the invalid markup, the quirks and the browser bugs. We've all had those issues sometimes. Your site looks great in one browser and it looks like something your neighbors nephews younger sister made during the computer lab in kindergarten...
Anyway, thank's to my checklist, I've been able to save myself a lot of trouble over the years, so I wanted to share it with all of you!
NOTE: You don't have to do all these steps in this specific order, actually you might end up doing some steps several times and completely unordered.
Let's begin!
1. Start by validating your code using W3C's free online validator: The W3C Markup Validation Service
If the code has a lot of errors, then start by fixing those errors. It doesn't have to be perfect at this step, but valid code will make debugging more complex issues a lot easier later.
2. Validate your stylesheet (.css) with another free tool from W3C: The W3C CSS Validation Service
Ok, same here, it doesn't have to be perfect but if you have lots of errors, then you can expect a lot of issues as well.
3. Test the website on your own computer using these four browsers:
Internet Explorer from Microsoft
Firefox from Mozilla
Chrome from Google
Safari from Apple
If your website looks and behaves the same in those four, you're already on your way to success! If not, make changes to the HTML-code until you get most of it right.
Don't care about different versions of each browser right now, leave that for later.
4. Clean up your code
So by now, you should have a website with code that is somewhat following the standards and looks the same in four different browsers. Now, you can optimize the code a bit to make sure you keep a high standard and only product quality code. Sounds like a boring task? It is, so use the tidy-module to indent the code and do other cool stuff with the output.
You can read more about tidy here:
PHP: Tidy - Manual
PHP: Examples - Manual
HTML Tidy Configuration Options Quick Reference
5. Once you're done with step 1-4, do them one more time to make sure your code still validates, looks the same in those four browsers and looks good when you view the source.
6. The final step is... to verify that your site looks good in as many browsers as possible.
To do that, you can use the service at browsershots.org, where you can input the URL to your site and get screenshots from 81 (!) different combinations of browser, version and operating system.
If something looks really strange (in IE6 most likely) then try to fix it without breaking the others... Repeat step 1-6 until you get it right.
7. Exhale... you're done! Now your website looks great in all browsers, the code is close to perfect and you've never been happier. Congratulations!
That's the outline of the process I've been using for years now and it works well.
Enjoy
Ben Swayne
Lynx System Integrators Ltd.
Ben Swayne's Blog | Barcode Scanners and Label Printers