webdesign

Controlling who is able to view a post is a simple task once the system is established. Limiting access to certain users has several applications, such as enabling a design studio to distribute artwork to its various clients, or enabling a small school to arrange for homework to be posted online using a cheap and easy solution.

The easiest method to get this system working is to make the recipients of the information “subscribers” (since they need not be able to post) and the distributors of information “authors” (since they should only be able to edit their own posts). This system eliminates several headaches for the webmaster by managing who has access to particular posts. The username would be used to identify who is allowed to view certain posts, since it is unique and, for the most part, constant.

The Basics

What Will You Need?

• WordPress 3.1 or later
• Members of various roles
• The ability to modify your theme’s files
• Basic knowledge of PHP and MySQL

What Is a Username?

In general, a username is a means by which to identify and verify a user. It is not the only way to identify a user, but remembering a username is easier for the person logging in than having to remember a random user ID. A username can be made unique to an individual, unlike a person’s name or email address (family members may share the same name, or even the same email address). This ease of use and uniqueness is why usernames are used on most websites that require people to sign up in order to access the website or certain of its features.

To WordPress, a username is means of identifying a user. Paired with a password, a username enables someone to access their profile and, depending on their permissions within WordPress, to access to the administrative pages of the website. A username can be used for many functions in the operation and management of a website, such as karma, prestige, user roles and expulsion.

A WordPress username is unique and impossible for the average user to change. Thus, the system is a potentially reliable means of identifying individuals. This reliability is important for a system in which a post must be visible to only a few people. The permissions of a post should not alter merely because someone has changed their name or email address.

The user page in a WordPress installation. Note that “Usernames cannot be changed.”

Setting Up The Back End

In order for an author to be able to set permissions for visibility, a method of selecting users must be set up on the post editing page. We could accomplish this by one of several methods, one of the easiest and most efficient of which is to create a meta box (or widget) in the post editing page that allows the author to add custom information, as required by a theme or plugin. This information enables us to tell the theme which members should have viewing rights to particular posts.

A Basic Custom Meta Box

Justin Tadlock’s article “How to Create Custom Post Meta Boxes in WordPress” explains how to create meta boxes, and we’ll reuse that code here.

Let’s assume we’re dealing with a website for a music school named “Smashing Magazine’s Fancy Flautists.” We will use the name smashing_flautist_access in the code for the back end to distinguish it from other custom functions. Justin’s code is a great starting point for this project, but it needs a little customization for our purpose. Place the following code in your theme’s functions.php, and modify the various labels according to your project.

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

        /* Add meta boxes on the 'add_meta_boxes' hook. */
        add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

        /* Save post meta on the 'save_post' hook. */
        add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );
}

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

        add_meta_box(
                'smashing-flautist-access',                     // Unique ID
                esc_html__( 'Post Viewing Permission', 'smashing_flautist' ),           // Title
                'smashing_flautist_access_meta_box',            // Callback function
                'post',                                 // Admin page (or post type)
                'normal',                                       // Context
                'default'                                       // Priority
        );
}

/* Display the post meta box. */
function smashing_flautist_access_meta_box( $object, $box ) { ?>

        <?php wp_nonce_field( basename( __FILE__ ), 'smashing_flautist_access_nonce' ); ?>

        <p>
                <label for="smashing-flautist-access"><?php _e( "Enter the username of the subscriber that you want to view this content.", 'smashing_flautist' ); ?></label>
                <br />
                <input class="widefat" type="text" name="smashing-flautist-access" id="smashing-flautist-access" value="<?php echo esc_attr( get_post_meta( $object->ID, 'smashing_flautist_access', true ) ); ?>" size="30" />
        </p>
<?php }

With Justin’s code, modified for this project, we should have a custom meta box that looks like this:

A basic meta box positioned below the post editing box.

Adding Ease to the Selection

This box can be used as is, and the author would simply input the members who they want to allow to view a post. This would work well if each author had very few usernames to remember; but if the author has long list of usernames to choose from, then a list of members would have to be displayed, and there would have to be a system that allows the authors to choose members from the list. Add the following code to the area just below the original box, just after the closing paragraph tag, to display a list of users with their names, along with radio buttons to grant one of the users access to the current post.

<table class="smashing-flautist-access">
<tr align="left">
<th>Username</th>
<th>    </th>
<th>Visiblity</th>
<th>    </th>
<th>Name</th>
</tr>
<?php
global $post;
        $users = get_users('role=subscriber');
        foreach ($users as $user) {
                        $user_info = get_userdata( $user->ID );
                        if(get_post_meta( $object->ID, 'smashing_flautist_access', true ) == $user->user_login) $ifchecked = 'checked="checked" ';
                        echo "<tr>";
                        echo "<td>$user->user_login</td><td>    </td>";
                        echo "<td align="center"><input type="radio" name="smashing-flautist-access" id="smashing-flautist-access" value="$user->user_login" " . $ifchecked ."/></td><td>    </td>";
                        echo "<td>$user_info->last_name, $user_info->first_name</td><td>    </td>";
                        echo "</tr>";
                        unset($ifchecked);

        } ?></table>

If everything goes well, you should end up with a box underneath the post editor that looks similar to the image below. The form containing the radio buttons gets a list of users that are listed as subscribers and makes the selection of the student with viewing permissions easy, all without the post’s author having to remember any usernames.

A meta box that contains a method to select the particular name and information of each user.

Saving the List

Now that we have generated a list that makes it easy for the authors to pick which members they want to be able to view particular posts, we have to create a system to add the list to WordPress’ MySQL database so that we can retrieve it later. We also need a way to tell WordPress to update this list of usernames in case the author decides later to add or remove someone from a particular post’s list of authorized viewers. The code provided by Justin does excellent work; place his code below in your theme’s functions.php, just after the function that sets up the custom meta box.

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );

/* Save the meta box's post metadata. */
function smashing_flautist_access_save_meta( $post_id, $post ) {

        /* Make all $wpdb references within this function refer to this variable */
        global $wpdb;

        /* Verify the nonce before proceeding. */
        if ( !isset( $_POST['smashing_flautist_access_nonce'] ) || !wp_verify_nonce( $_POST['smashing_flautist_access_nonce'], basename( __FILE__ ) ) )
                return $post_id;

        /* Get the post type object. */
        $post_type = get_post_type_object( $post->post_type );

        /* Check if the current user has permission to edit the post. */
        if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
                return $post_id;

        /* Get the posted data and sanitize it for use as an HTML class. */
        $new_meta_value = ( isset( $_POST['smashing-flautist-access'] ) ? sanitize_html_class( $_POST['smashing-flautist-access'] ) : '' );

        /* Get the meta key. */
        $meta_key = 'smashing_flautist_access';

        /* Get the meta value of the custom field key. */
        $meta_value = get_post_meta( $post_id, $meta_key, true );

        /* If a new meta value was added and there was no previous value, add it. */
        if ( $new_meta_value && '' == $meta_value )
                {
                add_post_meta( $post_id, $meta_key, $new_meta_value, true );
                $wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
                }
        /* If the new meta value does not match the old value, update it. */
        elseif ( $new_meta_value && $new_meta_value != $meta_value )
                {
                update_post_meta( $post_id, $meta_key, $new_meta_value );
                $wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
                }
        /* If there is no new meta value but an old value exists, delete it. */
        elseif ( '' == $new_meta_value && $meta_value )
                {
                delete_post_meta( $post_id, $meta_key, $meta_value );
                $wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'public' WHERE ID = ".$post_id." AND post_type ='post'"));
                }
}

The three MySQL queries are in place to prevent unauthorized users from viewing protected posts and to hide the posts from the RSS feeds. The first query runs only when new data populates the previously empty custom field, while the second query runs only when the data in the custom field has changed. The third query runs only if the custom field is emptied, and it sets the post’s visibility back to “Public.” All three are protected from SQL injection attacks by using $wpdb->prepare() to validate the data entered into the username form field.

If you don’t like that WordPress precedes the post’s title with the word “Private,” then add the following code to your theme’s functions.php file. This custom function is called when your theme would display a post’s title; it finds any instance of the words “Protected” or “Private” at the beginning of the title and removes them. In the core of WordPress’ programming, the function get_the_title() adds those words if a post’s visibility is restricted and the person viewing is not an administrator. What the following code does is send a message to the action that get_the_title() hooks into, telling it to remove the terms “Protected: ” and “Private: ” from the title. So, you can set a post’s title to begin with either term, and the title will not be altered; this code only affects WordPress’ ability to add to your title.

function smashing_title_trim($title) {
        $title = attribute_escape($title);
        $needles = array(__('Protected: '),__('Private: '));
        $title = str_replace($needles,'',$title);
        return $title;
}
add_filter('protected_title_format','smashing_title_trim');
add_filter('private_title_format','smashing_title_trim');

To allow users at the subscriber level to see private posts, you have to give them that capability. As it happens, some of the code we’ll be using later frees us from having to worry about users at the subscriber level seeing the posts of others.

$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_posts' );

You can also grant users at the subscriber level permission to view private pages, in case you want a dedicated page of information that subscribers should know.

$subRole->add_cap( 'read_private_pages' );

Setting Up The Front End

Now that we have a way to add members to the list of people who can view a particular post, we have to modify our theme to use this data, and to actually control the visibility of each post based on this list. First, we need a way to get the username of the person who can view a post. Secondly, we would compare the username of the member with viewing permissions to the user who is currently logged in. Finally, we would make the theme display either the post in the loop or an error message (or perhaps nothing at all).

Place this code just after The Loop starts. It goes in single.php, category.php and index.php if you will be displaying posts on the home page.

<?php
/* Get the post's acceptable viewer. */
                $flautist_access = get_post_meta($post->ID, 'smashing_flautist_access', true );
/* Get the post's current viewer, if he or she is logged in. */
                if(is_user_logged_in()) {$current_flautist = $current_user->user_login;}
/* See if the acceptable viewer and the current viewer are the same */
                if($flautist_access == $current_flautist || current_user_can('author') || current_user_can('editor') || current_user_can('administrator'))
                        {echo ''; ?>

Place this code just before the loop ends. Here is where you can show an error message telling the user that they may not view this post. Or you could leave this code as is to make it appear as though the current visitor is not missing anything.

<?php } else { echo ''; } ?>

This is what a hidden post looks like to the public or to a user who is not logged in. They would see what appears to be an error message and are redirected away from the post.

If a person is not logged in and tries to view a restricted post, they would get an error message.

If a user is logged in but not allowed to view a restricted post, they would see either nothing or an error message specific to members.

If a member is logged in and authorized to view a protected post, then they would see the post itself.

Conclusion

Being able to control who can view individual posts is a useful feature with a wide variety of applications. Third-party software can natively do this, but WordPress is widely supported and documented, which means that any security holes that might allow unauthorized users to view restricted posts would be shut in a future update. Plus, it allows you to run an actual blog next to posts with limited visibility. This system could be used by administrators to distribute personalized content, by professionals to send files to clients, or by bloggers to restrict the visibility of certain posts to certain members.

Enabling an author to control who can view their posts can help them tailor the blog’s content to the needs or tastes of certain users. Ultimately, you will have to factor in the purpose and content of your website when deciding whether to use this method. It’s not for everyone, but it suit the needs of owners of small websites who want to deliver certain content to certain people.

Resources

• “Function Reference/add meta box,” WordPress Codex
• “Function Reference/get users,” WordPress Codex
• “Roles and Capabilities,” WordPress Codex
• “Class Reference/wpdb,” WordPress Codex
• “How To Create Custom Post Meta Boxes In WordPress,” Justin Tadlock

(al)

---

© Chris Ellison for Smashing Magazine, 2012.

UX practitioners, both consultants and in house, sometimes conduct research. Be it usability testing or user research with a generative goal, research requires planning. To make sure product managers, developers, marketers and executives (let’s call them stakeholders) act on UX research results, planning must be crystal clear, collaborative, fast and digestible. Long plans or no plans don’t work for people. You must be able to boil a UX research plan down to one page. If you can’t or won’t, then you won’t get buy-in for the research and its results.

This article addresses one key aspect of planning UX research: the one-page plan document. Before we get to that, we’ll briefly discuss the benefits of research planning and identify the audience of a research planning document.

(Image: Patrick Hoesly)

A word about stakeholders. A stakeholder in the UX world is a code name for the people who UX practitioners work with. These are our clients, whether internal or external to our organization. These are people who need to believe in what we do, act on research results, and fund and sponsor future research. We all have a stake in product development. They have a stake in UX research.

The Benefits Of Research Planning

Very generally speaking, UX research can answer two types of questions:

1. What’s useful? What do people need? Who is the target audience?
2. What’s usable? Does the design work for people, and how it can be improved?

Dozens of research methodologies could be implemented to answer these and more specific questions, and it is up to designers, researchers and their teams to decide what works best for them and when is the right time to answer their questions.

Here are the benefits of planning UX research:

• Get a better feel of stakeholders. A written plan helps you identify what works and doesn’t work for people, and what questions they are trying to answer.
• Engage stakeholders. A study plan ensures they are properly involved with the study and its results. If there’s no written plan, then there’s a greater chance that stakeholders won’t feel engaged.
• Writing things down helps you. When you put things in writing, they look very different than how you imagined them when they were just thoughts in your head. Always have a written study plan, even if you don’t share it with anyone else.

Now, let’s quickly identify the target audience for the research planning document.

Who Are You Planning For? Who Are The Stakeholders?

As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Different UX research stakeholders are interested in different aspects of a research plan:

• Product managers and software engineers are mostly interested in the study’s goal, research questions and schedule. In some cases, they are also interested in the criteria for participants. These stakeholders are usually interested in goals and questions because these determine the content of the study and its focus. They are interested in the schedule to make sure it enables them to make timely design, business and development decisions. Criteria for participants interest them when the product targets a very specific demographic and they want to make sure participants are representative of that demographic.
• Managers and executives are probably interested in the study’s goal and the overall cost of the study, because they are likely sponsoring the study. Usually, their bandwidth does not allow them more than that.
• You! The plan is mostly for you. As soon as you put your thoughts in writing, something happens, and you find holes in them. These holes help you improve the plan. A written plan also helps you focus and better prepare for the study. The fact of the matter is that if you can’t boil your plan down to a page, you probably don’t really understand it.

Now that we’ve discussed why a planning document is important and who it is for, let’s get to the nitty gritty of the document.

The Plan That Stakeholders Love: The One-Pager

The users of a research plan love brevity and appreciate succinct definitions of what will happen, why, when and with whom. Here are the sections that go in a one-page research plan:

• Title The title should combine the thing you’re studying and the methodology; for example, “Monster.com field study” or “XYZ Phone data-entry usability test.” Sometimes mentioning the target audience of the study is also appropriate; for example, “Whitehouse.com news page interviews with senior citizens.”
• Author and stakeholders State your full name, title and email address on one line. After you get the stakeholders’ buy-in for the plan, add their details as well — the research belongs to everyone now.
• Date Update it whenever the plan is updated.
• Background Describe what led to this study. Discuss the recent history of the project. Be brief, no more than five lines.
• Goals Briefly state the high-level reason (or reasons) for conducting this study. Try to phrase it in one sentence. If that wouldn’t make sense, create a numbered list of very short goal statements. If you have more than three to four goals, you are either aiming too high (meaning you have too many goals) or repeating yourself.
• Research questions These are the specifics, the core of your plan. Provide a numbered list of questions that you plan to answer during the study. It is extremely important that your stakeholders understand that you will not necessarily be asking the study participants these questions. As a rule of thumb, have no more than seven to ten questions, preferably around five. Later on, you will construct your study script to answer these questions. An effective way to think about research questions is to imagine that they are the headings in the study’s summary.
• Methodology In an academic environment, this section has one primary goal: to provide as many details as other researchers need in order to repeat the exact same study. In practice, the goal of the methodology section is to briefly inform the stakeholders of what will happen, for how long and where.
• Participants Provide a list of the primary characteristics of the people you will be recruiting to participate in the study. Have a good reason for each and every characteristic. If you have two participant groups, describe both groups’ characteristics in lists or in a table. Append a draft form that you’ll use to screen participants.
• Schedule Inform stakeholders of at least three important dates: when recruiting starts, when the study will take place, and when they can expect results. Large research projects require more scheduling details. For example, if the study involves travel to another city or country, more dates might be required for on-site preparation and meetings or for analysis workshops.
• Script placeholder When a full study script is ready, it will appear under this title. Until then, all you need is a heading with a “TBD” indication.

A Sample UX Research Plan

XYZ Phone Data-Entry Usability Test

By John Smith-Kline, Usability Researcher, jskline@example.com

Stakeholders: Wanda Verdi (PM), Sam Crouch (Lead Engineer)

Last updated: 13 January 2012

Background Since January 2009, when the XYZ Phone was introduced to the world, particularly after its market release, journalists, bloggers, industry experts, other stakeholders and customers have privately and publicly expressed negative opinions about the XYZ Phone’s keyboard. These views suggest that the keyboard is hard to use and that it imposes a poor experience on customers. Some have claimed this as the main reason why the XYZ Phone will not succeed among business users. Over the years, several improvements have been made to data entry (such as using horizontal keyboards for most features), to no avail.

Goals Identify the strengths and weaknesses of data entry on the XYZ Phone, and provide opportunities for improvement.

Research questions

1. How do people enter data on the XYZ Phone?
2. What is the learning curve of new XYZ Phone users when they enter data?
3. What are the most common errors users make when entering data?

Methodology A usability study will be held in our lab with 20 participants. Each participant session will last 60 minutes and will include a short briefing, an interview, a task performance with an XYZ Phone and a debriefing. Among the tasks: enter an email subject heading, compose a long email, check news updates on CNN’s website, create a calendar event and more.

Participants These are the primary characteristics of the study’s participants:

• Business user,
• Age 22 to 55,
• Never used an XYZ Phone,
• Expressed interest in learning more about or purchasing an XYZ Phone,
• Uses the Web at least 10 hours a week.

[Link to a draft screener]

Schedule

• Recruiting: begins on November 12
• Study day: November 22
• Results delivery: December 2

Script TBD

Recap

A short plan that you and your stakeholders prepare together is key to a successful start of a UX research project.

• Boil down your collective knowledge, agreements and understanding of what will happen, why, with whom and when.
• Set the right expectations among stakeholders.
• Try to keep the plan to one page.
• Secure buy-in for the UX research by making it a team effort.
• The core of the plan is the list of questions you are trying to answer. Choose the right ones.

Happy planning!

(al) (fi) (il)

---

© Tomer Sharon for Smashing Magazine, 2012.

We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional” client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.” In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important” is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?”

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!” you position yourself as much more than just their “Web team” — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you” message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

How About You? Do You Deliver Exceptional Client Service?

I hope this article starts a conversation. How do you deliver exceptional client service? What tips can you share so that others can delight their own clients and offer them value beyond just products?

In this industry, we are always eager to share the latest tips and tricks on CSS, HTML, JavaScript, PHP or some other Web technology. Let’s also start to share tips on how to deliver exceptional client service, because success in this industry is about much more than developing great websites — it’s about developing great relationships.

(al)

---

© Jeremy Girard for Smashing Magazine, 2012.

Web design is a craft that is constantly evolving and yet also sometimes sabotaged. The moment a design is released, a new version is born. In the beginning, like a baby, it seems vulnerable and weak, but in time it grows up and becomes self-sufficient. Redesigning a website for its own sake doesn’t prove anything; quite the contrary, it reveals a lack of effectiveness on the part of the designer.

Product design is a craft in which new versions come to life with increasing difficulty. We can learn a thing or two from it when designing for the Web. First, let’s look at some examples.

• How many designs for the iPhone has Apple released since 2007? The answer is one, with only two tweaks. How many Motorola phones for Android can you find on the market right now? Thirteen, not counting the old models.
• How many designs of the Mini Cooper do you know of? Just that one brave design that has continually evolved since 1959! How many Toyota Corolla models can you count since 1967? Nineteen.
• Zippo lighters have retained their appeal since 1933!

Forget marketing, technical specs and hardware. Products such as the iPhone, the Mini Cooper and the Zippo lighter have become wildly successful because of their outstanding design. Such massive success springs from three sources: the designer, sticking to the scope and iteration. These aspects can help us in Web design, too. In this article, we’ll look at what we can learn from successful product design.

The Ability Of The Designer

Zippo lighters have remained elegant and reliable through time. (Image: cell105)

Do you trust your instincts? You should! Because when you see a design, you judge its attractiveness in less than a second. We all know what we like, even if we can’t always explain it. It’s about aesthetics. Aesthetics is a child of harmony, and harmony is not magic. It can be achieved when the designer embraces certain principles, such as balance, contrast and dominance. Becoming a fantastic designer, though, requires more than pure technique. It requires that you see the context and make decisions accordingly.

A couple of comments by Karim Rashid, featured in the documentary Objectified are fascinating and revealing. First, Rashid talks about a stereo that he loved as a teenager:

It was a white kind of bubble stereo with these two bubble white speakers. And it was probably very inexpensive — it was a real democratic product, and it had a turntable and the whole thing built in. It was a beautiful thing. Looking back and thinking why it was a beautiful thing, it was very self-contained, and the message was very strong and very simple, and at the same time it was very human. There was a quality about it.

See? A democratic, self-contained, human, simple thing with a strong message.

Here is Rashid again on thinking outside the box:

Why do we feel like we need to keep revisiting the archetype over and over and over again? Digital cameras, for example, [whose] format, proportion, the fact that they’re a horizontal rectangle, are a model of the original silver film camera. So, in turn it’s the film that defined the shape of the camera. All of a sudden, our digital cameras have no film. So, why on earth do we have the same shape we have?

How is it that Karim Rashid extracts such clear conclusions? What hinders us from doing the same? And not just in theory. Let’s do it for real. The next time you are about to make an important design decision, stop and ask yourself, What would I do if I were Dieter Rams or Jonathan Ive or — since you’re a Web designer — Douglas Bowman?

Asking this kind of question briefly expands our skills of judgment and makes us ultra-alert. Doing it regularly can drastically heighten our perception, values and actions as designers. Is this enough? No, but it is the beginning of a beautiful relationship with design.

And the Zippo lighter? It looks both friendly and solid, a comrade that needs your attention in order to keep working. Ιt has its own scent; it’s windproof; and above all, the sound when you flip open the lid is distinctive. And if you’ve owned a Zippo for a while, you must have noticed that it learns how you touch it when you light it.

All together, a Zippo is a product of craft — just as our designs for the Web should be. This is as simple and as hard as it sounds.

Focusing On The Scope

Once a Mini, always a Mini. (Image: Shelley Gibb)

Let’s go back to cars for a moment.

As noted earlier, the Corolla models of Toyota are nothing spectacular in their design. But what is a Toyota car known for? It’s a reliable, relatively cheap family car. Is Toyota successful? You bet!

What’s a Mini Cooper? It’s a beautiful small car that appeals mostly to young people. Is it successful? Of course, it is.

Cars are complicated machines. They do more than transport people. If a Toyota were as fancy as the Mini, then it wouldn’t be affordable. If a Mini were reimagined as a family car, then it would lose some of its charm. Oversimplification? Perhaps. But you get the point.

There’s a scope behind each product. As long as the scope is met, the product will be effective and remain on the market. The same happens in Web design.

Consider a metaphor. The closest physical product to a website is a periodical. Take Wired magazine (the physical magazine, that is, not the website or iPad app, which have slightly different characteristics). I’ve been reading it for more than 10 years, and if I had to describe it succinctly I would say “forward-thinking and cool.” Wired reinvents itself every once in a while and persistently fine-tunes the design, but the scope remains the same. Excellent design and illustration, superbly written long articles and a ton of clever short ones serve the main purpose: to introduce its audience to a new era. Audiences change over time, and new eras dawn, but Wired remains. Why? Because it has always respected a higher purpose. Sure, many magazines are well designed, and enough of them have great content. But you rarely find one with a unique identity, an identity that can’t be easily copied.

Your probably less complicated Web project needs to perform similarly. You must define the objectives. The design must promote them. Good content should prevail. You know the rules; make sure to follow them. Moreover, know where to stop. If it’s a new idea with vague potential or yet another feature or a last-minute change, just say no.

Websites are like breathing organisms. They evolve; new features are added and others are dropped, but they never stay still. Or at least they shouldn’t. Thus, while a promising fresh idea shouldn’t be discarded, it should be held until the next major update.

Big, ambitious, well-funded websites often seem to lose focus. Their owners try to satisfy all requests. This is a recipe for disaster, because it creates unnecessary friction between everyone working on the project. It dulls the impact of the best features and, above all, the scope. Tension fills the air. The worst days are ahead.

Such practices have led to the infamous concept of design by committee. Simply put, if everything is important, then nothing is important.

Iterations

Is what Apple does magic? I think not. (Image: Jon Rawlinson)

Let’s talk Apple. Apple’s iconic design and its founder’s exceptional way of thinking have been overanalyzed lately.

No matter how many words we write about Steve Jobs, we still seem to explain away his success as being a kind of magic. But that’s plainly wrong. People are inclined towards the least complicated, least demanding explanation to a conundrum. It is written in our genes. We think more deeply only when there’s a serious reason to do so. (But I digress.)

So, let’s do away with what Adrian Slywotzky refers to as the “Eureka” myth:

Apple would love us to believe it’s all “Eureka.” But Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. Because Apple knows the more you compete inside, the less you’ll have to compete outside.

If Apple iterates so painstakingly, why shouldn’t we?

Inspiration for a great design roars when it comes. And implementing the idea brings a rush of enthusiasm. And our eyes sparkle when we anticipate outstanding success. And yet it rarely works that way.

Why? Because ideas and their execution are seldom free from flaws. You know the old cliché, “There is always room for improvement.” It still stands. There is always room for improvement, and accepting that your idea is the one that needs improvement takes courage. Demolishing your next great product in order to make it better takes nerve and self-discipline. But it also makes you wiser, and can dramatically improve the product.

Iterating extensively and in detail doesn’t depend on a certain type of project or a certain budget. It’s a tricky thing, because it forces us to confront our imperfect nature as human beings. To embrace our inner flaws is to walk the road of truth and maturity, silently, without making a show that we’re doing it.

This weight might feel a little heavy on our shoulders. If it does or if you dismiss Apple’s success, consider what Oliver Reichenstein, head of Information Architects, says about the iterations that his team makes in each development phase (this quote appears in the comments section):

It’s often almost impossible to explain easily why things look like they do, because we went through so many iterations, that it feels like explaining a chess game with all the ifs and whats.

The same goes when designing for the Web: there’s no excuse to avoid making as many iterations as we can.

Final Thoughts

When successful designers are asked where they seek inspiration, they often say something like, “Everywhere — I go for a walk and observe the world around me.” And it’s true. But what they don’t often say is that they also know what to observe and how to ignore the noise of the world.

There are many beautiful well-functioning products around us. Each has a story to tell, a story that is strongly attached to its design, its scope and the iterations that the designer took before releasing it to the world.

Take the Dyson vacuum cleaner. Its design is at least impressive, and its scope is clear (to suck dirt better than other cleaners and, thus, to make your environment healthier), and it took hundreds of prototypes for the designers to figure out how to make it work without a bag. The first Dyson vacuum cleaner was sold in 1970! To explore further and find similar products, just search for our three key words: “design scope iteration.”

Creating a lasting website is no easier than creating a lasting vacuum cleaner. But neither is it impossible. It requires a holistic approach, focus and maturity, just like the products we’ve looked at here. Not to mention, it requires a paradigm shift.

(al)

---

© Yiannis Konstantakopoulos for Smashing Magazine, 2012.

At the heart of every modern Mac and Linux computer is the “terminal.” The terminal evolved from the text-based computer terminals of the 1960s and ’70s, which themselves replaced punch cards as the main way to interact with a computer. It’s also known as the command shell, or simply “shell.” Windows has one, too, but it’s called the “command prompt” and is descended from the MS-DOS of the 1980s.

Mac, Linux and Windows computers today are mainly controlled through user-friendly feature-rich graphical user interfaces (GUIs), with menus, scroll bars and drag-and-drop interfaces. But all of the basic stuff can still be accomplished by typing text commands into the terminal or command prompt.

Using Finder or Explorer to open a folder is akin to the cd command (for “change directory”). Viewing the contents of a folder is like ls (short for “list,” or dir in Microsoft’s command prompt). And there are hundreds more for moving files, editing files, launching applications, manipulating images, backing up and restoring stuff, and much more.

So, why would anyone want to bother with these text commands when you can use the mouse instead? The main reason is that they are very useful for controlling remote computers on which a GUI is not available, particularly Web servers, and especially Linux Web servers that have been stripped of all unnecessary graphical software.

Sometimes these lean Linux servers are managed through a Web browser interface, such as cPanel or Plesk, letting you create databases, email addresses and websites; but sometimes that is not enough. This article provides a broad introduction to text commands and the situations in which they are useful. We’ll cover the following:

• Why knowing a few commands is useful;
• Issuing commands on your own computer;
• Using SSH to log into your Web server;
• Getting your bearings: pwd, cs ls;
• Viewing and moving files: cat, more, head, tail, mv, cp, rm;
• Searching for files: find;
• Looking through and editing files: grep, vi;
• Backing up and restoring files and databases: tar, zip, unzip, mysqldump, mysql;
• File permissions: chmod.

Why Knowing A Few Linux Commands Is Useful

As a website developer or server administrator, you would gain a big asset in becoming comfortable with these commands: for website emergencies, to configure a server and for your CV. It can also save you money. Many hosting companies offer fully managed servers but at a high monthly premium. Or else they charge by the hour for technical support.

Perhaps you need to archive some big files or make a change to the httpd.conf file or figure out why your website’s images have suddenly stopped loading. You might not want to pay $50 to your server’s administrator for a five-minute job. This article gives you the tools to make such changes yourself.

And why “Linux” commands? Two main types of servers are available today: Windows and UNIX. UNIX-based servers include Linux (which split off in 1991), Mac OS X (2002) and several more traditional UNIX systems, such as BSD, Solaris and HP-UX. Linux commands are basically UNIX commands and so will run on all of them. In fact, I use the term “Linux” here only because it is more common and less frightening than “UNIX.” Windows servers, on the other hand, have a much smaller market share and are more often controlled through GUIs, such as Remote Desktop and VNC, rather than the command line.

In fact, a November 2011 survey showed that Apache accounted for about 65% of all Web servers. Apache usually runs in the popular LAMP configuration: Linux, Apache, MySQL and PHP. Microsoft was a distant second, with 15%. Third place nginx runs on Linux, UNIX, Mac and Windows. So, the commands in this article will work on at least two thirds of all servers.

Issuing Commands To Your Own Computer

You can quickly experiment with text commands on your own computer. On Mac with OS X, go to Applications → Utilities, and run Terminal. On a PC with Windows, go to Start → All Programs → Accessories, and choose “Command Prompt.” On Ubuntu Linux, go to Applications → Accessories, and choose Terminal.

On Windows you should see this:

The Windows command prompt

This is the command line (i.e. shell, prompt or terminal) on your own computer. You can type dir on Windows or ls on Linux or Mac followed by “Enter” to see a list of the files in the current “directory” (i.e. folder, location or path).

All we will be doing for the rest of this article is opening up one of these terminals on a remote computer: your Web server.

You may have used VNC or Remote Desktop, which allow you to actually view the desktop on someone else’s computer: your screen shows their screen, your mouse controls their mouse, your keyboard mimics their keyboard.

The terminal is similar to this but without the fancy menus or scroll bars. If you were to plug a keyboard and screen into your Web server, sitting in a fireproof basement somewhere, you would probably see one of these terminals, waiting patiently for your user name and password.

Using SSH To Log Into Your Web Server

The application SSH, or Secure Shell, is used to log into Web servers. It often takes the same user name and password as FTP, but it has to be allowed by your host. If you have a dedicated Web server, it is probably already allowed. If you use cloud hosting, then you might need to request it first. If you are on shared hosting, you’ll definitely need to request it, and the administrator may refuse.

On Linux or Mac, open up Terminal as described above and type the following:

ssh -l username www.myserver.com

The -l stands for “log in as,” and your user name goes after it. If SSH is allowed, then it will ask for a password. If not, you’ll get an error message, like this one:

Running the ssh command and being denied access

On Windows, you will need to download some SSH software. Putty is a popular and easy choice. It downloads as a single EXE file, which you can save to your desktop and run right away. Type your website as the host name, check the SSH box under “Connection Type,” and click “Open.” It will ask for your user name and then your password.

Running Putty on Windows in order to SSH to your Web server

Once successfully logged in, you will usually see a welcome message. After that, you will be presented with a few letters and a $ sign (or a # sign if you have logged in as root). The letters often represent your user name and where you’ve come from, or the name of the server. A ~ indicates that you are in your home directory. The $ is the prompt; it indicates that you can start typing commands now, something like:

A successful SSH log-in to a Web server. The $ means we can start typing commands.

The next section introduces a few basic commands.

Getting Your Bearings

On Windows, when you go to “My Documents” from the Start menu, it opens your “My Documents” directory in Windows Explorer and shows the contents. If some nosy colleague walked by and asked “What directory are you in?” you could say “I’m in my documents.”

If you SSH’ed to a server as the user “admin,” you would land in admin’s home directory, probably /home/admin. You can verify this by typing the command pwd, which shows your current location (i.e. folder, directory or path).

The pwd command tells you where you are, cd changes the directory and ls shows the contents of a directory.

To change to another directory, use the cd command with the destination, like so:

cd /

This will change the directory to /, the top of the whole UNIX directory structure. The command ls lists the contents of the current directory, in this case /.

In the screenshot above, the terminal is color-coded. Dark-blue entries are subdirectories, and black entries are files. A lot of the interesting stuff on Web servers happens in the /etc, /home and /var directories. Using just cd and ls, you can explore your server and find out where stuff is.

When using cd, you can specify the new directory absolutely (beginning with a slash, like /var/www) or relative to your current location (without the initial slash). You can also go up a directory with two dots. Practice with the sequence below, pressing “Enter” after each command. Can you guess what the last command will tell you?

cd /var
ls
cd www
ls
cd ..
pwd

Viewing And Moving Files

On many Linux servers, websites are located in /var/www/vhosts. You can check on your server by doing the following:

cd /var/www/vhosts
ls

If you see a list of websites, you can move into one of them. Within the website’s main directory, you will probably see the same files that you see when you FTP to the website, things such as httpdocs (where your website’s files are), httpsdocs (if you have a separate secure website), conf (configuration files), statistics (logs and compiled statistics), error_docs, private and more.

You can then change into your website’s public-facing directory, which is myserver.com/httpdocs in this example:

cd myserver.com
ls
cd httpdocs
ls

Now you have arrived, and you can run a new command, cat, which displays the contents of a file. For instance, if you have an index.html file, run:

cat index.html

If your index.html file is more than a few lines long, it will rush past in a blur. You can use the more command to show it slowly, one page at time. After you type the command below, it will show you the first page. You can press the space bar to show the next page, “Enter” to show the next line, and Q to quit.

more index.html

You can also show just the first few or last few lines of a file with the head and tail commands. It shows 10 lines by default, but you can pass in any number:

head index.html
tail -20 index.html

If you would like to rename this file, use the mv command, short for “move”:

mv index.html indexold.html

Similarly, the cp is the copy command, and rm removes files.

cp index.html indexold.html
rm indexold.html

Below is a string of commands in action. In order, it confirms the current directory with pwd, looks at the contents with ls, views index.html with cat, then renames it with mv, and finally removes it with rm, with a lot of ls in between to show the changes.

The cat, mv and rm commands in action, for displaying, moving and then removing a file.

More Advanced Tip: Changing the Prompt

Note that in our initial examples, the full prompt included the current directory. For instance, in [admin@myserver /]$, the / indicated that the user was in the / directory. In the example directly above, it was removed, or else it would have crowded the screenshot by constantly saying [admin@myserver /var/www/vhosts/myserver.com/httpdocs]$.

You can change the prompt to whatever you want by setting the PS1 environment variable. Here are a couple of examples, the latter including the user, host and current directory:

PS1="[woohoooo ]$ "
PS1='[${USER}@${HOSTNAME} ${PWD}]$ '

Searching For Files

On big websites, files can get lost. Perhaps you vaguely remember uploading a new version of your client’s logo about four months ago, but it has since fallen out of favor and been replaced. Now, out of the blue, the client wants it back. You could download everything from the server using FTP and search the files using Finder or Explorer. Or you could log in and search using the command line.

The find command can search through files by name, size and modified time. If you just give it a directory, it will list everything that the directory contains. Try this:

find /var/www

You will probably see lots and lots of file names whizzing past. If you have many websites, it could continue for a couple of minutes. You can stop it by hitting Control + C (i.e. holding down the Control key on your keyboard and pressing the letter C). That’s the way to interrupt a Linux command. A more useful command would be:

find /var/www | more

The pipe symbol (|) takes the output of one command (in this case, the long list of files produced by find) and passes it to another command (in this case, more, which shows you one page of files at a time). As above, press the space bar to show the next page, and Q to quit.

To search for a specific file name, add -name and the file name. You can use * as a wild card (the backslash is not always necessary but is good practice with the find command). You can combine searches using -o (for “or”). If you leave out the -o, it becomes an “and.”

find /var/www -name logo.gif
find /var/www -name *.gif
find /var/www -name *.gif -o -name *.jpg

You can also search by size by adding -size. So, you could look for all GIFs between 5 and 10 KB:

find /var/www -name *.gif -size +5k -size -10k

Similarly, to find a file that was last changed between 90 and 180 days ago, you can use -ctime:

find /var/www -name *.gif -ctime +90 -ctime -180

In both of these cases, you will probably also want to know the actual file size and date last changed. For this, you can add -printf, which is similar to the C function printf in that you use the % sign to output various information. This command outputs the file size (up to 15 characters wide), the date and time changed (down to the nanosecond) and the file name:

find /var/www -name *.gif -size +5k -size -10k -ctime +90 -ctime -180 -printf "%10s  %c  %pn"

With that whopper, you have hopefully found the missing file. Here is an example:

Searching for all GIFs within a single website, and displaying the file sizes, changed times and file names.

Another useful parameter is -cmin, which lets you see files that have changed in the last few minutes. So, if something goes wrong on a website, you can run this to see everything that has changed in the last 10 minutes:

find /var/www -cmin -10 -printf "%c %pn"

This will show files and directories that have changed. Thus, it won’t show files that have been removed (because they are no longer there), but it will show the directories that they were removed from. To show only files, add -type f:

find /var/www -cmin -10 -type f -printf "%c %pn"

More Advanced Tip: Reading the Manual

I didn’t have to remember all of the variations above. I consulted the manual several times, like so:

man find

While reading a manual page, the controls are the same as more: space bar for paging, “Enter” to go forward one line and Q to quit. The up and down arrows also work. You can search within a page of the manual by typing / and a keyword, such as /printf. This will jump you to the next occurrence of that term. You can search backwards with ?printf, and you can repeat the search by pressing N.

Looking Through And Editing Files

Most visual code editors allow you to search through many files when you’re looking for a particular variable or bit of HTML. You can also do this directly on the server using the command grep. This is useful when something goes wrong on a complex website with hundreds of files and you have to find the error and fix it fast.

Let’s say you view the HTML source and see that the error happens right after <div id="left">. You can let grep do the searching for you. Give it the thing to be searched for and the files to search in. These commands change to the website directory and grep through all files ending in php. You need to put quotes around the HTML because it contains spaces, and the inner quotes have to be escaped with backslashes:

cd /var/www/vhosts/myserver.com/httpdocs/
grep "<div id="left">" *.php

This will tell you which files in the current directory contain that bit of HTML. If you want to search in subdirectories, you can use the -r option with a directory at the end, instead of a list of files. The single dot tells it to start in the current directory.

grep -r "<div id="left">" .

Alternatively, you could use the find command from above to tell it which files to look in. To put a command within a command, enclose it in back apostrophes. The following searches only for the HTML in PHP files modified in the last 14 days:

grep "<div id="left">" `find . -name *.php -ctime -14`

You can also add -n to show the line numbers, as in this example:

Searching for a bit of HTML within the PHP files in the current directory

And how do you quickly fix an error when you find it? To do that, you will need to start up a Linux text editor. Different editors are available, such as pico and emacs, but the one that is guaranteed to be there is vi. To edit a file, type vi and the file name:

vi index.php

vi is a complex editor. It can do most of the amazing things that a fully featured visual editor can do, but without the mouse. In brief, you can use the arrow keys to get around the file (or H, J, K and L on very basic terminals where even the arrow keys don’t work). To delete a character, press X. To delete a whole line, press DD. To insert a new character, press I. This takes you into “insert mode,” and you can start typing. Press the Escape key when finished to go back to “command mode.” Within command mode, type :w to save (i.e. write) the file and :q to quit, or :wq to do both at the same time.

The vi editor also supports copying and pasting, undoing and redoing, searching and replacing, opening multiple files and copying between them, etc. To find out how, look for a good vi tutorial (such as “Mastering the VI Editor”). Note also that on many computers, vi is just a shortcut to vim, which stands for “vi improved,” so you can follow vim tutorials, too.

Editing files with the vi text editor

More Advanced Tip: Tab Completion

When changing directories and editing files, you might get tired of having to type the file names in full over and over again. The Terminal loses some of its shine this way. This can be avoided with command-line completion, performed using tabs.

It works like this: start typing the name of a file or a command, and then press Tab. If there is only one possibility, Linux will fill in as much as it can. If nothing happens, it means there is more than one possibility. Press Tab again to show all of the possibilities.

For example, if above I had typed…

vi i

… And then pressed Tab, it would have filled in the rest for me…

vi index.php

… Unless several files started with I. In that case, I would have had to press Tab again to see the options.

Backing Up And Restoring Files And Databases

Some Linux servers do support the zip command, but all of them support tar, whose original purpose was to archive data to magnetic tapes. To back up a directory, specify the backup file name and the directory to back up, such as:

cd /var/www/vhosts/myserver.com/httpdocs/
tar czf /tmp/backup.tgz .

The czf means “create zipped file.” The single dot stands for the current directory. You can also back up individual files. To back up just things changed in the last day, add the find command:

tar cfz /tmp/backup.tgz `find . -type f -ctime -1`

Both of these commands put the actual backup file in the temporary /tmp directory — if the backup file is in the same directory that you are backing up, it will cause an error. You can move the file to where you need it afterwards. To see what is in an archive, use the tzf options instead:

tar tfz /tmp/backup.tgz

Creating and showing the contents of a backup file using tar

To restore things, use xzf, for “extract from zipped file.” First, run a listing as above to check what’s in there, and then restore one or more of the files. The second command restores all of the files from the archive into the current directory:

tar xfz /tmp/backup.tgz ./index.php ./test.php
tar xfz /tmp/backup.tgz

If your server has the zip command, then run these commands to do the same thing:

cd /var/www/vhosts/myserver.com/httpdocs/
zip -r /tmp/backup.zip .
zip -r /tmp/backup.zip `find . -type f -ctime -1`
unzip -l /tmp/backup.zip
unzip /tmp/backup.zip test.php
unzip /tmp/backup.zip

If your Web server uses MySQL, then you might want to regularly back up your data. For this, there is the mysqldump command. The format of the command is:

mysqldump --user="username" --password="password" --add-drop-table database

Replace the user name, password and database with your values. Instead of specifying a database, you can use -A to dump all databases. If you get errors about table locking, you can add --single-transaction. Once you submit the user name and password, this will output a load of SQL in a long blur. To save the output to a file, you will need to use the > symbol. This sends the output of a command to a file.

mysqldump --user="username" --password="password" --add-drop-table database > /tmp/db.sql

To restore a database backup, you can use the mysql command. This command lets you run SQL statements from the command line. For example, the following command gets you into the database:

mysql --user="username" --password="password" dbname

At the mysql> prompt, you can type an SQL statement such as:

mysql> SHOW TABLES;
mysql> SELECT * FROM customers;

For restoring, you’ll need to use the pipe (|), which will send the output from one command into another. In this case, cat will output the database backup file and send it into the mysql command:

cat /tmp/db.sql | mysql --user="username" --password="password" dbname

If people are looking over your shoulder while you’re doing this, you might not want to type the password directly into the command. In this case, just leave it out, and mysql or mysqldump will ask for it instead.

cat /tmp/db.sql | mysql --user="username" --password dbname

Once you’ve created the database backup file, you can include it in the backups we did above:

tar czf /tmp/backup.tgz . /tmp/db.sql

More Advanced Tip: Hidden Files and Wildcards

Many websites use a file called .htaccess to implement URL rewriting and password protection. In UNIX, all files starting with a single dot are hidden. They won’t show up when you do ls, and they won’t get backed up if you do this:

tar czf /tmp/backup.tgz *

The * is a wildcard. Before the command executes, the * is replaced with all non-hidden files in the current directory. To include hidden files as well, it’s better to back up the whole directory as above using a single dot:

tar czf /tmp/backup.tgz .

To show hidden files when doing a directory listing, add -a to the command:

ls -a
ls -la

File Permissions

If you use FTP regularly to upload files to websites, then you might be familiar with permissions. All files and directories on Linux (and Mac, Windows and other UNIX systems) have an owner, a group and a set of flags specifying who can read, write and execute them.

The list of user names (and, thus, potential file owners) on a UNIX system is stored in the file /etc/passwd. You can try:

more /etc/passwd

The Apache Web server is started by a command when the Web server boots up. But the user who starts Apache is often a restricted and unprivileged user, such as nobody or apache or www-data. This is for security reasons, to prevent someone from hacking into the website and then gaining control of the whole server. You can find out who that user is by running the command below and looking in the first column. The ps aux command shows all of the processes running on the server, and grep shows only processes that contain the word “apache.”

ps aux | grep apache

This can cause conflicts, though. If you upload a file to a website via FTP and log in as admin, then the file will be owned by admin. If Apache was started by the user named nobody, then Apache might not be able to read that file and won’t be able to send it to any users who request it when viewing the website. Instead, users will see a broken image or a message such as “403 Forbidden. You don’t have permission to access that file.”

A subtler and more common problem is when an image can be viewed but not overwritten or removed via the website’s content management system (CMS). In this case, the user nobody can read the file but can’t write to it.

You can view permissions using the ls command with an extra -l, like so:

ls -l

The command ls -l shows information about permissions, owners, size and date.

This directory contains three files, with three subdirectories shown in green. The first letter on each line indicates the type: d for directory and - for normal file. The next nine letters are the permissions; they indicate the read, write and execute permissions for the owner, group and everyone else. After the number (which represents the size) is the owner and group for the file. These files are all owned by admin. This is followed by the file size (less useful for directories) and the date and time of the last modification.

Below is another example of three files in an images subdirectory. Two of the files were uploaded by admin via FTP, and Apache was started by the user www-data. One of the files will be unviewable through a Web browser. Which do you think it is?

The answer is bg.jpg. Both bg.jpg and logo2.gif have the same permissions: only the owner can read and write them. The logo2.gif file is OK because the owner is www-data, so that file can be accessed, read and returned by Apache. The logo.gif file is also OK because it has r in all three permissions (i.e. owner, group and everyone else). But bg.jpg will fail because only the user admin can read it, not the user who started Apache. If you were to access that file in a Web browser, you would see something like this:

What happens when you try to access a file without the correct permissions in a browser.

These sorts of errors can be resolved with the chmod command, which changes file permissions. The three sets of permissions are represented in commands with u (“user” or owner), g (“group”), o (“other” or everyone else) or a (“all”). So, to enable all users to read bg.jpg, either of these would work:

chmod go+r images/bg.jpg
chmod a+r images/bg.jpg

If this file were also part of a CMS, then you’d have to also add write permissions before the CMS could overwrite it:

chmod a+rw images/bg.jpg

You can also make these changes to all files in all of the subdirectories by adding -R. This recursive operation is not supported by some FTP programs and so is a useful command-line tool:

chmod -R a+rw images/

Directories also need the x (“execute” permission), but files generally don’t (unless they are in a cgi-bin). So, you can give everything rwx (read, write and execute) permissions and then take away the x from the files:

chmod -R a+rwx images/
chmod -R a-x `find images/ -type f`

However, this does leave everything rather open, making it easier for hackers to gain a foothold. Ideally, your set of permissions should be as restrictive as possible. Files should be writable by the Apache user only when needed by the CMS.

More Advanced Tip: Chown and the Superuser

Another useful permissions command is chown. It changes the owner of a file. However, you have to be logged in as a user with sufficient privileges (such as root) in order to run it. To make www-data the owner of bg.jpg, run this:

chown www-data images/bg.jpg

This will probably return “Permission denied.” You have to run the command as the superuser. For this, you will need to find the root password for your server, and then run the following:

sudo chown www-data images/bg.jpg

You will definitely need to be the superuser if you want to edit configuration files, such as Apache’s:

sudo vi /etc/httpd/conf/httpd.conf

If you want to become the superuser for every command, run this:

su

This is dangerous, though, because you could easily accidentally remove things — especially if you are using the rm command, and particularly if you’re using it in recursive mode (rm -r), and most especially if you also force the changes and ignore any warnings (rm -r -f).

Conclusion

This article has introduced some very useful Linux commands, a potential asset for any aspiring Web worker and a surefire way to impress a dinner date.

For a few more commands related specifically to website crashes, check out the Smashing Magazine article “What to Do When Your Website Goes Down.” For a broader view, try this list of Linux commands. And the “Mastering the VI Editor” tutorial mentioned above explains vi well.

Hopefully, you now have the tools and confidence to pitch in the next time one of your websites has a problem.

(al)

---

© Paul Tero for Smashing Magazine, 2012.

At Smashing Magazine, we are big proponents of diversity and sharing. We encourage designers and developers worldwide to step up and use Smashing Magazine as a platform to share their opinions, ideas or techniques. Our editorial process is quite evolved, yet we are very open to users’ suggestions. In fact, if an author has something to say, we try to help them collect their thoughts, strengthen their points and sharpen their language.

As it is, Smashing Magazine is in English; we communicate in English in our articles, through our comments, in social channels — everywhere. We have a quite good overview of what’s happening in the Web design scene among creative professionals where English is prevalent. When it comes to non-English Web design communities, we have almost no idea what’s going on there… it’s as if they never existed.

Last year, I was lucky to have attended quite a few conferences across Europe. I wanted to get a better understanding of what’s going on in those countries, how evolved their industry is and, more importantly, what techniques and tools they have developed and use in their work. Among all the small talks and casual discussions I had, I was impressed by the creative energy of designs in Czech Republic, by the pursuit of optimization of Russian projects, by the attention to professionalism in Norway and by the abundant democratic design culture of Swedes. Before I spoke to all those people and had a look at their projects, I had no idea about all the fantastic small projects and techniques they developed.

Web design conferences offer fantastic opportunities for building connections in our community. Also, they are great for exploring innovative techniques and recent developments of our craft. Image credit

In fact, it appeared to me that there is so much going on in these non-English speaking communities, yet many of them are closed and separate, almost inaccessible to the rest of the world. For instance, in Russia there are fantastic design blogs like Habrahabr.ru where creative professionals share their thoughts, techniques and tools, yet because the blog is in Russian, it’s invisible for most creative professionals worldwide. Fortunately, Russian is my native language so I can read and write in Russian, but not everybody is as lucky as I am.

In my discussions with Christian Heilmann who has been traveling around the world much more than I have, the same holds true for many countries in Eastern Europe, Asia and South America, partly because of the language barrier.

We can change that. We invite all professionals from all parts of the world to get in touch with us. If you have been writing in Russian, Czech or any other language, but have a good command of English, we’d be more than happy to learn from your insights and share your expertise, techniques or tools with our worldwide audience. Our proofreaders will be more than happy to brush up your English writing, so it surely isn’t a reason not to write.

We’d Love To Learn From You!

We are always happy to support designers and developers who contribute to our fantastic Web design community and present tools, goodies, templates, articles or anything else for everybody to use and learn from. You could write about:

• case-studies from your work, the decisions made and decisions rejected,
• front-end / back-end techniques you’ve developed or implemented in your projects,
• expert advice for beginners or professionals that you’ve gathered over years of professional work,
• the cultural differences that designers worldwide should be aware of when working on projects targeted at your country,
• open source projects, tools and other resources you’ve released or contributed to.

Of course, we will publish quality material and you will get paid, too. Even if you don’t want to write an article, we will do our best to support you on Twitter, Facebook, or in our email newsletter. And if you don’t feel that Smashing Magazine fits you for one reason or another, feel free to go ahead and contact other publications, we’re perfectly fine with that.

Spread the word!

If you don’t have time to write in English, here is what you can do to help:

• If writing isn’t for you, draw the attention of your colleagues to this post and encourage them to share their insights,
• Translate this article into your native language and publish it in popular design blogs or magazines in your country,
• Bring up the topic during your next meetup, bar-camp or mini-conference.

Let’s Get In Touch!

Please drop us an email at ideas@smashingmagazine.com and tell us a bit about yourself, your expertise and the projects you’ve contributed to. Share your techniques and your thoughts! And if you’re organizing a social event, please invite foreign speakers and attendees to join and encourage them to share their expertise as well.

I sincerely believe that we can all benefit from diversity, and we can enrich our toolboxes, workflows and perhaps even our mindset with new viewpoints and insights. We are looking forward to your emails!

(jvb)

---

© Vitaly Friedman for Smashing Magazine, 2012.

In all the years that I’ve been using Adobe Fireworks, I have always had to perform one task in every project: remove the background from a logo. Most of the time, it’s because the client doesn’t have the original raw file that their previous designer used to create their company’s logo, or because I need to work with a bunch of affiliate logos that I downloaded from the Web and not all of them have transparency information.

With a rectangular or elliptical logo, I just trace over it with a shape and turn it into a mask. But when tracing a mask is impractical (as with complex shapes or text-based logos), I used to follow a method that I devised for extracting logos in Adobe Fireworks that doesn’t rely on the dreaded Magic Wand tool. This method took advantage of a few Live Effects to remove the background and retain the logo form. It was simple, but also primitive: it worked perfectly only when the contrast between the logo and background was already ideal and the logo form had only one color. Otherwise, I ended up with jagged edges.

I have since much improved the process of handling multi-colored logos and non-white backgrounds; it works best on solid-colored text and shapes with clear outlines. Because it involves Fireworks’ awesome features and tools, this method is a quick and easy solution that you can incorporate in your Web and interface design workflows.

And yes, still no Magic Wand tool.

Let’s Begin!

To start off, fire up Adobe Fireworks and load your logo image on the canvas. In the example below, I created a three-color logo text, surrounded by a blu-ish hue, on a canvas with a transparent background.

Create a back-up of the image by selecting it using the Pointer tool (V on the keyboard), cloning it (Shift + D, or in the menu Edit → Clone) and hiding it (L, or View → Hide Selection). You will need this back-up near the end of the process, but for now, keep it hidden.

Place the logo image on the Fireworks canvas.

Tip: You can also use Duplicate (Ctrl/Cmd + Alt/Opt + D, or Edit → Duplicate) instead of Clone to copy the image. The difference is that Duplicate offsets the position of the copied object by 10 pixels down and 10 pixels to the right, whereas Clone creates the copy in the same exact position as the original object.

The original image and hidden back-up in the Layers panel.

Step 1: Breakdown

To be able to deal with the different colors of the logo separately, we first need to break the logo down into “pieces,” one foreground color per piece. Use the Pointer tool to select the logo image, and use one or more bitmap selection tools (Marquee or Oval Marquee (M), Lasso or Polygon Lasso (L) — set the Edge to “Hard” in the Properties panel) to select a piece of the logo. Make sure the piece you select has only one color (not counting the image’s background). Cut and paste the selected piece (Ctrl/Cmd + X, and then Ctrl/Cmd + V) to separate it from the rest. Do this for each piece; cancel the Marquee selection (Ctrl/Cmd + D or Esc, or in the menu Select → Deselect) and switch back to the Pointer tool (V) if you need to select the logo image again.

Tip: Double-click on an image object to quickly switch from Pointer tool to Marquee tool.

Select a piece of the logo.

In our example, I’ve used a (rectangular) Marquee, but you can use the Oval Marquee for circular or elliptical selections, and the Lasso or Polygon Lasso for irregular shapes.

Cut up the logo into pieces.

If your logo has only one color, skip this step and treat the whole image as your only piece.

Step 2: Desaturate

Select all of the pieces of the logo image using the Pointer tool, and apply a Hue/Saturation filter (in the Properties panel, go to Filters: [+] → Adjust Color → Hue/Saturation…). Drag the Saturation slider all the way to the left (-100) to reduce the logo to grayscale. Make sure that Lightness is set to 0 and that Colorize is unchecked before clicking “OK.”

Desaturate all pieces.

A Note on Filters

Adobe Fireworks features two almost identical sets of filters: one in the application menu and another in the Properties panel (the Live Filters).

Filters menu vs. Live Filters in the Properties panel

Filters applied using the application menu are “destructive,” in that they can’t be undone by any other means except Undo (Ctrl/Cmd + Z, or in the menu Edit → Undo). Furthermore, target vector objects (shapes and text) need to be converted into bitmap objects before they can work their magic, which makes editing the original object harder. To adjust the effect of the filter that you just applied, you will need to undo that step and reapply the filter.

To maintain the ability to easily edit an object and its filters’ properties, always use the Live Filters in the Properties panel. This way, you can make changes to the original object, and the filters will adjust automatically. You will also be able to change a filter’s settings at any time, or disable or remove the filter, without adversely affecting the other filters.

Step 3: Levels

What makes this newer method different is the use of the Levels filter (as opposed to the Brightness/Contrast filter of the older method) to push the dark grays into pure black and the light grays into white, while maintaining the smooth edges of the logo’s curves.

Select one piece of the logo image using the Pointer tool, and apply a Levels filter (in the Properties panel, go to Filters: [+] → Adjust Color → Levels…). In the Levels dialog, set the Channel drop-down to “RGB” (which is the default). Below the histogram under Input Levels, move the left and right arrow sliders to change the intensity of the dark and light areas of the image piece, respectively. Make sure that the Preview checkbox is checked, so that you can see your changes in real time. Move the left arrow slider just enough to the left to get the logo part to show up completely black, but not so far left that the edges of the logo become jagged. The same goes for the right arrow slider: move it right to get a pure white background. You can leave the center slider untouched. Click “OK” to apply the filter.

Apply the Levels filter to each piece.

You can check the accuracy of your filter values by bringing up the Info panel (Shift + Alt/Opt + F12, or in the menu Window → Info) and hovering over the black area to obtain its RGB color value. The RGB values should all be set to 00; otherwise, go back to the Levels dialog and readjust the slider.

Use the Info panel’s RGBA reading to check the color values.

Do the same for the white area, this time setting all three RGB values to FF in the color reading.

You can further fine-tune the levels by changing the number values in the left and right text boxes in the Input Levels dialog, which correspond to the left and right sliders in the visual graph. Increase the value of the left text box to darken the dark-gray areas until all three RGB values are set to 00 in the Info panel; decrease the values if the edges of the logo become too jagged. The inverse is true for the right text box. This allows you to get pure black and white colors, while keeping the edges of the logo as smooth as possible.

Repeat the whole process in step 3 for all other image pieces.

Pieces with different settings in the Levels filter. Notice the same rightmost value across all instances, corresponding to the same background color.

Bonus side effect: If your original logo image has compression artifacts, this step could greatly reduce them.

Step 4: Alpha Transparency

Once all of your image’s pieces have been “leveled” into black and white, use the Pointer tool to select an image piece and apply a “Convert to Alpha” filter (in the Properties panel, go to Filters: [+] → Other → Convert to Alpha). Doing this step separately per piece is important because each piece has a different setting in the Levels filter. If you were to apply a new filter to all pieces at once, Fireworks would equalize the settings for all of the other filters present.

Apply a “Convert to Alpha” filter to each piece.

In this step, you will again be able to check for the accuracy of your settings for the Levels filter; if the black area of an image piece is not completely black, it will show up as slightly transparent once the Alpha filter is applied. (This is where the checkerboard background of the canvas comes in handy.) Also, if the background is not completely white, you’ll see it faintly after converting the image piece to alpha.

Applying the “Convert to Alpha” filter to all pieces.

Step 5: Recolor

At this point, you have successfully extracted the logo form from its background. The next step is to bring back the original colors. To do this, open the Layers panel (F2, or in the menu Window → Layers), and look for the object that you hid at the beginning of this tutorial. Click on the visibility box at the left end of that object to make it visible again. Nudge it down so that it’s below the processed logo pieces and in clear view. Use the Pointer tool to select an image piece and apply a Color Fill filter (in the Properties panel, go to Filters: [+] → Adjust Color → Color Fill). In the Color Fill settings, click on the color swatch, and sample the corresponding color from the original logo image. Do the same for all other image pieces.

Apply a Color Fill filter to the first piece, picking the color from the original logo image.

To sample a color for the Color Fill filter: 1. Click on the color swatch in the filter dialog, 2. Click on the part of the image whose color you want to sample, 3. The color swatch will update with the new color.

Step 6: Convert To Symbol

Once you have recolored all of the pieces, select the original logo image with the Pointer tool and hide it (Ctrl/Cmd + L, or in the menu View → Hide Selection). You can also click on the eye icon of that object in the Layers panel to hide it. Select all of the image pieces using the Pointer tool, and convert them into a symbol (F8, or Modify → Symbol → Convert to Symbol…) before using it in your layout, so that new filter changes affect the new logo as a whole.

The Convert to Symbol dialog.

If you wish to make changes to the objects inside the symbol, you can do one of the following:

• With the instance of the symbol selected, go to Modify → Symbol → Edit Symbol;
• Right-click on the instance of the symbol, and select Symbol → Edit Symbol;
• Double-click on the instance of the symbol.

All logo pieces recolored and converted into a Symbol.

Taking It Further

You now have a version of the logo that you can set against any type of background: solid, gradient, textured or tiled. You can even use it as a bitmap mask over a photo, pattern or gradient if you want a different look. To do this, you’ll need to flatten the logo symbol first (Ctrl/Cmd + Alt/Opt + Shift + Z, or in the menu Modify → Flatten Selection), but you can always bring back your final logo by dragging an instance of the symbol from the Document Library panel (F11, or Window → Document Library) onto the canvas.

The final result.

If you are feeling adventurous, you could try turning it into a vector object using the Magic Wand tool first (W) and then running the “Convert Marquee to Path” command (Select → Convert Marquee to Path). Your mileage may vary, though: “Convert Marquee to Path” doesn’t always play well with complex shapes, but you can always tweak the vector paths that are created by that command until they match the logo.

(al) (mb) (vf)

Downloads

Need a sample to study? Download the sample archive for this tutorial (ZIP file, 57.6 KB), containing the Fireworks PNG (created in Adobe Fw CS5).

Further Reading

• “Rapid Fire #8: Extracting Logos,” SixThings My original method for extracting logos.
• “About Live Filters,” Adobe Fireworks CS5 Help All about Live Filters.
• “Symbols,” Adobe Fireworks CS5 Help Working with the Symbols feature.
• “Select Pixels,” Adobe Fireworks CS5 Help A rundown of the different pixel-selection tools.
• “Working with masks in Adobe Fireworks,” Adobe Devnet An excellent video tutorial (by Jim Babbage).

---

Smashing Is Looking For Experts On Fireworks, Photoshop & Illustrator

As our crafts mature, so do our tools. Fireworks, Photoshop and Illustrator are powerful tools that we, as designers, use on a regular basis. Fireworks is surely more flexible for Web at times (and UI/screen design in general), since it is dedicated specifically to the Web designer’s needs. And yet, it is underrated by many. We should all indeed be more open to try out new and different tools and share the techniques and our experiences with the community.

We’d love to cover more articles on Fireworks, Photoshop and Illustrator explaining useful techniques, tips and “lessons learned” from professional designers. So, if you:

• Have a solid knowledge of at least one of these tools,
• Have a solid experience in design (especially Web/screen/mobile),
• Have a couple of articles published on any of the tools mentioned,
• Or perhaps have even released some extensions or tools for Fireworks, Photoshop or Illustrator…

Then please drop us an email at ideas@smashingmagazine.com. Please include details about your experience, examples of your work, links to your articles and your article ideas (at least two). Of course, all authors get paid :-)

We look forward to hearing from you!

— Smashing Editorial Team

---

© Jose Olarte for Smashing Magazine, 2012.

Integrating social media services in your website design is vital if you want to make it easy for readers to share your content. While some users are happy with the social media buttons that come built into their design template, the majority of WordPress users install a plugin to automatically embed sharing links on their pages. Many of you will find that a plugin does exactly what you need; others not so much. Some are poorly coded, and most include services that you just don’t need. And while some great social media plugins are out there, they don’t integrate with every WordPress design.

If you aren’t comfortable editing your WordPress templates, a plugin is probably the best solution. If you are comfortable making a few edits to your theme, then consider manually integrating social media so that you have more control over what services appear on your website.

Today, we’ll show you how to manually integrate the three most popular social media services on your website: Twitter, Facebook and Google+. First, you’ll learn how to integrate Facebook comments on your WordPress website, to make it easier for readers to discuss your posts. Then, we’ll show you the most common ways to display your latest tweets in the sidebar, which should encourage more people to follow you on Twitter. Finally, we’ll show you how to add sharing buttons for all three social media services to your home page, posts and pages.

Please make sure to back up all of your template files before making any changes, so that you can revert back if something goes wrong. Testing your changes in a non-production area first would also be prudent.

Integrate Facebook Comments On Your Website

Because most people are signed into Facebook when they browse the Web, enabling Facebook comments on your website is a great way to encourage people to leave comments. It also curbs spam. While many solutions purport to reduce spam comments on WordPress, most are either ineffective or frustrate visitors by blocking legitimate comments.

Feature-rich commenting solutions such as IntenseDebate and Disqus have benefits, of course, because they allow users to comment using Facebook and a number of other services; but before visitors can comment, they have to grant access to the application, an additional step that discourages some from commenting. By comparison, integrating Facebook comments directly enables visitors to comment with no fuss. Also, this commenting system allows users to comment by signing into Facebook, Yahoo, AOL or Hotmail.

Before integrating Facebook on WordPress Mods at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow and tried a few plugins, such as Facebook Comments For WordPress. The reality, though, is that the official Facebook comment plugin is the quickest and easiest way to add Facebook comments to your website.

Simply follow the steps below to get up and running.

1. Create a Facebook Application

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application page. This step is required, whether you add Facebook comments manually using a third-party plugin or with the official Facebook plugin.

Simply click on the “+ Create New App” button on the Facebook Application page, and enter a unique name for your application in the “App Display Name” field. The “App Namespace” field doesn’t have to be filled in for Facebook comments (it’s used with the Facebook Open Graph Protocol).

You will then be provided with an “App ID/API key” and an “App secret key.” You don’t need to remember these numbers because the official Facebook comments plugin automatically inserts them into the code that you need to add to your website.

2. Add the Code to Your Website

Next, go back to the Facebook Comments plugin page and get the code for your website. The box allows you to change the URL on which comments will be placed, the number of comments to be shown, the width of the box and the color scheme (light or dark).

You don’t have to worry about what you enter in the box because all of the attributes can be modified manually. And it doesn’t matter what URL you enter because we will be replacing it later with the WordPress permalink:

• href The URL for this Comments plugin. News feed stories on Facebook will link to this URL.
• width The width of the plugin in pixels. The minimum recommended width is 400 pixels.
• colorscheme The color scheme for the plugin (either light or dark).
• num_posts The number of comments to show by default. The default is 10, and the minimum is 1.
• mobile (beta) Whether to show the mobile version. The default is false.

When you click on the “Get Code” button, a box will appear with your plugin code (choose the HTML5 option, because FBML is being deprecated). Make sure to select the application that you set up earlier for your comments so that the correct application ID is added to the code.

Insert the first piece of code directly after the <body> tag in your header.php template:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Put the second line of code where you want to show the comments. Make sure the static URL is replaced with the WordPress permalink (<?php the_permalink() ?>) so that comments show correctly on every page of your website.

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="15" data-width="500"></div>

To put Facebook comments above WordPress comments, add the above code just below the line that reads <!-- You can start editing here. --> in the comments.php template. To put Facebook comments below WordPress comments, add the above code below the </form> tag (again in the comments.php template).

If you plan to completely replace your WordPress comments with Facebook comments, simply replace the call to your comments.php template with the call to your Facebook comments. For example, to replace comments in posts, simply add the code to the single.php template. Similarly, edit the page.php template to show Facebook comments on pages.

Your should now see the Facebook comments box displayed on your website. To get an update whenever someone leaves a comment using Facebook, add yourself as a moderator to your application on the Comment Moderation tool page.

Show Your Latest Tweets In The Sidebar

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

Display Your Latest Tweets Manually

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks. His RSS fetching snippet is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter account is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (where xxxxx is your Twitter user name). For the tweets that you favorite, use http://twitter.com/favorites/xxxxx.rss. For example, the RSS for the latest tweets from Smashing Magazine is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag; and to display only the favorites, https://twitter.com/favorites/smashingmag.rss. Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

For a more stylish way to display tweets manually, check out Martin Angelov’s tutorial “Display Your Favorite Tweets Using PHP and jQuery,” or Sea of Cloud’s “Javascript Plugin Solution.”

Display Your Latest Tweets Using the Official Twitter Widget

The official Twitter profile widget looks great and is easy to customize. You can define the number of tweets to display and whether the box should expand to show all tweets or provide a scroll bar.

The dimensions can be adjusted manually, or you can use an auto-width option. The color scheme can easily be changed in the settings area, too. Once the widget is the way you want it, simply grab the code and add it to the appropriate WordPress template.

Display Your Latest Tweets Using a WordPress Plugin

If you don’t want to code things manually or use the official Twitter profile widget, you could try one of the many plugins available:

• Cardoza Twitter Box
• Floating Tweets
• Latest Twitter Sidebar Widget
• My Twitter Ticker
• Tweet Blender
• Twitter Plugin for WordPress
• Twitter Widget Pro

Add Social-Media Sharing Buttons To Your WordPress Website

Adding social-media sharing and voting buttons is very straightforward and enables readers to share your content on the Web. Simply get the code directly from the following pages:

• Facebook,
• Google+,
• Twitter.

The buttons you get from the above links work well when added directly to posts (single.php) and pages (page.php). But they don’t work correctly on the home page (index.php) or the archive (archive.php) by default, because we want to show the number of likes, pluses and retweets for each individual article, rather than the page that lists the article. That is, if you simply add the default code to index.php, every button will show the number of shares for your home page, not for each article.

To resolve this, simply make sure that each button uses the article permalink, rather than the URL of the page it is on. To add sharing buttons only to posts, simply choose the button you want from the links above and copy the code to single.php; to add the buttons only to pages, just add the code to page.php.

To show the number of likes, pluses and retweets that an article has on the home page and in the archives, follow the steps noted below for Facebook, Google+ and Twitter below (the code for showing a sharing button on the index page will work for posts and pages, too). You can see an example of sharing buttons integrated in post excerpts on my own website WordPress Mods and on popular blogs such as Mashable.

Facebook

Facebook’s Like button comes with a lot of options. Choose from three layouts: standard, button count and box count. An email button (labelled “Send”) can be added, and you can set the width of the box, too. You can also show profile pictures below the button, choose between the labels “Like” and “Recommend,” choose between a light and dark color scheme, and set the font.

You need to add two pieces of code to your website. First, add the JavaScript SDK code directly after the <body> tag (in the header.php template). This code has to be added only once (i.e. if you’ve already added the code to show Facebook comments on your website, you don’t need to add it again).

Put the second piece of code where you want to show the Like button. To ensure that the correct page is referenced, add href="<?php echo get_permalink($post->ID); ?>" to the second piece of code. It should look something like this:

<div class="fb-like" data-href="http://www.facebook.com/smashmag" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

More information on how to customize the Like button can be found on the Facebook Like Button page.

Google+

Google+ offers four sizes of sharing buttons: small, medium, standard and tall. The number of votes that a page has received can be shown inline, shown in a bubble or removed altogether.

Linking to your article’s permalink is very easy. Just append href="<?php the_permalink(); ?>" to the g:plusone tag. For example, to show a tall inline Google+ button, you would use the following code:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

For more tips on customizing the Google+ button, please view the official Google+ button documentation page.

Twitter

Twitter offers four types of buttons: one for sharing links, one for inviting people to follow you, a hash tag button for tweeting stories, and another for mentions (used for contacting others via Twitter). The button you need to show the number of shares that an article has gotten is called “Share a link.”

On the button customization page, you can choose whether to show the number of retweets and can append “Via,” “Recommend” and “Hashtag” mentions to the shared link.

To make sure Twitter uses the title of your article and the correct URL, simply add ata-text="<?php the_title(); ?>" and data-url="<?php the_permalink(); ?>" to your link. For example, if you were using the small button, you would use:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="smashingmag" ata-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

To show the larger button instead, simply append data-size="large" to the link. To show the popular vertical button (shown below) instead of the default horizontal button, append data-count="vertical" to the link.

For more tips on customizing the Twitter button, please view the official Twitter button documentation page.

Summary

Many WordPress users continue to use plugins to integrate social-media sharing buttons and activity on their websites. As we’ve seen, though, integrating social-media services manually is straightforward and, for many users, a better solution than simply installing a plugin and making do with whatever features it offers.

Integrating Facebook comments on your website takes only a few minutes and is much less complicated than any of the available plugins. While good tutorials are available that show you how to manually add Twitter to your website, the official widget from Twitter is the best all-around solution for most websites.

Some fantastic plugins exist for WordPress to automatically insert social-media voting buttons in your design. Installing and setting them up takes only a few minutes, although manually adding the buttons enables you to give them maximum visibility.

Remember, play it safe and make any changes in a test area first before applying the changes to the live website. I also recommend backing up all of your template files before changing anything (and your database if required). A few minutes of preparation could save you hours of troubleshooting, so try not to skip this step.

Hopefully, you’ve found this useful. If you are unsure of any aspect of this tutorial, please let us know and we’ll do our best to clarify the step or help you with it. Also, subscribe to Smashing Magazine via RSS, Twitter, Facebook or Google+ to get the latest articles delivered directly to you.

(al)

---

© Kevin Muldoon for Smashing Magazine, 2012.

As technology evolves, so does the art and craft of Web design. New technology creates new challenges, which require new solutions. Often we’re working in uncharted territory, where the solutions demanded really are new. Other times, we’re faced with problems of a more universal nature, problems that have a history.

Given the limited history of Web design, we have to look beyond our immediate domain for answers to the more challenging questions. We do this all the time when we draw on the rich history of graphic design and visual arts. But we’re not limited to sibling disciplines. If we can identify the abstractions and patterns that constitute our challenges, we can look to any source for guidance. We can look to a seemingly unrelated field, such as psychology or music. We can even look to an episode from the early 18th century about Johann Sebastian Bach.

In this article we’ll look at what Bach has to do with modern Web challenges — Particularly the challenge of designing for devices with diverse attributes and capabilities.

Bach And “The Well-Tempered Clavier”

In 1722, Bach put together a book of solo keyboard works intended as a collection of educational pieces for young musicians. The book contained 48 pieces — a prelude and fugue in every major and minor key. Now a staple of the Western canon, it’s regarded as one of the most important works in the history of Western music. He named the book The Well-Tempered Clavier.

To appreciate the historical significance of the work, you have to understand that in Bach’s day the notion that one might play keyboard music in all keys was unorthodox. It was a matter not of philosophy, but of physics: a fixed-pitch keyboard instrument could be in tune only with a selection of keys at a time. In the tuning systems of the era, playing in tune in all 12 major keys was simply not possible.

While the laws of physics can be tough to bend, human perception moves fairly easily. The solution was to redefine what it meant to be “in tune.” By adjusting certain intervals so that they deviated just slightly from perfect intonation, a tuning system was produced that allowed one to play reasonably in tune in all keys. This practice of compromising granular qualities for the greater good of the system is called temperament.

Opening measures of the first Prelude of Bach’s Well-Tempered Clavier. (Image credit: Wikipedia)

The name of the alternative tuning system made famous by Bach and The Well-Tempered Clavier is, unsurprisingly, “well temperament.” Today, most intonation in Western music is based on “equal temperament.” The methods are different, but the goal is the same: to make each of the keys slightly imperfect so that all of the keys can be used. It’s like utilitarianism for acoustics.

What This Has To Do With UI Design

Probably the most exciting development in Web design in the last few years has been the shift to designing for multiple devices. It’s no longer just about how a website functions in two different browsers, but about how it functions on various devices with completely different characteristics: different screen sizes, different capabilities, different use contexts, different interfaces.

Although responsive design and device-specific websites enable us to tailor designs for diverse experiences, there will still be times when we have to make universal decisions — and when we do, the metaphor of well temperament can be helpful.

The application of this concept to UI design is straightforward: in order to deliver a good experience for a range of devices, we have to allow for occasional imperfections in individual interfaces. We have to make little compromises here and there to make sure that our design travels well to other environments.

Touch-First Design

A common example of well temperament in action is the effect that touch interfaces have had on recent desktop website designs.

As a pointing device, a finger, being much larger than a mouse, requires a larger touch target than what’s required by a mouse cursor. So, to ensure usability, interactive elements need to be bigger. As interactive elements increase in size, other things need to increase in size to maintain balance. This leads to an aesthetic characterized by generous margins and padding.

The new Gmail design has a lot of white space and extra padding on buttons and is very touch-friendly, even though it’s a desktop design.

The rise in popularity of the iPad, which bridged the gap between touch interfaces and desktop screen sizes, is what accelerated the influence of touchscreens on desktop interface design. If you look at recent redesigns of major products such as Gmail and Twitter or browse CSS galleries, you’ll see that design on the Web is starting to look a little different. Things look more… plumpish. There’s more white space, buttons have more padding, things in general feel bigger. Of course, other factors are at play, such as the steady increase in desktop screen sizes.

What we end up with is a design that might afford too much space for a mouse but an appropriate amount of space for a finger. We allow for a slight deviation from the norm in one experience in order to better support all possible experiences.

It’s important to note that making a UI touch-friendly in this way also results in a UI that might be more useable for mouse-and-desktop users. A button that’s easier to touch is often easier to click. By erring in the direction of usability, we get the bonus of improved performance of the design in its original desktop context.

Microsoft’s Metro design language is inspired by a touch-first approach to interaction design.

Universal Design via Responsive Design

Although much of the discussion on responsive design tends to focus on techniques of responsiveness, responsiveness itself is never the goal. It’s a means to an end. The design responds in order to do something else. That something else might be to supply different content, to serve low-bandwidth images, or to adapt the layout for better presentation on smaller screens. That something else might also be a goal of providing a universal experience to a large number of different devices.

Riding the responsive design train to arrive at universal experience design, we’re likely to pass through some form of well temperament. A great example of this — and an excellent example of responsive design in general — is the Boston Globe’s website.

The Boston Globe is a shining example of responsive design on a large-scale website.

This responsive strategy enabled a single design to adapt to any device that a reader might use to read The Boston Globe (even the Apple Newton!). But this wasn’t just a feat of front-end engineering. Accompanying the media queries and JavaScript wizardry was a simple malleable design that lent itself to adaptation.

This is a tempered design. While the minimalism might be purely stylistic, I suspect that if it had been a desktop-only design, we’d have seen more gloss and embellishment. There would have been a longer runway on which to perfect the experience for a single-use context. But instead, the designers made little trade-offs to produce something that could be transposed to all possible environments — something that could play in all 12 keys.

Mobile-First Design

The preceding examples were concerned more with graphic design, but the concept of temperament can be applied to product design, user experience, information architecture — almost any other area of design. Let’s look at product design and the idea of designing for mobile first.

If you’re designing for mobile first, then you’re already working with tempered design. By starting the design process with mobile and building a product around the demanding constraints of the mobile environment, you’re obligated to focus on the most essential elements of the product. As Luke Wroblewski writes:

So, when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish, without the extraneous detours and general interface debris that litter today’s desktop-accessed websites. That’s good [for the] user experience and good for business.

When these design decisions extend beyond the mobile experience to define the overall product, then the design takes on a form of temperament. The latest redesign of Twitter (i.e. “New Twitter” or “New new Twitter”) demonstrates some of these principles.

New Twitter has a simplified design and a consistent experience across devices.

One of the objectives of the Twitter redesign was to give users a consistent experience across computers and mobile phones. Achieving a consistent look and feel is a UI challenge, but achieving a consistent overall product experience is a deeper challenge. In both cases, designing for mobile first puts us on the right path.

Something I found interesting about the Twitter redesign was the influence that the mobile experience had on the product’s overall design. For example, aside from the tweet button, all of the actions have been organized under four tabs: “Home,” “Connect,” “Discover” and “Me.“” It’s a simplification that plays wonderfully on a small screen. Four items fit perfectly in the tab bar.

On the desktop website, other features have been added, but the simplicity established in the mobile version carries over. Although the desktop version has plenty of room — both pixel-wise and figuratively — for more complexity, the design is restrained, tempered, to ensure a universal multi-device experience.

Beware Of Wolves

In the natural tuning systems that predated the standardization of well and equal temperament, notes of the out-of-tune intervals that were played simultaneously produced a harsh and howling sound. Musicians had a great name for this: they called it a “wolf.”

Applying this idea to interface design, we can think of a wolf as a visual or interactive element designed for one experience that breaks down to some degree when transposed to another. Think of the times you’ve struggled to finger-tap a small link that was made for a mouse cursor, or had to read tiny text on a mobile screen, or, on a touch device, used an interface that relied on hover states. Wolves in the UI.

These article present links that are designed for interaction with a mouse. When viewing on a touchscreen mobile device, their usability is greatly impaired.

New York Magazine provides useful and well-designed drop-down navigation menus — but only if you’re using a mouse.

Closing Thoughts And Practical Tips

Again, it’s true that responsive design and device-specific experiences can offer us a way around many of these problems. If we can tune the size of a button to a particular environment, then we don’t have to accept blunt, across-the-board treatment. But the number of devices we have to support will only increase, and customizing for every possible scenario could quickly become unreasonable.

Even if we are able to provide perfectly tailored design at the execution level, there is still value in thinking about tempered, universally accessible design at the conceptual level.

Additionally, just because we can tailor design to particular experiences doesn’t mean that users will not carry expectations over from one experience to another. The boundaries might blur whether we like it or not.

Tips and Things to Keep in Mind

• Think responsively. Even if you’re not implementing a full responsive design, simply thinking in responsive terms goes a long way to achieving usable universal design.
• Think touch-first. A button sized for a fingertip will always work for a mouse cursor. But a button sized for a mouse cursor will often be too small for a fingertip. Designing for touch first ensures that your website or application translates well to other contexts.
• Think universally. “Test early, test often” the saying goes. In your design process, think early and often about how your design will function on various devices.
• Think mobile-first. Starting your design with mobile focuses you on what really matters to your users. By maintaining focus on the essential features, achieving a consistent experience across devices will be much easier.
• Be careful with interaction behavior that is not supported universally across interfaces. Hover states don’t function the same on touch devices. Touch gestures can’t be performed with a mouse. It doesn’t mean we can’t use these things, but we have to be aware of their limitations.

In The End…

Bach believed that people should be able to write and play in any key they wish. He argued for it by writing beautiful music that compelled the world to agree. He designed for the system he wanted.

We want our users to have great experiences with our websites and applications on any device they choose. We want our work to be as usable and accessible as possible.

What will you design?

Other Resources

You may be interested in the following related resources:

• The Well-Tempered Clavier, Book I, played by Glenn Gould, Rdio
• Audio examples comparing different tuning systems, The Pyxidium
• “Wolf Interval,” Wikipedia
• “Multi-Device Web Design: An Evolution,” Luke Wroblewski
• Responsive Web Design, Ethan Marcotte
• “Non Hover,” Trent Walton

(al)

---

© Rob Flaherty for Smashing Magazine, 2012.

In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today.

Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. And for good reason: essentially, responsive website design moves us away from the fixed-width pages we’ve grown accustomed to, replacing them with shape-shifting layouts and intelligent reflowing of content. Add to that a thoughtful content strategy and mobile-first approach, and we’re starting to offer an experience that adapts across devices and browsers to suit the user’s context.

When we look at the breadth of Web-enabled devices, responsive design is sure to provide a better user experience. Scrolling horizontally, panning and zooming the viewport have their place in user interface design, but forcing the user to do these things just to navigate a website quickly becomes tedious. Fitting the website to the viewport is about more than just layout: it’s also about resolution. In this article, I’ll demonstrate why SVG is a perfect addition to future-friendly Web development.

Introducing SVG

SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.

Consider the use cases: UI and navigation icons, vector-style illustrations, patterns and repeating backgrounds. For all of these, a scalable graphic is the perfect solution from a visual standpoint, and yet fixed-resolution images are still the norm. In the example below, we’ll show you how to expand on a common development technique to take advantage of SVG.

A Case Study: CSS Sprites

We all know about the CSS sprites technique. (If you don’t, then have a quick read through Sven Lennartz’ article. And Louis Lazaris points out its pros and cons.) In the example below, we’ll show how seamlessly SVG replaces normal raster images. If this technique is not for you, you can certainly imagine a whole array of similar situations in which to use SVG.

Vector icons play a big role in user interface design. Pictures express concepts with vivid clarity, whereas their textual counterparts might carry ambiguity. In UI design, where space is scarce, a simple illustrated icon could be greatly welcome.

I’ve mocked up the following example:

I’ll be first to admit that this row of icons won’t win any design awards, but it will suffice for the sake of this article! Let’s look at the HTML:

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

I’ve kept the HTML to a minimum for clarity, but in practice you’d probably want to mark it up with an unordered list. And you’ll almost certainly want to replace those hashes with real URLs (even if JavaScript provides the functionality, having a fallback is nice). Let’s look at the CSS:

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   background-image: url('sprite.png');
   background-repeat: no-repeat;
   background-color: #ccc;
   border-radius: 5px;
   display: block;
   float: left;
   color: #444;
   font-size: 16px;
   font-weight: bold;
   line-height: 20px;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
   padding: 10px 20px 10px 40px;
   margin-right: 5px;
}

.a-share  { background-position: 10px 0; }
.a-print  { background-position: 10px -40px; }
.a-tag    { background-position: 10px -80px; }
.a-delete { background-position: 10px -120px; }

Note the fixed-pixel sizing and the PNG background, which we can see below framed in full Photoshop production glory:

This implementation of a CSS sprite is basic, and at today’s standard, it’s not good enough! How can we enhance this? First, let’s consider the following issues:

1. We’ve rasterized the image at a very early stage. Even at full size, icons in which points sit between pixels, such as the one for “Print,” have blurred.
2. If we zoom in, the image will blur or pixellate even more; there is no additional data to re-render the image at larger sizes.
3. Everything has a fixed size, which is neither good for responsive design nor good for accessibility, because the browser’s default font size is ignored.

As you’ve probably guessed by now, we’ll show you how SVG solves these problems. But first, let’s reiterate each point thoroughly to understand the issues at large.

1. Rasterization

Devices such as modern smartphones have a very high pixel density; some already surpass the 300 pixels-per-inch (PPI) mark that is assumed to be the limit of the human eye’s ability to distinguish fine details. A pixel has no real-world equivalent in size until it sits on a screen of fixed dimension (say, 3.5 inches diagonally) and fixed resolution (say, 640 × 960 pixels). At this scale, text with a font size of 16 pixels would be incredibly small to the eye. For this reason, devices simply cannot translate 1 CSS pixel unit to 1 device pixel; instead, they double up. Thus, a 16-pixel font size actually takes over 32 pixels when rendered.

The same applies to images; but they are already rasterized, so doubling up the pixels has no benefit. In our example, each icon has been rasterized at around 25 × 25 pixels (the whole sprite being 30 × 160), so they cannot take advantage of the double pixel ratio. One solution is to use CSS media queries to detect the pixel ratio. This is already implemented in Webkit- and Gecko-based browsers.

To improve our example, we can add the following CSS declaration:

@media only screen and (-webkit-min-device-pixel-ratio: 2)  {
   .actions a {
      background-image: url('sprite@2x.png');
      background-size: 30px 160px;
   }
}

The alternate background image supplied in the code above has been saved at 60 × 320 pixels (i.e. double the original dimensions). The background-size property tells CSS to treat it smaller. Significantly, now the device has the additional data to render a better image (if capable).

This solution isn’t bad, but it doesn’t solve the problems we’ll run into in points 2 and 3 below. It also requires that we maintain multiple files of increasing size: a potential burden on bandwidth and a real hassle. For non-vector images, such as photography in JPG format, we can’t do much more than that.

2. Zooming

At their default size, our rasterized icons look acceptable, at least on low-pixel-density screens. However, should the user zoom in on the Web page, these little UI delights will degrade very quickly.

Zooming is a common action when users find a website too small for comfortable viewing. Or, to put it another way, websites that are designed too small are very common. There is really no “perfect” size, because almost everyone has at least some level of visual impairment, since our eyes inevitably deteriorate with age. Secondly, with the rapid increase in touchscreen devices, pinch-to-zoom has become the standard way to enlarge fixed-sized content designed for larger screens (i.e. much of the Web today).

We should develop websites in a way that minimizes the need for user input — that’s where responsive design comes in (see point 3 below) — but zooming is here to stay. There’s simply no way to provide pre-rasterized images for every level of zoom (in theory, an infinite scale). Scalable graphics are the solution, and we’ll show you how to enhance our example. But first, a related word on fixed sizing.

3. Fixed Sizes

Presenting page elements at fixed sizes forces many users to zoom, but it also disables a very useful browser feature. Users can set their preferred font size (the default in browsers is 16 pixels). By sizing everything in pixels, we override this preference. Sizing elements based on this default is much better, so that, if the text is bigger, everything adjusts to match. This essentially mimics the zooming effect but happens without the user having to manually do it on every visit. Ethan Marcotte has written a great article that explains relative font sizes.

Let’s re-implement our sprite example with a solution to these three issues.

A Scalable Implementation

Here is the HTML again. We don’t need to change anything here.

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

The updated CSS is where the magic happens:

body { font-size: 100%; }

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   font-size: 1em;
   line-height: 1.25em;
   padding: 0.625em 1.25em 0.625em 2.5em;
   margin-right: 0.3125em;
   border-radius: 0.3125em;
   background-image: url('sprite.svg');
   -webkit-background-size: 1.875em 10em;
   -o-background-size: 1.875em 10em;
   -moz-background-size: 1.875em 10em;
   background-size: 1.875em 10em;
   /* styles carried over from the original implementation */
   background-repeat: no-repeat;
   background-color: #ccc;
   color: #444;
   display: block;
   float: left;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
}

.actions-em .a-share { background-position: 0.625em 0; }
.actions-em .a-print { background-position: 0.625em -2.5em;  }
.actions-em .a-tag { background-position: 0.625em -5.0em;  }
.actions-em .a-delete { background-position: 0.625em -7.5em;  }

In this version, we’ve made the following changes:

• The background-image is now an SVG file.
• All sizes are based on the default of 16 pixels, or 1 em. If the user’s default is larger or smaller, then everything will scale relatively. (If you multiple each em size by 16, you’ll get the number of pixels used in our initial fixed-size example.)
• The background-size is very important. By setting this in em units, we’re telling the browser to scale the sprite relative to everything else. You’ll notice that 1.875 × 10 em multiplied by 16 becomes 30 × 160 — the base size at which we produced the sprite in pixels.
• The background-position of each sprited icon is also based on relative units.

Now that we’re using SVG and relative sizes, we have solved the three big issues highlighted above. A scalable graphic can be rasterized on demand to perfectly suit any device resolution and any zoom level. By using relative sizes, we can continue implementing a responsive design, minimizing as much as possible the need for the user to zoom. We’re also respecting the browser’s default font size, and enabling our design to adapt accordingly.

I actually produced the SVG sprite first and the PNG version from that. (I imported the SVG in Photoshop before exporting it as a PNG — Illustrator’s PNG export had very poor rasterization.) Below is the header in my SVG file. Notice the same 30 × 160 initial size.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30px" height="160px" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

You can see that the attributes for width and height are set in pixels (width="30px" height="160px") in the opening svg tag (as generated by Adobe Illustrator). This actually causes it to render early in Firefox, before the graphic has scaled to match the em sizes in background-size. Webkit-based browsers seem to scale the SVG perfectly, regardless. I’ve found that editing the SVG file to use em units in these two attributes fixes any rendering issues in Firefox.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

I don’t know which browser actually implements this scaling correctly, but let it be noted that extra care is needed to ensure cross-browser perfection. Mozilla MDN has an excellent in-depth article, “Scaling of SVG Backgrounds,” which explores more practical examples. For more ideas, see Alex Walker’s article “A Farewell to CSS3 Gradients.”

Here’s a super-close screenshot showing the SVG sprite:

The sprite scales beautifully. (Sadly, the same can’t be said for my tacky text-shadow effect.)

It’s best to experience the joys of scalable graphics and relative sizing firsthand. I’ve uploaded a side-by-side live demo demonstrating a combination of all the techniques mentioned above.

Browser Support

At the start of this article, I said that SVG was underused. I believe that has generally been the case due to poor browser support. But things are different now! Browser support for SVG has blossomed over the last year to the point where implementing it is a viable use of development time.

According to the website When Can I Use?, support for SVG across multiple implementations is as follows (I’ve combined support for both CSS’ background-image and HTML’s img source — the most useful attributes):

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Mobile browser support is also pretty much across the board. If a workable fallback exists for older browsers, then SVG is a very viable solution.

For some of the new additions to Web standards, we can implement them safe in the knowledge that old browsers will simply ignore them and that they aren’t even required. We call this “progressive enhancement”: better browsers get a progressively better experience. SVG is slightly different, because for most practical purposes, it simply replaces other images in CSS backgrounds and HTML elements. The image format — be it SVG, PNG, JPG or GIF — is either supported or it isn’t. We can’t simply follow the practice of progressive enhancement here, because an image failing to render is not an acceptable experience.

Browser Sniffing or Feature Detection?

We could make an educated guess and say that we need to worry only about users of Internet Explorer 6 to 8. In this case, the conditional comments technique for IE-only styles enable us to re-apply a second CSS background-image of a supported format such as PNG, instead of the default SVG background.

Browsing sniffing is always a dangerous game. While Internet Explorer tends to be the main offender, we can never assume it is the only one.

The safer and highly recommended option is to detect SVG support and use it only if it’s found. I suggest using Modernizr if you need to detect multiple features. Modernizr applies a class of svg to your root html element if detected (to which you can apply SVG as a background-image). If you’re using SVG as the source of an image element in HTML, then implementation is a little harder. You’ll have to write more JavaScript to find and replace all sources once support has been established.

The problem with these methods is that the browser will download the fallback image before SVG is detected — the only exception being the conditional comments technique for IE. Users will also likely see a flash of re-styled content when the source image changes. This shouldn’t be the case for long; but at least for now, these problems may be enough to hold you off on SVG usage.

File Size

In our sprite example, the raw SVG file was 2445 bytes. The PNG version was only 1064 bytes, and the double-sized PNG for double-pixel ratio devices was 1932 bytes. On first appearance, the vector file loses on all accounts, but for larger images, the raster version more quickly escalates in size.

SVG files are also human-readable due to being in XML format. They generally comprise a very limited range of characters, which means they can be heavily Gzip-compressed when sent over HTTP. This means that the actual download size is many times smaller than the raw file — easily beyond 30%, probably a lot more. Raster image formats such as PNG and JPG are already compressed to their fullest extent.

Performance

Rendering performance is a concern with SVG, especially on mobile devices, whose hardware is limited. Raster images can be rendered pixel for pixel after decompression and de-encoding. Vector graphics need to be rasterized at a specific resolution every time they’re viewed.

SVG has consistently proved slower than Canvas as a platform for animating vector graphics; but our concern here is basic rendering, not manipulation a thousand times per second, and if that is possible, then simple rendering shouldn’t be a concern. The more intensive SVG features are things like clipping masks and filter effects. These are unnecessary for many practical purposes (like our sprite example), but, if required, the best way to check performance is by testing. A lot of Web development is supported in theory, but in practice results are far from perfect.

Alternative Methods

Hopefully you agree that SVG is extremely useful but not always the ideal solution to resolution independence. Ultimately, the trick is to avoid raster images while maintaining the scalability of visual styles. Below are a few more ideas to think about.

CSS3

You’ve probably already started combining CSS3 properties such as linear-gradient, text-shadow and box-shadow to create more complex styles. Web developer Lea Verou curates a CSS3 pattern gallery that shows off the impressive potential of gradients alone.

In his article “Mobile Web in High Resolution,” Brad Birdsall introduces a technique to maintain pixel perfection for high-resolution displays using the pixel-ratio property.

Then there are pure CSS “icons,” which Faruk Ateş rightly points out as being absolute “madness” — certainly so if you’re using CSS to create a logo! But you could argue the benefits of a small handful of very specific techniques, such as CSS triangles, as demoed by Chris Coyier.

Web Fonts

Dingbat Web fonts and look-a-like Unicode glyphs are two interesting alternatives for vector icons, both with accessibility and semantic challenges. Jon Hicks has a write-up of perhaps the best practice for this. SVG seems a more appropriate technique for icons, but both have an immediate visual impact at high resolutions — and we’ll be paying increasing attention to that in coming years.

Looking Forward

As you can see, SVG usage is very much a possibility, and browser support and performance will only improve in future. What’s important to note from this article is that we really should be building websites that are as resolution-independent as possible.

Consider the “one Web” philosophy and the vast range of devices we use to access it — there is no single user experience. The more we can do to stay device-agnostic, the better. Responsive website design addresses many of these needs and certainly provides many benefits. Using vector graphics may not be as apparent, but its little improvements really do make a difference.

With today’s level of support, many users can experience the beauty of crisp scalable graphics… or perhaps that’s the wrong way to think about it. Most users won’t say “Wow! Kudos on the vectors.” To our dismay, they probably wouldn’t even consider them (and certainly wouldn’t recognize the effort required to craft them). And that’s a good thing; each time we improve the user’s experience, we don’t necessarily need to make a song and dance about it. Letting things continue to grind away under-appreciated is OK. It’s the lack of such things that gets recognized and sniffed at. Raise the user’s expectations in visual aesthetics, and they’ll start to notice the websites that do look shoddy. If you don’t do it, others will.

(al)

---

© dbushell for Smashing Magazine, 2012.

A few weeks ago I wrote about how you can put together a great readme.txt for the WordPress plugin directory. In addition to using a WordPress readme as a tool to help out your users, you can use it to promote your commercial products and services. While commercial theme developers are already promoted on WordPress.org, this promotion isn’t extended to commercial plugin developers. But restrictions often lead to creativity, and developers have had to get a bit creative in figuring out how to monetize the WordPress repository. API keys, complementary plugins and lite version are just a few of the ways that plugin developers are exploiting the WordPress plugin directory for commercial benefit.

(Image: Bowe Frankema)

What’s Allowed?

Back in 2009, Mark Jacquith posted this on the WordPress development blog:

Plugins that merely exist as placeholders for a plugin hosted elsewhere (like a “requirements check” plugin) are out, but “lite” versions, etc are in. The goal is to have the directory be free-to-download plugins. A placeholder for a premium plugin is against that spirit.

He goes on to say:

If your plugin is actually a plugin, not just an advertisement or a placeholder for a plugin hosted elsewhere, you’re fine, as far as this rule is concerned.

Related to this, Matt Mullenweg posted on the WordPress.org support forums:

There are plenty of plugins that tie into third-party services, for example Google AdSense, and some of them have no free versions. That’s totally fine as long as the plugin is totally GPL.

I emailed Matt to see if anything has changed since he posted this, and he directed me to WordPress.org’s “Detailed Plugin Guidelines.”

Briefly, if you’re a commercial plugin developer, here’s what you need to keep in mind if you’re planning to use the repository:

• The plugin must be GPLv2. (Explicitly state this in your license. If you don’t, it will be assumed that your plugin is GPLv2.)
• Trialware is not allowed.
• Upselling is allowed (but not by being annoying or disabling features after a time period).
• Serviceware is allowed, even for paid services (i.e. a plugin that serves to interface with a third-party service). The service must be doing something substantive, not just providing keys or licenses.
• No phoning home without the user’s consent. This includes:
  • No unauthorized collection of user data;
  • No remote images or scripts (everything must be part of the plugin);
  • Banners and advertising text should not be included in the plugin;
  • Advertising spam is not allowed.
• No sending executable code via a third-party system (unless of a service-client model).
• External links may not be included on the user’s public website.
• No hijacking the admin page.
• No sponsored links in the readme.
• WordPress.org reserves the right to edit the guidelines and to arbitrarily disable or remove a plugin for any reason whatsoever.

Adhering to these guidelines is a delicate balance, and not everyone who tries to monetize the repository is successful at it, as the people behind Plugin Sponsors recently found out.

That said, let’s look at some models whereby developers have managed to create synergy between free plugins and paid plugins or services.

The API Key

No one likes spam. (Image: Thomas Hawk)

Who’s doing it?

• Akismet
• Scribe SEO
• YoLink
• WPMU DEV Anti-Splog

If you’ve installed WordPress, then you’ve met Akismet. Akismet is the anti-spam plugin that comes bundled with WordPress. It’s free for non-commercial use, but if you are using it for a commercial website, then you have to pay for it. The whole Akismet issue pops up every so often in the WordPress blogosphere. Many people feel that a commercial plugin shouldn’t be bundled in WordPress, although I don’t plan to get into that debate here.

Whatever you think of it, providing an API key for a service is a viable way to create a WordPress plugin, host it in the WordPress repository, and yet charge for the service that it provides. Another plugin provider that adopts this model is YoLink, a search service that offers advanced search functionality for websites. Personal websites (i.e. without advertising) that have fewer than 5,000 monthly visitors per year can use it for free; after that, the pricing varies.

“We’ve found that once a user has ample time to test-drive the plugin on their site, they come to realize its value and upgrade to a paid subscription,” says Joe Pagliocco of YoLink. “We are seeing this most often with commercial sites looking for additional flexibility and indexed pages.”

However, you don’t even have to offer a free version of your service to get a plugin with an API key into the repository. Scribe, a popular service from Copyblogger, is a plugin that integrates with your WordPress website. In order to use Scribe, you have to sign up for an API key, which is a minimum of $17 per month. While the plugin is GPLv2 and free, the service is not. This approach might make some people hate you, but it is still a viable way to make money from a plugin in the directory.

Pro: You’re able to offer a plugin that provides a service and make money from it.

Con: People might hate you for it.

Upgrades And Support Forum

Jigoshop offers a commercial-level e-commerce plugin — for free!

Who’s doing it?

• Jigoshop
• WP eCommerce

Jigoshop is a free e-commerce plugin, available in the WordPress repository. It includes everything that you need to run an e-commerce website. If you like the plugin (and many people do), then you can pay for premium upgrades and support. Premium upgrades include MailChimp integration, BuddyPress integration and various advanced payment gateways.

I spoke with Dan Thornton at Jigoshop, and he said that they had considered going down the lite/premium route, but because the free version was embraced so quickly, they didn’t want to duplicate their work. By including all of the standard payment gateways in the free version, they made it possible for a small business to get a store up and running and then invest its money in extending the store’s features and functionality, rather than have to pay for all of the bits and pieces up front.

When Jigoshop launched earlier this year, it got a lot of promotion throughout the WordPress community purely because it is a totally free, fully-functioning e-commerce solution. “If we’d gone for a different business model,” says Dan, “we couldn’t have afforded the marketing and advertising to match the recommendations and promotion that we’re grateful to have had from users, designers and developers.”

Pro: Massive community of developers has gathered around Jigoshop, adding their own expertise to the product.

Con: A fully-functional GPL plugin is open to being forked by bigger players on the scene.

The Lite Plugin

Do you like your plugins with less calories? (Image: Niall Kennedy)

Who’s doing it?

• WPMU DEV
• Event Espresso
• Cart66

This is probably one of the most common ways to use the repository to up-sell, and it can be a great option for a variety of plugins. Basically, you restrict the features in the free version and offer a paid version for people who want more features. Putting a lite version of a plugin in the repository is fine, provided it is GPL and adheres to the “Detailed Plugin Guidelines.”

WPMU DEV, a shop for WordPress plugins, has a number of lite versions of its commercial plugins in the repository. It offers lite versions of its Google Maps, eCommerce, Chat, Wiki and Membership plugins, among others. In theory, these plugins should be adequate for the average WordPress user who wants the given functionality on their website, while the commercial versions are available for those who need even more functionality.

I asked James Farmer, of WPMU DEV, what he holds back for his members. “We started holding back quite a bit,” he says. “Now we hold back very little. It’s really just the extended stuff and extra support, etc, that premium users get.”

With little functionality being held back for members, I asked James why they bother including free plugins in the repository. “I suppose you could say to ‘give back,’” he says. “But really, it’s just about business: if folks get to try our plugins for free (and the WordPress.org repository is the best place to get them to do that), then a proportion of them will be keen on our full offerings… At least that’s the plan.”

Pro: Give back to the community while maintaining your business model.

Con: Have to split your support base across WordPress.org and your own website.

Complementary Plugins

Some things just work better in pairs. (Image: Martin Hartland)

Who’s doing it?

• WP Types & Views

Two new plugins on the WordPress scene are taking a different approach. Developed by OnTheGoSystems (the folks behind the popular WPML), Types is a plugin for creating custom post types, while Views is a plugin for displaying content. Drupal users will recognize similarities between Views and a certain Drupal module.

Types is free and can be found in the WordPress repository. Views, on the other hand, is a commercial plugin available through the developer’s website. Types is a fully-functional plugin, and if all you’re interested in is creating custom post types and taxonomies and custom fields, then you might stop there. But Views is used to display the content in complex ways by querying the WordPress database for you. And, of course, the Types readme.txt tells you all about what you can do with Views, to tempt you into grabbing the complementary commercial plugin.

OnTheGoSystems developed Types and Views hand in hand, and it markets them that way, too. Views needs Types to create content, and Types is made better when Views displays it. A synergy between the two fuels the business model. “Types complements Views,” says Amir Helzer, CEO of OnTheGoSystems, “by making it easy to create and manage custom data. Marketing 101 says that when you want to promote your product, you work to turn its complements into commodities. This is what Types does. It makes creating of custom data into a non-issue, so that people can concentrate on its display (via Views).”

Pro: Exploit a ready-made market for your commercial plugin.

Con: The market might decide that it only wants your free plugin.

Offer Commercial Themes

There’s big business in WordPress e-commerce. (Image: Thristian)

Who’s doing it?

• WooThemes

The plugin directory isn’t being used just by commercial plugin developers. If you run a successful commercial theme shop, then it’s perfectly within your power to give away a functional WordPress plugin for free, dedicate a team of developers to it, and then let the money roll in as people look for commercial themes to power your plugin. That’s what WooThemes has done with WooCommerce.

You can get WooCommerce from the WordPress repository for free; and with more than 30,000 downloads since launch, it’s proving to be a pretty popular e-commerce solution. What it’s really got going for it, though, is the large collection of dedicated e-commerce themes that work with the plugin.

While already successful as a commercial theme shop, WooThemes was keen to test its legs in the freemium waters. E-commerce seems like a perfect fit for it: free core functionality, while charging for design. I asked Adii Pienaar, WooThemes’ founder, what effect WooCommerce has had on its business. He says, “WooCommerce has been quite a diversification for us on two fronts. First, it diversifies our revenue models and allows us to include the freemium model, which means a higher volume of users. Secondly, it has added a whole new class of products to our offering. To that extent, we’ve already seen a bump in our overall revenue, and our WooCommerce-related revenues are already establishing themselves as a firm chunk of that pie.”

To follow this model, Adii suggests that you develop a great core product and then monetize add-ons to that core. Because the core is free, you get high-volume adoption, and you need only monetize a certain percentage of it to be profitable.

Pro: Great way to expand your current market.

Con: Works best if you’re already backed by a strong brand.

Installation And Set-Up Services

Everyone needs a bit of help sometimes. (Image: Carol Browne)

Who’s doing it?

• s2Member

s2Member is powerful membership plugin. In fact, it’s so powerful that a dedicated installation service runs alongside it. Simplicity in a plugin is always a bonus, but out of necessity some plugins end up being seriously complex. That isn’t a bad thing, but it can get confusing for less advanced WordPress users. From my own experience, membership plugins can be extensive and pretty difficult for users to set up.

A great way to monetize a plugin like this is to offer an installation service alongside it. To set up s2Member, you can employ s2Installs. This is the team of developers behind s2Members, and they can install and set it up for you, as well as provide custom coding to extend the plugin to fit your needs. What better way to set up and extend a plugin than by employing its own developers to do it?

This is a really good model in which everyone can access the plugin for free, while commercial help is available for people who aren’t able to use the plugin to its full extent.

Pro: You are the best person to provide set-up, installation and customization of your plugin, so capitalize on it!

Con: Only works with big plugins. Might not work so well with your Google +1 button.

Is It Really Worth It?

Now that we’ve looked at some of the models, you might be wondering if this is actually worth it. Many commercial plugin developers, including those of popular plugins such as Gravity Forms, don’t adopt the freemium model and yet are still incredibly successful. In fact, a number of the plugin developers I spoke with said that the amount of traffic they get from the repository is minimal, not to mention other developers who don’t want a whole lot to do with WordPress.org. Some feel that the tightrope that has been set up for commercial plugin developers who want to use the repository is too precarious and not something they want to put effort into. Commercial themes are supported on WordPress.org, but there is nothing similar for plugin developers. Most of the developers I spoke with felt that a commercial plugin page will probably never appear on WordPress.org.

That said, if you are going down the freemium route, then using the WordPress repository is definitely a viable option, provided that you do actually use GPLv2 and provide some kind of useful service. The WordPress plugin directory will always be the best way to get your product into WordPress’ back end.

Like everything, the WordPress plugin directory has its upsides and downsides, and it’s not a one-size-fits-all solution. But in addition to directly promoting your product and services, having a plugin in the repository has a load of indirect benefits:

• Self-promotion and branding You might not be making a living off of your plugin, but you will be making a living off of yourself. A great example of this is Yoast, which is available for free in the plugin directory; while its developer doesn’t make any money from it directly, his business is built on his SEO expertise.
• Networking Having a plugin in the directory helps you to connect with other people in the WordPress community. People will be like, “Oh, you’re the guy who made that plugin. I love that!” The more popular your plugin, the more people will be interested in you.
• Custom work Offering a plugin means that someone out there might want your plugin to be customized, and they might be willing to pay for it.
• Job leads and opportunities You never know who is looking in the repository. Some big-wig might love your plugin and could be hiring. You could also use it as part of your CV, letting potential employers check out your code before even getting shortlisted.
• Kudos Everyone loves a plugin developer — and if they don’t, they should!
• Giving back Part of being a member of an open-source community is finding a way to give back. After all, we get the software that we build our livelihoods on for free. A free plugin in the directory is a great way to give back, especially if it’s a good one!

Of course, it’s not all happiness and sparkles. There are some aspects to having a plugin in the repository that put some developers off:

• Double the support If you offer support on your own website, too, then you’ll have to keep on top of two support forums.
• Unreasonable support expectations It’s sad, but some WordPress users feel that developers who give their plugins away for free should be at the beck and call of users. This leads to flaming in forums, hostile emails, angry tweets and the occasional midnight phone call.
• Keeping up with WordPress WordPress has a fast development cycle, with around two to three major releases a year (along with security updates and the like). Maintaining a plugin can become quite a chore, as is apparent from all of the orphaned plugins in the repository.
• #17 in the “Detailed Plugin Guidelines” This states that WordPress.org can revise the guidelines and arbitrarily disable or remove plugins whenever it feels like it. This arbitrariness does put people off.

A Commercial Plugin Shop?

It has long been fabled that Automattic might create some sort of WordPress app store where commercial plugin developers can sell their plugins to users straight from the WordPress dashboard. This will likely remain a fable, with no whisper from Automattic that anything of the sort is planned. Of course, there are places where you can purchase commercial WordPress plugins, such as WPPlugins and Code Canyon, but neither of these has the advantage of delivering plugins directly from the WordPress dashboard.

PlugPress tried a different approach. It created an “app store” plugin that WordPress users could install from the WordPress directory and then use to browse commercial plugins and themes. It uploaded the plugin to the WordPress repository and announced that it was live, and then the plugin was removed.

It’s a pretty clear signal that this type of store plugin won’t be allowed in the WordPress repository.

Amir Helzer (who we met earlier) has another approach. He posted a few months ago on the WPML blog about an alternative repository for commercial plugins and themes. His premise is similar to the approach taken in the Linux world. Every theme and plugin author can become their own repository. So Theme Forest could have a repository, as could Mojo Themes, as could whoever else. A central plugin would enable WordPress users to select commercial sources from which to search for themes or plugins. This would essentially make commercial plugins available in the dashboard and enable people to easily upgrade. It’s a novel idea, but given PlugPress’ swift exit from the repository, you won’t be seeing this in the WordPress directory anytime soon.

Conclusion

I firmly believe that placing restrictions on something spurs greater creativity, and the models above demonstrate how commercial plugin developers are thinking outside the box to use a directory that is essentially for free plugins. If it were simply a matter of a WordPress app store, then all of us would be in danger of buying plugins that aren’t very good (Apple’s App Store, anyone?). Plugin developers think creatively, which can only be a good thing for end users. Astute plugin developers will always find ways to use the WordPress plugin repository to promote their products, and I hope that their plugins are the better for it.

Developers are undoubtedly creating synergy between their commercial products and the repository in other ways. If you know of any, we’d love to hear about them in the comments!

Further Resources

• Looking for a service to sell your plugins? Try WPPlugins or Code Canyon.
• “Plugin Repository and Commercial Plugins,” WordPress Tavern A discussion about commercial plugins in the repository.
• “How to Improve Your WordPress Plugin’s Readme.txt,” Siobhan McKeown An article by me, right here on Smashing Magazine.

(al)

---

© Siobhan McKeown for Smashing Magazine, 2012.

We’ve come a long way since the days of the first Macintosh and the introduction of graphical user interfaces, going from monochrome colors to millions, from estranged mice to intuitive touchscreens, from scroll bars to pinch, zoom, flick and pan. But while hardware, software and the people who use technology have all advanced dramatically over the past two decades, our approach to designing interfaces has not. Advanced technology is not just indistinguishable from magic (as Arthur C. Clarke said); it also empowers us and becomes a transparent part of our lives. While our software products have definitely empowered us tremendously, the ways by which we let interfaces integrate with our lives has remained stagnant for all these years.

In the accessibility industry, the word “inclusive” is relatively commonplace; but inclusive design principles should not be reserved for the realm of accessibility alone, because they apply to many more people than “just” the lesser-abled. Interface designers frequently think in binary terms: either all of the interface is in front of you or none of it is. But people are not binary. People aren’t either fully disabled or not at all, just like they aren’t merely old or young, dumb or smart, tall or short. People sit along a vast spectrum of who they are and what they are like; the same is true when they use interfaces, except that this spectrum is of expertise, familiarity, skill, expectations and so on.

So, why do we keep creating interfaces that ignore all of this? It’s time for us to get rid of these binary propositions!

What Is “Inclusive” In The World At Large?

In the world at large — meaning not one particular industry, country or demographic — the term “inclusive” applies to cultures in which, for example, women are as welcome to contribute their opinion as men are; in which a person’s race or sexual orientation has no bearing on their acceptance by a group; in which everyone feels safe and comfortable, and no one feels suppressed, stymied or silenced; in other words, a culture of equal opportunity. But when we apply the term to interfaces, it doesn’t mean that interfaces should be equal for everyone; rather, it means that they should be equally accessible to everyone, and equally empowering no matter what the user’s skill level or familiarity. When these two aspects are combined, the product gets the best of both worlds: it is accessible to more people, without being compromised for advanced users.

Super Mario Bros. was accessible to play for anyone, and fun (and sometimes frustrating) for all.

An excellent example of software that has done this well is in the video game genre, going back as far as 1985 with Nintendo’s Super Mario Bros. It was a game that truly anyone could pick up and play, with an invisible interface that taught you everything you needed to know to get started and become good at it. The screen would only scroll right, so you couldn’t walk left. You could jump, but standing on top of special bricks did nothing, so you would try to jump against them from below. Pipes visibly led down, so you’d try your luck with the down arrow on the direction pad. And at the end of the level, the bonus flag was raised high, encouraging competitive players to jump to the very peak for top points. All of the game’s mechanics were explained in one level, without a single instruction, tutorial or guiding word.

Many games since 1985 have not featured this principle to any significant degree. Super Mario Bros. truly was a game whose interface was equally empowering; meaning, the interface and product magnified the results of your efforts based on the (skill) level of your input. Put differently, beginners would see good results from their efforts, while advanced users would see far greater results from theirs. These principles aren’t limited to video game design either; they apply just as much to software applications and productivity tools, even websites! So, let’s start with some simple inclusive design concepts.

Language And Aesthetics

Language has an impact on everything, because it is the primary way we communicate as a species. Its significance is also frequently overlooked; a Duke University study revealed that gendered language in job listings affects a job’s appeal, independent of the type of job. There’s more: while not a single participant in the study picked up on the gendered language, each of them did find the listings more or less appealing as a result. This raises the question: how much of an impact does the language chosen for our designs have on the number of new users who sign up or the number of customers we convince to purchase our products? No good study in this area seems to exist or be readily available, but one study (of a sort) that is available is the W3C’s own resource on people’s names around the world and its effect on form design. Let’s call it a good start and do more research into how language shapes the Web.

But language is just one metric that we don’t take into consideration as often as we should. Aesthetics play a significant role as well, yet there is a lot more to aesthetics than taste and general appeal. The placement of elements, whether shapes are angular or rounded, and our use of color all affect how different genders, demographics and cultures respond to interfaces. Because no one color scheme will please everyone all the world over, the more international our (targeted) audiences are, the more fully designed our localizations will need to be.

Interface Design Legacies

In the world of interface design, being inclusive means being accepting and welcoming of the many different cognitive skills and levels of expertise among users. Historically, we have striven for the perfect middle ground between approachable and empowering. Making interfaces more intuitive plays a significant role in that process, but it often demands that we dumb interfaces down (i.e. remove features), which can be undesirable for the advanced user who wants more functionality or control. With more comprehensive interfaces, a frequent “solution” to this problem is to allow users to customize the interface to their needs. But is this truly empowering? When research shows that less than 5% of people adjust default settings, it is highly questionable whether customization and settings are truly empowering in interfaces.

Earlier, I mentioned how most interfaces offer a binary proposition: either the application is open or it isn’t. When it’s open, the entire user interface (UI) is typically available to you, whether or not you need all of it. This makes sense from a historical perspective—when all we had were physical interfaces—but it makes little sense with our modern software ones, especially since most software interfaces are far more comprehensive than a typical hardware interface.

When Steve Jobs announced the iPhone at MacWorld in 2007, he compared the yet-to-be-revealed iPhone to popular smartphones of the time, noting their main problem as being “the bottom 40%” — i.e. the hardware buttons on all of those devices. The buttons were there “whether you need them or not.” The solution, according to Apple, was a large touchscreen with fully software-based UI controls. That way, each application’s interface could be optimally designed for its particular purpose.

The point Apple made along the way was that sticking to convention is a bad idea if you want to move an industry forward. Hardware buttons used to be all a phone had. Then, they were used to supplement a tiny screen. The iPhone showed that, when it comes to innovation in interfaces, the screen should be the full surface, a blank canvas onto which software could paint any interface. The unparalleled success of the iPhone suggests that Apple has proven their point well.

But as fantastic as the iPhone may have been compared to the smartphones before it, it still suffered from this same binary UI problem. The iPhone merely shifted the problem from being device-wide to being specific to individual applications, and then it masked the remaining issues by removing features or hiding them in drill-down views, until one very elegant, simplified UI remained for each app — one that lacked the ability to become more sophisticated for users who wanted, or needed, more.

To pilots, this is a familiar view. To others, it is a smörgåsbord of buttons. Image Source: Julien Haler

To be clear, removing features is not in itself a negative. Most interfaces get better from the process, because every visible feature, every UI control adds to the overall cognitive load of the user. Think, for instance, of an airplane cockpit and its countless little controls, dials and meters covering every surface. If you are not a pilot, the mere sight of it would overwhelm you. To an experienced pilot, however, it is simply what they need in order to fly the plane. Is this really the best we can do, though? Super Mario Bros. showed us we can do better.

In software, we have a situation that calls for the kind of innovation I’m talking about. As it is, more complicated, advanced and powerful applications feature more complex interfaces, and some can be downright overwhelming to first-time users. But not everyone wants to fly a plane — some of us are just trying to get some simple work done. Application developers try to alleviate this problem with tutorials, guided tours, help screens and overlays that explain each aspect of the UI; a great solution these things are not. What we need are better interfaces, interfaces that understand that we are human beings with different needs. What we need are…

Adaptive Interfaces

For interface designers with an eye on accessibility, most of their efforts have long focused on the technical challenges faced by users. Many commentators have encouraged us to consider cognitive (or learning) disabilities as one part of the broader area of (Web) accessibility, but rarely has anyone explained how to do this. Additionally, when someone sees the term “cognitive disability,” they understandably think of the mentally handicapped. But there is a huge range of cognitively able people, and they exist not on a linear scale: a quantum physicist might have a tough time figuring out how to use a feature phone, whereas the average teenager would have no problem with it.

People invest in an application (and, thus, its interface) in varying degrees, depending on how important the product is to their daily lives. This means that your interface should cater to varying degrees of investment in addition to differing levels of expertise and familiarity.

In an interface, each additional UI element increases complexity and asks for a deeper investment on the user’s part. This is why invisible interfaces (like the one in Super Mario) are so powerful: an interface that appears only when needed reduces the cognitive load, reduces the investment required to understand the product, and makes it easier for the user to focus on the task at hand. A button that is relevant only in certain contexts should be visible only in those contexts.

But we can take this principle to a level even beyond that. An interface that is truly inclusive of all kinds of users is one that begins with only the fundamentals and then evolves and adapts alongside the user. During this process, the interface can both grow and decay, acquiring more features and controls as the user becomes more fluent in using it, and dropping or reducing the prominence of UI controls that the user does not use much, if at all.

Doing this automatically also makes more sense than offering the user a large number of options to customize the UI, for two reasons: first, users shouldn’t be expected to spend a lot of time making an interface usable to them; secondly, people might not always know exactly what they want, but their behavior might make clear what they need. A system that intelligently measures what the user needs in order to deliver the most efficient, effective yet still understandable interface could allow such a thing. A highly effective interface is one that can be changed not to how each user wants it, but to how each user needs it.

Of course, measuring the cognitive skill of a user is difficult, and even then it can only be approximated. Certain aspects of the user’s behavior can be measured, which helps to inform us about how familiar the user is with the interface overall and how fluent they are in using it. The speed with which a user navigates an interface and uses or explores its features is a good metric for how comfortable they are with the interface. The frequency of their use of “Help” and “Undo” features suggests a certain confidence level. Users of keyboard shortcuts are almost certainly looking for more powerful features, and someone who uses quotes and AND and OR in their search queries is likely technically minded. These and many other measurable aspects of people’s behavior can help shape your application’s interface, which can then be adapted to better suit the needs of users.

The Nest thermostat learns from you.

This is not the end of the story; rather, it is only the beginning. Tony Fadell’s new product, Nest, is a great example of an adaptive interface in the real world. The Nest Thermostat learns from your behavior patterns as you go about your daily and weekly routines, and it becomes predictive, so that you need to adjust the thermostat less frequently the more you use it.

That’s but one example. The possibilities open up even more with inclusive and adaptive interfaces. One type of user might need Feature A very frequently, whereas another might need Feature B instead; a truly inclusive interface would adapt to these needs and be equally powerful for these two different types of users.

Conclusion

We’ve overcome the various technical challenges of interfaces and designs through Web standards, accessibility and ARIA, responsive Web design principles and touchscreen devices. But we have focused so much on these technical challenges that we’ve almost lost sight of innovating the human aspects of interface and design. The next stage of evolution for our industry is to explore how to make our applications and products more inclusive, taking into account the vast spectrum of differences in our audience, and to make our interfaces smarter so that they serve a wider range of people more effectively. Let our exploration of inclusive design begin!

(al) (il)

---

© Faruk Ates for Smashing Magazine, 2012.

Product pages for e-commerce websites are often rife with ambitious intentions: Recreate the brick-and-mortar shopping experience. Provide users with every last drop of product information. Build a brand persona. Establish a seamless checkout process.

As the “strong link in any conversion” (Richmond), product pages have so much potential. We can create user-centric descriptions and layouts that are downright appropriate in their effectiveness: as Erin Kissane says, “offering [users] precisely what they need, exactly when they need it, and in just the right form.”

And beyond that, a user-centered creation process for product pages can positively influence branding the information and easing the content clutter that so often bogs down retail websites.

User-centric product copy garners positive results because it anticipates its viewer’s immediate reaction. As Dr. Timo Saari and Dr. Marko Turpeinen, authors of “Towards Psychological Customization of Information for Individuals and Social Groups” suggest, individual differences in processing information implicates dramatic variances in type and/or intensity of psychological effects, such as positive emotion, persuasion, and depth of learning (2).

We can describe products in a variety of ways. Highlighting certain aspects of a product will illicit different reactions from various users. Gearing product descriptions at a specific audience will encourage effective processing of the information, heightened persuasion, and potential for predicting what the user wants (and didn’t know they needed). The effort required of user-centric product descriptions demands that we understand how certain descriptors, contexts, and inclusions of details will affect the target user. And then put our discoveries to action.

This article offers a user-centric guide to producing product pages and provide examples of successful e-commerce websites that utilize user-centric approaches to product page descriptions and layouts.

Get To Know Your User

Approaching product page description and layout from a user-centric perspective demands that you have a rich understanding of the target user. As Saari and Turpeinen suggest, Web customization starts with some type of model, be it individual, group, or community (10).  With your models in place, you can best assess what they need, and how to write for them.

Web usability writer Janice Redish suggests these strategies for getting to know your target user:

• Scope the email responses that come through the website’s “Contact Us” form and other feedback links. Consider the profiles of the senders. You can discover commonalities in lifestyle, technological capability, education level, and communication preference through these channels.
• Talk to company Customer Service or Marketing employees. Don’t approach them with a broad demand of describing the typical client; ask questions about their interactions with clients. Who is calling in? Who is stopping by the office? What are common queries and complaints?
• Offer short questionnaires to users visiting the site. Redish suggests “ask[ing] people a few questions about themselves, why they came to the site, and whether they were successful in finding what they came for.”
• If possible, establish a sense of the client by simply observing the people coming through the front doors of the business. This is a great way to pick up on key phrases, jargon, emotional behavior, and demographics of the potential user.

Once you can confidently brainstorm major characteristics of your target user or group, developing models to guide the writing process will come next.

Keep in mind that gathering and compiling this information can take as little or as large financial and time investment as you (or the client) can afford, and still be effective. As Leonard Souza recently noted in a Smashing Magazine article, even stopping in a nearby coffee shop to engage with five to ten people in your target demographic can provide useful insight. With a bit of flexibility, learning opportunities can be found conveniently and on the cheap.

The models created from your gathered user-information can be fashioned into personas, which Souza also outlines in his article as “tools for creating empathy among everyone in [a] project.” I would suggest using personas to guide user-centric copywriting by establishing very specific user goals and preferences.

A persona is a fictional person compiled from the characteristics of your target user. You can get creative here with producing a name and image, but not too creative. The persona must be mindfully constructed with targeted age, education, family status, and other personal details pertaining to your research.

With a persona to please as you construct a product description and layout hierarchy, staying on a user-centric track is that much easier. Take a look at this British Columbian yoga wear retailer product description:

Product description from Shop.lululemon.com

The product description assumes its user possesses a specific set of jargon: how many non-yoga participants know what “Downward-Dog” means? Or “pipes”, as the “Key Features” content refers to arms as. This content drives right to the needs and preferences of a very specific user. She wants warmth (four “Key Features” note the thermal quality of the product), convenience (pre-shrunk fabric, easy layering), and encouragement to revel in or motivate an active lifestyle (she can associate with the yoga jargon, and enjoy giving her “pipes some air time”).

Rich user understanding has made this product page effective and delightfully specific to both the user and the brand.

Master S.M.A.R.T. Content and Layout

Without specific, measurable, actionable, relevant, and trackable user goals driving product page copy, the information will sag. I draw here from Dickson Fong’s enlightened article, “The S.M.A.R.T. User Experience Strategy”, to suggest that specific care should be taken to develop user goals to guide the writing process for product pages.

The S.M.A.R.T. formula will keep you on track as you plot out product details and decide what descriptive angle to use.

Fong provides an excellent user-centric S.MA.R.T. goal for product pages to fulfill: “I want to learn more about this product’s design, features, and specifications to determine whether it fits my budget, needs, and preferences.”

This helps create a checklist when assessing what to display and what to offer as optional information when structuring the layout of the page (more about that in Create Information Hierarchies). It provides direction when writing content, and breeds the inclusion of user benefits. And as Darlene Maciuba-Koppel suggests, “in copywriting, your end goal is to sell benefits, not products, in your copy.”

Benefits and accomplished goals go hand-in-hand for users; a product not fitting a user’s budget, needs, and preferences offers little benefit to him or her. So for S.M.A.R.T. goal-driven product pages to function for user-centric purposes, the text must follow suit. Fong suggests presenting relevant content details for the specific consumer of that product type.

Let’s take Fong’s S.MA.R.T. user goal for product pages and assess the specifications at play in these two Dell.com pages:

Product page for Alienware on Dell.com

Featured through Alienware, the Dell computing hardware subsidiary for the needs of high-performance gaming, this product description has been tailored to accomplish a very specific user’s primary browsing goal. The needs and preferences of the users have already been predicted in the bullet-point outline, highlighting optimum graphics and top-notch liquid cooling capabilities, fusing the checklist of features with a checklist of benefits for the user.  The product, a computer desktop, could be highlighted for a number of features. But for optimal user ease, the specifics most likely to accomplish user goals have been utilized in the product description.

Another Dell desktop, another target user goal being accomplished in the description:

Product page description for Inspiron 570 on Dell.com

With a noticeable absence of technical details and a heavy emphasis on product personalization, this description plays to a user with very different intentions than the Alienware shopper.  Even the optional information tabs have been re-arranged to reflect the best course of action for user goals. The Inspiron 570 Desktop shows “Customer Ratings” as the first tab, while the Alienware model offers “Design” first, and then “Tech Specs”.

These are all decisions that are guided by accomplishing very specific user goals: find the needed information and assess the benefits.

Use Personal Pronouns

Consider again the Dell.com product description:

“Make It Yours The Inspiron™ 570 desktop is everything you want and nothing you don’t. Available in vibrant colors, so you can complement your style or stand out from the crowd. Plus, you can build your desktop according to your needs with a choice of multiple AMD® processors and NVIDIA^® ATI graphics cards as well as other customizable features. So whether you are surfing the Web, emailing friends and family, downloading music and photos or blogging about it all, the Inspiron 570 desktop can handle it.”

Product description for the Inspiron 570 Desktop at Dell.com

“Your” wants, “your” style, “your” needs, “your” friends, and “your” Internet past-times- including the title, eight instances of “you” or “your” turn up in this eighty-six-word portion!

Use of personal pronouns in product description is perfectly appropriate and supremely effective in engaging users, as “people are much more likely to take in [messages] if you write with ‘you’ because they can see themselves in the text”(Redish).

With the Dell.com content, using personal pronouns works to target a specific user (one with enough savvy to download music and email, interested in customization and feeling unique), while also managing a broad gender appeal.

Outdoor outfitters REI employ personal pronouns in online product descriptions, creating dynamic scenarios aimed at a specific user:

Product description for REI.com

The speaker asserts that this canoe will help you navigate a waterway “you’ve recently noticed,” anticipating a specific user reality (or dream, however you choose to look at it).

The product showcase devotes itself to its users needs and how the user will benefit from purchasing the canoe. Using “you” is the clearest and most direct way for this retailer to grab the user’s attention and, at any time of the year, convince the user that this canoe is the right buy.

Brain Traffic writer Angie King backs this up in her article “Personal pronouns: it’s okay to own your Web copy”. She suggests that using first and second person pronouns helps users connect with the content, and “reflect[s] the way real people write and speak,” aiding an immediate connection.

For product description that speaks directly to a specific user or group, the “you’s” should flow freely.

Use Information Hierarchies

Enlisting a user-centric approach to product page layout and copy can help you tackle the challenge articulated by Six Revisions guest writer Kean Richmond: “How do you cram so much information into a single Web page?”

Between technical specifications, shipping information, item details and preference options (and don’t forget that compelling product description), product pages must also list every describable service the product performs for its customers, including customer benefits (Maciuba-Koppel).

By all means, provide the user with every last detail possible. Answer every conceivable question, or make the answer visible for discovery. Do so with information hierarchies that are based on a rich understanding of targeted users. This keeps each page tidy, and drives users to complete business goals.

With a structure where “all the important information is at the top and [the rest] flows naturally down the page” (Richmond), details that might not be top-priority for your target user can be tucked into optional tabs or presented at the bottom of the page. The key is gauging the structure of the page with targeted user sensibilities in mind.

Look At User Context

Here’s where you become a mind reader of sorts. Brain Traffic contributor Erin Kissane points to content strategist Daniel Eizan’s approach to understanding what specific users need to see on a page to be drawn in to the information. Eizan looks at user context to gauge their Web browsing behaviors. He asks: what are they doing? How are they feeling?  What are they capable of?

Establishing user contexts aids in planning an information hierarchy, and can be seen in practice for small and large e-retailers. On the big-box side, we have Walmart.com:

With the price and product name (which includes the unit number per order), immediately visible, a possible user context has been anticipated. The Walmart.com visitor searching for granola bars has perhaps purchased the product before. With unit price made visible, perhaps the anticipated user is judging the product based on whether this box size will suffice in his or her order.

Details like “Item Description” and “Specifications” are options, convenient to the user that is making a large, routine order of a familiar product.

The user context influences the hierarchy: the user seeks a quick calculation of units per product vs. price. The targeted user does not need immediate ingredient lists, allergy information, or taste description. But if they do, it is available in neat, option-based presentation.

Wal Mart has built its reputation on “Every Day Low Prices”, and the brick-and-mortar philosophy has crossed over to their e-retailer. They anticipate users that have some familiarity with their products, and certain expectations for price points.  These factors play into the information hierarchy across the website.

Now look at a food bar retailer of a different kind: Cashew Cookie product page from Larabar.com

We see an online retail presentation of a product similar to Wal Mart’s Nature Valley granola bar (though some might argue otherwise).  However, the information hierarchy clearly speaks to a different user. A specific user. One who might be looking for gluten-free snack foods, or a vegan protein solution. The Larabar user context is much less urgent than the Wal Mart user. The product page does not reveal pricing or unit number. Ingredients are visible here, with simple images that, when scrolled over, provide additional nutritional information.

The user in mind here will have more time to peruse, to browse several varieties of product, and read the delightful descriptions that help users imagine the tastes and textures.

This user could be very much like the targeted Wal Mart user, but is likely visiting the Larabar site in a different context. This product page offers more immediate nutrition education and taste information, selling to a user that is perhaps on the hunt for a solution to dietary needs or healthful snack alternatives.

However, the red-boxed “BUY NOW” is posed in a memorable, convenient place on the page, leaving no guessing games for the user who, after reading a description for a healthy bar full of “rich and creamy flavour,” will likely click it to discover purchasing options.

With two product pages, and one arguably similar product being described and presented for Web users, we can see two completely different ways of structuring the details.

Both are effective-for their targeted user. A person seeking gluten-free snacks for a camping trip might have a frustrating experience searching the hundreds of granola bar options on Walmart.com. But they aren’t going there in the first place; they’re using search engines to inquire about their needs, and are finding Larabar.com.

Information hierarchy solves the content-overload challenge that can overshadow product page construction, and can be used as an opportunity to bolster user-centric copy and layout.  As mentioned before, the key is to gauge user context.

Conclusion

While user-centric consideration of product page description and layout is not the only way to go, it does provide a focused approach that has appeared to be effective for some pretty successful e-retail players. Consistency in product pages is key, especially when building a brand presence; a reliable guide can ease the writing process. The user-centric method does require some primary research, but this provides a sturdy track by which to gauge every bit of content on the page as so: how is it benefiting the user?

As Maciuba-Koppel says, as a content writer or designer your goal should not be to sell products, but to sell benefits.

Now watch the conversions multiply.

References

• Writing for the Web: Creating Compelling Web Content Using Words, Pictures And Sound Lynda Felder (New Riders: 2011)
• “The S.M.A.R.T. User Experience Strategy” Dickson Fong (Smashing Magazine)
• “Personal pronouns: It’s okay to own your Web copy” Angie King (Brain Traffic)
• “A Checklist for Content Work” Erin Kissane (A List Apart)
• “Writing Copy that Works for a Living” Erin Kissane (A List Apart)
• The web-writer’s guideDarlene Maciuba-Koppel (FocaPress: 2004)
• “Letting Go Of The Words”: Writing Web Content that Works. Janice Redish (Morgan Kaufman Publishers)
• “Anatomy of an Effective Product Page Design” Kean Richmond (Six Revisions)

• (fi)

  ---

  © Sarah Bauer for Smashing Magazine, 2012.

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such in their descriptions. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time.

Free Fonts

Homestead Homestead is a very distinctive Slab Serif typeface that leaves a lasting impression with its geometric forms and a modern, progressive look. The family is available in 6 weights: Regular, Inline Display, One, Two and Three. Released by the Lost Type foundry with the “name-your-price” pricing scheme. Homestead can be used freely for any personal or commercial use.

Bree Serif Regular This typeface is the serif cousin of the playful, charming and versatile type family Bree which was designed by Veronika Burian and José Scaglione back in 2008. Actually, Bree is also the typeface used in the Smashing Cartoons. An italic font weight of Bree Serif should be available very soon. Released under the liberal OFL license (via Typografie.info).

Lavanderia Lavanderia is a script font based on lettering found on Laundromat windows of San Francisco’s Mission District. It features numerous OpenType features such as swashes, titling alternates, figures, stylistic alternates, ligatures. It is available in three weights, with Uppercase, Lowercase, Numerals and Punctuation sets. Designed by the talented type designer James T. Edmondson and released by the Lost Type Co-Op foundry. Free for personal and commercial use.

RBNo2 This new gothic sans serif font was inspired by the late 19th century industrial fonts that contained german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts, it catches the eye when used in headlines and short copy texts. Alternate versions turn the font into a perfect partner for modern, technical and contemporary impressions as well as high-quality, luxury and timeless environments. Free to use in commercial and non-commercial projects. Designed by Rene Bieder.

Cassannet Cassannet is a geometrical art deco typeface available in Regular, Bold and Outline weights, based on lettering seen on Cassandre posters. This typeface contains ligatures, capitals, numbers, small capitals and also titling alternates. You can pay a random amount of money or alternatively send out a tweet or a Facebook post to download the fonts for free.

Valencia Valencia is a condensed, art-deco inspired typeface that includes five weights, ranging from hairline to black, with matching obliques for each weight. The typeface has a nice corporate vintage look which makes it a great fit for large headlines and prints as well as any collateral or stationery. Valencia’s distinctive appearance stems from its low horizontal crossbars and its full-circle curves. Released by the Lost-Type Co-Op foundry with the “name-your-price” pricing scheme and hence freely available for personal and commercial use.

Jura Jura is an elegant serif typeface with narrow proportions and distinguishing details. The rounded, wedge-shaped serifs offer a contemporary feel and also achieve to maintain legibility even with its range of small sizes. This typeface is available in four weights: Regular, Italic, Bold and Bold Italic and is available for free download and use.

Nomed Font Nomed Font is a free typeface that can help you achieve a modern and sophisticated look in your designs. The triangular geometric shapes may be a bit hard to read but that’s exactly the highlight of this particular style, and it makes the typography unique and original.

Carton This typeface, designed by Nick McCosker, is a strong yet sensitive slab-serif inspired by letterpress. Its sturdy appearance makes it a perfect fit for posters, headings and taglines, in both classic and contemporary contexts. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme.

Novecento (Registration on MyFonts is required!) This typeface is an uppercase-only font family with some pretty impressive geometric forms that have been inspired by historical European typographic tendencies. It was designed to be used mostly for headlines, visual identities or short sentences — both in big and small sizes. The family contains 471 glyphs and 32 font weights whereas six of the font weights of the wide-version (Light, Book, Normal, Medium, Demibold and Bold) are available for free download and use.

Fjord Fjord is serif typeface that has specifically been designed for book publications. It is intended to be used in long texts and in relatively small print size. Fjord features sturdy construction, prominent serifs, low-contrast modulation and long elegant ascenders as well as descenders relative to the ‘x’ height. Fjord performs well in sizes starting from 12px and higher; nevertheless, it can also be a distinctive font choice for larger text headlines and in corporate design. This serif typeface include Cyrillic and Greek characters and is available at Google Web Fonts. It has been released under the SIL Open Font License, 1.1. Feel free to take a look at the designer’s free font Armata as well.

Hero Hero is a crisp geometrical typeface applicable for any type of use: print, Web, logos, posters, booklets. This typeface contains 162 characters and is free for personal and commercial use. Available in the OpenType format for PC and Mac.

Otama e.p. Here’s a quite confident typeface to use for expensive and fashionable designs. Strong steams and thin serifs shows similarities to the well-known traditional Didot typeface. This typeface is free for personal and commercial use.

Ribbon This typeface is a geometric display face which includes OpenType features for an alternate alphabet. The family contains sets for Uppercase, Numerals and Punctuation. Released by the Lost Type Co-Op under the “name-your-price” pricing scheme and designed by Dan Gneiding. If you decide to buy the font for $30 or more, you will get a beautiful Ribbon Specimen Book as well.

Movavi Movavi is a sans serif font that is available only in the font weights Black and Black Italic. Obviously, the typeface wouldn’t work for body copy, but it might work nicely in short headings or “groovy” art works. Available for free download and use on PC and Mac.

Satellite Satellite is a geometric sans serif font designed by Matt Yow. The typeface can be a great fit for short headlines, short body copy or slogans. Released under the SIL Open Font License.

Open Sans Open Sans is a very clean font family by Ascender Fonts. It includes ten styles (Light, Regular, Italic, Semibold, Bold, Bold Italic, Extrabold) and each one consists of more than 900 glyphs: Latin, Greek, Cyrillic, many of the regular diacrytic letters as well as “hanging” numbers. Also available at Google Web Fonts and released under the Apache License version 2.

Mosaic Leaf The glyphs of this expressive typeface are built out of leaves of different sizes. Mosaic Leaf also contains numbers, punctuation and currency symbols. The .zip-package contains PDF, OTF and TTF files; the fonts support Western and Central European encoding, and also Baltic, Nordic and Turkish. The typeface is free to use in commercial and non-commercial projects. Designed and prepared by Lukasz Kulakowski and Zbyszek Czapnik.

Amaranth Amaranth is a sans serif font family of four basic styles (regular, italic, bold, bold italic) with individually shaped letter forms that makes typeface more playful. Suitable for both Web and print, longer texts and headings. Available at Google Web Fonts and licensed under the SIT OpenType License. Image credit and source: dersven.

Siruca Pictograms A pictogram open source font made as a part of Siruca signage system designed by Fabrizio Schiavi. The font contains many picograms related to sport, signage, home, social meetings, free time activities and business.

Erler Dingbats For the first time in the entire history of Unicode standard, the full encoding range for dingbats is now covered by a complete, contemporary quality font. FF Dingbats 2.0 features more than 800 glyphs and is mainly a tool for professional designers and has been created for everyday communication purposes. It includes a wide range of popular symbols and pictograms such as arrows, pens, phones, stars, crosses and checkmarks, plus three sets of cameo figures on round backgrounds. Free of charge. (via fontblog)

Further Free Fonts

SD Sansimillia SD Sansimillia is a playful, yet elegant typeface suitable for many different applications. Originally cut for a local advertising brand, SD Sansimillia is inspired by the Antenna Family built by Cyrus Highsmith in 2007 as well as Erik Spiekermann’s FF Din Family cut in 1994. It is issued in regular, bold and black weights.

Mimic Roman Mimic Roman is a modern sans serif face with evenly balanced strokes and a counter on a slight angle, giving it a 1950s retro look.

Roboto Roboto Family is a linear sans serif font, available in 8 different styles of which each includes more than 900 glyphs — Greek and Cyrillic, too. This font was designed by Google for Andorid and is licensed under the Google Android License.

Mate An elegant serif font designed by Eduardo Tunni. This typeface was primarily designed to be used in longer body copies in printed material. It is simple in structure and has sharp as well as generous counter-shapes which create a medium texture that calls for page color. It can also be used as display typography and is available at Google Web Fonts.

Last Click

Shape Type If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. The idea of this JavaScript-based letter-shaping game is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. It’s an engaging way to explore what makes or breaks a glyph.

Font-Bot Project It is time for your favorite font to stand its ground. The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!” Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). Let’s see if your font has what it takes to defend its corner. Fight!

Further Resources

• Lost Type Co-Op The Lost Type Co-Op is a Pay-What-You-Want Type foundry. Users have the opportunity to pay whatever they like for a font; you can type in ‘$0′ for a free download. 100% of all funds from these sales go directly to the designers of the fonts themselves, respectively.
• The League of Moveable Type The open-source type movement for bringing high-quality tyepfaces to the Web. The creators of the project keep releasing quality fonts every now and then so be sure to stay tuned!
• Google Web Fonts A growing directory of hundreds of free, open-source fonts optimized for the Web. Google also provides ready-to-use snippets for integrating the fonts to your website.
• Typography and Free Fonts on Smashing Magazine An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all type designers featured in this post. Please keep in mind that type design is a time-consuming craft which truly deserves reward and support. Please consider supporting type designers who create and release amazing typefaces for all of us to use.

(vf) (il)

---

© Smashing Editorial Team for Smashing Magazine, 2012.

The answer to the question; why a web designer should not ignore the importance of HTML5 in designing is actually very simple. HTML5 is the language of the future when it comes to web designing. Move over Flash, HTML5 is here. But why is this language being favoured over others when it comes to web designing? Let us see the reasons.

Why a Web designer should not Ignore the Importance of HTML5 in Designing and How to Design a Good Website Using HTML5:

The major reason due to which HTML5 is indispensable in the world of designing is because it makes the process of designing good websites relatively simple and easy. So before we see how HTML5 adds to the world of designing, let us first see how we can design a good website.

In order to make a website that is visually appealing, the first and foremost rule is to keep it clean and free from unnecessary clutter. In a website, less is usually more, but not necessarily unattractive. So keep it simple.

If there is one main picture that needs to be put in the site, it can be good ideas to make that particular picture the background for that website. That way, it will not only look more attractive, but you will be able to drive your point across as well.

Don’t be scared of using big and noticeable fonts. When you need to catch eyeballs, this can be a great way to do so. Of course, while playing with sizes, make sure your writing, even if it is the title of your website, does not end up looking too big and inappropriate. Plain and basic need not be your mantra for your website’s backgrounds anymore because textures are back in the picture. Due to the new and improved software available, textures have gone through a makeover and are once again highly in demand. In fact, a mixture of solid coloured background and textured background can look most innovative and attractive.

The icons, pictures etc. used in the website must not cause any strain to the eye. Therefore they should be sufficiently large in size and care should be taken that no part of the picture should appear to be imperfect or pixelated . Following these points and instructions can help one design a website that will appeal to any viewer.

Why a Web designer should not Ignore the Importance of HTML5 in Designing:

HTML5 has many advantages over the other languages that are presently in use, in the world of web designing. One of the major reasons for HTML5’s popularity is that it is extremely easy to learn and use. The application development of HTML5 on a particular website is relatively simple, which naturally makes it the popular choice. HTML5 is also the revised and improved version of the old HTML, so it has certain additions along with the old features too. The input area and text area are two such new features. Because of this, if some part of area where text was to be put remains empty, default text is automatically added to it.

Previously, this task of injecting this placeholder text was carried out by using JavaScript. However, putting text in the field for input using JavaScript was tough as JavaScript is not accessible with much ease. However, with the arrival of HTML5, these worries have been taken care o that the same procedure can be carried out with much more ease using this improved new language. If there is still doubt regarding why a web designer should not ignore the importance of HTML5 in designing, let us take a look at how simple HTML5 has actually made the process of injection of text in respective field. The placeholder, in case of HTML5, only requires the following inputs: Email, Search, Password, Telephone, Text and URL. This feature is supported by Safari/Chrome 4.0 and also by the Firefox 3.7. Placeholder text does not only fill the empty input field, it also adds watermark to filled-in text. This can be an extremely helpful feature in web designing.

Animations no doubt, go a long way in making websites look attractive. Previously, adding reasonably big sized animations or using animations as backgrounds were not possible because the languages used at that time did not support these features. But nowadays, thanks to HTML5, this kind of animated backgrounds and big animations have not only become possible, but also quite common.

The success of HTML5 is in the fact that these animations do not even take up an outrageously high amount of broadband. Thanks to these properties, the world is slowly and steadily moving on to 3D, leaving 2D behind.

Now that we know of the enormous contributions that HTML5 has made in this field, we should already know the answer to the question why a web designer should not ignore the importance of HTML5 in designing.

About the Author:
The above article is composed and edited by the team of WizKraft. They are associated with many technology and designing communities as their freelance writer and advisers. They excel in writing articles related to logo design, web design, wordpress etc.

Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3-D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature.

That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3-D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.

That being the case, this is an ideal time to get ahead of the curve and start learning about the possibilities and potential of adding an extra dimension to your Web pages. This article aims to help you do just that, by taking you on a flying tour of the 3-D Transforms syntax.

Please bear in mind that in order to see the examples in this article, you’ll need a browser that supports 3-D Transforms; as I write this, that’s Safari, Chrome, IE 10 Platform Preview or Firefox Aurora.

The Third Dimension

On the Web, we’re accustomed to working in two dimensions: all elements have width and height, and we move them around the screen horizontally (left to right) and vertically (top to bottom). The move to a third dimension can be thought of as adding depth to elements, and adding movement towards and away from you (the viewer). Think about 3-D films in which objects are constantly thrust out of the screen towards you in an attempt to demonstrate the possibilities of the extra depth.

To use 3-D Transforms in CSS, you’ll need to know about axes (that’s the plural of axis, not the plural of axe). If you already know about working in three dimensions or remember using axes in math class at school, you can skip the next section. For everyone else, here is…

A Quick Primer On Axes

I just mentioned that on the 2-D Web, we move elements around horizontally and vertically. Each of these directions is called an axis: the horizontal line is known as the x-axis, and the vertical line is the y-axis. If we think of the top-left corner of an element as our origin (i.e. the point from which movement is measured), a movement to the left is a negative movement along the x-axis, and a move to the right is a positive movement along the x-axis. The same goes for moving an element up (negative on the y-axis) and down (positive on the y-axis).

The third dimension is known as the z-axis and, as I said, can be thought of as towards or away from you; a negative movement along the z-axis is away from you, and a positive movement is towards you.

Showing the three axes: x (left-right), y (up-down) and z (away-towards).

If you’ve read all of this talk of axes and negative movements and you’re rubbing your eyes and blinking in disbelief and misunderstanding, don’t worry: it will all become clear when you get stuck in the code. Come back and read this again after a few examples and it should all be clear.

Transformation Functions

The various transformations are all applied with a single CSS property: transform — yes, the same property that’s used for 2-D CSS Transforms. At the moment, this property is still considered experimental, so remember to use all of the browser prefixes, like so:

div {
  -moz-transform: foo;
  -ms-transform: foo;
  -o-transform: foo;
  -webkit-transform: foo;
}

Note that Opera doesn’t currently have an implementation of 3-D Transforms, but I’m including it here because work is apparently underway. For the sake of clarity, in the examples throughout this article, I’ll use only non-prefixed properties, but remember to include all of the prefixed ones in your own code.

Anyway, the transform property accepts a range of functions as values, each of which applies a different transformation. If you’ve used 2-D CSS Transforms, then you’ll already know many of these functions because they are quite similar (or, in some cases, the same). Here are all of the 3-D functions:

• matrix3d
• perspective
• rotateX, rotateY, rotateZ, rotate3d
• scaleX, scaleY, scaleZ, scale3d
• translateX, translateY, translateZ, translate3d

Now, matrix3d definitely sounds the coolest, but it’s so unbelievably complex (it takes 16 values!) that there’s no way I could cover it in this article. So, let’s put that aside and take a quick look at the others.

Rotation

To explain what this does, I’ll have to ask you to do a little mental exercise (which will come in useful later in the article, too). Imagine a sheet of card with a string running through the middle that fixes it in place. By taking the top corners in your fingers, you can move the card up and down, left and right, and forwards and backwards, pivoting around the string. This is what the rotate() function does. The individual functions rotateX(), rotateY() and rotateZ() take a deg (i.e. degree) value and move the element around its point of origin (where the string passes through it) by that much.

Have a look at our first example (a screenshot is shown below in case you don’t have access to a supported browser). Here we’ve rotated each of the elements 45° around a different axis (in order: x, y, z), so you can see the effect of each. The semi-translucent red box shows the original position of the element, and if you mouse over each, you’ll see the transformations removed (I’ve used this convention in all of the examples in this article).

Each element is rotated 45° around a different axis: x (left), y (center) and z (right).

There is a rotate3d() function as well, but it’s too complex to explain in a brief article like this one, so we’ll skip it.

Translation

This is really just a fancy way of saying “movement.” The functions translateX(), translateY() and translateZ() each take a length value, which moves the element by that distance along the given axis. So, translateX(2em) would move the element 2 ems to the right, and translateZ(-10px) would move the element 10 pixels away from the viewer. There’s also a shorthand function, translate3d(), which takes three values in order, one for each axis, like so: translate3d(x, y, z).

In our second example, we’ve translated each of the elements by -20 pixels along a different axis (in order: x, y, z).

Each element is translated by -20 pixels along a different axis: x (left), y (center) and z (right).

Note that translation of an element is similar to relative positioning, in that it doesn’t affect the document’s flow. The translated element will keep its position in the flow and will only appear to have moved, meaning it might cover or show through surrounding elements.

Scaling

This just means making bigger or smaller. The three functions scaleX(), scaleY() and scaleZ() each take a unitless number value, which is used as a multiplier. For scaleX() and scaleY(), this is applied directly to the width and height; for example, applying scaleY(1.5) to an element with a height of 100 pixels would transform it to 150 pixels high, and applying scaleX(0.75) to an element with a width of 100 pixels would transform it to 75 pixels wide.

The scaleZ() function behaves slightly differently. Transformed elements don’t actually have any depth to increase or decrease; what we’re doing is more like moving a 2-D object around in 3-D space. Instead, the value given to scaleZ() acts as a multiplier for the translateZ() function that I explained in the last section. So, applying both translateZ(10px) and scaleZ(2) would translate an element 20 pixels along the z-axis.

There’s also a shorthand property, scale3d(), which, like translate3d(), takes three values, one for each of the individual functions: scale3d(x,y,z). So, in the following code example, the same transformation applies to both of the elements:

.e1 {
   transform: scaleX(1.5) scaleY(1.5) scaleZ(0.75);
}

.e2 {
   transform: scale3d(1.5,1.5,0.75);
}

Perspective

The perspective() function is quite simple, but what it actually does is quite complex. The function takes a single value, which is a whole number greater than 0 (zero). Explaining this is a little complicated; the number is like a distance between you and the object that you’re viewing (a tutorial on Eleqtriq has a more technical explanation and diagram). For our purposes, you just need to know that the lower the number, the more extreme the 3-D effect will appear; any value below 200 will make the transformation appear very exaggerated, and any value of 1000 or more will seem to have no effect at all.

In our third example, we have three transformed elements, each with a different value for the perspective() function: 25, 50 and 200, respectively. Although the difference between the three is very discernible, it’s even clearer when you mouse over to see the transformations removed.

Each element has a different value for the perspective() function: 25 (left), 50 (center) and 200 (right).

Note that I’ve transformed the parent elements (equally) so that we can see the degree of perspective more clearly; sometimes the difference in perspective values can be imperceptible.

Other Properties

In addition to Transform, you’ll need to know about a few other important properties.

transform-style

If you’ll be applying 3-D transformations to the children of an already transformed element, then you’ll need to use this property with the value preserve-3d (the alternative, and default, is flat). This means that the child elements will appear on their own planes; without it, they would appear flat in front of their parent.

Our fourth example clearly illustrates the difference; the element on the left has the flat value, and on the right, preserve-3d.

The element on the left has a transform-style value of flat, and the one on the right has a value of preserve-3d.

Something else to note is that if you are transforming child elements, the parent must not have an overflow value of hidden; this would also force the children into appearing on the same plane.

transform-origin

As mentioned, when you apply a transformation to an element, the change is applied around a point directly in the horizontal and vertical middle — like the imaginary piece of string we saw in the earlier illustration. Using transform-origin, you can change this to any point in the element. Acceptable values are pairs of lengths, percentages or positional keywords (top, right, etc.). For example:

div {
   transform-origin: right top;
}

In our fifth example, you can see the same transformations applied to two elements, each of which has a different transform-origin value.

The element on the left has a transform-origin value of center center, and the one on the right has a value of right top.

The difference is clearly visible, but even more obvious if you pass the mouse over to see the transformation removed.

backface-visibility

Depending on which transformation functions you apply, sometimes you will move an element around until its front (or “face”) is angled away from you. When this happens, the default behavior is for the element to be shown in reverse; but if you use backface-visibility with a value of hidden, you’ll see nothing instead, not even a background color.

perspective and perspective-origin

We introduced the perspective() function earlier, but the perspective property takes the same values; the difference is that the property applies only to the children of the element that it’s used on, not the element itself.

The perspective-origin property changes the angle from which you view the element that’s being transformed. Like transform-origin, it accepts lengths, percentages or positional keywords, and the default position is the horizontal and vertical middle. The effect of changing the origin will be more pronounced the lower the perspective value is.

Conclusion

By necessity, we’ve flown through the intricacies of the 3-D transformations syntax, but hopefully I’ve whetted your appetite to try it out yourself. With a certain amount of care for older browser versions, you can implement these properties in your own designs right now. If you don’t believe me, compare the list of “More adventures” on The Feed website that I built last year in a browser that supports 3-D transforms and in one that doesn’t, and you’ll see what I mean.

Some of the concepts used in 3-D transforms can be quite daunting, but experimentation will soon make them clear to you in practice, so get ahold of a browser that supports them and start making some cool stuff. But please, be responsible: not everything on the Web needs to be in three dimensions!

Further Reading and Resources

• The Bright (Near) Future of CSS Eric Meyer’s comprehensive article on CSS3, covering CSS3 3D Transforms as well.
• 3D Transforms, Westciv This tool lets you play around with different transformation values and shows you the result in real time.
• “CSS3 3D Transforms,” W3C The CSS 3D Transforms module is the full specification, although it is very dry and technical.
• “20 Stunning Examples of CSS 3D Transforms,” Paul Hayes See what you can build when you master 3-D Transforms.
• The Book of CSS3, Peter Gasston My book contains much more detail about all of the functions that I’ve covered in this article, as well as the ones I had to leave out.

(al)

---

© Peter Gasston for Smashing Magazine, 2012.

Vertical bed

Poesy bed

Faux-cardboard Duvet Cover

Zip bed

Magnetic Floating Bed

Hanging Bed

Canopy Bed by Joseph Walsh

Hammock Bed

Coffin Couch

Tree bed

Wood bed

And…a fantastic bed of nails. Comfortable.