Smashing Magazine provided a wealth of expert tips, advice and suggestions in its popular and valuable 35 designers x 5 questions article. To celebrate its one year anniversary, the magazine found more experts and asked new questions. The result is 50 designers x 6 questions, which contains over 170 new tips answering the following six questions:

• What is one typical myth about web-development (which is not true)?
• What is one bulletproof method to get over creativity block?
• What is one thing you wish you knew before you’ve started programming/designing/… ?
• What is one thing to do before starting a new project?
• What is one common mistake you should always avoid developing web-sites?
• What is one device/tool or/and service you can’t imagine your life without?

Freelance writers, editors, and anyone involved in any aspect of Web design or working with projects will benefit from the responses.

“Forgot password?” should be instant. The site should simply request the user to enter the email address and immediately let the user know if the email address is in the system or not. Otherwise, you could lose out on ordering opportunities.

We tried to order dinner online and Paul (SO) forgot his password. He entered the email address and the response page said it was mailed. Nothing came in after 10 minutes of checking. He tried a second time and still no avail. The place’s competitor also has online ordering and we could easily switch our plans.

Another time I was trying to order an item. I registered and tried to purchase the item. But when I signed back in (after not receiving an email within ten minutes), my account didn’t exist. The site would not accept any of the information I entered.

The next time, I registered and confirmed it worked by logging out and back in. Then I tried to order the item again… no luck. Moral: Make sure your order forms and forget password process work.

Giving up, I emailed the company (it had the best deal) and got a reply a few days later suggesting I call. I wrote back saying I prefer to order online because I’m hard of hearing. No reply yet. Another lesson: Reply to customer emails within 24 hours with the only exception being when the office isn’t open. Lesson #2: Offer the customer multiple ways to contact your company.

Chris Pederick has created the Web Developer Extension for Firefox and Mozilla, which adds a menu and a toolbar to the browser with various Web developer tools. It’s a fabulous tool for learning and doing development work. Install the extension by clicking on the download link and following the dialog boxes as with installing any extension.

What makes the toolbar outstanding is its ability to do things with any Web page. It offers many features and we’ll cover a handful so you can see what it can do. Let’s work through the buttons from left to right.

Disable

Turns off cookies, images, Java, JavaScript, colors, etc. To show you what some of the options can do, I use Amazon as our guinea pig. Fig 1 is the original page. Turning off images animation stops the treasure box from rocking back and forth.

Fig 2 is what happens when disabling page colors. There are still colors from the images. These are the colors from the borders, backgrounds, and fonts.

Turning off the styles results in not much of a big difference, but it’s harder to see the links. Style disabling is more prevalent on pages relying on heavier CSS. Try it in CSS Zen Garden.

CSS

To see Amazon’s CSS, use “View CSS” and it appears in its own tab. It’s no wonder why turning off styles didn’t look different. The style sheet covers fonts and little else.

“View style information” provides style information about whatever the mouse cursor rolls over in the status bar. See fig 3 for an example.

Here’s one feature where Firefox has an advantage as Mozilla doesn’t have this option. It offers the “Edit CSS” option and this is a great way to experiment. I went wild and changed a few colors on the meryl.net home page. You can do more, but it’s a simple example.

Forms

The form’s GET and POST methods operate differently. If you’re experimenting with them or want to see what happens if you switch them, use the “Convert POSTs to GETs” and “Convert GETs to POSTs.”

To see the form’s code, select “Display Form Details” and you see something like fig 4.

Images

For “Image Dimensions,” click on it to get the height and width of every image on the page as shown in fig 5.

When images on a page are broken or you want to know their paths, instead of using the “View Source” and scrolling through all the code, use “Display Image Paths.” And to find all broken images, click on “Find Broken Images.”

See how your page looks for those who surf without images or people who are visually impaired by using “Make Images Invisible.” See fig 6. You can also “Replace Images with Alt Attributes” as well as use the “Outline Images” to help you quickly find images with or without certain features.

Information

Information is also good for testing and identifying parts of a Web page without searching for it. “View ID and Class Details” puts blocks around Class and ID. Green for ID and red for class for easier identification.

Here is an example output of “View Response Headers,” which puts the information in a separate tab:

Server: Microsoft-IIS/5.0
Date: Sun, 03 Oct 2004 22:25:08 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 1.1.4322
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 21272

“View Speed Report” links to WebSiteOptimization’s Web Page Analzyer and provides details about the page you’re on.

Miscellaneous

“Show Comments” makes ! appear where there are comments. Here’s one from Yahoo! with the comment expanded by clicking on the !. You can copy and paste the comments.

From the source code:
A readable screen shot

From the Web page:

“Visited Links” allows you to make all links as visited or unvisited. It’s like resetting the colors (if there are different colors for visited and unvisited links).

“Zoom” makes the text larger.

Outline

No fretting. This isn’t the outline you learned in school. The feature puts a border around block level elements, deprecated elements, frames, links without the title attribute, and table cells. If you’re trying to get rid of tables, ensure you have titles for every link, and dump deprecated elements, use this to find them without scanning the code.

Or create your own using the “Custom Elements” option.

Resize

Self-explanatory. “Display Current Size” puts the info in a pop up box while “Display Current Size in Title” puts it at the top of the browser.

Validation

One-click validation of HTML, CSS, accessibility (WAI and 508), links, and create your own.

View Source

Click it and get the page code.

Options

If you want the changes you’ve made using the toolbar to apply to another page, click on “Persist Styles.” To reset the mess I made, I click “Reset Page.” This erases all the things I’ve done to the page with the toolbar.

“Options” controls the hiding / unhiding of the toolbar and how you want the windows / tabs to behave. ‘Validators’ is for adding another validator that isn’t on the list or replace an existing one.

Add frequently used window sizes in ‘Resize’ so you don’t have to customize it every time.

Don’t like red and green for identifying class vs. ID? Change it in ‘Colors’ as well as the tooltip colors.

You can access the toolbar through Tools > Web Developer or right-clicking on the browser window and selecting “Web Developer” from the context menu.

Like candy for Web design, isn’t it? Play and test Web pages without worrying about screwing things.