Tag: kranthi

Writing Effective Documentation For WordPress End Users


  

Today I get to write about something close to my heart: documentation. The emails I love the most start with, “I’ve got this new product. Please, document it!� I get a lot of pleasure from learning about someone’s code and making it as clear as possible for users. I love taking a great product and making sure that people get it.

splash image

In this article, we’ll look at writing documentation for a WordPress plugin, theme or product. Most of the information can be applied to documentation for other software types, but we’ll look at some WordPress-specific aspects.

In my experience, the quality of documentation in WordPress plugins and themes varies widely. From poorly documented plugins with one-line readmes to products with user guides, developer APIs and in-depth screencasts, you’ll find every type of documentation in the WordPress ecosystem. Many plugins and themes are built by developers who don’t have the time to write documentation or don’t have the money to pay a technical writer.

Unfortunately, the person who suffers the most from this is the developer. In a blog post, author and front-end developer Nicholas Zakas gives his number-one reason why good JavaScript libraries fail (quoted here — the original is no longer online):

Lack of Documentation:

“No matter how wonderful your library is and how intelligent its design, if you’re the only one who understands it, it doesn’t do any good. Documentation means not just autogenerated API references, but also annotated examples and in-depth tutorials. You need all three to make sure your library can be easily adopted.”

Taking Zakas’ statement as a starting point, let’s look at how to make sure your WordPress product can be easily adopted. We’ll look specifically at how to provide useful documentation to end users, with a brief diversion to writing for developers. But first, let’s dive into some learning theory.

Learning Preferences

A few years ago, I took a teacher-training course while teaching writing to adults. While I don’t teach much anymore, I still integrate an aspect of learning theory into my process when writing documentation. VARK is a theory of learning preferences. It’s an acronym of visual, auditory, read/write, kinesthetic.

VARK captures various preferences for taking in and implementing information where learning is the objective. This makes it extremely useful for writing documentation. Thinking about how your users process your information and how to make it as easy as possible for them is helpful. When writing, think about the different ways that people engage with and process the information your provide; VARK argues that there is a spectrum for the way people do that.

Screenshot
The VARK diagram.

To discover what your VARK learning preference is, you could take a short questionnaire. The results will place you in one of the four different modes — or you could be multimodal, meaning that you prefer a number of styles. There are different learning theories, but I find this one useful for thinking about the different types of documentation that I’ll need when working on a project.

In essence, VARK tells us that people learn in different ways, and in any pedagogical exercise we ought to think about how to make those ways as useful as possible. Let’s look at the different learning preferences and how to make sure you’re making full use of them.

Visual

Visual learners prefer to take in information that appeals to the eye. The VARK website lists the following as relevant techniques:

  • Presenters who use pictures or gestures;
  • Pictures, posters and slides;
  • Books with pictures and diagrams;
  • Flow charts and graphs;
  • Highlighted text, multiple colors and underlining;
  • Symbols and white space.

These suggestions relate to the classroom, but translating them to documentation is not difficult. Visual learners take a holistic approach, trying to see the whole picture rather than breaking it down into discrete parts. They might scan a whole tutorial or section of documentation before getting started to get a sense of the overall picture. Here are some suggestions for reaching visual learners:

  • Use call-outs to draw attention to important tips and notes in the text.
  • Include a lot of useful screenshots, writing on them and using highlights and call-outs.
  • Use a flow chart to demonstrate a process.
  • Highlight important pieces of text, and place key phrases in bold.
  • Incorporate graphics that highlight your point.
  • Create a screencast like SEOmoz’ Whiteboard Friday, which features a person speaking in front of a whiteboard.

Recommended documentation types: in-depth tutorials, screencasts, graphics, infographics

Aural

Aural learners absorb information through talking and listening. The VARK website suggests the following for these learners:

  • Attend classes;
  • Get involved in discussions;
  • Explain ideas to other people;
  • Use a tape recorder;
  • Engage with interesting examples;
  • Describe things to someone else second-hand.

Because online documentation is such a visual medium, figuring out strategies that would appeal to these learners is more difficult. However, with a little lateral thinking, including them is possible, too:

  • Podcasts;
  • Screencasts with detailed narration;
  • Interesting, practical examples;
  • A chat room such as WordPress’ IRC chat, support forums and screensharing on Skype (even though these are not documentation);
  • Webinars.

As the list shows, even if your documentation is highly detailed, there will always be people who prefer to ask questions and have a discussion to find out what they need.

Recommended documentation types: tutorials, screencasts, podcasts, webinars

Read/Write

As you can imagine, read/write learners are pretty easy to target with documentation; they really love to learn by reading. But rather than just come up with big chunks of text, you should use variety to make things a little more interesting. Here are some suggestions:

  • Lists;
  • Headings;
  • Dictionaries;
  • Glossaries;
  • Definitions;
  • A large block of text;
  • Essays;
  • Manuals (computing, technical and laboratory).

picture of a big

While long pieces of documentation are a great way to engage these people, you could do a bit more work to really get them on board. Here are some suggestions:

  • Use ordered and unordered lists;
  • Make use of all heading tags;
  • Include definitions in call-out boxes;
  • Link to definitions elsewhere;
  • Write a user guide;
  • Write a glossary (the one in the WordPress Codex is a great example);
  • Produce an eBook or manual.

Recommended documentation types: tutorials, eBooks, manuals, glossaries, references

Kinesthetic

Kinesthetic learners learn best by doing things. Rather than watch a demonstration, they want to get their hands dirty. Here are some methods from the VARK website:

  • Using all senses (sight, touch, taste, smell, hearing);
  • Going on field trips;
  • Practical examples of abstract principles;
  • Real-life examples;
  • Hands-on approaches;
  • Trial and error;
  • Looking at collections of things (e.g. rock types, plants, shells, grasses, case studies);
  • Exhibits, samples, photographs;
  • Recipes (e.g. solutions to problems, previous exams).

Figuring out what types of documentation these people would like doesn’t take much imagination — tutorials would be a big hit. But go a bit further and you’ll find that producing documentation for kinesthetic learners can be really fun:

  • Step-by-step tutorials;
  • In-depth use cases;
  • Links to practical examples;
  • Real-life (rather than abstract) examples;
  • Interactive learning tools, such as Codecademy;
  • Short, practical tutorials such as those on WpRecipes;
  • Webinars that walk participants through something practical.

Recommended documentation types: practical tutorials, tips and hacks, use cases

Multimodal

Around 60% of the population don’t fit neatly into any of these boxes. If this is you, then you are multimodal (i.e. you prefer two, three or even four categories). You tend to adapt your learning preference to the learners around you and to the medium you are presented with.

Also, it’s possible for your learning preferences to change, according to your life experience. A developer whose head is stuck in code, APIs and references all the time could easily start leaning towards read/write and kinesthetic learning.

The Point

The point of this diversion into learning theory is simple: to show that people learn in different ways; so, make sure your documentation appeals to all of them.

Sometimes clients tell me they just want screencasts. I ask if they have anything else, and if the answer is no, then I strongly recommend they look at other forms of documentation as well. Personally, I find screencasts very difficult to learn from; I prefer to scan tutorials for an overview before getting started. Everyone is different, and if you want your product to be usable by as many people as possible, then you need to think about all of these different learning preferences.

Thankfully, this is very easy to do. A walkthrough tutorial is a great way to appeal to every learning preference.

  • Give kinesthetic learners something practical to do;
  • Appeal to read-write learners with ordered and unordered lists, headings and call-out boxes for definitions;
  • Call-outs are also appreciated by visual learners, and you can keep them even happier with a lot of graphics, diagrams and images;
  • Practical examples will be helpful to aural learners; and to really tick off all of the boxes, you could include a brief screencast.

Don’t spend a lot of time agonizing about this when you get started with the documentation. Just be aware that variation is crucial.

What Types Of Documentation Are There?

As you’ve probably guessed, the umbrella of documentation is pretty large. Anything that documents your plugin, theme or product is documentation. Here are some examples of the types you might find yourself writing:

  • Reference
  • API reference
  • Inline documentation and comments
  • List of requirements
  • Glossary
  • Architecture or design overview
  • Tutorial
  • Manual
  • Readme
  • WordPress help menu
  • FAQ
  • Tooltips
  • User guide
  • Troubleshooting guide
  • Screencast
  • Book and eBook
  • Quick hacks and tips
  • Infographic
  • Screencast
  • Webinar

The types of documentation you adopt will depend largely on two things:

  • Your product type,
  • Your audience.

Screenshot

Many WordPress plugins and themes are developed specifically for end users, rather than being developer tools. With that in mind, let’s look in depth at how to produce effective documentation for end users.

Getting Started

Before getting started with any type of documentation, think about these things:

  • Have you frozen the features?
    Don’t write the documentation while you are still adding features and making major changes to the code.
  • Do you have a plan?
    Write down a structure. Just as a designer would create a wireframe, it would be helpful to sketch out the structure of your documentation, both for individual pieces and for the overall architecture. It will bring a lot coherence to the documentation.
  • How steep is the learning curve?
    If your product is complex, then you’ll need to guide users through the documentation, getting them to the beginners’ information first, through to the intermediate, then to the advanced.
  • Do you have access to the developer?
    If you are the developer, then great; but if not, this is really important. Your first job will be to learn a product that likely does not have documentation, so you will need to ask the developer questions. There’s no point in starting a documentation project if the developer is about to go on vacation.
  • What is the purpose?
    Is the documentation purely to assist users, or is it for marketing, too. A reference doc will be useless for sales, but you might want a tutorial to show off the product to potential customers.

A picture of pens and some writing
The written word (Image: Arslan)

Here are some practical writing tips to keep in mind once you get started.

  • Keep it simple.
    It’s not an opportunity to get poetic or clever. The best technical documentation is clear, concise and engaging.
  • Refer to the user in the second person.
    For example, “When you have logged into WordPress, navigate to the plugin’s admin screen.� Write as though the reader is sitting beside you and you are talking them through the process.
  • Stick to the point.
    Don’t meander off topic because this can distract users.
  • Think about formatting.
    Perhaps you want to use bolding for the key point in each paragraph, or perhaps for instructions. Be consistent in your formatting across the documentation.
  • Write in the present tense.
    Again, as if you were talking to someone who is sitting beside you.
  • Think about tone.
    I recommend friendly and engaging, but you might want the tone to match the rest of your website’s content.
  • Don’t be afraid of short paragraphs.
    Stick to one major point per paragraph so that messages don’t get confused.
  • Be logical.
    Drip-feed your information in a logical order to ensure that readers are able to follow.
  • Proofread.
    And ask someone else to proofread for you. A fresh pair of eyes will pick up things you miss.

End-User Documentation

The end user is the person who will use your product. In the WordPress environment, I get asked to produce documentation for this type of user the most. There is a wide variety of end users, from total novices to savvy users to people who are developers themselves. If they are using (as opposed to developing) the product, we can consider them end users.

When writing documentation for end users, I always recommend aiming for the absolute novice. By doing this, you ensure that everyone is included. More advanced users can skim the doc and take what they need.

1. Research and Prepare

Before putting fingers to keyboard, spend time preparing what you are going to do and how you are going to do it. At this point, your software should be stable and just about ready to go. Rushing through the documentation process just to get it out there is tempting. But here’s some advice from Mike Pope, a technical editor at Microsoft:

“We’ve been known to tell a developer “If it isn’t documented, it doesn’t exist.â€� […] Not only does it have to be doc’d, but it has to be explained and taught and demonstrated. Do that, and people will be excited — not about your documentation, but about your product.”

Keep that in mind: good documentation makes the best of your software.

  • Do you need an installation guide? If your product isn’t in WordPress’ theme or plugin repository, then I recommend preparing a generic guide to show users how to install the plugin or theme via the upload function in WordPress or via FTP.
  • Plan everything beforehand. If your documentation will be big, think about the architecture. How will users navigate it? How will you present it?
  • Draw a list of all of the resources that users will need (such as an FTP client or text editor). Link to the tools that you recommend.
  • Choose the most appropriate documentation type for the product. You might want a general set-up guide or a specific tutorial. For an e-commerce plugin, you could have the following sections: “How to set up this e-commerce pluginâ€� and “Selling your digital product with this e-commerce plugin.â€�
  • Provide easy access to all of the resources and references your users might need. For example, when introducing a new concept, link to a relevant page either on your website or in the WordPress Codex.
  • Anticipate questions users might have. If your users are diligent and read the documentation, then they will spend less time bugging you in the support forums.
  • Think about how to integrate your documentation in WordPress’ administration screens. In WordPress 3.3, for example, the contextual help screens were improved, becoming a great place to assist users.
  • Figure out your point, and stick to it. Don’t meander off topic, or else your message will get confused. The reader should come away with the key message.
  • Do, however, offer examples and anecdotes that will help the user think about the main message from a different angle. This is a great way to emphasize a point.

2. Getting Down to Writing

Remember that the purpose of documentation is to help users use a product quickly and effectively. Step into the shoes of the layman end user and identify what they will need to do just that. Ask questions that an end user would have, and get confused and have doubts like an end user. Never assume that the end user should just know something; your job is to tell them.

Think of your documentation as a story. Like every good story, it needs a beginning, middle and end. Below is an overview of what to include in each part.

The introductory paragraph is crucial. It sets the tone for the documentation and should include the following:

  • Introduces what you’re going to do;
  • Tell the reader how you’re going to do it;
  • List requirements (e.g. WordPress 3.3+);
  • Summarizes what the reader will achieve by the end (if it’s a practical tutorial);
  • Lists resources that the user will need to complete any practical sections.

The main body is the meat of the document. It’s where you get to the point and where your readers start to learn. Here are some tips for writing the main body:

  • If you’re writing a user guide, break up the body into self-contained sections on different topics. Give each section a clear, relevant heading. A user guide on setting up a payment gateway could be broken down into “PayPal,â€� “PayPal Pro,â€� “Authorize.net,â€� etc.
  • Tutorials should be laid out with clearly numbered steps, using headings. Each step should deal with one primary task and logically follow from the previous step. Include everything a user would need to complete the task. Ideally, an advanced user should be able to achieve what they need to do by scanning the headings, while novices can read through. A tutorial for installing a WordPress plugin via FTP might follow these steps:
    1. Download the plugin,
    2. Upload the plugin via FTP to wp-content/plugins/,
    3. Activate the plugin.

    That would be enough for an intermediate user, while the main body text would help the novice.

  • Use call-out boxes to highlight useful pieces of information. I tend to use them for these:
    • Useful tips,
    • Definitions and references,
    • Important pieces of information that I don’t want people who scan to miss,
    • Advanced tips for more experienced users.
  • Use screenshots liberally. These are really useful for visual learners and people who like to scan.
  • Think about including a screencast to provide either a demonstration or walkthrough tutorial.
  • Use a variety of methods in one section of documentation to reach a wide audience: visual, read/write, kinesthetic and aural. This will save you from having to produce a different version for each learning preference.
  • Use a syntax highlighter to improve code readability. If you’re writing your documentation in WordPress, a popular plugin is Syntax Highlighter Reloaded.

The conclusion sums up what you’ve done and provides any additional information:

  • If the guide is massive with a lot of in-depth material, then the conclusion is a good place to remind the user what you’ve covered and what they should now be aware of. This could be a list of main points or takeaways.
  • A practical tutorial could simply finish with a screenshot of what the user should have achieved or with a link to an example.
  • Provide a list of resources or further reading.
  • Provide a list of tutorials to take things further.
  • Link to your support forums or feedback form.

3. Test, Revise, Update

Now that you’ve written the documentation, it’s time to test, revise as necessary and keep it updated.

If I’m writing documentation for a particularly challenging product, I’ll get a representative end user to test it for me. This is usually someone who is familiar with WordPress but not a developer. If it’s a tutorial, I’ll ask them to work through all of the steps as laid out and to highlight anything that’s confusing or that they struggled with. If you are using code snippets, they must be accurate, so explicitly ask your tester to implement them. For a user guide, I’ll ask questions that the tester should know the answers to.

Armed with the suggestions of the tester, I’ll move on to the next phase, revising, and I’ll also have a nice list of questions to include in the obligatory FAQ.

Read through your document and revise. Here’s what to look out for:

  • If you have tested the documentation, incorporate any resulting changes.
  • Get rid of wordiness. For example, “Now it’s time for you to visit the WordPress administration screensâ€� could be revised to “Visit WordPress’ administration screens.â€�
  • Fix all typos and grammatical errors.
  • Add any links you may have missed.

The final step in the process is to update. This could be weeks, months or years after the documentation’s original production. In the world of WordPress, it is more likely to be months. Update the documentation to reflect changes in any of the following:

  • WordPress’ UI (update screencasts and screenshots);
  • New features or functionality in your product;
  • New features or functionality in WordPress;
  • User feedback.

A helpful plugin that I use to track documentation updates is Content Audit. It uses custom taxonomies to help you categorize your content. Being able to mark sections as needing updating straight from WordPress’ UI is helpful. You can also assign WordPress users to be responsible for various pieces of content, as well as write inline comments.

Let’s look at a case study of an end-user documentation project that I recently completed.

Case Study: ManageWP

I was approached by ManageWP at the end of 2011 to rework its documentation. At the time, the documentation was pretty thin and contained numerous grammatical and spelling errors. Here’s what Vladimir Prelovac had to say about it:

“Our initial documentation left a lot to be desired. We did not have it organized in a systematic way, and most topics were added ad hoc. It was hard to search, and it contained a lot of errors as it was sometimes not written by a native speaker.”

At a glance, the documentation looked to be in need of a total rewrite. Here’s the workflow I adopted:

  1. I carried out a full review of the existing documentation and listed challenges and recommendations:
    • The documentation was listed alphabetically. This meant that a new user had no logical order to follow. Everything was jumbled together, making items difficult to find.
    • Many of the paragraphs covered multiple points, making them difficult to follow.
    • There were no screenshots.
    • The formatting did not vary, making the text difficult to read.
  2. I recommended restructuring the documentation to make it more logical (for example, starting with “Getting Started� and then moving through different sections).
  3. I put together a Google spreadsheet listing all of the existing guides, noting the new ones and splitting them up into sections. Vladimir, CMO James Mowery and I reviewed the order to make sure we were all happy.
  4. All of the user guides were rewritten according to the principles outlined above.
  5. We reviewed the docs to add sales and marketing content.
  6. We made the layout and design of the user guide more intuitive for novice users.

You can see the result by checking out ManageWP’s user guides. In the future, we’ll improve the documentation by adding videos that complement the text.

Screenshot
The current incarnation of ManageWP’s user guides.

A Note On Developer Documentation

While end-user documentation is for the people using your plugin or theme, developer documentation is for the people who will be developing, forking or extending it. I get many fewer requests for WordPress developer documentation; I suspect this is primarily because most WordPress developers and designers are producing for end users. Occasionally I am approached to work on documentation for a project for both developers and end users, and I’ll look at such a case below.

My strongest recommendation is to keep the documentation for end users and developers separate. End users don’t need to see developer docs; that would only confuse and, in some cases, intimidate them. Of course, nothing prevents each group from using the other’s documentation, and the groups are not mutually exclusive, but clearly delineating between the two types is important, even if just with a prominent notice, as the WordPress Codex does.

A beautiful example of developer documentation is the recently launched QueryPosts, which is an easily searchable repository of WordPress code.

If you are generating extensive documentation for developers, check out some of these tools:

bbPress and Its Beautiful Inline Documentation

The bbPress plugin has one of the best examples of inline documentation. Below is an extract from the bbpress.php file, which loads the translation file for the current language.

	/**
	 * Load the translation file for current language. Checks the languages
	 * folder inside the bbPress plugin first, and then the default WordPress
	 * languages folder.
	 *
	 * Note that custom translation files inside the bbPress plugin folder
	 * will be removed on bbPress updates. If you're creating custom
	 * translation files, please use the global language folder.
	 *
	 * @since bbPress (r2596)
	 *
	 * @uses apply_filters() Calls 'bbpress_locale' with the
	 *                        {@link get_locale()} value
	 * @uses load_textdomain() To load the textdomain
	 * @return bool True on success, false on failure
	 */
	public function load_textdomain() {

		// Allow locale to be filtered
		$locale = apply_filters( 'bbpress_locale', get_locale() );

		// Get mo file name
		$mofile = sprintf( 'bbpress-%s.mo', $locale );

		// Setup paths to current locale file
		$mofile_local  = $this->lang_dir . '/' . $mofile;
		$mofile_global = WP_LANG_DIR . '/bbpress/' . $mofile;

		// Look in local /wp-content/plugins/bbpress/bbp-languages/ folder
		if ( file_exists( $mofile_local ) )
			return load_textdomain( 'bbpress', $mofile_local );

		// Look in global /wp-content/languages/ folder
		elseif ( file_exists( $mofile_global ) )
			return load_textdomain( 'bbpress', $mofile_global );

		// Nothing found
		return false;
	}

This kind of inline documentation would be helpful to you and to other developers using your code. At a glance, a developer can tell what the code does and see specific instructions (such as to place custom translation files in the global language folder). For an open-source product, this makes the code much more usable to a wider array of people. Read what developer John James Jacoby has to say about this on his blog.

The developers I have spoken with who take inline documentation seriously stress that you should write inline documentation as you are coding, for several reasons:

  • If you are developing alone, you will write the documentation faster;
  • A third party will find it much easier to write the documentation;
  • You can return to the code in the future and instantly remember what you did;
  • Other developers will be able to easily fork your code.

Case Study: Infinity Theming Engine

I was approached by PressCrew to help out with the website content and documentation for its Infinity theming engine. From the start, the developers, Bowe and Marshall, and I knew that it would be a challenge. Unlike everything else I’ve used in WordPress, Infinity uses configuration files to turn features and options on and off. It also supports crazy features such as infinite child themes, which took a mental leap to conceptualize how it could be used.

We spent a considerable amount of time identifying our audiences and figuring out what features to pitching to each. We asked ourselves some questions:

  • What would the average WordPress user use Infinity for?
  • Do we want average WordPress users to be able to make use of Infinity’s most powerful features?
  • What information will developers need in order to make full use of Infinity?
  • How can we make the documentation useful to developers?
  • How do we give developers confidence in Infinity?

With our users identified, we also needed to provide them with two sets of documentation, each with its own strengths:

  • Demonstrative
    Because we needed to introduce developers to a different way of thinking about WordPress — using .ini files instead of messing directly with PHP — we wanted to introduce the concept in a fun way. Bowe came up with minions; a cast of characters each of whom would introduce a configuration file. We used humor and pop culture to make Infinity fun to learn about. Check it out.
    Screenshot
    Infinity’s minions.
  • Practical
    Once the developer has learned what Infinity can do, they need to be able to easily do it. Marshall documented every function and then used phpDocumentor to create documentation from all of the source code. The documentation is written in Markdown and then parsed to both the theme and the library, so it has to be updated only once. As well as offering access from the library, Infinity includes documentation in the dashboard so that developers can access it while working on their theme.
    Screenshot
    Infinity’s UI

A major difficulty has been the speed at which Infinity is updated. Bowe and Marshall asked me to come on board in the beta phase, which saw massive changes. Any docs I wrote would be out of date within a few weeks. I asked Bowe and Marshall what advice they would give to other developers in a similar situation:

“Our advice would be to write down a basic outline of the feature you want to create. When the feature has made it into your product, really take the time to properly document it based on your outline BEFORE you move on to the next feature.”

With a major project like Infinity, an iterative approach is best, documenting as you write the code. Then, after the features have been frozen, you would create the demonstrative documentation.

Conclusion: Sisyphus and I

In Greek mythology, Sisyphus is a king who was condemned to roll a boulder to the top of a hill. Every time he is about to reach the top, the boulder rolls back to the bottom. Up he goes to the top, only for it to fall back down again, and again, for eternity. That’s documentation writing.

With WordPress constantly changing, the documentation for WordPress constantly changes, and so the documentation for anything based on WordPress has to change, too. This could be anything from documentation for full-blown new features to screenshots to reflect UI changes. For me, the most painful moment is when WordPress releases a major UI change. I have to replace all of the screenshots — and screenshots are the most time-consuming part of documentation. Having a process in place, however, takes a lot of the pain out of it. But updating is important indeed because out-of-date documentation gives the impression of out-of-date code.

Don’t assume that your documentation is finished. It’s never complete!

Further Resources

WordPress-Specific

(al) (il)


© Siobhan McKeown for Smashing Magazine, 2012.


Improvising in the Boardroom

I’m ready to admit something: I don’t really prepare for a client pitch. Well, OK, that may be a slight exaggeration. Sometimes I pre-load some web pages in a browser in case there’s no Internet access. If I’m going to show logos or before/after shots, I have been known to throw some images in a PDF template. But I don’t write speeches. I don’t have elaborate slideshows. I don’t really “present” in the traditional sense. So what do I do? And why don’t I run out of the room to throw up when they all turn to me and someone says “we’re really looking forward to seeing what you have to show us?”

One of the bands I used to play in was a free improvised music group called Unstable Ensemble. We would tour the US once a year, and every night the music was different — we just sat down and played.

What I learned from the Unstable years, more than anything else, is that playing music well is about listening. “Open your ears,” we used to say. You hear what the other players are doing, you start to see where they’re going and — when the time is right — you join the conversation. You adjust your playing as you go based on the feedback you’re getting from the other musicians. And the further you go down the road, the clearer the “plan” becomes. Once you’re really all in synch, everybody can see the ending coming a mile away.

This is improvisation. You may have some vague plans about what you’re going to do when you sit down. But you’re always listening, watching, and ready to throw all your plans away if a better avenue presents itself. What you really bring to bear in the moment is not a rehearsed plan, but the sum total of your cumulative knowledge and experience to that point.

In a client meeting, I take a similar approach: I allow the whole group to lead. I listen, and let my potential new clients talk about themselves and their organization. What they think the project is, what they think the problems are. When it seems like the right time, I begin weaving in themes from my own knowledge and experience: how we might approach their problems, examples of similar things we’ve done for other clients, or examples of relevant solutions that other talented people have created that come to mind (explicitly credited, of course). I always try to keep one eye on people’s reactions, and help adjust our trajectory appropriately. When everyone seems bored, it’s time to move on to another subject. When everyone’s suddenly rapt, maybe I should expand a little on what I’m talking about. Following these cues helps keep the experience closer to an interesting conversation, rather than a hit-or-miss presentation.

In college I saw a video of Bill Evans, the famous jazz pianist, talking about improvisation. His primary message was this: to be a great improviser, you must learn music theory and technique so well that it’s automatic. You relegate it to the unconscious, freeing your conscious mind to make creative decisions in the moment.

Meetings are the same. They are a performance, but you are not the only player. If you know your subject well enough (you should, you live it every day) you don’t need to sweat it. Just bring your brain and, just as important, your ears.

I once pitched to a potential client against two large international marketing firms. After we won the (for us) considerable contract, our contact there confided in me that the other firms had superior “dog and pony shows.” But after interacting with us in a less-prepared, conversational manner, he was convinced that we would “get” their project and the challenges involved more than the others.

Ultimately your clients don’t need to be blown away by a fancy presentation. They need to see that they can work well with you for the coming months, or even years. Don’t give them a presentation, give them a demo. This your opportunity to say to them, “this is what we’re like to work with, this is how we listen, collaborate, solve problems.” Wouldn’t you rather hire someone you knew you could work well with, rather than someone you knew could put together a wicked-hot Keynote presentation?

So forget the slideshows. Open your ears. Improvise. Be genuine — the person that you are every day in your job — right there in the room with them. Then you’ll win the clients you should win. And, hell — let someone else have the ones you shouldn’t.

Translations:
Italian


RSS readers: Don't forget to join the discussion!


Tips For A Finely Crafted Website


  

Good Web designers know what many others might not realize: that creating a truly beautiful website requires care, time and craft. And similar to how a craftsperson molds their creation by combining raw materials, skill and unwavering focus on the vision, a beautiful design is planned and executed with exceptional focus on what is to be achieved by the website.

It is important, however, not to confuse a beautifully crafted website with one that simply brushes over the content with attractive visuals. This article provides a small selection of tried and true methods that Web designers regularly employ to give a website that bespoke look and feel (think a tailor who carefully cinches a suit here and there to ensure a perfect fit).

Make no mistake: these methods do take extra time, and they often result in improvements that the untrained eye might not consciously register. But the payoff is a better overall experience for the user. Users will leave with a smile and a lasting impression or relationship with your website, even if they can’t quite put their finger on why.

Start From Scratch, Every Time


For a truly customized design, always start with a blank slate.

Whenever possible, avoid cobbling together work from old designs. Every website should be treated as unique, regardless of its type (e-commerce, author website, blog, etc.). The very best websites are designed to fulfill a defined purpose. Building your design from the ground up fosters clarity, focus and commitment to the design.

At every step in the design process, ensure that everything in the layout has a deliberate purpose; you should be able to explain your thought process behind every element on the page. If something has no reason to exist on the page, then consider removing it because it could simply distract visitors from more important content.


Every element on the page should have a reason for existing.

Simply copying and pasting elements from previous designs is a crutch that prevents you from experimenting, learning and growing as a Web designer. This isn’t to downplay the value of iterating on previous design elements, which can be a useful exercise and which can challenge you to get creative and experiment.

Invest In Custom Icons And Graphics

Spotify
Spotify uses custom icons and graphics, rather than relying on stock images, to give their design soul and character.

Custom illustrations, imagery and iconography make for a unique experience on a website. While stock photography and vectors do save a ton of time, a photo of a smiling sales rep wearing a headset just feels phoney to visitors when they’ve seen the same image on five other websites.

Invest time in creating custom icons and graphics to preserve the look and feel of your website, as well as the authenticity of your message.

Spotify is a perfect example of this. Its lighthearted, “sketchy� illustration style sets its apart from all the other music services, and it leaves a lasting, positive impression on visitors.

Some other examples of great websites with custom icons and illustrations:

Remove Friction That Impedes Scrolling


Encourage scrolling by removing obstacles.

As screen resolutions expand and touchscreens multiply at every turn, we’re encountering longer pages and smaller website footprints. And with good reason: a user who has to scroll down the page will encounter far less obstruction than someone who has to click a link and wait for the new page to load. Removing this obstruction will not only simplify the navigation, but help to tell a cohesive story, without the interruption of page loading.

As Paddy Donnelly’s excellent article “Life Below 600px� explains, the fear that users will ignore any content unlucky enough to fall below the fold afflicts designers much less today. And the proliferation of devices of different resolutions makes it almost impossible to determine where exactly the fold lies.


“Life Below 600px� is an excellent essay that dispels the myth of the fold.

Weave a cohesive story concept by getting creative with connecting individual page sections. This will promote a natural flow for the user, encouraging them to explore deeper into the page, building momentum in their experience and making it easier to get all the way through the page. You can even tie radically different styles of content together on the same page by adding small visual cues at the bottom of each section to indicate that more content awaits — much like how different rooms in a house can have entirely separate functions yet retain a common theme. If each section on the page comes to an abrupt end or looks like a footer, then users will be less likely to reach the end.

In fact, scrolling has become such a natural interaction on most Web-enabled devices that Apple did away with the scroll bar in OS X Lion.

The Dangers of Fracking and Slavery Footprint deserve hearty mentions. Both websites drive the user to scroll down with incredibly creative parallax effects and compelling stories.

More awesome examples of mega pages:

Make The Design Invisible Through Interactivity And Functionality

After more than 20 years of evolution, the paradigms of the print world still provide the fundamental building blocks of the way we present content online. Think about the terms we use to describe the Web: pages, headlines, columns, scrolling. These are band-aid metaphors that we’ve adopted to make the Web more understandable to the public. But the medium itself is capable of so much more. Static text and images are usually fine, but human beings by nature crave varied stimulation, and the Web is capable of feeding that craving with a much more interactive and richer experience.

Zurb
Joyride uses “Pit stops� of interactivity to keep the visitor engaged with the website.

Providing clear points on the page where users can interact with the design, rather than passively consume it, will help to relieve the burden of wading through long passages of copy. Visitors will experience the invisible part of a design; content sliders, tooltips, lightboxes, modal windows and other points of interaction give them something to do and can propel them further along in the story, much like how a good museum exhibit mixes methods of conveying information. Of course, swing too far to the extreme of too much interactivity and you’ll distract users, so be cautious of how much you build in. All interaction points should serve the overarching goal of the page.

Joyride is a great example of this approach. While the page has plenty of content, Joyride does a great job of guiding the user around the page and highlighting points of interest to come back to later. (And the little surprise at the end will leave you grinning.)

Great examples of engaging users with interaction on the page:

Pay Attention To Detail

Whether you’re going for clean minimalism or complex and illustrative, pay special attention to the details of every element on the page. Even slight inconsistencies will be picked up by users subconsciously, thus diminishing their experience or confusing them.

A few common pitfalls to watch out for:

  • Typography gone wild
    Each typographic treatment in the design should be consistent with its function. Headings in one part of the page should look the same as headings elsewhere on the page, and indeed throughout the rest of the website.
  • Buttons, buttons everywhere
    Be conscious of where a button style is called for, as opposed to plain text links. Overusing buttons diminishes their overall effectiveness.
  • Changing gradients
    If your design has gradients, use them consistently, with the same shades across like elements and with the same gradation.
  • Mind the gaps
    Consistent spacing and alignment between page elements will make the layout feel refined and high quality.

Thoughtfully questioning each element in the layout is key to achieving a highly polished design. The burden is on you to prove that an element has a reason to be there and is not superfluous to the experience. At the end of the day, don’t fall into the trap of thinking “No one will notice,� because the chances are high that someone will!

As Antoine de Saint-Exupéry once said:

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.

Consider whether the elements on the page have the right amount of detail to fulfill their purpose. Does that button have the right texture and color treatment to serve its role? Does it need texture at all? Simplicity is key and is relative to the purpose of the element.


Polished designs can be found across the Web, if you look closely.

Polished touches lie all around the Web if you look. Little Big Details rounds up some details from the Web and other interfaces that many of us encounter every day but don’t notice.

Details

To see a truly polished design, head over to PixelResort. To describe it in one word: sumptuous. No detail has been spared for each element. The entire experience has a weight and tangibility that stays with the user.

Some other excellent examples of polish on the Web:

Bringing It All Together

Creating a truly beautiful and memorable website ain’t easy. You’ll need to make a significant investment of time and effort, focused in key areas for maximum payoff:

  1. Design the entire layout specifically for the given website. Putting a new coat of paint on an old template won’t give you the most compelling design possible.
  2. Create your own graphics to give the design a unique personality.
  3. Motivate visitors to scroll by weaving a story across the page that compels them to finish.
  4. Engage visitors with variety. Adding “rest stops� of interactivity will keep them actively thinking about the experience that you’re leading them through.
  5. Finally, polish, polish, polish! Think about every detail in the design. Make sure nothing is missed.

There you have it: five solid techniques to ensure that your website is a beautiful and memorable experience. This roundup is by no means comprehensive, but the techniques will pay you back with returning visitors, high engagement and user satisfaction.

Do you have any tips on adding beauty to a design? Feel free to post them in the comments!

(al) (jc)


© Jason Amunwa for Smashing Magazine, 2012.


Diving Into .NET Web Development


  

Many people think of PHP, Ruby on Rails or Python and Django when choosing a language to create a new website or when choosing a language to learn to get that exciting new job. .NET, however, seems to occupy a space somewhat apart from this playground of cool kids. It’s always the last to be picked for team sports; it was shouting “Wassup!â€� at parties well after 2000; and it has been just plain left out in the cold.

I’m not one of these people. In fact, I’m quite a fan of .NET and have found it great to develop with since moving away from PHP in the early days of my career. With its great tools, large community and broad applicability (mobile, Xbox, desktop and Web) it’s both powerful and fun.

Let’s be honest, though. I’m probably already playing devil’s advocate. So, let’s see if I can convince you, a seasoned non-.NET developer, to try it out.

If you’re already a .NET developer, you might still find something new in the code sample, so I urge you to take a look.

.NET?

Let’s be clear on what we mean by .NET, as opposed to IIS (which is a Windows Web server), C# (one of the .NET languages) and ASP Classic (the previous interpreted ASP from back in the day). First, the decision to become a .NET developer is not necessarily a choice of language. Although the majority of developers out there work with C# and most jobs are for C#, you can also code using the .NET framework in Visual Basic (VB), F#, IronRuby, IronPython and others, taking advantage of the same base libraries. Admittedly, paid work for ASP.NET is mainly done with C# and VB. For fun, though, and to show how many options you have when developing on the .NET platform, the code sample below will include some of the more obscure methods of rendering a Web page using .NET.

So by “.NET,� we really mean the Common Language Runtime (CLR) (and/or the Dynamic Language Runtime for Iron* languages), which is essentially the virtual machine that the various languages accompanied by the base class libraries can run on. Frameworks are then built on top of that for Windows, Xbox, mobile and Web.

What Does This Mean?

Knowing that .NET is a runtime, we can infer that it is not inherently tied to a particular platform. Of course, the Microsoft CLR is the most common, but Mono is an open-source implementation that runs on Mac and Linux. The mono project also provides us with mod_mono (Apache), monotouch (iPhone) and monodroid (Android) as alternate platforms on which to run our C# code.

To differentiate it further, unlike scripting, interpreted per request languages such as classic ASP and PHP, C# is compiled. This means you don’t have to worry about including files or following naming conventions and folder structures to ensure auto class loading, nor do you have to rely on modules or add-ons to provide such things as RAM-based caching. In fact, the integration goes deeper, allowing you to write modules for IIS (which is the Web server itself) in C#.

So, if you take the time to get to grips with .NET, you can take advantage of these ancillary benefits. Maybe make a game for Windows or Xbox using XNA, or make a app for Windows Phone 7 or Surface. Not to say that every .NET developer is doing these things, but by knowing C# and the wider .NET world, you can very easily jump around the ecosystem trying them out, all using the same tools and core languages and all rounding you out well as a developer.

To see examples of .NET in the wild, take a look at Stack Overflow, Wired.co.uk, GoDaddy, aspects of the Sims and Unity 3. It’s not just for big enterprise B2Bs or people who are still running IE 6. And you can work with commercial products beyond just EPiServer and Kentico. The mono projects mentioned above are open source; and so, too, are a plethora of apps (e.g. Umbraco) and libraries (often found via the NuGet package manager).

Before we get too much into advertising territory, let’s be realistic. Plenty of negative opinions about .NET are out there. Some of these are myths, some are problems that have been addressed, and some are genuine problems that you’ll have to balance against the pros.

Tools

Most people have heard of Visual Studio. It’s pretty awesome. Yes, you do have to pay for it, but you can also get a free version. In fact, you can get it pretty easily using the Web Platform Installer, which will also install the IIS Express Web server and a SQL Server Express database if needed. (“Expressâ€� means “small-scaleâ€� and “freeâ€� in the world of Microsoft.)

If you want the full versions but don’t want to pay, then consider applying to Microsoft BizSpark (or, if you’re a student, DreamSpark). You’ll get access to the Microsoft stack for free for three years (after which, your business will be thriving and you can pay for it, or else it’s not and you’ll pay a $100 exit fee graduate). But to be honest, you probably won’t need it, particularly in the early days or if you’re a hobbyist.

Of course, these are all Windows tools. If you’re not on Windows, then you might opt for Mono Develop.

You could even go half and half: running VS as your IDE, coding in C#, but connecting to a MySQL or Postgres database. Nothing stops you, and support is available. This will even save you from having to consider the cost of production SQL server licenses.

Servers And Hosting

The Microsoft tax comes back to bite us here. But it doesn’t amount to a huge difference in cost. For example, for a VPS with the UK hosting provider Memset, a Windows box is £4 per month more than a Linux one. And the Microsoft website lists other hosts. Of course, you could go with Linux hosting, get yourself a VPS and configure mod_mono for your website.

What will hurt your wallet is licensing standard editions of SQL server. With this, you’ll have to balance the pros and cons of tight integration with the rest of the Microsoft ecosystem. You may, for example, go with the half-and-half approach to save on costs if you aren’t eligible for licensing discounts or if you are not happy with the restrictions put on SQL Express (such as the number of processors, RAM, etc).

A Brief Interlude

Is Mono Really an Option?

Mono has been around for a long time, but Microsoft doesn’t support it in the same way that it supports its own platform. Additionally it is usually slightly behind the C# developments coming out of Microsoft because the team has to catch up. The Mono website lists the areas of compatibility between the two. As you can see, the amount of coverage is large.

Finding shared hosts that provide for Mono might be hard, so you could find yourself configuring it on a VPS manually.

Actual Coding?

This is where we really get into some of the myths surrounding .NET. In my experience, many Web developers have a very negative perception it:

  • Bloated markup,
  • Lack of control over element IDs,
  • Large base 64-encoded form elements,
  • One form to rule them all,
  • An odd paradigm that mirrors Windows development.

However, many of these issues actually apply to ASP.NET Web forms, which, although joined only recently by ASP.NET MVC (and even more recently by the Web API in MVC4), was never the only platform for serving Web pages using the ASP.NET base libraries. Not only are there mini frameworks out there, but you could use “Web forms� and just implement some of your HTML output and templates in another way; for example, with XSLT. Or you could even stick with Web forms but use libraries, such as the CSS control adapters, or restrict yourself to repeaters as opposed to grid views, etc. In fact, with the relatively recent additions to WebForms, we are seeing efforts to address these markup concerns.

This may not mean a lot to you if you haven’t used those systems, and I don’t want to get into it too much. The bloated markup was a sign of over-reliance on “controls”, where the final HTML was effectively hidden from the developer, and extras such as viewstate were added to mask the stateless nature of the Web. The paradigm itself was quite different from “normal Web development,â€� with a very desktop-style event-based approach: server-side button_click events, etc. This was useful for Windows developers who were migrating, but it often made Web developers, including me, balk.

The demo below uses an ASP.NET MVC project, but be aware that some of those old prejudices against using the Microsoft stack could be a more narrow dislike of old Web forms, rather than of C# or .NET generally.

Finally, The Example

Rather than patronize you with a step-by-step guide to installing tools using a GUI (the Web platform installer), I’ve created a sample project that you can access via GitHub. There is no data access (that topic could cover a whole series of articles). The aim is to give you a taste of ASP.NET pages, to show your range of options, and to provide a look at the code layout and tools so that you can try things out for yourself.

Tooling Up Your Development Machine

The easiest way is to get your hands on the following:

  • Windows
  • The Web platform installer
    • Install “Visual Web Developer 2010 Expressâ€� or a Visual Studio 2010 trial (note that there are different Expresses, such as an Express for Phone).
    • Install “ASP.NET MVC 3 (Visual Studio 2010).â€�
  • If you want to run the IronPython demo, then you will also need to install IronPython
  • If you want to play with the F# examples (and you are using Express, rather than a trial or standard edition Visual Studio), then you will need these:

Pull the project from the demo page and open it in your newly installed Visual Studio IDE. You should see something like this:

Screenshot of the demo project open in Visual Studio Web Developer Express
The DotNetDev project in Visual Web Developer Express

Screenshot of the demo project open in Visual Studio Standard
The DotNetDev project open in Visual Studio Standard

The only difference between the two is that I’ve used a feature of the paid for Visual Studio to add “Solutionâ€� folders for readability.

If you want to see the demo code running, I’ve put a copy of it on my server. As you’ll see, the demo pages include additional notes and highlighted code sections to explain the inner workings.


DotNetDev C# MVC example running in Chrome

Although the code looks like a lot here, the examples are extremely simple. In fact, each Web project simply outputs a classic “Hello world� phrase. However, each project uses either a different language or framework for the task. Hopefully, this should give you some insight into the options available to you.

If you want to immediately run any of the examples, simply right-click on the project that you want to run and choose Debug → Start new instance. Visual Studio will launch the website in your default browser, powering the code with the built-in Web server that comes bundled with Visual Studio (you will also see this little server running in your system tray).

Notes On The Examples

ASP.NET MVC C# and VB (Two Separate Projects)

These two projects show the most well-known and most used methods of website creation in the .NET framework.

The following are the two key areas in the non-database-driven ASP.NET MVC (C# code shown):

1. Routes (Global.asax)

routes.MapRoute(
		"Default", // Route name
		"{controller}/{action}/{id}", // URL with parameters
		new { controller = "Message", action = "Index", id = UrlParameter.Optional } // Parameter defaults
	);

This is the initial entry point of the website. With some simple pattern matching of URL strings, we can transpose a request to an instance of a controller and an action method upon that controller. Additional parameters relate directly to those required by the method. For example, {controller}/{action}/{id} will work for /messages/edit/1 (i.e. message controller → edit action → sending 1 as the ID parameter to the method) or products/index (i.e. products controller → index action).

2. Controllers (MessageController.cs)

public class MessageController : Controller
    {
        public ActionResult Index()
        {
            return View(new Message { Text = "Hello C# ASP.NET MVC World!" });
        }
    }

The MessageController is an IController class instantiated by the ASP.NET engine per request when the above route is matched. A method matching the action name will be called.

3. View Models (Message.cs)

public class Message
    {
        public string Text { get; set; }
    }

Although passing data to a view via a dictionary (the ViewBag) is possible, it is generally considered a better practice to package up the data that is required by a particular view into a “View Model,� used as a transfer object between the model and template.

4. Views (index.cshtml)

@model Message

<h2>Dot Net Dev</h2>

@Model.Text

The templating engine used in these examples is known as Razor. The approach of Razor is to have minimal impact on the code. The @ symbol is used to denote the beginning of code. If followed by a view model variable, it will be outputted to the HTML.

F#

open System
open System.Web.Mvc

open DotNetDev.Mvc.FSharp.ViewModels

[<HandleError>]
type MessageController() =
  inherit Controller()

  member x.Index() =
    x.ViewData.Model <- new Message "Hello F# ASP.NET MVC World!"
    x.View()

The F# example shows a slightly different take on the .NET framework. In this case, the functional F# language (often used in the financial sector) is used to define the routes, controllers and models in a class library project. To be fair, the example used here is simple enough (as is my knowledge of F#) that the code is still reasonably imperative.

Also, note that the F# example shows how F# and C# can be used together, allowing you to, if appropriate and useful, use libraries of each in the other.

One point to note if you are trying to run this example via Web Developer Express is that F# library projects are not supported. However, you can use the also free VS2010 Shell and F# CTP to view the source, compile it and then run the Web project (DotNetDev.Mvc.FSharp.Web) from Express itself using that compiled library.

IronPython

class MessageController(Controller) :
    def __init__(self):
        self.ActionInvoker = DynamicActionInvoker(self)
    def Index(self):
        return self.View("index", Message("Hello IronPython ASP.NET MVC World!"))

The IronPython example shows how the DLR can be used to execute Python code from within a .NET application. The PythonControllers.py file contains all of the Python code needed to do this. Again, as with F#, multiple languages can work together in a .NET project.

Experienced .NET developers might be interested to look at the implementation of the DynamicActionInvoker that I’m using, which allows the use of dynamic controllers to serve the request (where traditional reflection to find the controller method would fail).

C# Using the Nancy Framework

The final example shows that we don’t need to use Microsoft’s framework(s) to render a website using C#. Here, I’m using the minimalist Nancy framework (inspired by Ruby’s Sinatra), one of a number of open-source .NET Web frameworks.

Almost all of the Nancy example is contained within the following code snippet:

public MessageModule()
	: base("/")
{
	Get["/"] = x =>
	{
		dynamic model = new Message { Text = "Hello Nancy World!" };
		return View["message_index.cshtml", model];
	};
}

Here, we can see the route pattern being defined and matched to a method in the same line, using a C# lambda (or inline anonymous function) assigned to a dictionary in the message module. This means that when a GET request comes in for /, the function body gets executed, and all it does is create a Message model, assign it to a dynamic variable and return it with the view’s name.

An Aside

The Nancy example also shows another useful feature of .NET. If you are used to tools such as PEAR, then you will be aware of the concept of package management. Essentially, using [project] right click → Manage NuGet Packages from Visual Studio, you will be able to search online through a myriad of open-source and free libraries to use in your projects. In this case, I've used Andreas Hakansson et al's Nancy Web framework.

Some Context (Headscape)

This article has been a bit of a whistle stop tour through the .NET ecosystem. The intention was to ground experienced developers in what .NET is about, at least from my perspective, enticing you to make small changes to the sample code to see how you fare. Although I'm not suggesting that you make your controllers in IronPython or F#, hopefully I've shown how easily these languages can be used in a .NET project, whether it be to reuse some existing logic or to take a more dynamic or functional approach to an aspect of your work. It should also now be clear that .NET is embracing open source. Not only do some of its own offerings carry open-source licenses, but the default MVC project includes jQuery and Modernizr, and people are contributing frameworks and applications.

To give some context to all of this, I work as the lead back-end developer at Headscape, a design and development agency in the south of England. Although I wouldn't identify ourselves as a “.NET house,� we do use it extensively, having grown from using ASP Classic to using the technologies that Microsoft grew it into. We even started out using the free Express editions of the tools. Our projects over time have been created in Web forms, VB and C#, but we do not shy away from using other technologies. We also use WordPress, Magento and other non-.NET projects. Playing around in the .NET ecosystem, however, has enabled me to have a go at XNA game development, to play with Python in a framework that I already know, and to look into mobile development in my downtime.

Please do run the code, play with it, check out the full demo (with additional notes on how this stuff all works), and let me know what you think.

Resources

(al) (km) (jc)


© Craig Rowe for Smashing Magazine, 2012.


Interactive Prototypes And Time-Savers With Adobe Fireworks


  

As interface designers, we’re often required to demonstrate the look and feel (and interactions) of the interfaces we design. We often begin with a series of flat images, and while these may be pixel perfect and show some amazing detail, they lack the context of the user experience.

Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions.

The tool for creating interactive prototypes that wins hands down is Adobe Fireworks. Fireworks focuses on designing, prototyping and exporting for the Web, and it has a few hidden features that can easily add interaction to your prototypes and that will speed up your workflow.

But first, a little introduction. My name’s Trevor Kay and I’m a designer for Exvo. At Exvo, we create a range of Web apps, from small widgets to full desktop-like Web apps. Using Adobe Fireworks has increased our efficiency in designing and maintaining our app prototypes. “How?�, you may ask. The answer is simple: pages and symbols: the best kept secrets in interface design!

Prototyping In Code Vs. Prototyping In Fireworks

There are many prototyping techniques, and the one you use will depend on your level of technical skill in coding, the speed at which you need to produce the prototype, and the level of visual fidelity needed. Lately, prototyping in the browser has become a popular trend. So, do we still need visual tools such as Photoshop and Fireworks, or can we start right in the browser?

The answer is, it depends! Sometimes prototyping in code is best, and sometimes designing (and prototyping) in the browser is certainly not the answer.

When the prototype needs only simple interactivity, must be created quickly or requires detail and polish in its appearance, then Adobe Fireworks is the perfect tool because you don’t need to know any code to make a live prototype in very little time.

Why not Photoshop? While both Fireworks and Photoshop are excellent design tools (and often compared in UI design), Fireworks can take you one step further and produce a live prototype right from your design. In this article, we’ll cover this subject in more detail.

Fireworks is also very good when you need to create graphics for more complex prototypes that are created in development environments or even in the browser, because it can quickly slice, optimize and export graphic assets and can even help provide the CSS code for layout and text styles.

On the other hand, if you are proficient with code and need to make a prototype with complex interactivity, then prototyping in the browser might be the better option.

Now, let me show you why Fireworks works so well for me in both the prototyping and design phases of my projects!

PNG, Pages, Master Pages

Pages (and PNG)

Fireworks’ best friend is the PNG file format. Together, they achieve some pretty cool things, such as storing a multi-page document in one Fireworks PNG file (known as a Fw PNG). But I hear you say, “PNG is a flat file format!� While this is generally true, a PNG can also be extended to include various types of meta data. By using this ability to add meta data, Adobe Fireworks can store multiple pages in one PNG file, while maintaining complete editability within Fireworks itself (of vectors, bitmap objects, pages, layers, live filters and so on).

The benefit of this is two-fold. First, editable PNG files are usually very small, much smaller than comparable Photoshop PSD files. The actual difference in size can be stunning, as some designers report: one Fireworks PNG editable file with approximately 30 pages (equivalent to 30 separate PSD files or one PSD file containing 30 layer comps) can be as low as 9 MB in size, while in some cases a three-page PSD file (with layer comps, which can partially simulate pages) can be as big as 100 MB or more! A small size also means that Fireworks’ editable PNG files are easy to share and quick and simple to sync, even over a slow Internet connection.

Secondly, by storing all of the screens of your app’s prototype as pages in one file, nothing gets lost, and sending the file itself to coworkers and clients is easy.

One PNG File vs Many PSD files
One Fw PNG file may contain many pages.

Pages give you almost unlimited freedom. You can have many pages in one PNG file, and each page can have its own unique settings. You can also give each page its own name (just like you can rename layers and states). Naming your pages clearly will help you when you make the prototype interactive.

Pages actually enhance the layer model that you might already be familiar with from working with Photoshop, because each page in Fireworks is like a separate file: each page may have its own size, optimization settings, and unique content as well as shared content from other pages. Fireworks also uses layers and states.

Think of each page as a flat canvas for you to place objects on. You can move these objects around and reorder them easily, because you can interact with them directly on the canvas (just as you would with objects in Illustrator), and not through the Layers panel, which can speed up your workflow considerably!

Master Page

Fireworks also has a master page feature, which is a template for all of the other pages in your prototype. Let’s say that the same toolbar appears on all pages of your app: simply place the toolbar on the master page, and it will appear on every page. This eliminates the need to constantly duplicate elements and can save you many hours. Creating a master page is easy: just right-click on any page in the Pages panel and select “Set as Master Page.�

If you need to update an element that appears on all pages, edit it on the master page and it will be automatically updated on all other pages!

Note that objects placed on the master page will appear at the same coordinates on all other pages connected to the master page. You cannot move or change the position of master-page objects on a per-page basis.

You can also share layers to pages, which is an alternative to using a master page. However, the master page always shares all of its layers to all pages, whereas sharing a layer from a page allows you to select which pages the contents of the shared layer should appear on.

Select Behind Tool, Subselection Tool, Symbols

Fireworks also provides two powerful tools to help you avoid touching the Layers panel (and work more efficiently): the Select Behind tool and the Subselection tool.

(A layer in Fireworks is a container for objects (much like a group in Photoshop), whereas a layer in Photoshop is an individual object.)

Select Behind Tool

The Select Behind tool (located in the Tools panel or by pressing V twice) enables you to select a top-most object, and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.

Select Behind tool
In this example, five individual objects are placed on the canvas. With the Select Behind tool, selecting any object beneath another object is easy.

Subselection Tool

The Subselection tool (located in the Tools panel or by pressing A) enables you to select individual objects that are part of a group. This speeds things up because you won’t have to continually ungroup and regroup objects.


In this example, five objects are grouped together. With the Subselection tool, selecting any object inside the group is easy.

Once you get into the habit of working with pages and objects, you will feel a weight lift from your shoulders. The Select, Select Behind and Subselection tools make it a breeze to interact with the elements in your design!

See the article “Using Pages, States, and Layers in Fireworks CS4� by David Hogue for an excellent explanation of how all three elements interact with each other in Adobe Fireworks.

Symbols

Symbols are another powerful feature in Fireworks, and they complement pages and master pages quite nicely. A symbol is a special graphic group that gives you “edit once, update everywhereâ€� functionality, which saves a lot of time, too. Any object, layer or group of objects can be turned into a symbol simply by pressing F8 or by going to Modify → Symbol → Convert to Symbol in the menu. (We’ll talk about symbols in detail later.)

Want to learn a bit more about symbols in Fireworks? Watch the useful video tutorial “The Power of Symbols in Adobe Fireworks� by Rogie King.

How To Create Interactive Prototypes

All of the Fireworks workflow improvements mentioned so far are important on their own, but the real magic happens when you start making interactive prototypes. Fireworks was originally created by Macromedia as a tool targeted specifically at Web designers, and Adobe continues to develop Fireworks in this direction. It covers a lot of the things we need: pages, master pages, symbols, styles, bitmap- and vector-editing tools, and one of the best image exporting and compression features. But Fireworks has another feature that the Web has pretty much forgotten about: image maps.

Image Maps and Hotspots

Fireworks uses hotspots to generate image map areas. An image map encompasses multiple areas, which are referred to as “hotspots.â€� Adding a hotspot is as simple as selecting an object on the canvas, right-clicking on it and selecting “Insert Hotspot.â€� Alternatively, you can use the shortcut Control/Command + Shift + U, or in the menu go to Edit → Insert → Hotspot. You can also manually add hotspots with the Hotspot tool (found in the Tools panel).

Hotspots may be rectangular, circular or polygonal, but the best practice is to use rectangular hotspots because you can’t replicate circular or polygonal hotspots with normal links, which the final product will have. Also, if you decide to export the prototype to a PDF, only the rectangular hotspots will export.

Two Hotspots in Fireworks
Two hotspots (notice the blue-colored overlay).

Once added, a hotspot will appear as a blue-colored overlay above everything else. If you wish, you can change the color of a hotspot in the Properties panel. Hotspots exist in the Web Layer, which always resides at the top of all layers in the Layers panel.

Web Layer in the Layers panel
Inside the Web Layer.

Note that when you export a prototype to HTML, the names that you gave to the pages in the Fireworks PNG document will become the names of the exported HTML files.

Manipulating Hotspots

When a hotspot is selected, the Properties panel will change and give you the option to add a link to the currently selected hotspot, as well as to specify how that link should open (in the same window or a new one, for example). The link could point to an external website (such as http://www.smashingmagazine.com) or to an internal Fireworks page. By linking to an internal page, you have taken the first step in making your prototype interactive.

Properties Panel
The Properties panel when a hotspot is selected.

The selector for link: is divided into two sections, separated by a horizontal divider. Below the divider are the pages in the current Fireworks file; above the divider are all links currently in use in the open Fireworks document, and they may be either internal or external links.


A list of URLs in the Properties panel.

Now, all you have to do is go through the rest of the prototype and add the links. Remember, anything may be a linked hotspot. Need that button to open a new page? Done. Need that image in the slideshow to look like it progresses to the next image? Done. Achieving these effects really is that simple, and it will change the way you present your design prototypes. Also, you don’t have to worry if the names of your pages change; Fireworks will handle that for you as well and will automatically change all relevant hotspot links so that nothing becomes unlinked.

Export the Prototype

Once you have created all of your hotspots, how do you go about sending your clients the interactive prototype? Of course, you wouldn’t send them the editable Fw PNG file. While the PNG file contains all of your pages and links, it isn’t interactive. Clicking on a hotspot in Fireworks would not take you to the linked page; it would just select the hotspot. To make the prototype interactive, you need to export it to HTML files. These HTML files are what your clients can view and click through. They can be opened in any browser (Firefox, Safari, Chrome, Internet Explorer, Opera), so you don’t need to worry about compatibility.

The Export Dialog in Fireworks
The Export dialog in Fireworks.

When exporting an interactive prototype, use the default option of “Put images in Subfolder� to keep everything neat and organized. This has the added benefit of allowing you to easily send only the images to the client, if required. The exported images may be in any common image file format: PNG8, PNG24, PNG32, JPG, JPG Progressive, GIF. Note that the default format of the exported images is determined by their page’s optimization settings and then overridden by any slice’s individual optimization settings, which gives you a fair amount of control and flexibility.

Fireworks Pages: What Is Their Limit?

Pages allow for the efficient creation of prototypes, but what happens if they become too efficient?

Handling a Fireworks PNG Document With Many Pages

I don’t know what the record is for a Fireworks document with the most pages in it, but I currently have one with over 150 pages, and it is still growing! While this is a complex file with a large number of objects, it shows how awesome Fireworks’ PNG file format is: the file’s actual size is only 16.6 MB!

Moar pages??
150 pages in one Fireworks PNG document? Possible!

Why would anyone need a prototype that big? The simple answer is that I’m designing a complex app (Exvo’s Web app), and many intricate parts need to be covered by the prototype, so I’ve let it keep growing and growing.

While Fireworks can handle that many pages, it is certainly not recommended, for performance reasons. Try to keep your documents to fewer than 50 pages inside. Once you get past 50 pages, you might notice that Fireworks starts to use more RAM and opens and saves the document more slowly than usual. Performance also depends on each page’s canvas size, the number of objects and more, so keep the pages to a reasonable number to maintain an efficient file.

Pages Under Control: Splitting a Complex PNG File

Should our Fireworks PNG file become too large and unwieldy, how do we reduce the number of pages and optimize it? Because we are now relying on Fireworks’ ability to link pages and hotspots to create an interactive prototype, the hotspot links need to remain intact, even if we split the complex Fireworks PNG into several files. So, how do we proceed? Is it possible?

First, go through the prototype and make sure it is structured as defined sections. If the prototype is properly structured, we can split it up into smaller, more manageable pieces. To do this, we will need to count how many sections are in the prototype. If there are 10 main sections, for example, we would duplicate the file 10 times.

After that, we rename the duplicated files to match the sections of the prototype. Then, we open each of the duplicated prototype files and simply delete the pages that are irrelevant to that section; this will take some time and you have to be careful, but it is worth the effort. And… that’s it! You have now successfully split up your massive project file into more manageable pieces.

We also have to ensure that the smaller prototype files keep things together so that the exported HTML continues to link up correctly. To do this, we have to make sure that all of our top-level page names stay the same. While the relevant links will be changed within the single prototype file to make sure there is no unlinking, the other files will not update and will thus become unlinked. If you do opt to change the name of a top-level page, you would have to go through all of the other Fw PNGs and alter the hotspot links by hand.

If you do opt to split up a Fireworks PNG into multiple PNGs, then the master page and symbols will become unlinked. If you make a change to one PNG file, you will need to make the same change in all corresponding PNG files.

One prototype now Split into Several Smaller Ones
The prototype (Fw PNG) is now split into several smaller files.

The massive prototype file we had is now split up into smaller pieces, so you will surely want to export it to be interactive. This is still possible and made easier if you still have the original large prototype file. Export the large prototype to a folder so that all pages are in the one folder. Keep this folder around because when you make changes to your smaller prototype files in the future, all you will have to do is export to this folder and overwrite the old files. Because all of our top-level links are still the same, everything will link up correctly as long as all of the exports are saved to the same folder.

Symbols

While pages facilitate file management and enable us to easily make interactive prototypes, Fireworks gives us other workflow improvements, too, such as symbols. Symbols originate in Flash and are an easy way to build a library of reusable elements. If UI design has one defining characteristic, it is reusable elements. Here are a few things that make symbols in Fireworks so powerful:

  • Once a symbol is created, you can save it to the Fireworks Common Library;
  • Fireworks symbols allow for intelligent scaling with the use of 9-slice scaling guides;
  • Symbols can be scaled as much as you like without losing quality.

Let’s take a close look at these features.

Reusability of Symbols

One of the best features of symbols in Fireworks is their reusability.

Symbols can be document-specific or available globally through the Common Library panel. Saving symbols to the Common Library means that no matter what document is open, all of your symbols will be available to use. The benefit is that you don’t have to recreate common UI elements across each prototype. If all of your apps have the same theme, then once your symbols have been created and saved to the Common Library, you will save yourself a lot of time by not having to redraw everything from scratch. This is an amazing time-saver because now all of your UI elements can be simply dragged and dropped into the current project!

The Document Library contains all of the symbols that have been used in the current document; these could include symbols selected from the Common Library, as well as symbols created specifically for that document. A benefit of the Document Library is that anyone who opens the Fireworks file will have access to all of the symbols being used in that document, including any symbols that were not created on their computer.

Symbol libraries
The Fireworks libraries of symbols: Common Library (left) and Document Library (right).

9-Slice Scaling Guides

Symbols may also include 9-slice scaling guides. These guides make it possible for you to define how a symbol will scale intelligently in all directions, and they reduce the number of times you need to manually edit vector points in order to change the object’s size. You can learn more about 9-slice scaling in a video tutorial by Jim Babbage and in a detailed article by Sarthak Singhal.

The 9-slice scaling guides are optional and are not included by default. You can decide whether to use them based on the type of object that you’re converting to a symbol. To make things even easier, Fireworks also gives you the option to activate or deactivate the guides for any existing symbol.

When you edit a symbol for which the 9-slice scaling guides are enabled, Fireworks presents you with the graphic for the symbol as well as four guides overlaid on top. These guides effectively divide the symbol into nine slices, with each determining how a particular part of the symbol will transform when scaled:

  1. Corner slices
    All corners will not resize and will stay the same size no matter what. This is very effective for buttons made out of rounded rectangles.
  2. Left and right slices
    These two slices will transform vertically but not horizontally.
  3. Top and bottom slices
    These two slices will transform horizontally but not vertically.
  4. Center slice
    This slice will transform both horizontally and vertically.

A Symbol in Symbol-editing mode
A Symbol in symbol-editing mode.

The ability to reuse and resize symbols without losing quality is what makes them so powerful. You will have a common set of elements ready to be dragged and dropped into your prototypes. The amount of time this alone will save you is amazing.

Just as Fireworks uses PNG as its primary file format, symbols are also stored as PNG files. All Common Library symbols can be found in the following location:

  • Mac OS X
    ~/Library/Application Support/Adobe/Fireworks CS5/Common Library
  • Windows XP
    C:\Documents and Settings\*username*\Application Data\Adobe\Fireworks CS5\Common Library
  • Windows Vista and 7
    C:\Users\*username*\AppData\Roaming\Adobe\Fireworks CS5\Common Library

(If you are using a different version of Fireworks, just replace “CS5� with the version you’re using.)

If you ever need to migrate to a new machine or give a coworker access to your symbols, all you need to do is copy your symbols to the new location and Fireworks will recognize them instantly!

The Common Library
The Common Library in Fireworks.

Download A Sample Fireworks PNG File

Want to jump right into pages and symbols and easily make an interactive prototype with Fireworks? To help you, we have created a three-page prototype of an iPhone music player for you to download. You can open the music-player-demo.fw.png file in Fireworks and export it to a small interactive prototype.

Three-page demo prototype for download

The sample Fireworks PNG not only will show you how hotspot links and pages work, but will give you a chance to play around with symbols. To export the Fireworks PNG as “HTML and Images,â€� just go to File → Export. Set the “Exportâ€� type to “HTML and Imagesâ€� and set “Pagesâ€� to “All,â€� and then select where on your computer to export it to. After the export, open one of the HTML files in a browser and try interacting with the prototype, navigating through the app by clicking the links.

When you’re testing the file, make sure the following panels are open in Fireworks: Pages, Layers, Document Library and Properties. Feel free to experiment with the prototype, add more hotspots and pages, and navigate around to see how the file is organized and how the pages inside are linked together. (Seeing which parts will be clickable once they’re exported is easy because the hotspots are marked in blue.) The file also makes use of symbols (stored in the PNG file itself — see the Document Library panel), shared layers and a master page.

Further Reading

(al) (jc)


© Trevor Kay for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress