Using Firefox for Web Design

During this class, we will be using the Firefox Web browser as our main development platform. This approach yields some significant advantages for us:

• Firefox works equally well on both Apple and Windows computers.
• Firefox has excellent support for HTML standards.
• The software is all free, so it can be installed on any computer. This allows students to work on any computer anywhere.
• Add-ons provide HTML editing (via Codetch) and FTP file transfers (via FireFTP), and many other free tools for Web developers.
• Simpler to set up than when using GoLive or Dreamweaver.

I am requiring the use of certain Firefox add-ons, and suggesting others that you will find useful. You can download Firefox itself from here if you don't already have it. This list describes only a handful out of thousands of add-ons, including some which may duplicate functionality. Let me know if you find something else that is useful.

Required Firefox Add-ons for Web Developers

• Codetch: Tools > Codetch > Float/Tab : a Dreamweaver-ish HTML editor—really well done (and free).
• FireFTP: Tools > FireFTP : graphical FTP client for transferring files over the Web.
• FireBug: integrated debugger, inspector for HTML, CSS, DOM, JS, and network profiler. This is a truly amazing tool!
• Web Developer Toolbar: via toolbar or Tools > Web Developer : superb tool for inspecting pages. Includes Control-Shift-F for interactive inspection, and Control-Shift-Y for seeing DOM hierarchy on hover.
• Colorzilla: samples colors on the fly from anything in the browser window. Click on the Eyedropper in the bottom-left corner of FireFox. Right-click on the Eyedropper to see a menu of other choices, including a DOM Inspector and a DOM color palette inspector.
• CSSViewer: displays info about the page element over which you are hovering. This is quite handy for a quick-and-dirty “what is this thing?”, although limited in scope. Much of the functionality is duplicated in the Web Developer Toolbar, but this is a quick-and-dirty answer much of the time.
• FEBE: backup utility for extensions, settings, profiles. You can use this to save the group of extensions from class, enabling you to quickly set up the same environment at home. Access this tool from Tools > FEBE.
• FireShot: save the screen in a variety of formats, and it even allows you to annotate the screen capture. This is unfortunately PC-only, but there are 2 cross-platform solutions listed in the Suggested section below: Screen Grab! and Page Saver.
• MeasureIt: measure distances between any 2 points in the browser window. Click on the Ruler at the bottom-left corner of FireFox, then drag from point to point to see the box dimensions.
• HTML Validator: validator for HTML and CSS. This is indispensable if you intend to be a serious Web developer. This runs your code through a validator program that describes the errors and warnings in the code. Unfortunately, this is PC-only, but there are Web-based validators available. Click on the icon at the bottom of Firefox to bring up a window displaying the warnings and errors for the current page.
• View Source Chart: graphically shows the structure of HTML pages. This requires a login to the Mozilla Add-ons site before you can download it. The author sells a fully-featured version, but this version works quite well. It provides a visually attractive way to examine the structure of a page. Right-click on an HTML page to get a new window showing the structure of the current page, nicely colored and collapsible.

Suggested Firefox Add-ons for Web Developers

• DevBoi: sidebar with HTML, CSS, Javascript documentation. Tools > Devboi splits the window, adding a pane on the left for looking up HTML, CSS, DOM, and Javascript syntax.
• DOM Inspector: shows an expandable outline-oriented view of the elements on a page. You can get similar functionality from the HTML tab of FireBug.
• Fangs: renders pages like a text screen reader sees it. Tools > Fangs will pop up a window showing how a screen reader sees your page. It has tabs that show the headings in the page, as well as the links.
• FireCookie: for managing cookies (must have FireBug installed). This simply adds a tab to Firebug.
• Firefox Accessibility Extension: support Web developers and people with disabilities in accessing and testing web resources for accessibility features. This adds an entire toolbar of functions, inclduing access to all kinds of validators, as well as tools for changing how the page is displayed to mimic screen readers and other specialized viewing devices. It also adds a top-level menu to Firefox called "Accessibility", curiously enough.
• Font Finder: shows all characteristics of the selected text. Select some text on a page, then right-click and choose Font Finder to see everything about the selected text.
• IE Tab: (right-click on tab or click icon at bottom-right of FireFox) : switches to use Internet Explorer's rendering engine inside a tab in FireFox. Windows only.
• HttpFox: an HTTP analyzer. Click on the icon at the bottom (looks like a snake poking through an "O"), and a new pane splits from the main window at the bottom. Click the START button, and then it will display info about all HTTP transactions until you stop it. Includes load time for individual elements, cookies, URL query string, HTTP headers, and more.
• Live HTTP Headers: view HTTP page headers while browsing. Choose Tools > Live HTTP Headers, and the popup window will display all HTTP headers passed back and forth for subsequent page loads.
• MetaTags Sidebar: left sidebar with lots of meta info.
• Page Saver: cross-platform screen grabber that can save the entire window, not just the viewport.
• PDF Download: save any page as a PDF; great for archiving the look of something.
• Pencil is a tool for drawing and diagramming the design of a Web site. This really easy to use, so it may be a good answer for diagramming your own plans for a Web site.
• Save Complete: save the entire Web page with all pieces. Right-click on the icon, and choose either SAVE or COPY.
• Screen Grab!: screen grabber that can save the entire window, not just the viewport. Cross-platform, but may require registration.
• SearchStatus: display Google and Alexa ranks and other SEO info, including WHOIS, keyword density, and more. This is very handy! Right-click on the icon at the bottom to get a large menu of functions.
• Rank Checker: see where sites rank in Google, Yahoo, etc
• SEO for Firefox: huge set of SEO tools. The icon is grayed-out until you click on it (bottom-right corner), and then it collects a lot of info about the current site. This hits the search engines hard, so you should crank down the polling frequency lest your IP address get blocked for “scraping”. Be sure to turn it off when you find out what you needed to know about the site.
• View Dependencies: a lot of info about page components. Use Tools > Page Info.
• YSlow: this Yahoo tool provides valuable feedback for improving the performance of Web pages. Although aimed at high-traffic sites, many of the suggestions are valuable for all Web sites. Once installed, this adds a tab inside Firebug.

Other Handy Addons

• Palette Grabber: grabs site colors as a Photoshop palette
• Morning Coffee: loads favorite sites into tabs
• StumbleUpon: social networking for rating sites (requires a signup)