My Favorite Web Development Tools

By Nick Little on October 14, 2008 at 6:30 am in Development

There are several tools that I don’t think I could do web development without. They give me the power to find out valuable information about the pages I’m viewing. They even let me edit the HTML and CSS directly, without having to refresh the browser window! I can debug JavaScript, test the page with different viewport sizes, view the size of every file loaded by the browser, and much more. All these tools are plugins for the Firefox web browser. Let’s take a closer look at these invaluable tools.

  • Web Developer Toolbar - This toolbar gives me options for disabling everything from css to browser cache to images to cookies. It also has very nice options for filling out forms and viewing just about anything I could possibly want to know about certain elements on the page. I can resize the viewport and make sure I have no CSS or JavaScript errors with a simple glance at the toolbar.
  • Firebug - This nifty little plugin is extremely useful. I can highlight any element on the page with a single click of the mouse. I can then view and change all the CSS related to the element. I can also view the DOM properties and functions of an element. I can debug javascript by setting breakpoints in the code. Firebug even lets me edit the HTML of the page and also tells me how much bandwidth is used in retrieving each file. (My favorite thing to do is edit pages so they make fun of Tim!)
  • Google Toolbar - Lastly, Google Toolbar, although it’s not technically a web development tool, is very useful. I use it to manage all my bookmarks, so when I find something web development related at home I add it to my google bookmarks and I have it the next day at work. I can also search anywhere on google.com (Google Images, Google Maps, etc) or even the current page very quickly.

These are all excellent tools that I use on a daily basis, but by no means are they the only tools. I have tinkered with several excellent widgets for Opera that do almost the same things. There are many tools out there no matter what browser you use for development.

The case for checking on older browsers

By Tim Priebe on September 5, 2008 at 6:30 am in Design

As I’ve mentioned before, we check our websites in six different browser / operating system combinations. Just the other day, my programmer asked me if we could stop checking in one of Opera. For Internet Explorer 6.0, there’s even an IE Death March website dedicated to telling others they should stop checking their websites in that browser.

To make things even more confusing, Wikipedia’s page of browser comparisons lists a whopping thirty-five current web browsers. Which ones should you check your website on?

Although we do take into account usage, as I mentioned before, we also take into account how easy it is to code for that browser. It’s a balance between the two. There are currently seven different programs on the browser usage list at w3schools.com. We check five of those seven. I’m going to talk about a three that are outliers in either usage, ease of coding, or both.

Internet Explorer 6.0

IE6 is a pain to code for. Thus the previously mentioned IE Death March website. However, it still has a significant market share, somewhere around 25% of the web surfers out there. Although it frequently frustrates our programmer (and many other programmers around the world), we continue to make sure our websites work in IE6, because we don’t want 1/4 of the website’s visitors to get less than the full intended effect of the website.

Internet Explorer 5.0

If you can imagine that IE6 is hard to code for, just imagine how much harder IE5 is. Combine that with the fact that it has less than a 0.5% market share makes it obvious why we don’t bother checking our sites in IE5.

Opera

Opera has a relatively small market share at 1.9%. However, it is fairly “standards compliant.” Simply, this means that once you code for other browsers that comply well with the web standards, (Firefox and Safari in our case), 99% of the time the website works correctly in Opera as well. So the low cost in terms of time means that we still check in Opera, despite its low market share.

Hopefully this gives you some indication why we check in the browsers we check in.

Check your website on other browsers

By Tim Priebe on July 9, 2008 at 6:30 am in Design, General, Mac, Technical, Windows

If you’re only checking your website in the web browser you use, others may not be seeing the site how you intend them to. After all, chances are pretty low that everyone looking at your site is using the same browser you are.

Here at T&S Web Design, we test on several browsers on Macs and several on Windows. Here’s the breakdown, along with the percentage of usage from w3schools.com, taken June 2008. Obviously the percentages will not be exactly the same on your site, but they shouldn’t be too far off. (Note that Firefox, Safari and Opera have the same percentage on both Mac and Windows, because w3schools.com does not differentiate between operating systems)

Of course, the best way to check in both Windows and Mac’s OSX is to have a Mac and a Windows computer. Barring that, another viable solution is Browsershots.org. There are tons of browsers available across four different operating systems. Note that they have Opera on Windows, not Mac, but it shouldn’t make a difference.