I am always on the lookout for good tools to use in developing websites. Today I came across
Essential Web Developer Tools (Validation, Browsers, Transparent PNG’s and More) by by Selene M. Bowlby. Some of the tools she mentions, I already use, some are new.
Screen Resolution / Browser Size
setmy.browsersize.com has two services being “Size My Browser” and “What’s My Browser Size.”
Until recently, I’ve played it safe by designing web sites with the 800×600 resolution market in mind. I just didn’t want to risk turning off that audience with horizontal scrolling. As individuals and companies upgrade their computers, however, the number of people still using such a small screen size has dropped dramatically – currently only about 8% still use this size.
The average user – 48% – is currently using a screen size of 1024×760 pixels. In most cases, unless you have a very specific (tech vs non-tech) audience, this is who you should be designing for.
“Set My Browser Size” gives you 6 pre-defined resolution sizes or you can type in a custom set of dimensions. Once you click the submit button, your web browser is automatically resized to the specific pixel dimensions Now you can see exactly how your web site will look on the various screen sizes.
“What’s My Browser Size” will tell you what both your browser and full screen dimensions are as well as the color depth. It also does a plugin check to let you know which popular plugins are or are not installed on your browser.
XHTML / CSS Validation
Your website should be written with valid, standards compliant code. You can easily check both your X/HTML code as well as your style sheet by using these World Wide Web Consortium (W3C) tools:
The World Wide Web Consortium (W3C) is the organization that determines current web guidelines and standards. These are two invaluable tools that EVERY web developer should utilize. These validation tools will outline exactly what is wrong and where in the code the problem is. It will give you some hints on how to fix the problem. Work through your pages and style sheets and fix the errors. You are less likely to have problems with viewing your site if your code is valid and standards compliant.
I have three browsers (usually the latest version) installed on my laptop and two older versions on my desktop. If I want to see how a page renders in any of the other browsers or in earlier versions I no longer have installed, I head over to browsershots.org.
With Browser Shots, you enter your URL and select from a LARGE number of web browsers, browser versions, and platforms. You can even select the screen resolution, color depth, as well as other features you do (or don’t) want taken into consideration.
Hit submit, then you can leave and come back to screenshots of your site as displayed in a wide range of browsers/versions across several platforms (currently Linux, Windows, Mac and BSD).
You can keep up to date on the current browser trends with another set of statistics from W3 Schools W3 Schools – Browser Statistics. For September 2008, IE6, IE7, and Firefox hold the largest share of browser useage. Firefox has 42.6% so it pays you to make sure your site renders properly in that browser as well as Internet Explorer. If you don’t currently have it installed, you can download it from http://www.mozilla.com/en-US/firefox/
Read Essential Web Developer Tools (Validation, Browsers, Transparent PNG’s and More) by Selene M. Bowlby.