Whether you are testing themes submitted to your service or your own work, we always find ourselves searching for quick ways to browser test and or validate our work. Sometimes we may end up using a genre of tools to get what we wanted and most of the time we develop a set of favorite methods and tools to achieve it.
Here we cover 10 different ways to validate and browser test your website to add to your list of methods.
HTML and CSS Validation Tools
W3C HTML and CSS Validation
The W3C set of validation tools happens to be the most popular source to check your code for validation. You can paste code snippets, link to your code, and upload your code to check validation. If you have errors within your code, it returns a nice detailed report for each error highlighting the exact character or set of characters that are invalid. A great tool to use even if you use others that are available out there.
Integrated Development Environment Validation
Many integrated development environments and other editors offer built-in code validators right off the fly. While some of these editors may require you to select a button to view whether your code is valid or not, others usually do it right off the bat as you type out the code. Therefore, it helps you catch the errors as you go along to finish your website completely validated without having to go back and fix validity errors.
Web Developer Toolbar
This is a Firefox only toolbar; however, because it is so feature-filled, it is worth a mention. The Web Developer toolbar is a great in-browser testing tool containing a plethora of tools for testing your website including resolution tests. However, it also includes a great HTML and CSS validators that works on the fly. If you do not select to view details on validations, you will just be shown two icons that represent whether the code is valid or not.
The toolbar additionally tests other elements than HTML and CSS, so if you need to perform testing on other things within your website, it is a great tool to quickly and easily do so.
HTML Validator
HTML Validator is another Firefox add on that runs in the background seamlessly. A simple yet affective tool displays whether the HTML to your website is valid, invalid, or consists of warnings.
When doing so, it displays different icons as well as the number of errors and or warnings, and by clicking on these icons, it opens up a nice pane showing you the code snippets that are invalid or contain warnings, as well as details on the errors as well as about the warnings. A great tool for in-browser testing and editing.
Browser Testing Tools
Installing Older Browser Versions
A really common method to browser testing your website is to install older versions of a plethora of browsers such as Internet Explorer, Firefox, Opera, Safari, and others. The softwares’ websites usually offer older downloads which is a great way to obtain your copies of older versions.
Adobe BrowserLab
If you are not too keen on the idea of installing multiple pieces of the same software but of different versions to browser test your website, you can give Adobe BrowserLab a try. Adobe BrowserLab is a multi-tabbed browser testing software allowing you to test your website in multiple browsers all from one pane or window.
Additionally, if you need to test your website in the same browsers but from different operating systems, Adobe BrowserLab simulates different operating systems for you, so you do not hassle through switching between them to perform the required testing.
Overall, Adobe BrowserLab is a great piece of software for any designer needing to test their work across many platforms and setups.
Integrated Development Environment Browser Testing
Most of our favorite editors have built in tools for browser testing our projects and websites we are creating and or developing. While it may not be too extent with different versions of the same browsers, they do let you connect you installations of different browsers into the single environment for quick, on the fly testing.
Browser Shots
Browser Shots has to be the greatest and easiest way to get around to browser testing your website in a genre of browsers. What it does is you provide a URL to the website you would like to browser test, select the browsers and their versions you would like to test your site in from their long list under different operating systems, and hit submit.
They will then return screenshots of how your website looks like per browser selected per operating system. While it might not be an easy task to perform while you are still modifying your website, it is a great method to obtain a mass visualization of how your website looks across a plethora of browsers quickly.
IETester
If you are always worried about how your website looks like in different versions of Internet Explorer like the rest of us, then IETester is definitely something to consider. IETester is a single interface to test your website from version 5.5 of Internet Explorer to their latest version. It holds a nice Office 2007 design to it as well as a tabbed interface to easily flip through testing panes.
IE Tab 2
IE Tab is a Firefox add on that implements, as its name describes, an Internet Explorer viewing pane designed for cross-browser testing within your Firefox browser. It is a great quick tool to easily test your websites in Internet Explorer on the fly with a click of a button without the hassle of leaving or changing windows between Firefox and Internet Explorer.
To conclude, while there may be a plethora of other tools out there to validate your code and perform browser testing, we covered ten popular methods and tools that will hopefully get you thinking and started on making your own laundry list of browser testing tools as well as HTML and CSS validation tools.