All posts in Web

In April 2007, A List Apart and An Event Apart conducted a survey of people who make websites. Close to 33,000 web professionals answered the survey’s 37 questions, providing the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide.

This is an enormous collection of data and well worth a look. View the survey results at A List Apart.

Highrise is an online contact manager that helps you keep track of who you talk to, what was said, and what to do next.

Excellent tool for organizing contacts. In an age where working off-site is increasingly common, effective communication via internet and phone is a must. I can see where Highrise would be incredibly handy for freelance work or even college students.

Andy Clarke‘s recently released, Transcending CSS, has an interesting bit on naming conventions (the labels designers give to elements). Though the subject is not new, it will no doubt be revisited more in the future as designers continue to focus on semantic coding.

A while back, Andy, along with the aid of Eric Meyer, peeked under the CSS skirts of 40 well known designer websites to see if they could reveal a common trend to naming elements. Unsurprisingly, the results showed that most of the element names used were commonly the same or very similar. Nevertheless, because there is no set format for naming elements, there will always be variations between designer’s stylesheets. For example, some like to use “container” for an all inclusive div while others opt for “wrap,” “wrapper,” etc.

So why does it matter? Well, it doesn’t hurt to use unique titles but the benefits of consistent naming conventions are well worth considering:

• Save time for yourself by not having to wonder what each element should be named.
• The ability to reuse stylesheets (at least the basic structure) from one project to the next.
• Quickly edit completed websites from the past without having to decipher what the names mean.
• Save time for others who may be working on the same website. Logical, meaningful names will make it easier to recognize the parts of a website and reduce the amount of mistakes caused by confusing labels.

Andy touches on the idea of further naming images to correspond with appropriate sections on the page, such as a simple_man.jpg might become branding.jpg to match the “branding” div. I would take it one step further and pose the idea of creating a naming convention for folders as well. Images should go in “images,” Javascript in “js,” etc. This would allow for easier referencing and better management. For example, If Douglas Bowman and Dave Shea decided to swap designs again like they did on April Fool’s Day in 2004, it would be easier if both of their image folders were the same name (rather than “i” and “img”). Furthermore, all branding, content, footer, and other main sections of a webpage could have their own image folders within the main image folder (i.e. /images/branding/branding.jpg).

For more reading on naming conventions:

• What’s in a name
• Elemental Nomenclature
• Semantic Coding

Firefox being my choice web browser, the following is a list of extensions I’ve found most useful. Each image is linked to the corresponding extension install page. Enjoy and if you have any recommendations, feel free to add a comment!

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and more.

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C.

IE Tab allows you to embed Internet Explorer in tabs of Mozilla/Firefox. This is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.

Greasemonkey allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.

SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

View Source Chart creates a colorful chart of a webpage’s rendered source code, making it easier to identify nested containers, structure and hierarchy. Source Chart is an intuitive way to analyze source and is a great visual aid tool for learning environments.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.