UNLV Libraries Website Blog

The Libraries' Web Style Guide Committee is planning on putting together a Web Developer's Toolkit, which will include the style guide itself, color charts of suggested color combinations that match the site, and much more. One of the things I'm hoping gets included in the Toolkit is the Firefox Web Developers add-on. This is a tool I use every day for developing pages, and I hope that other library developers will give it a try. Besides Dreamweaver, it's the most important development tool I use.

I recommend downloading and playing with it to get a feel for its many, MANY features, but I'd also like to highlight a few that I use every day:

1) CSS drop-down (with real-time, in-browser CSS editing!)
The extension lets you view and manipulate a page's style sheet(s) without having to change the CSS on the server. I use this all the time because it's much safer to troubleshoot style sheets here than it is in Dreamweaver. You can view any style sheet the page is using, disable any or all of these style sheets or styles, and best of all, edit the styles.

Notice that in the below screenshot there are 2 CSS tabs on the bottom half of the screen. One shows the embedded styles, and the other shows the style sheet attached to the libraries home page. You can make changes to either of these style sheets within the browser, click on the home page (the top half of the screen), and your changes will be applied to the page (*note: the changes are only applied in the browser, not in the server. If you like the change and want to use it, you'll still need to edit the style sheet on the server.) It's very simple, and very useful for figuring out where problems on the page might be, or just playing with div positioning, font sizes, or colors.

2) HTML and CSS validation, including Section 508 validation.
Uses the W3C validators and the Cynthia Says 508 validator. This is very useful for troubleshooting browser-specific problems, and ensuring accessibility.

3) Page Zoom and resize (including 800x600 resize).
There are other ways to do these, of course, but it's nice to have them in one place.

4) Ruler toolbar
So you can measure anything on the page.

5) Outline block-level elements.
This outlines all the divs on a page, and can be used in conjunction with "Display ID & Class details" to see the names of all divs in use, as well as LOTS of other information.

6) Display image file sizes.
Actually, there are lots of things you can do with images using the toolbar-- probably more than you'd every need to do.

7) Disable javascript.
This is another one that you don't need a toolbar for, but it's faster than using the browser menu.

There's lots more available, including some things I just discovered while writing this posting. As one review puts it: "This is really the swiss army knife of web developer tools. It is so feature packed that I am still finding new things that it does. Unfortunately, the UI is also so cluttered that I am still finding new things that it does." (link)

The Web Developers extension may not help you improve your HTML or CSS skills, and it doesn't help you create pages, but it's great at locating and troubleshooting problems in existing pages. Highly recommended.

By the way, there's also an extension called Firebug that I haven't used, but that is supposed to really help create CSS and JavaScript.

Download the Web Developers Toolbar extension

More about the extension

Good Stuff

Okay, so after some time spent using IE7 to test the new home page design, I notice 2 big, BIG improvements to IE that make it better in some respects to Firefox (did I just say that?):

1) Printing - IE7 automatically resizes pages to print correctly. Fantastic! Printing has been one of the biggest struggles for our site over the past 4 years, and this will someday make it a non-issue. For those of you who print pages frequently (I know the branches and Media do), this alone makes it worth upgrading ASAP.

2) Zooming - Many have already heard me say this, but the coolest, most useful browsing "trick" I've come across is using CONTROL+SCROLL-WHEEL to make text bigger or smaller. This works on every browser I have (5 of them!), and is very convenient. The problem is that, if a page has been poorly coded, or if some text is actually images, it won't resize no matter what you do.

IE7 now offers zooming, rather than just text enlargement. That means that when you resize the font, the entire page and everything on it gets larger (Opera's been doing this for years, but who uses Opera, other than KK?) This is a BIG DEAL for developers, since it means that page elements won't shift when text gets resized -- basically it eliminates the need to design with this annoying element shifting in mind.

Here's hoping that Firefox 3 (already in beta!) includes this functionality as well.

Bad Stuff

This page says it best: "IE 7 team went overboard in 'simplifying' the user interface."

In fact, until about 10 seconds ago I couldn't figure out how to get to the "File" menu in IE -- something I use fairly frequently in FF. Turns out that hitting the ALT key shows the File menu, as well and the Edit, View, Favorites, Tools, and Help menus that are usually at the top of every browser. (Of course! Why didn't I think of hitting the ALT key right away?!) As an annoying bonus, once you hit the ALT key, clicking the Minimize Page button at the top right of the screen makes these menus go away rather than minimizing the screen. You have to click it twice to minimize :-(

Well, having made that discovery, the rest of my "Bad Stuff" list is out the window. Overall, just remember that, if you can't find something in IE7, the ALT key is your friend.

-Michael

IE7 is now available, so IE6's days are numbered. I've been running IE7 Beta for a few months now at home, and like it. It's basically Firefox without the extensions, or IE6 with tabs, RSS capabilities, and better (i.e., more standards-compliant) CSS handling.

You can download this now on your work computer, or just stick with IE6 if you're happy with it. I've downloaded IE7 to test pages on, but as far as I can tell, there's no way (or at least, no easy way) to run both IE7 and IE6 on the same machine. This means I (and you, if you're an IE7 user) need to test pages both on my normal computer and a second computer running IE6; we've historically designed for whatever browsers we offer on our public computers, and that will probably remain IE6 for some time. In case you're wondering, I haven't seen any problems with any of our sites on IE7, although I have seen some minor differences compared to IE6.

If you're interested, here's a link to some blogger commentary:
http://getahead.ltd.uk/blog/joe/2005/07/29/ie7_reviews.html

-Michael