Webmasters Gallery

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly – or if moving from one section to another takes a long time – it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.

Some things to consider:

• Are important information being seen by the user?
• Are the navigation and action items intuitive?
• Is the user being directed to sections in a logical manner?
• Does the web page load quickly enough to not turn away the user?

If you’re interested in analyzing and optimizing your page layout – here’s some extremely useful tools that you can use to help.

1. ClickHeat

ClickHeat is an open source visual tool for showing “hot” and “cold” zones of a web page. It allows you to see which spots users click on most, and which spots are being ignored.

It’s very easy to implement on your website, you only have to include an external JavaScript file.

Download: Clickheat on SourceForge.net.

2. Crazy Egg

Crazy Egg offers a myriad of analytical tools to help you visualize what visitors are doing.

Features include: Confetti – allowing you to see what people are clicking on based on certain factors such as their operating system and where they came from, Overlay – providing you with tons of data about particular links, and Report sharing – enabling you to share the data with team members and clients.

The free version only allows 4 pages to be tracked – so use your top landing pages to get the most data.

3. YSlow for Firebug

A key tenet of a strong design is that, not only should information be presented in a logical and elegant fashion, but that it must also be served quickly, with very little delay.

YSlow for Firebug is a free tool for Mozilla Firefox that gives you information about your front-end design to see if it performs well. It gives you a letter grade (A through F) and outlines your web page’s trouble spots.

It’s based on the Yahoo! Developer Network’s “Best Practices for Speeding Up Your Web Site” initially written by Steve Souders, who was once the Chief of Performance at Yahoo! and is now working over at Google on web performance and open source initiatives.

Downloads: Firebug extension for Firefox (required) and YSlow.

4. clickdensity

clickdensity is a full suite of usability analysis tools that will help you assess your web page design.You can use heat maps showing where users click on the most, hover maps – which shows people scrolling over links but not clicking on them, and A/B Tests which allows you to change certain page elements to see which style is more effective.

The free subscription give you 5,000 clicks and only one page and one site to monitor.

5. ClickTale

ClickTale offers a lot of user data pertaining to how visitors use your website.

There are plenty of things you can look at such as average time it takes for a user to click on a link, a user’s hesitation on clicking a link, hover to click ratio, and much more. It also provides detailed reports and charts on your users’ monitor sizes to better optimize your web page design to cater for the typical visitor.

6. Clicky

Perhaps the most interesting feature that Clicky has is its real-time tracking and monitoring feature, called Spy.

Besides Spy, there’s a host of other analytics data you can look at such as user Actions – which records click data from your users and Visitors – providing you user data.

7. Google Analytics

One of the best free services that Google offers is Google Analytics and probably the most well-known analytics tool. It’s incredibly easy to install and offers plenty of user and content data to help you learn more about your web pages’ performance.

It has a feature called Site Overlay, which gives you a visual representation of the popular places your users like to click on. It also offers data on bounce rates and your top exit pages (to see what pages make users leave).

So there they are, some of the best tools in the market to help you troubleshoot and optimize your page layout. In the end, it’s a combination of great content, as well as how you present this content — that will lead to an effective design.

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

1. CSS Grid Builder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press "Show Code" and it generates the HTML for you.

You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.

2. CSS Sprite Generator

Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.

CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.

3. Blueprint: A CSS Framework

Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.

4. CSSTidy

CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy. Check out the "before and after" examples to get a feel for how CSSTidy works.

5.logicss: CSS Framework

logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.

6. ___layouts

 

___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.

7. Yahoo! Design Pattern Library

Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.

8. Sajax

Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums – so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.

9. DOMTool

DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.

10. JavaScript Code Improver

JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.

11. JSUnit

JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.

12. Test plugin for JavaScriptMVC

The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.

13. Venkman: JavaScript Debugger

Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.

14. Firebug

Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.

You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).

15. Web Developer extension for Firefox

Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.

16. Internet Explorer Developer Toolbar

Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.

17. Yahoo! Design Pattern Library

The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.

18. Test Everything

Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more – all in one location.

19. Pingdom Tools

Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.

20. Aptana Studio Community Edition

Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks (such as the Dojo Toolkit) syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.

MySQL is the most popular open-source database. Whether you’re an aspiring web application developer or a person working on an existing database-driven web application like a content management system, ecommerce platform, or blogging platform — there are a variety of handy applications that you can use to make MySQL database design and administration (relatively) a breeze. So if you find yourself in a position where you have to work with MySQL, you don’t have to use a command-line interface, check out these 7 outstanding applications to help you create, write, manage, and visualize your database.

1. TurboDbAdmin

TurboDBAdmin is a free web-based AJAX application that helps you manage, explore, and edit MySQL and PostgreSQL databases. It gives you the ability to export your database into a downloadable file which you can keep as a back up in case you need to restore your database. Installation is very simple, just upload the application to your web server, edit the config.php file to reflect your database information, and it’s ready to go — just navigate to your installation directory in your web browser to access the application. It works in Apache and IIS HTTP servers, and requires PHP installed and enabled on the web server.

TurboDBAdmin demo page

2. EMS SQL Manager for MySQL

EMS SQL Manager for MySQL is a first-rate graphical interface tool for MySQL database administration and development. It comes in two versions: the Full version (which isn’t free) and Lite version which is still feature-packed. The Lite version of the EMS SQL Manager for MySQL allows you to effortlessly create and manage users and permissions without having to use a command-line interface. It also has several SQL editors that you can use that have syntax highlighting/coloring to make queries easier to read.

3. MySQL GUI Tools

MySQL GUI Tools is a bundle of graphical user interface tools that includes MySQL Administrator 1.2, MySQL Query Browser 1.2, and MySQL Migration Toolkit 1.1. MySQL Administrator is a GUI for managing databases and has database optimization features, rapid back up and restoration of databases, access to log and error files, and more. The MySQL Query Browser gives you a script editor that can help easily edit and debug troublesome queries, among other things. MySQL Migration Tool Kit allows you to simplify the process of transferring MySQL databases into other server environments, providing features such as remote server-to-server migration and optimization of migration processes by creating scripts you can run again if you move or copy databases frequently.

4. phpMyAdmin

phpMyAdmin is a browser-based MySQL database administration tool written in PHP. It’s my personal graphical interface administration tool of choice because it’s simple to use and has a big list of features and options. You can easily export a database for back up or migration into another server environment. You can also import a database effortlessly. Optimizing a database is a one-click affair, and is useful to try if your web applications seem sluggish (be sure to back up your database first though).

phpMyAdmin demos page

5. Instant SQL Formatter

Instant SQL Formatter is a web-based application that “beautifies” your SQL code. It’s not strictly a MySQL database tool as it supports other databases such as MS SQL and Oracle. It can output scripts for many popular languages such as PHP, VB.NET, Java, and C#. There’s also a desktop version that has added functionalities such as additional formatting options, batch conversion of files, and highlighting/colorizing SQL statements.

6. DB Designer 4

DB Designer 4 is another excellent visual database editor for MySQL. DB Designer 4 is an open source project released under the GNU GPL license and is available for Linux and Windows OS. It allows developers to create and share plug-ins to extend the existing features of DB Designer 4. It has two modes: Design mode – which is a visualization tool for creating and maintaining databases, and Query Mode – which lets the developer build complex SQL queries for use with PHP or another scripting language. DB Designer 4 also has a full set of documentation options to help you manage and record information about your database.

View DB Designer 4 screenshots

7. WWW SQL Designer

WWW SQL Designer allows you to model databases via your web browser. It’s a great way to document your database design, just use the print screen function key on your keyboard (or your preferred screen-capturing application), paste it into an image editor or word processing software, and you’ll have a document of your database model. Once you’re satisfied with the model, you can auto-generate the MySQL code. WWW SQL Designer is a simpler alternative to more complicated desktop applications, and if you just want to quickly create a database schema example, you can just use the live demo without installing anything.

Chris Pederick’s Web Developer extension for the Mozilla Firefox browser is one of the best tools in a web developer’s arsenal.

About a couple of months ago, I wrote an article about it entitled "9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension" and I’d like to follow up on that by showcasing even more things you can do with the Firefox Web Developer extension.

1. Determine server information of a website.

Ever wondered what your favorite website uses for their server technology? If so, you can quickly view the website’s HTTP response headers by using "Information > View Response Headers".

The following example shows Digg’s response headers:

We can see in the above example that Digg uses an Apache server and PHP 5. Additionally (at least for the page I tested) they served compressed files (gzip).

Heading over to Microsoft’s homepage, we can see that they – in turn – use an IIS 7.0 server and the ASP.NET framework:

2. Use a "magnifying glass" to zoom into parts of a web page.

You can use the "Miscellaneous> Display Page Magnifier" option to get a window that allows you to zoom in and out of the desired areas of a web page.

Tip: As a shortcut, you can use the scroll button of your mouse to increase or decrease the level of magnification.

Here’s a sample from People’s magazine using the Page Magnifier tool.

3. View a website’s color palette.

If you’ve ever wanted to see a visual representation of all the colors used by a website (not including images) You can use the "Information > View Color Information" option of the Firefox Web Developer extension, which will open a new tab displaying Color Information.

Here’s Mozilla.org’s color scheme:

4. Preview the "Print" and "Mobile" version of a website.

Some websites choose to include a print version or mobile version for their content by providing an alternate stylesheet like so: <link rel="stylesheet" type="text/css" href="myprint.css" media="print" />.

If you’d like to preview how a website will look when printed or when viewed using a mobile device, use the "CSS > Display CSS by Media Type > Print" or "CSS > Display CSS by Media Type > Handheld" option of the Firefox Web Developer toolbar.

The example below shows A List Apart’s normal stylesheet and print styleshee.

The print stylesheet takes out the logo and the primary navigation.

5. See the dimensions of all images.

You can see all image dimensions on a web page by using Firefox Web Developer extension’s "Images > Display Image Dimensions" option. You can see this option in action below (using GameSpot’s home page).

 

From the above picture, we can what the dimensions of the images in pixel units (we can also see that they’re using a 1×1 px spacer, interesting).

6. See the sizes of block elements.

A quick way to debug layout issues pertaining to spacing is to use the "Information > Display Block Size" option of the Web Developer extension to see if something is adding unintended padding and margins to your block elements. Block elements include div’s and forms as well as elements with the display:block attribute.

Here’s an example of the option turned on for Yahoo!’s home page.

7. See if your page degrades nicely without CSS and do a simple accessibility test.

A key design feature that a website must have so that it can be viewed by the most amount of people is that it must look decent and readable with CSS turned off.

You can turn off all styles by using the "CSS > Disable Styles > All Styles" option. This also allows you (somewhat – and shouldn’t be a replacement to real accessibility testing) to see if your website is accessible via assistive technologies (you can see how the document flows and if you’re displaying important information).

For a very crude and quick accessibility test, you should also turn off all images and replace it with their alt tags by using the Images > Replace Images With Alt Attribute option.

Here it is without any styles:

You can see that the logo is an image replacement so that screen readers can still use the logo as a "home" link and read the name of the site.

We can also see that the mark-up complies with current web standards, putting the primary navigation in a list, and the page title "Welcome to StumbleUpon" enclosed in a header <h#> tag.

8. Quickly find CSS errors on a page.

The Web Developer extension indicates if a page has CSS errors in the rightmost part of the toolbar as shown below.

By clicking on the button, the Error Console pops-up, listing all the errors of the page. If there aren’t any errors, you’ll see a button instead of a button.

9. Never forget to put alt and title attributes in your images and links ever again.

I like adding lots of images in my articles because it breaks the monotony of my long-winded writing style. This does, however, lead to me forgetting (or neglecting) alt and title attributes quite often.

A quick method I use to double-check my work is by using the Images > Display Image Attributes option and the Information > Display Title Attributes option.

Here’s a screenshot from flickr that showcases the Display Image Attributes option.

And there they are, some more of my favorite Firefox Web Developer options. If you’ve never used it, try it out by downloading it from Mozilla’s Web Developer Firefox Add-ons page.

For Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

The

Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:

• A Document Object Model inspector pane
• Multiple validation – automatically opens validation services in multiple browser tabs at the same time
• Syntax coloring of source code

Related Resources:

"Using Microsoft IE Developer Toolbar" by Arkady Lesniara
"15 Seconds: An Introduction to the Internet Explorer Developer Toolbar"

• by John Peterson

Download:

• IE Developer Toolbar on Microsoft Developer Center

2. Web Accessibility Toolbar

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Some features:

• Greyscale function – renders pages into grayscale so that you can test color contrast.
• Color Contrast Analyzer – a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for "color visibility" as suggested by the W3C consortium.
• Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.

Related resources:

• "Using the Web Accessibility Toolbar" on webcredible: user research & design
• "Using the AIS Web Accessibility Toolbar" on WebAim: Web Accessibility in Mind

Download:

• Web Accessibility Toolbar from Vision Australia

Documentation:

• Toolbar Functions

3. HttpWatch (Basic Edition)

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load, amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:

• Page Level Time Chart – gives you a visual representation of the web page’s performance
• Errors Log Summary – notifies you of any HTTP errors encountered.

Download:

• HttpWatch from HttpWatch official website

Documentation:

• HttpWatch Features Summary

4. WebCollect

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has an eyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:

• Copy full screen – enabling you to copy a web page without having to crop or resize the image
• Capture Rectangle Area – which allows you to copy just parts of a web page.
• Support for most digital image file types such as JPG, PNG, and GIF.

Download:

• WebCollect Toolbar 3.2 from CNET Download.com

5. Fiddler2

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:

• Session Inspector – which also provides you with headers and web forms data.
• Set break-points – so that you can experiment with inbound/outbound data.
• Performance Statistics – including world-wide estimated download times

Related resources:

"Performance Tuning with Fiddler" on MSDN.
FiddlerScript Editor – allows you to edit script rules on fiddler.

Downloads:

Fiddler2 from offical website
Microsoft .NET framework

 

6. Web Development Helper

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

A large part of being a capable web designer/developer is learning from people who’ve been acknowledged for their expertise and authority.

Finding and reading information about effective web design is part of being a web professional.

With this in mind, here’s just a few compellingly-sound advice and viewpoints from recognized personalities in the field of creating kick-ass websites.

1. Design with the users in mind

"Although there are lots of elements to consider when designing compelling Web experiences (writing style, look and feel, information organization -to name just a few), there is one "knowable" element that can be used to appraise the rest: audience. A detailed understanding of your target audience provides you with an effective metric by which to evaluate all your design decisions: structure (content and organization), visual presentation (personality and tone), and interaction (functionality and behavior). From cultural dimensions to computer expertise, the more you know about your audience the easier it becomes to design for (and communicate to) them."

– Luke Wroblewski, Interface Designer, from LukeW: "Understanding Your Web Audience"

2. Apply the right technology at the right time

"Sometimes people hit an idea right on the nose. My wife brought home this comic strip and it’s so pertinent to what we do.

Sister – ‘Mom says you’re designing a web page for school.’

Little brother – ‘Yup.’

‘And not just any web page, but the ultimate web page.’

‘I’m using every tool in the box. HTML… XHTML… CSS… XML… SOAP… AJAX… Flash… Perl… JavaScript… you name it.’

Sister – ‘What’s the page going to look like?’

Little brother – ‘I’ll figure that out when I’m done.’

– Fox Trot

It’s funny because it’s true. We often put the technology horse in front of the cart. It’s not about building the solution before there’s a problem. It’s about having a problem and using the right technology to solve that problem."

– Jonathan Snook, Web Developer/Designer and Author, from Snook.ca:"The Ultimate Web Page"

3. Why web usability is important

"On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty."

– Jakob Nielsen, Usability Expert and Author, from Alertbox: "Usability 101: Introduction to Usability"

4. Why web designers should write

"It’s time we designers stop thinking of ourselves as merely pixel people, and start thinking of ourselves as the creators of experiences. And when it comes to experience on the web, there’s no better way to create it than to write, and write well."

– Derek Powazek, award-winning Web Designer, from A List Apart: "Calling All Designers: Learn to Write!"

5. Accessibility is oftentimes in simplicity

I’m going to start my technical advice with something that seems to have been buried in the teachings of accessibility—simplicity. If you want to reach the greatest number of users possible, it’s best to write clearly and simply and design your interfaces to be consistent from page to page. For some people, simple usability advice like this is an absolute accessibility need. Many people with cognitive disabilities can fail a task simply because it hasn’t been laid out well enough for them. And anyway, people of all abilities fail tasks that are confusing. Why should we all suffer an interface that proves itself to be unusable?

– Matt May, Web Accessibility Specialist, from Digital Web Magazine: "Accessibility From The Ground Up"

6. Consider how people look for information

"Observe how your users approach information, consider what it means, and design to allow them to achieve what they need."

– Donna Maurer, Information Architect/Interaction Designer, from Boxes and Arrows: "Four Modes of Seeking Information and How to Design for Them"

7. Educate clients/employers about good web design

"Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.

If we want better sites, better work, and better-informed clients, the need to educate begins with us."

– Jeffrey Zeldman, Editor in Chief of A List Apart, Author, and Web Designer. from A List Apart: "Understanding Web Design"

8. Find inspiration from places beyond the web

"It’s always helpful to look outside of the web for your inspiration, to places where you might not at first expect to find a solution. The world is a collage of inspiration, from newspapers, magazine publishing, and advertising to product design, architecture and the fine arts."

– Andy Clarke, Web Designer and Author, from Peachpit: "Creating Inspired Design Part 1: I Am The Walrus"

9. Design for an international audience

"Despite the fact that the Web has been international in scope from its inception, the predominant mass of Web sites are written in English or another left-to-right language. Sites are typically designed visually for Western culture, and rely on an enormous body of practices for usability, information architecture and interaction design that are by and large centric to the Western world.

There are certainly many reasons this is true, but as more and more Web sites realize the benefits of bringing their products and services to diverse, global markets, the more demand there will be on Web designers and developers to understand how to put the World into World Wide Web."

– Molly E. Holzschlag, Web Designer and Author, from 24 Ways: "Putting the World into ‘World Wide Web’"

10. Focus your client’s feedback

"A clients natural inclination will be to give you his personal opinion on the design. This is reinforced because you ask them what they think of the design. Instead ask them what their users will think of the design. Encourage them to think from the users perspective."

– Paul Boag, User Experience Consultant, from 24 Ways: "10 Ways To Get Design Approval"

11. On the topic of the "designer" vs. "developer" label

"On the about page of this site I used to call myself a "developer/designer/occasional writer". It’s a bit confusing, and I still find it hard to know what to answer when someone asks me what I do for a living. Am I a Web designer? A Web developer? A Web programmer? All of them? Neither? It really is a difficult question to give a simple answer to.

My answer depends on who is asking, when, why, and under what circumstances. Sometimes I’ll say that "I work with the Web" or "I build websites", both of which are true but don’t really say what I do. It would be easier to be able to give a short, simple, reasonably precise answer.

[…]

As an alternative, I’ve been using "Web developer" for some time. The problem with that is that many people assume that a Web developer does mostly back-end programming, which I don’t do a whole lot of. It does sound more professional than Web designer though."

If you’re in search of books on the topic of web design to expand or start up your book collection, here’s 20 web design books worth considering.

All books are linked to their Google Book Search page so you can see previews, reviews, and other related works associated with it.

1) Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM

Web Standards Creativity features innovative examples of beautiful and feature-rich web designs that are fully web standards compliant and includes entries by some of the world’s top web designers.

2) Designing the Obvious: A Common Sense Approach to Web Application Design

Designing the Obvious offers pragmatic solutions and ideas for developing web application designs to make the users’ experience more effortless and less unproblematic.

3) Designing With Web Standards

Written by the highly-accomplished designer and editor in chief of A List Apart, Jeffrey Zeldman’s Designing With Web Standards covers intermediate to advanced techniques to help you create designs that comply with current web standards.

4) Don’t Make Me Think!: A Common Sense Approach to Web Usability

Don’t Make Me Think! is a very popular web usability book that covers viable techniques and concepts that you can apply to a winning web design.

5) Designing Web Navigation: Optimizing the User Experience

An ineffective navigation scheme can confuse viewers and reduce the likelihood that they’ll navigate outside of the landing page. Designing Web Navigation is an in-depth book on the topic of web navigation.

6) Bulletproof Web Design

Bulletproof Web Design by Dan Cederholm talks about creating designs that cater to a large variety of situations. With websites being viewed in non-traditional ways (such as mobile devices), it’s imperative to develop accessible designs.

7) Pro CSS and HTML Design Patterns

Written by the world-renowned author Michael Bowers, Pro CSS and HTML Design Patterns talks about advanced CSS/HTML models and formulas. Expect to read about browser box model differences, explanation of the different doctypes, and much more.

8) The Zen of CSS Design: Visual Enlightenment for the Web

Authors Dave Shea and Molly Holzschlag discuss key design ideas for creating a visually-appealing web design. The book features designs from css Zen Garden and is a great read for anyone looking to be inspired.

9) Adapting to Web Standards: CSS and Ajax for Big Sites

Using the work of premier talented designers in its dialogue, Adapting to Web Standards discusses the application of standards-compliant designs and code that can be adopted into high-traffic websites.

10) Web Redesign 2.0: Workflow That Works

Web redesign 2.0 offers methods for web redesign workflow management. It discusses logistical constraints and how to effectively analyze feature requirements to reach the company’s goals.

11) The Design of Sites: Patterns For Creating Winning Web Sites

The Design of Sites is a very thorough and sensible book on the topic of customer-centered designs. It discusses formulas that lead to powerful web designs.

12) Web Design: Studios 2

Web Design: Studios 2 is a collection of some of the best web designs. If you’re looking for a book to inspire you on your own projects, check this one out.

13) Web Accessibility: Web Standards and Regulatory Compliance

Many projects require compliance to section 508 (especially true for government work and accessible websites). Web Accessibility shares vital information on the subject of accessibility on the web.

14) CSS Mastery: Advanced Web Standards Solutions

CSS Mastery is about modern CSS best practices and solutions. Two hypothetical websites are included at the end to hammer down concepts covered throughout the book.

15) HTML, XHTML, and CSS Bible

Most of the books featured here aren’t comprehensive reference books, but it’s a good idea to own one that’s complete and easily-searchable. If you’re interested in purchasing one, have a look at HTML, XHTML, and CSS Bible.

16) CSS Cookbook

This book is 500+ pages of professional-grade CSS design patterns. CSS Cookbook covers all elements of a web page (including navigation, page layout, and typography) and is appropriate for intermediate to advanced CSS developers.

17) The Essential Guide to CSS and HTML Web Design

The Essential Guide to CSS and HTML Web Design is geared for beginning to intermediate web designers, or designers wanting to catch up on modern design patterns and standards-compliant coding.

18) Advanced Professional Web Design: Techniques & Templates

Advanced Professional Web Design uses a "teaching by showing" methodology. The book is accompanied by loads of customizable designs that you can use to jump start your learning.

19) Transcending CSS: The Fine Art of Web Design

Targeted for web designers who want to improve their understanding of CSS, Transcending CSS provides visual examples and talks about design workflow.

20) Communicating Design: Developing Web Site Documentation for Design and Planning

Designing websites involves more than just the design itself, it’s also about managing and presenting information to the client. Communicating Design offers tips on presenting designs and developing usability tests, amongst other things.

If you’re a freelancer or a full-timer looking for additional income, there’s a variety of places you can go to seek for project-based work.

There’s a ton of websites geared specifically for freelance workers, such as All Freelance Directory and Guru.com. Many of these sites do, however, charge you a subscription fee to access their job listings.

Typically, a lot of work comes from referrals, advertising in your local area, or through your website.

But if projects are running thin or you’re seeking to expand your project search, check out these 5 places you might not have considered before.

1) Google Advanced Search

Google Advanced Search screenshotThere’s a ton of sites you can visit to find project-based work, but it’s not efficient to go to each of these places and wade through outdated job listings.

If you want a speedier way, try out Google Advanced Search. You can customize how your search terms are used, extend the number of results per page, and limit the publish dates.

Here’s a few examples you can try (limited to “this week” dates):

    * “looking for web designer“
    * “freelance programmer job“
    * “freelance web developer required“
    * “seeking rails developer“
    * “craigslist web design needed“
    * “craigslist web freelance needed“

2) eBay

ebay logo screenshotSo you’re really desperate, right? No one’s going to your website or responding to your local paper ads. No better way to get people to buy your stuff than on eBay.

If sellers can find people willing to buy a Wizards & Dragons musical snow globe (it’s nice, I’m going to get one), there’s a good possibility that you can get some jobs from there.

Here’s some categories you may want to list in:

    * Web & Computer Services
    * Graphic & Logo Design
    * Media Editing & Duplication

3) Job Boards of Popular Blogs

technorati top 100 blogs screenshotThere’s a recent trend where top blogs are beginning to include a job listing section where readers can post and find jobs. It gives their audience – who probably have the same interests – a chance to meet and collaborate with other like-minded individuals.

Here’s a few job listing sections of some popular weblogs.

    * FreelanceSwitch Job listings
    * Smashing Jobs
    * Read/WriteWeb Jobs
    * 43 Folders Jobs

To help you find other blogs, here’s Technorati’s Top 100 blogs.
4) Classified Listings

Craigslist screenshotYes, craigslist isn’t only for finding dirt-cheap furniture and late night hook-up’s (or searching for your soul mate); you can also find web projects listed in your local area, as well as other geographical locations. Since it’s web work, many seekers don’t mind if you work remotely.

Aside from craigslist, check out these other online classifieds:

    * edgeio
    * facebook Marketplace
    * realpeoplerealstuff.com
    * Yahoo! Classifieds

5) Websites That Need Work

Iceman Technologies screenshotIf you’re a web worker, chances are, you encounter lots of websites everyday.

Almost instinctively, whenever I see a website that I think needs a bit of work, I automatically check out the page source and reach for some Firefox Web Developer extension options like “Display Div Order“, “View CSS” and “View JavaScript“, looking for traces of Frontpage mark-up, or silly JavaScript code that can be harmful to a website’s security.

If you find a website that you think will benefit from a re-design, or if you find flaws that need immediate attention, shoot the administrator a polite email about the issues you find, and include your proposed fixes.

Contact them in a professional way, and they may hire you to remedy the issue. At the very least, you can feel good about not letting a poorly-developed site go on without doing something about it.

And yes, I am aware of the lack of padding on the left side of Six Revisions which affects people with smaller screen resolutions… and I’m doing something about it real soon. So, please, do exclude it from your list of “websites that need work”, thank you

As a web developer, if you’re to be successful, you have to have a constant yearning for learning new things. In an industry that evolves rapidly, you’ve got to keep up or you risk being obsolete and outdated. Keeping up with trends, weeding out the fads, and adopting new techniques to your web-building arsenal is an essential part of being a web developer.

I spend (literally) most of the day in front of the computer and even in my spare time, I choose to read, learn, and keep up with web technology news. This leads to a massive collection of bookmarked links, but through the years, there are only a handful of websites that I frequent.

I’d like to share 20 websites that have broadened my knowledge, expanded my skill set, and improved the quality and efficiency of my web development projects. Most of these (hopefully) you’ve already encountered, but if you come out with just one or two links you’ve never heard of or you end up bookmarking a link or two, I would’ve accomplished my goal.

1) Alertbox: Current Issues in Web Usability

Alertbox is Jakob Nielsen’s bi-weekly column that discusses web usability. I’ve been a fan of his for almost as long as I’ve been professionally developing websites. Most of his recommendations makes sense and is backed by real-world studies and carefully-constructed surveys.

His columns cover topics such as the merits of breadcrumb navigation to Top-10 Application-Design Mistakes. A great link to provide people when you’re asked about optimal web page design is the column on Screen Resolution and Page Layout.

2) TheBestDesigns.com

On days when your creative juices don’t seem to be flowing as it should, it often helps to look at other people’s work to help inspire you. TheBestDesigns.com is a gallery site to visit on such days. TBD has a few things that distinguish them from other web design galleries — among them are: choosing quality over quantity, showcasing flash-based as well as CSS-based layouts, and tagging each design with relevant keywords so that users can conveniently find similar designs.

They showcase truly innovative and skillfully-crafted designs and they abstain from showcasing the “yet another recycled web 2.0 look” websites. It might not be updated with hundreds of websites everyday, but having a strict guideline on what gets displayed on TBD ensures that you don’t have to filter out the noise to get to the signal.

3) A List Apart

A List Apart inspired me to become a proponent of web-standards and semantic code. Starting out, most of us probably didn’t care about capitalized, unclosed html tags (… that won’t validate with a strict doctype) or understood the real value of accessibility in web pages.

One of the major influences in my views on web-standards, best practices, accessibility, and usability can be attributed to a significant part… to A List Apart. ALA articles are high-quality and they only come out with two articles a month, but they are worth the wait. Articles are written by some of the leading experts in the industry, and their staff include well-renowned pro’s such as Eric Meyer and Jeffrey Zeldman.

4) Getting Real by 37 Signals

“Getting Real” is a book that’s available online, written by 37 Signals. It’s about creating web-based applications in a productive and successful way. The book covers topics ranging from philosophies that help push out quality products to views on hiring the right people to do the job.

Favorite topics covered in the book are:asking users what they don’t want and dealing with problems only when there is one.

5) Digg / Technology

Digg is a site where people submit links and vote which content is worthy to be read by its users and which articles don’t deserve the light of day. A large part of my ability to keep up with emerging technologies, techniques, and new standards is because of frequenting Digg’s Technology section. The community is picky of what is good news and bad news, so it allows you to skip the junk and get to the good stuff right away.

Other social-bookmarking sites that will help you stay sharp and current, and that should be mentioned here are: StumbleUpon , del.iciou.us, reddit, and popurls.

6) Web Design from Scratch

Web Design from Scratch is a website run by Ben Hunt, that’s about (straight from the front page) “A complete guide to designing web sites that work“. It caters primarily to web builders just starting out, but it’s always good to “go back to the basics” and get a refresher on things that you’ve taken for granted.

The section on Copy Writing taught me that web developers shouldn’t be limited to the coding part or the design part of the project; writing effective copy comes naturally with the experience we’ve had with developing websites that succeed and fail.

7) mootools

mootools is a lightweight framework that simplifies the way you write JavaScript and provides you with powerful AJAX classes, effects, and fuctions. It’s helped with the development of complex web pages in a rapid and elegant way.

There are other JavaScript frameworks similar to mootools, and you can’t go wrong with any of the popular ones, but a developer’s got to choose his or her favorite — and for me, mootools is the one I’ve come to love and use.

8) ReadWriteWeb

ReadWriteWeb is a long-standing (five years and counting) weblog about web technology news. It caters to web professionals that have a need for knowing what’s up right now. It was founded by Richard MacManus, who also co-founded the Web 2.0 Workgroup – a network of blogs that cover the Web 2.0 generation.

It’s a website that allows you to keep your knowledge up-to-date, and is a source I consistently cite when talking about current web technologies with colleagues and fellow developers.

9) Zend Developer Zone

This is a website written by some of the PHP core developers and they provide news, articles, tutorials and other stuff related to PHP. If you’re looking for a reliable source of information about PHP, there’s no other place to look than the Zend Developer Zone.

Worth taking a look at is the five-part article series about the xdebug extension (here’s the link to Part One: Introducing xdebug), which is, as author Cal Evans puts it, “a free and open source swiss army knife tool for PHP developers”.

10) css Zen Garden

css Zen Garden is an eye-opener for newer CSS developers. css Zen Garden explores the power of external style sheets by showcasing a variety of designs contributed by developers throughout the industry.

If you haven’t seen the website before, the concept is: using the same html mark-up, CSS developers submit external stylesheets and images to style the web page into beautifully-looking designs.

It’s a great place to inspire you to push your limits and knowledge regarding CSS.

11) CSSplay: Experiments with Cascading Style Sheets

Another wonderful website about CSS. It features demos of CSS-based solutions such as image galleries, drop shadows, image maps, etc.

The website is authored by a married couple, Stuart (Stu) and Fran Nicholls, who have been in the computer industry since the 1980’s. Most of the demos are (or were) cutting edge; the examples are practical and easy to follow and the website’s easy to navigate.

It’s a commendable resource to check out when you want to gather information about CSS-based solutions.

12) W3Schools Online Web Tutorials

his is an amazing center of knowledge for all things web development, covering topics such as JavaScript, HTML, PHP, SQL, and more. At the bottom of their logo, they quote, “The best things in life are free” – this is indeed true in their case.

The website is a great starting point towards learning about web development and design topics and an effective online reference for those who know about the subject but need a quick refresher.

13) Books24×7.com – ITPro Collection

The ITPro Collection at Books24×7.com features digitalized versions of the top IT books. It’s a fee-based website, but if you’re able to afford it (or can convince the boss to get you a subscription), it’s the best way to access quality literature through the convenience of your computer.

It will also allow you to select the books worthy of buying and adding to your collection.

14) Drupal

Drupal restored my faith in open-source applications. Prior to Drupal, I worked on Oscommerce, Zen Cart and Moodle. All projects had bloated PHP and CSS, poor HTML mark-up (default layouts used tables, little care for semantic mark-up, amongst a few things) and were designed with little usability/accessibility in mind.

Drupal’s code — in contrast — was clean, modular (but not excessively so), had a robust API so that you don’t have to tinker with the core files, and most importantly, the community’s willingness to help out, share information, contribute, and commitment to quality is my vision of the “Utopian” open-source community. Since then, projects likeWordpress, Magento, and Joomla! re-assures us that effective quality solutions don’t come from shelling out the cash, but rather promoting and contributing as much as you can to these remarkable communities.

15) Webmonkey: The Web Developer’s Resource

Here’s a throw-back to the past! This is here as a reminder to the (slightly) older/more experienced developers that the site is still up and running. It was, during their time, a place to visit and learn about web development, covering topics such as web programming, E-business, and page design. It also has a “Quick Reference” section on the sidebar.

I remember being amazed at how their “folder navigation” on the sidebar worked — ever since then, the functionality can now be achieved quite easily using the DOM and/or a JavaScript framework like mootools.

16) Meyerweb.com: Eric’s Writing

This is a collection of Eric Meyer’s writings, an accomplished author on the topic of CSS. Not only is he a CSS expert, but also an advocate of semantic code. His work was, and is, truly revolutionary. I attribute my appreciation and understanding of “resetting CSS” to him.

Eric Meyer is one of the key influential people that I truly find to be talented and knowledgeable in the field of web building. His current and previous works are worth the time to read.

17) 456 Berea Street

456 Berea Street is the creation of Roger Johansson, a web professional from Sweden. His writing is a primary inspiration for starting up of Six Revisions. Topics include book reviews, written work about CSS and XHTML, and web development news and events.

Some pages worth bookmarking are Efficient CSS with shorthand properties (which can be used as a reference to writing “shorthand” CSS – reducing file size and page length) The CSS and XHTML Lab (which features some demonstrations as well as a list of works translated into other languages) and Accessibility myths and misconceptions (a helpful resource to link to when asked about the value of accessibility in web pages).

18) The Web Standards Project

The Web Standards Project “fights for

standards

that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web”.

Whether it’s suggesting correct mark-up or rallying web browser developers to render styles/html a certain way, The Web Standards Project aims to help web developers reduce the amount of time committed to troubleshooting browser-display issues. The website features articles, tutorials, and the Acid3 Browser Test (visual rendering tests of your browser).

19) Fiftyfoureleven.com

A marvelous website for the modern web developer. The website “is intended to be a resource for web developers: people who design, code and program websites and applications for the web“. The website is part of the 9rules network and is written primarily by Mike Papageorge who chooses to blog about topics such as “Marketing on the Internet” and more specific subjects such as “Olympic Logos“.

Aside from the Web Development Resources sidebar, there’s also a list of the author’s most recent Web Development resources that’s worth a bookmark.

20) SitePoint

SitePoint is one of the older websites that has survived the constantly-changing tastes of web developers and designers. A co-founder of the website, Matt Mickiewicz, first had a website called Webmaster-Resources.com Community Forums launched in 1999.

SitePoint had a bit of a lull for a period of time in terms of popularity; the site’s prominence was replaced by newer, more “forward-thinking” web development sites.

The site has found its “second wind” with it’s young and modern web developer audience with an updated design/user interface, frequent updates, and a new and notable”CSS Reference”  section.

The internet has given the web professional a plethora of venues for seeking project-based work. With lots of places offering freelance gigs such as allfreelance.com, classified listing sites such as craigslist, and job boards on popular weblogs such as FreelanceSwitch and Smashing Magazine, the resourceful web builder can scout and find jobs that extends their geographical boundaries.

An effective creative questionnaire allows you to gain relevant, focused, and helpful design information without taking up a lot of the client’s time. I use the term “questionnaire” because it’s a familiar term, but as you’ll see, some examples aren’t questions.

This article is primarily about developing a one-way questionnaire where you aren’t there to explain or expound on the questions you’ve asked the respondent, though the same concepts apply whether you’re communicating via email or during a face-to-face meet.

Keep it as short as possible

Long questionnaire forms, in my experience, tend to result in rushed responses. Keep questions and the survey as short, concise, and clear as possible. We have to respect the client’s time. Typically, a demand for a website arises when a business is just starting out or when current solutions can’t meet increasing demands; either way, they’ve got a lot on their plate already.

Instead of:

“Think for a moment about your company’s mission statement – How does that traverse into the online world and how will a website achieve your mission statement?”

simply say:

“In your mind, what’s the business value of having a website?”

The latter example is terse and unambiguous. Let them do the writing, keeping yours to a minimum.

Include creative questions, preferably in the beginning

A creative question, in this context, refers to unconventional questions that have two goals:

1. to extract information indirectly – “If your website was a car, what car would it be?”
2. to get the respondent in a mood where they’re comfortable to say anything without restraint.

An effective questionnaire gets the client’s uninhabited, raw thoughts and emotions. Including them at the start can set this tone early on in the process.

Examples of creative questions

• Imagine a typical user browsing your website, what would they be thinking right now?
• Use one word to describe your website.
• What features of your website would your competitors be most envious of?
• If your website disappeared for a week, what would your users miss the most?

Provide example responses to focus and clarify your meaning

Your questions may seem crystal clear to you, but to the client, it may mean another thing. Provide sample responses to direct your client’s answers.

Some examples:

• List down key words that you associate with your company. Without prompts, you can get very colorful responses like “awesome”, “da bomb”, “where I get money for my gambling debts”. Adding “For example, a Spanish restaurant may use ‘paella’, ‘international’, ‘culture’” would make your question less vague.
• What types of designs do you like? You can indicate your expected answer by saying instead, “Please view these websites [then, list down some website addresses]. What do you like about them? What do you hate about them?”

Avoid unfocused open-ended questions

An open-ended question is one that allows the respondent to answer in a less-structured fashion. For example, an open-ended question would be, “what do you think about web 2.0?”. In contrast, a closed-ended question would be, “What’s one thing you like about web 2.0?”

Open-ended questions are a necessity in design questionnaires, but avoid ones that are vague and overly generalized.

Examples

• Describe the design you want. You can focus the respondent’s answers by saying instead, “Write specific design features that you’d like to see in the design mock-up”.
• Describe the nature of your business. This can be revised to: “Describe a typical day in your place of work”.

Evolve (tailor) your questions

Web development projects typically take week to a month’s worth of work. This means that you can—and should—take the time to customize your questionnaires for each of your clients. If you use a web-based form, this can be a bit more tedious, but it can be done by sending more questions in an email. Not only will this allow you to gain information unique to the client’s industry, it also shows that you’re giving personal attention to their needs.

Typically, I prefer to have only ten questions per questionnaire, seven of which are my standard questions and three are tailored towards the client’s particular organization.

What to do after you receive a response

Internalize it. What I do after getting a questionnaire back is I read it thoroughly, once or twice. I digest the information I’m given by rewriting and rephrasing the responses on a text file that I keep open as I design the mock-up. Embrace the subtleties of your client’s responses, take notice of grammar or spelling mistakes, all of this can be significant in helping you learn about the people you’re working with.

Example:

Website name: My AWESOME Company
Tagline: This is so awesome that I capitalized "Awesome"
Preferred colors: none specified, but described as  “high-impact”
Look and feel: Web 2.0, gradients, large text
Key words (design theme): fun, young, colorful

Ask for clarification if needed. Don’t be timid in following-up on answers that seem unclear to you. Ask as soon as you can so that your client still remembers the questionnaire-answering session.

Use it to strengthen your mock-up presentation. Use the responses while presenting your initial design mock-up to explain the design direction you took. Quote responses verbatim, if appropriate. For example, if you chose a sans-serif font face, you can say “In your response, you indicated that you wanted a clean, modern, professional design, which is showcased in the mock-up by the dark-gray, Arial font…” If you chose green hues, you can say “You mentioned that you needed a website that ‘evokes a feeling of cleanliness and ‘eco-friendliness”, so I decided to use green hues to…”

Use their responses to explain why you decided to use certain colors, a certain layout, why you avoided particular elements, etc.

Some other tips I’ve found helpful

Outline the purpose and relevant information in an introductory paragraph. Describe the purpose of your questionnaire. Assert what you expect to get as a response. Indicate the importance of the questionnaire. Typically, I’ll say something along the lines of “You are a very important part of the design process so your responses here will prove to be a valuable asset throughout the project”.

Let the client know how much time to take. Most of the time, this avoids rushed responses. I ask each respondent to take between 30 minutes to 1 hour so that they may properly answer the questionnaire.

Leave out the tech jargon. It doesn’t impress anyone, and it will only annoy them if they don’t know what you’re talking about. Use terms that are common knowledge.

Fix flawed questions. Every few projects (usually I do it every three projects or so), I take my most current questionnaires and I evaluate each question for its usefulness and clarity.

Fill out your own questionnaire. I’ve found it very enlightening to fill out my own questionnaire form. When you write the questions yourself, you don’t really think too much about the effort and the process of responding to them. I’ve found questions where I thought, “Man, I don’t want to answer this, it’s too damn long and I’ve got so much stuff going on”. Try it, at the very least, it’s a fun activity.