• purpose-built applications
• multifunctional applications

Within these two groups I’ve found that usefulness can vary markedly among tools; some are only suitable for diagramming and wireframing, while others focus only on prototyping. The best are blessed with both capabilities and more.

Purpose-built Applications

1. Visio

I will state upfront that I’m not a big fan of Visio (price: from $US259, demo available); I’ve used it from time to time on various projects, but I’ve always found it fiddly and time-consuming.

Visio first started as an add-on to MS Word, filling the need for a business and technical diagramming tool and eventually graduating to separate product status. Visio’s power remains in the area of diagrammatical documentation; as a prototyping tool its functionality is limited at best. However Visio, like Omigraffle (below), is particularly suited to content map generation from CSV files. In the recent version, Visio 2007, the addition of the UML plugin has allowed for smoother importing of UML.

Visio has also spawned a number of add-on tools; Swipr (which is free) is the most relevant as it allows for rapid export of wireframes and screen flows into a clickableHTML prototype. This is very handy for creating the entire prototype in one go and not having to link it together after exporting.

Visio is only available on the Windows platform.

2. OmniGraffle Pro

Yes, I’m a little biased here; I do likeOmniGraffle (price: $US199, demo available), especially the latest version. OmniGraffle is best suited as a tool for wireframes, screen flows, and content maps. It can also be used as a prototyping tool, with the ability to link canvases (pages). This allows you to produce a complete HTML prototype in one operation from OmniGraffle. You can, via the use of the notes function, easily annotate and complete the specification documentation for your prototype objects as you go.

OmniGraffle Pro (click to view image)

OmniGraffle provides an extensive series of Visio import and export functions, allowing for cross-platform team compatibility. It also allows you to import your base content structure from a CSV orXML file via a fully customizable rule-based layout function; this can be especially handy for documenting large and ever changing content maps.

Support for OmniGraffle is supplemented by a large online community, as is evidenced by the resources available at Graffletopia. OmniGraffle is only available for the Mac.

3. Axure RP Pro

Axure (price: $US589, demo available) has rapidly become the darling of the user experience and information architecture communities. The application allows you to construct wireframe models, document functional specifications, and generate prototypes, all using a built-in version control system.

Axure is an extremely rapid wireframing and prototype generation system that I’ve personally found pays for itself very quickly—in terms of increased productivity—despite its mid-level price tag.

Axure RP Pro (click to view image)

Axure allows for complete flexibility when designing an interface, from standard widgets, to custom builds, to an open-ended canvas. However, Axure’s true killer functionality is the generation of rich HTML prototypes and Ajax-like interactions between states. It’s a little like Dreamweaver and itsJavaScript generation, but good.

A word of caution: if you do go looking under the hood of your HTML prototype, the code it generates is not for the fainthearted and should never be considered for use beyond a testing prototype.

The one downside for me is that it only runs on Windows. If it was available on the Mac, I would be very happy with Axure.

4. iRise Pro

iRise (price: from $US6,995, demo available) was the first product of its type to market, and has advantages and disadvantages. The iRise product suite is very Axure-like in its functionality, and as the price suggests, is clearly geared towards an enterprise-level market.

Price aside, the one thing that I dislike about iRise is the user interface. Now this may be a personal preference, but you would think that if you’re going to be producing a tool for user experience professionals that you would at least make sure the UI is right. iRise suffers from a legacy interface that uses older GUI methods and techniques. I believe it’s in real need of an overhaul.

Still, if you’re looking at working with very large teams and need a comprehensive suite of products to span your entire prototype development life cycle, then iRise is worth a look.

5. Pencil

Pencil (free) is a Firefox plugin that professes to enable you to build wireframes and prototypes. As a prototyping tool it’s quite good, allowing you to quickly put together a reasonably high fidelity mockup. However, be aware you’ll still need to produce the visual design elements for Pencil, as it relies on dragging and dropping pre-made graphical elements.

The output wireframe elements that ship with Pencil do tend to be based on the look and feel of a Windows desktop application. This really is undesirable for a web application, however you could modify this with your own page elements.

Another downside of Pencil is that its export functionality provides only a few image formats. This means that Pencil falls short of being a real interactive prototype development tool.

6. SmartDraw

SmartDraw (price: from $US297, demo available) is marketed at the business diagramming sector, it’s not really a dedicated wireframing and prototyping application, but that doesn’t mean that it should be dismissed completely.

It’s at the lower end of the market so you would expect a reduced functionality set compared to Axure. SmartDraw is aimed at the same market as Visio or OmniGraffle, with a standard template suite and few auto generation features. For prototyping SmartDraw allows you to add simple dynamic elements to a page, with the final output being a PDF file. There is no allowance for the representation of the transition between states on prototypes.

SmartDraw is only available for Windows, offering a degree of MS-Office Suite integration.

7. MockupScreens

MockupScreens (price: from $US79, demo available) is a Windows-only application. It focuses primarily on the building of simple prototypes from a series of wireframes based around common screen elements.

The prototyping functionality is limited, and only available within the MockupScreens application. I do note that you can export the screens as image files or as a very limited HTML rendering. This product is very much at the bottom end of the market in terms of cost and functionality, however this may suit your needs.

8. Balsamiq Mockups

Balsamiq Mockups (price:$US79, demo available) is an interesting product running on Adobe AIR. Its representation of the interface elements has a refreshing hand-drawn, sketch-like quality to them. This does help promote the degree of changeability of the wireframes, as they look very much like a draft. If you lack the skills to create hand-drawn sketches then Balsamiq is a useful tool, as it allows you to produce quality roughs. Balsamiq also offers a standard collection of interactive screen elements, which is helpful to start off with.

Balsamiq Mockups (click to view image)

Balsamiq Mockups also introduces BMML (a flavor of XML), which enables you to export your wireframes.

However rather than a prototyping tool, it’s more targeted at communicating the concepts of a proposed interface via wireframing and the like.

9. Lucid Spec

Lucid Spec (price: from $US499, demo available) from Elegance Technologies is a windows-based .NET application that’s almost a clone of Axure. It has a series of rapid screen drawing tools and a prototyping testing mode they call “instant application simulation,” which can be viewed in full screen mode or within the application. There’s even a stand-alone Lucid Spec Player that allows you to conduct prototype testing without the need for the full application.

The one aspect that Lucid Spec lacks is allowance for those between state, Ajax-like interactions. The interactions presented are very much based on the traditional, page-by-page screen flow.

10. ConceptDraw Pro

ConceptDraw Pro (price: from $US249, demo available) promotes itself as an alternative to OmniGraffle and Visio, aiming at the business and technical diagramming market.

I’m pleased to say it does live up to these claims with various functions that are comparable to its competitors.

In addition to this it also has its own scripting language, ConceptDraw Basic. It’s possible with this scripting language to generate complex, customized prototypes. If you want to avoid going down the custom scripting route, you can use the standard export to HTML or PDF for prototyping.

ConceptDraw also has a Web Design plugin for us web designers, WebWave Plugin (price: from $US99, demo available). The WebWave Plugin streamlines the design process, allowing easier development of site and content structures to the mocking up of medium resolution wireframes—a bit like coloring in the gray boxes. You can then take the final mockup pages from ConceptDraw and produce the CSS and pages for a prototype.

ConceptDraw Pro is available for both Windows and Mac platforms.

11. iPlotz

iPlotz (price: free to $US99 per year) is a new web application aimed at the design and developmental life cycle market. It bundles project management functionality as well as wireframing, collaborative commenting, and testing prototype generation. Being browser-based this application can be used anywhere there is web access, allowing for true remote collaborative design and implementation.

Visually, iPlotz presents itself as an attractive and professional application. It’s a Flex application, and hence all the features from management to preview are accessed via the Flash interface, and so will require the latest Flash plugin, an easy ask for a designer or developer.

iPlotz (click to view image)

The rapid generation of wireframes within this application reminds me of the speed and ease of use of Axure, but with the hand-sketched look of Balsamiq Mockups. Another nice thing about iPlotz is that its focus is just on web design, nothing else. This is a pleasant change.

It’s early days for iPlotz, however there are a few items that do need addressing. The commenting interface can be a little distracting; the comments tend to crowd the screen if you have more than a few. There is only one font face available—comic sans. Also, at present the export functionality is limited to JPG, PNG, or a PDF. Still, this application is definitely one to watch.

12. Go Analogue

There is a lot to be said for stepping away from the computer and doing the initial wireframing with pencil and paper. You could extend this to paper prototyping as well. It’s fast (to build), cheap, and easy to use. For groups you can prototype using a large whiteboard, markers, and a few magnetic page elements. Both these methods tend to be highly interactive with the audience and can bring a moderate degree of humor to an otherwise dry process.

There are downsides to these analogue methods as it can be slow to produce and revise the screens, as well as being easily disregarded by management because of the disposable nature of the final product. I have found that they’re useful for the generation process, but the final documentation needs to be presented in a formal tool.

Multifunctional Applications

13. PowerPoint or Keynote

Often an organization is unable to afford specialized software for prototyping or wireframing. This is where applications like Microsoft PowerPoint (price: from $US229, demo available) or Apple Keynote(price: from $US79, with iWorks, demo available) can be used. Both these packages are well-suited to producing very rapid, simple prototypes. They’re highly compatible with the wide range of most teams’ skill set, so by using these tools you can usually have any team members immediately contributing to a prototype with ease. The downside is many of the finer interactive elements, such as between states, are missing, and your logic path tends to be of a very linear nature. Still, you can often export the prototype to HTML or Flash as well.

14. Adobe Fireworks

Adobe Fireworks (price: from $US299, demo available) is a tool I’d yet to consider using for prototyping—being a Photoshop devotee from way back. However, all this has changed with the release of Adobe CS4.

Fireworks is now shaping up to be a viable tool for producing both low and high fidelity prototypes, using nested symbols, smart guides, as well as generating all the code behind it. As usual this code suffers a little from the automatic generation process, so it’s going to need to be massaged into a reasonable shape if you want to reuse it for your final production model.

A side note here is that I know of others also using Adobe Photoshop and Illustrator, or Microsoft Expression Studio as wireframe documentation tools. These tend to work well when you have a good library of objects, such as brushes and the like.

15. HTML

If you have the skills, you could just develop your prototypes in HTML. This is especially useful if you are producing the front-end code that’s going to be consistent in standards with the final web site anyway. Doing it this way will save you time and money by reducing the overall production time.

These days—with the use of various jQuery plugins—you can represent nearly all the between states or major interface types that have been proposed with ease.

Functionality is also available via the use of Protonotes; you can have your team collaborate on your prototype by leaving dynamic, virtual Post-it like notes.

Even if your skill set falls short of being technically-oriented, you could use developmental platforms like Adobe Dreamweaver and its improved JavaScript Spry components to produce a reasonable visual representation.

I will admit I have often done this, quickly pulling together a working HTML prototype from within Dreamweaver with little regard to the underlying code. Remember, it’s just a prototype and so only has to be visually representative of the final product. I shudder to say this, but in this case the code is secondary.

16. Adobe Flash

Adobe Flash (price: from $US699, demo available) is a great tool for producing rapid interactive prototypes or screen flows, but is unsuitable for wireframing and specification documentation. However, via the use of the library objects, the timeline, and drawing tools it’s very easy to produce an interactive prototype. The one area Flash is especially suited is in the reproduction of those in-between states that many static presentation tools lack.

This functionality of using Flash as a prototyping tool is now being extended by Adobe with the introduction of an entirely new tool for designers and developers alike: Catalyst. Now I’ve yet to try Catalyst personally—I can only go off the Adobe video and the reports from colleagues that have seen it in operation. But trust me here, this application is going to change the marketplace and make RIA development the next big thing! There, I said it; some of you will disagree, and that’s fine.

Another thing that Catalyst is promising for people like me that use a Mac, is that it will give us the jump on our colleagues using Axure. We shall see on that one.

However, as many inexperienced web designers soon discover, creating a one-page homage to your canary Boris (may his soul rest in peace) and building a professional web site are two very different tasks. To build a web site that communicates effectively with its audience, can be updated by the client,and looks visually pleasing requires a whole range of skills—some of which lie beyond the comfort zone of most designers, especially if they have come from a print background.For example, determining what technology is the best fit, what Content Management System to use, where to host the site, how to ensure cross-browser compatibility and how to ensure the site ranks well in search engines are all important. For the uninitiated, these hurdles can become very overwhelming, very quickly.

So what works, and what doesn’t? Well, as you might expect,it depends. As with any project, important decisions are shaped by the goals of the project, the budget, the timeframe, the experience of the team members, and the personal preferences of those involved.

While it’s true that many technology decisions are often best left to the geeks who speak in 1s and 0s, there are a few universal truths that apply to all web projects. It’s crucial that any designer tackling a web project understands these fundamentals, regardless of whether they cut code, push pixels, or dabble in both.

The Client-side Contest

designers have already decided before they embark on a project that it will be built in Flash (or Microsoft’s rich media offering, Silverlight) without even considering the web standards trio: HTML,CSS, and JavaScript. As real designers they want to avoid limiting their creativity by browser compatibility woes and a restrictive set of user interface options, so they choose Flash, believing that they’re making the right decision.

It’s understandable why we designers love Flash so much—why wouldn’t we? It’s an enormously powerful medium with which we can create eye candy and push the boundaries of interactivity and multimedia. Flash also has an enormous install base, so it conveniently sidesteps the browser-compatibility woes that have plagued CSS-based sites for years. Finally, Flash has that unmistakable “wow” factor that is useful for blowing away clients.

Unfortunately, Flash has a few dirty little secrets. Actually, they’re not little—take a look at the following downsides before you decide to build your next site in Flash:

• Flash sites perform poorly in search engines compared with sites created with HTML. While Google has made advances over the years in indexing content, Google’s engineers still have a long way to go before the bots that crawl the Web can understand a Flash file to the degree that can be defined using simple HTML tags.
• Most Flash sites are less accessible to disabled users than their HTML-based counterparts. Sure, there are some basic keyboard navigation features built into every Flash file, but in many browsers, switching between the Flash object and its HTML container is problematic, as is navigating Flash objects with input devices other than a mouse or keyboard.
• Flash sites are often less usable than an HTML/CSS equivalent, with key features of the web browser experience going out the window when a site is built in Flash. These include highlighting text for copy and paste, clicking the Back button to go back a page, increasing the font size, and allowing for users to open links in new windows. This is regardless of how beautiful and intuitive the interface is.
• Flash sites are unviewable by most mobile users. Even the iPhone—a phenomenally successful product for Apple in Australia and arguably the most advanced handheld device on the market—is unable to view Flash files.

Of course, there are many circumstances when it does make sense to use Flash: animated mastheads, embedded movies, and interactive interfaces that break away from the document-based model of the Web are all good candidates. However, rarely do those circumstances involve building a site purely in Flash.

As sites like cssZenGarden.com have proven, a site need not be created with Flash in order to look pretty. Many web designers resort to Flash because it’s what they know, and the client suffers as a result. Meanwhile, CSS support has improved considerably in today’s web browsers, and there are now a huge range of excellent JavaScript libraries which make writing JavaScript a much simpler task than it used to be. There’s no reason to resort to Flash when good old HTML and its companion technologies can do an equally fine job and avoid the pitfalls listed above.

The Server-side Showdown

While it’s common that a designer may possess some skills in HTML, CSS, and JavaScript, programming in a server-side language is usually reserved for the IT nerds of this world (aside from those rare and annoying all-rounders who excel at both left- and right-brain activities).

Yet, more and more roles demand that designers be comfortable with both graphics and writing code—even if it’s just to update the template of the Content Management System that powers the site.

Here’s a brief rundown of the most common server-side languages in use on the Web and how they stack up.

• CGI-Perl: The programming language Perl has been around for longer than the World Wide Web itself. The language is an ongoing open source project, and any hosting provider you use is guaranteed to have it installed. However, unless you have a good reason for learning Perl, I’d suggest steering clear—it’s notorious for being difficult to learn.
• PHP: Like Perl, PHP is also an open source language. However, unlike Perl, PHP has a reputation for attracting beginners, largely because it’s very easy to learn and ubiquitous across web hosting providers. The ease of use of PHP is sometimes viewed as a criticism by developers, though, as it provides newcomers with “enough to rope to hang themselves.” However, the popularity of PHP is undeniable. It’s also the language of choice for many free content management and blogging systems (which we’ll explore later in this article). TheXAMPP package, a single-click install of PHP and other technologies that integrate with PHP, is a great package that is available for Windows, Mac and Linux users.
• ASP.NET: For those clients who are uneasy about trusting open source technologies, Microsoft’s ASP.NET might be a good choice. The Visual Studio development environment is a natural choice for building ASP.NET sites. Visual Studio drastically simplifies the process of building web sites, but this comes at a cost—it’s both expensive and resource-hungry (although there’s a free “express edition” available). Unfortunately the code that Visual Studio generates is often inefficient and non-standards compliant, and some web hosting providers lack the facility to host ASP.NET pages.
• Ruby: The Ruby language has been around for over ten years, but its popularity for building web applications is only recent, fuelled largely by a web application framework called Ruby on Rails (or just Rails, for short). Despite the slightly odd name, Rails is a well thought-out framework that forces developers to follow best practices in terms of file structure, filenaming conventions, code reuse, and unit testing. There’s a steep learning curve required in order to master Rails, but those who persist often become vocal evangelists.
• Flex: Flex refers to a collection of technologies from Adobe for developing Rich Internet Applications—online applications with a much higher degree of interactivity than a standard browser-based web application. In Flex, user interfaces are defined using a markup language called MXML, the interactions on the page are described in ActionScript, and the end product runs as a Flash file. Adobe make the basic Flex Software Developer Kit available to download for free, but if you’re planning on building sites in Flex on a regular basis, then it’s worth paying for the Flex Builder Pro editor.

As you can see, the choices of technology for a web project are vast. Whether you’re itching to dirty your hands, or just wanting to understand how those propeller-heads in the basement of your office spend their time, making an effort to appreciate the fundamental differences between the languages listed above will make you a better web designer—if only because you’ll be able to better communicate with your technical colleagues.

Dabbling in server-side web development may also improve your client-side coding skills; perhaps if more web development projects were approached with a software engineering mindset, rather than a print mindset, then there would be less broken web sites out there.

Content Management Systems: Custom or Package?

In the previous section, I argued that designers should learn a server-side language. Now I’m going to recommend that you use an alternative language when building your next web site. It’s confusing, I know—bear with me!

Here’s why you should build your next site using as little custom code as possible: wearing the designer hat and the programmer hat certainly gives you a competitive advantage in the web world, but the reality is that most web sites are fundamentally content sites. For these types of sites, a Content Management System (CMS) will suffice.

One of the most difficult challenges in building a web site is ensuring that the client can update it on their own, long after the project has completed. A CMS is key in achieving this goal. While there’ll always be clients who are faster learners than others, it’s also true that some Content Management Systems are much easier to learn for non-technical people than others.

True, there are occasions when the site for which you’re designing might require purely custom code, but on these occasions it’s more likely that the development (and design) will be managed in-house rather than by an external agency. If you’re reinventing the wheel for your client, you should be using a CMS.

There are numerous advantages to using a well-established CMS rather than rolling your own. These include:

• Security: Using a CMS that is being constantly evolved means that with each upgrade comes improvements in the security of the product. These updates may fix previously undiscovered security flaws, adapt to changes in how browsers operate, or add support for upgraded database versions. Writing custom code that’s accessible over the Web without investing any time in the future testing and updating of that code poses a great risk in the security of your client’s web site being compromised.
• Familiarity: There may be no perfect CMS, but there are a finite number of them on the market. If by chance your client has used the same CMS before that you choose for your project, then the learning curve for updating their site will be much lower. This makes good business sense for them, and makes you look good.
• Maintenance and Support: If the code that powers your client’s web site is completely custom, then your client will be more dependent upon you to make any future tweaks or changes than if you used an established CMS. While on the surface this may seem like a cunning way to lock them in for repeat business, such an approach can be harmful to the client-vendor relationship—especially if there are occasions when you’re unable to accommodate their requests in a timely fashion. It makes much more sense to use a CMS for which a thriving community of developers exists, so that your client has an alternative developer to turn to if necessary.

So if building a site from scratch is a no-no, the question then becomes “Which CMS should I use?” This question has caused heated discussions amongst web developers for years, and again the answer is, “It depends.”

Unfortunately, a comprehensive comparison of every available CMS is beyond the scope of this article. There are a huge number of factors to consider. Here’s a sample (this list is merely the tip of the iceberg):

• Does the CMS contain the features necessary for this site?
• Are there any legacy systems with which the CMS needs to interface?
• How big is the development community associated with the CMS?
• Is the client comfortable with using an open source solution?
• What plans are there for expanding the site in the future?

An open source CMS is often perfect for a client whose project budget is limited. Tools such as Drupal, Joomla, eZ Publish, and WordPress are all open source and written in PHP. Each package has its strengths and weaknesses, but all deserve your consideration.

An excellent place to begin researching open source CMS packages is opensourcecms.com. The site provides demos of over 100 open source CMS with which you can experiment without installing anything on your own local machine.

Ranking in Search Engines

Okay, so you’ve launched your site and you’re publishing interesting and unique content every day. Visitors should come flocking in droves, right? Well, if people are unable to find your site, then how would they know that it exists?

If your log files are telling you that only two people are visiting your site every day (and you’re one of them), then you may need to put some effort into optimizing your site for search engines. Search Engine Optimization (SEO) is an umbrella term that covers how you code your site, what content you publish, how you phrase that content, what URL structure you use, and how well you rank in search engines for various phrases.

The world of SEO continues to be tarnished by stories of online marketing consultants who game Google with unconventional techniques; these trick the Google algorithm into listing their web site higher in the results pages than it probably deserves to be.

The truth, however, is that SEO is an important aspect of any commercial web site, and there are many legitimate techniques that you can, and should, utilize, to ensure that people are able to find your site through a search engine. While it would be impossible to describe how to develop a comprehensive SEO strategy within these pages, if you follow my advice at the start of this article to use HTML instead of Flash whenever appropriate, you’ll be well on your way.

One common misconception is that a web site’s ranking in a search engine is tied to its PageRank. PageRank is a trademarked term used by Google to determine how much authority a web site has. Fundamentally, the way it works is this: the more links to a web site, the more important Google considers that site to be and, therefore, the higher its PageRank.

Realistically, though, the algorithm that determines a web site’s PageRank is a closely guarded secret, and the algorithm itself is constantly changing as the Web grows. Additionally, a web site’s PageRank is only one factor that influences its position in Google’s search results pages. Finally, it’s important to remember that Google is but one of many search engines. Google may dominate the current climate, but this may change in the future. Focusing on Google alone would be a short-sighted strategy.

In the end, a site’s PageRank value (or its ranking using any other metric, for that matter) is meaningless if the site ranks well in results pages for Google and other search engines for the phrases that matter to your client. The key to achieving (and maintaining) success is to continually monitor your site’s traffic using an analytics package like Google Analytics. The insight that this data can provide on how visitors use your site and what keywords they type to find it will be invaluable in shaping the site’s SEO strategy.

A Web Site is a Software Product, Not a Piece of Paper

Accessing the Web has never been easier for end users interested in publishing photos, chatting with friends, and dumping random thoughts for the world to savor, but building a professional web site is as difficult as it has always been.

It’s therefore critical that web designers take the initiative to understand what goes on “under the hood,” or risk their beautiful mockups failing to reach their full potential because of the technology that implements them. By understanding when to choose Flash or HTML, the pros and cons of the various server-side languages, how to select a CMS, and what factors affect a page’s ranking in a search engine, designers will be able to offer their clients a more informed service—and a more successful web site.

Blueprints? A plan? No time for all that. You know what a house looks like, and, besides, you don’t want to stifle creativity with a bunch of formalities.Think again, Sparky. Whether you’re building the family domicile or your organization’s Website, you need to start with a plan. An effective plan starts with quality information, and to get quality information you need to ask the right questions.

Here’s a Site Planner, a collection of focused questions to help you jump-start the information gathering process. Each section (Background, Audience, Resources, Competition and Content) asks several basic questions along with “Next Steps” for detailed follow-up.

For best results involve as many stakeholders as possible — business/process owners, marketing and sales staff, IT folks, content managers, developers and customers.

Ready? Sharpen your pencils and roll up your sleeves. And good luck enhancing your Web presence!

Background

• Goals. What are your specific goals? Consider:
  • company/brand awareness,
  • product/services awareness,
  • product/services sales,
  • community building,
  • entertainment,
  • knowledge sharing, and
  • internal communications.
• Promotional Fit. How should your Website fit with current promotional and marketing strategies and materials?
• Deadlines. What are the schedule or deadline requirements?
• Funding. What are the budgetary constraints?
• Measurement. How will you measure the success of the site?

Next Steps:

1. Develop a ranked (from most- to least-important) Goals Master List.
2. Create a mission statement for the site.
3. Identify how the mission and goals of the site might change from short-term to long-term, given the direction of your organization and industry.

Audience

• External. Who is your EXTERNAL audience? Consider:
  • current customers,
  • potential customers,
  • suppliers,
  • professional/trade organizations,
  • investors,
  • competitors,
  • children,
  • schools/educators, and
  • the sight-impaired.
• Internal. Who is your INTERNAL audience? Consider:
  • all employees,
  • management,
  • marketing/sales,
  • operations, and
  • IT.
• Sub-groups. Determine all subgroups within the audiences identified above.
• Define. Identify the interests, technical skills and special issues for each audience group and subgroup.

Next Steps:

1. Create a ranked Audience Master List.
2. Develop an Aligned Master List by matching the Audience Master List to the Goals Master List.
3. Create usage scenarios based on Aligned Master List.

Resources

• Project Roles. Who are the resources that will be responsible for content management and technical support (include their names, titles, roles, and contact info)?
• Team Skills. What are the technical and content management skills of each resource?

For each resource, identify any training, software, hardware, scheduling and budgetary issues.

Competition

• Identify Competitors. Identify the sites of competitors and others that may provide direction for your site.
• Important Elements. Identify the important elements of each competitor site:
  • functional features,
  • technologies used,
  • breadth of content and
  • look-and-feel.

  Next Steps:

  1. Develop a competitive analysis that includes the important elements of key competitor sites and which of these elements your site should match, exceed, or avoid.
  2. On a regular basis, revisit key competitor sites and update your competitive analysis.

  Content

  • Functionality. Which functional features should your site offer? Consider:
    • ecommerce/shopping cart,
    • site search,
    • customer service/support,
    • tech support,
    • discussion forums,
    • newsletter,
    • catalog/information
    • order forms,
    • feedback form,
    • member logon,
    • password protected areas, and
    • SSL-encrypted areas.
  • Information. Which informational elements should your site contain? Consider:
    • About Us page,
    • Contact Us page,
    • copyright notice, and
    • privacy statement.
  • Structure. What is your site’s hierarchy? For each of the 4-7 (though you can have more or less) main areas of the site, identify:
    • each main menu item,
    • all submenu items, and
    • additional content.

    Think of a tree-style hierarchy with the home page at the top.

  Next Steps:

  1. Describe in detail each functional feature. What exactly will it do?
  2. Identify the resources required, and any technical and budgetary issues associated with each functional feature.
  3. Provide detail for each informational element.
  4. Assign content responsibilities to the resources identified above.

  Summary

  Experience shows that questions raised and answered in one section may engender ideas and issues in other sections. This is a good thing, and reinforces the fact that the Site Planner can (and probably should) be used iteratively. In fact, we’ve found it useful for periodic reviews of existing Websites.

  The more time and effort your organization devotes to this information gathering process, the more likely you are to build an effective, customer-driven and well-staffed Web presence.

  .

  Happy planning!

I decided to split the list into two sections: The Obvious, and The Not So Obvious. The Obvious consisted of sites that everyone would immediately think of, and cause quite a stir if I left them off the list. The Not So Obvious sites were ones that might escape our notice at first, but very much deserve recognition for how they contributed to the overall advancement of CSS.

The Obvious

CSS Zen Garden

CSS Zen Garden (click to view image)

In 2003 David Shea launched CSS Zen Garden with only five designs and since then it’s been at the front of the pack in the CSS web revolution. For many young developers, before you even crack your first CSS book, you’re familiar with Zen Garden and are already thinking about what your submission will look like. This site has made a lot of people very excited about the power of CSS and is, arguably, the most influential stop on the Web for CSS.

Meyerweb

meyerweb.com (click to view image)

Eric Meyer—self-proclaimed CSS Jedi—runs meyerweb.com. And it’s no mystery what Eric has done for CSS. The Meyerweb Toolbox and CSS work areas are filled with goodies like S5 (an XHTML/CSS presentation program), CSS files (diagnostic and reset), CSS tests, a CSS2 prototyping test suite, and inline model documentation (I know, you’re mouth is watering already). By far, the coolest area of this site (other than the blog itself) is the CSS/Edge, where Eric puts up a lot of CSS demos and neat techniques he’s playing with.

A List Apart

A List Apart (click to view image)

It’s difficult to put into words what exactly the crew at A List Apart has done to advance CSS, let alone the Web as a whole. Some of their greatest CSS accomplishments (in my opinion) include: CSS Sprites, Sliding Doors of CSS, Progressive Enhancement with CSS, and From Table Hacks to CSS Layout: A Web Designer’s Journey. They’ve written so many articles on CSS it’s impossible to read all of them if you happen to fall behind (believe me, I just went through the whole list); you can only hope that you keep up with their monthly publications so that you’re one of the first to find out about the new great CSS technique.

W3Schools

W3Schools (click to view image)

W3Schools seems to always be at the top of search results when you ask a general coding question. They have tutorials on everything from basic topics like XHTML to advanced ones like RDF. But this is about CSS. W3Schools has some of the greatest beginner and novice CSS tutorials on the Web and it’s a great place to learn whether you’re starting out or just after a quick refresher on the terminology.

CSS3.info

CSS3.info (click to view image)

Every CSS minion knows that this site is the premier web site when it comes to finding out all the important info on the newest properties that are coming to light in CSS. The team behind CSS3.infomakes sure that the site contains the most recent and relevant information you can find on CSS3. And really, I’ve yet to find a site that offers the same level of insight as this one. As far as the future of CSS, this where you go when you want to cut out all the cruft and focus on the important information.

Position Is Everything

Position Is Everything (click to view image)

P.I.E. is a site dedicated to all the browser quirks that drive us crazy on a day-to-day basis. Through learning the ins and outs of CSS this site has saved many of us hours of debugging, since we didn’t have to figure out the peek-a-boo bug or the weirdness of the box model by ourselves. This site is a great asset for any CSS developer and its content is even becoming a topic of job interview questions for web developers.

Holy CSS Zeldman!

Holy CSS Zeldman! (click to view image)

Holy CSS Zeldman! is a great collection of Web Standards-related links akin to the digg RSS feed for CSS. This site has been around for as long as I can remember, though I won’t say a site is great just because it’s a classic, or because it has Zeldman in the name. This site is around because it takes so many great CSS sites and promotes them in one collection for developers to sort through as they see fit, and is a big reason CSS is seen the way it is today.

CSS-Tricks

CSS Tricks (click to view image)

Chris Coyier’s screencasts started a video revolution throughout popular blogs all over the Internet, and advanced the learning of CSS beyond reading long boring articles. From beginner tutorials to the more advanced topics like conditional style sheets, CSS-Tricks takes a step by step, visual approach to CSS—and people seem to really like it. Chris also runs a popular CSS/JavaScript link-sharing site calledScript & Style.

CSS Galleries like CSS Mania, CSS Remix,CSS Website, and CSS Vault

CSS Vault, CSS Mania, CSS Remix, and CSS Website (click to view image)

The goal of all CSS galleries is to bring CSS into the mainstream, so how could I leave them off this list, right? As I was gathering sites, I kept coming up with various galleries; I wanted to avoid scattering them throughout the list because I thought that would lessen this article. Yet galleries display all sorts of real-life examples of CSS work, and the people who submit their work to these sites are the ones on the front line of web design and development. They deserve all the credit in the world for keeping CSS and web standards alive across the Internet.

CSS Template Sites like Monster Templates and Open Source Templates

CSS Templates (click to view image)

Just like CSS galleries, CSS template sites have the noble goal of raising the quality of sites across the Internet from the ground up, distributing templates to those who would normally slap a site together with a few tables. CSS template sites like Open Source Templates and Monster Templates helped further the CSS cause by making it easier to work with, and by removing some of the more frustrating elements of CSS like browser testing.

ESPN.com

ESPN (click to view image)

Admittedly, I completely forgot about how important ESPN was in the publicizing of CSS—it took a co-worker to remind me. But I’m glad they did, because this list really would be incomplete without it. For those who are unaware, ESPN.com was one of the first major web sites to convert from tables to CSS. By switching to CSS back in 2003, ESPN.com saved around 2 terabytes of bandwidth a day. It was a highly publicized move which paved the way for other large web sites to do the same.

W3.org

The W3C (click to view image)

W3.org? Yeah! Every time you need to know information about a CSS property that has yet to be written, this is where you go. When I was writing my last couple of SitePoint articles I spent a lot of time researching the “future of CSS” and logged many hours reading up on theCSS3 spec. They have everything from therotating box model to the CSS3 User Interface model. And really, who better to receive the latest CSS news from than the people who write it?

jQuery

jQuery (click to view image)

jQuery is everywhere these days, it’s totally unavoidable if you’re an up-to-date developer. It took the average CSS developer and instantly made them JavaScript gurus with its brilliant CSS selector integration, as well as giving the average run-of-the-mill JavaScript developer a great insight into the workings of advanced CSS.

jQuery is also allowing advanced CSS features (that have struggled to survive in the midst of massive browser wars) to thrive and be presented to the Web in a way that brings CSS3 into the developer’s everyday toolbox.

Section 508

Section508.gov (click to view image)

Section 508 is an amendment to the Rehabilitation Act passed by the United States Congress in 1998. It’s specifically about the accessibility of electronic information to those who are disabled—the Web equivalent of putting a ramp on a building. It also helped give rise to the idea of designing in layers with Progressive Enhancement.

In the three layers of Progressive Enhancement, the second layer—presentation—is set up just for CSS. I think it’s safe to say that without amendments like Section 508, CSS would have struggled to come as far as it has in such a short time.

CSS-Discuss

CSS-Discuss (click to view image)

Okay, I’ll be the first to admit that this one is more about the mailing list, but it all starts with the web site. The CSS-Discuss mailing list takes common CSS problems and news from developers and brings them to a mass audience, so that we can all put our heads together and come up with creative solutions to problems we all run into. Even if you’re just a quiet observer of the mailing list, you can learn a lot of tips and tricks about CSS.

WestCiv

WestCiv’s Style Master (click to view image)

Much of this list contains sites that I personally learned CSS from. StyleMaster and WestCiv played a huge role in my learning CSS, bringing advanced techniques to sites I design and develop. StyleMaster was one of the first CSS editors released for the PC and Mac operating systems. It had—and still has—many built-in CSS features that helped developers (like me) explore and test the limitations of CSS.

WestCiv also released many CSS tutorials on their site that are some of the best introductions to CSS I’ve found.

YUI CSS Library: Grids, Reset, Base, and Fonts

Yahoo UI Library’s Reset CSS (click to view image)

The YUI team has some of the best front-end developers out there and they really outdid themselves with their CSS library. The library contains CSS reset, base, grid system, and fonts files. Developers all over the world use the CSS files developed for the YUI CSS Library. It has also paved the way for many of the most popular CSS frameworks out today.

I Love Typography

I Love Typography (click to view image)

Properties like position, float, and things like text-indent:-9999px are the rock stars of CSS (bear with me). With monsters like that looming about, it can be very easy for a property to get lost in the mix. I Love Typography brought many of the CSS properties into the limelight by stressing the importance of readability: line-height, letter spacing, whitespace, and font-size/family.

Chris Pederick

Chris Pederick’s Web Developer toolbar (click to view image)

Towards the end of my research for this article I was poking around through the features in my Web Developer Extension for ideas to round out the list, when it occurred to me that the extension itself, for me, was a huge CSS influence. The Firefox Web Developer extension was developed by a guy named Chris Pederick, and it rivals extensions like Firebug and Greasemonkey in popularity among the developer community. This was the first extension I used to learn CSS. Chris still distributes the popular Firefox extension via his web site as well.

MySpace

MySpace (click to view image)

MySpace? Seriously? Yes, MySpace did a lot for CSS. When we talk about bringing anything into the mainstream, we have to consider beyond the mainstream web developer. MySpace brought CSS to an audience who couldn’t care less about it. The millions of people who customize their MySpace pages have all seen CSS; even if they fail to understand it, they’ve seen it. Consider this conversation:

Non-techie: So, what do you do?
Tim: I’m in web design and development, specializing in CSS.
Non-techie: What’s CSS?
Tim: You know that chunk of code you use to make your MySpace page look hideous? That’s CSS.
Non-techie: Oh yeah, okay.
I have that conversation more than I’d care to admit.

Some Last Words

So, that’s my list, from CSS Zen Garden to MySpace. I can only hope that everyone reads all the descriptions rather than just scanning through, because there are some parts that I really look forward to hearing opinions on. The best part of writing an article like this is finding out what everyone has to say, including the spin-off debates it can cause. I look forward to hearing the feedback.

List includes Use child selectors, Use attribute selectors, Trust z-index again, Make full use of 24-bit PNGs and my personal favorite Enjoy ourselves again!

Read the full article

Perhaps one of the most frustrating aspects of using PHP with websites, is getting variables into CSS. Having variables stored in an ini file, config file or even a database can make the updating of the look and feel of a site simple, however, CSS files, by default, do not parse PHP.