For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.

Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for. In this article, we’ll show you how spending more time up front designing user flows leads to better results for both the user and business. Then we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.

[Editor's note: Have you already got your copy of our Printed Smashing Book #2? The book covers best practices and techniques for professional Web designers and developers.]

Start With The User

When starting a new Web design project, we’re often handed a design brief, branding standards, high-level project goals, as well as feature and functionality requirements. Unfortunately, these documents typically amount to little more than the technical specifications of the project, with almost no thought given to how exactly the website will fulfill the multiple user objectives that lead to successful interactions.

Two examples of popular user flows for e-commerce and subscription websites.

If you start with a detailed look at the objectives of the user and the business, you would be able to sketch out the various flows that need to be designed in order to achieve both parties’ goals. User objectives could range from finding a fact to replacing a product to learning a new skill to buying a gift for someone. Business objectives could be getting a lead, a like, a subscriber, a buyer, a download or a phone call. Identifying each user and business objective is the first step to creating design flows that meet all of them.

Map User Flows Into Conversion Funnels

Not all website visitors are created equal. Users come from different sources, with varying levels of knowledge and engagement, and with different goals. It’s up to you as a user experience designer to map those in-bound user flows to conversion funnels that provide value to the user as well as the business.

You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain. Custom flows allow you to architect experiences according to traffic source or visitor type and enable you to set the experiential pace, build user confidence and get buy-in on the way to the ultimate conversion.

Typical User Flows

Some typical user flows are:

• Paid advertising
  A user coming from a banner or Google AdWord ad.
• Social media
  A user coming from a friend’s post on a social network.
• Email
  A user coming from an email newsletter or referral invitation.
• Organic search
  A user coming from a deep link that was surfaced by a search.
• Press or news item
  A user coming from a mention in the news or a blog post.

Each of these visitors has their own needs, expectations and level of knowledge, and they need to be treated accordingly.

Diving Into Funnels: A Closer Look At Customer Acquisition

E-commerce websites typically have many different conversion funnels.

Let’s look at a critical flow for many websites — paid online customer acquisition — and break down its various elements. For this example, we’ll examine the experience flow from new visitor to email subscriber to purchaser.

Consider a company that uses display advertising to generate new customers for its business.

Display Media

With display advertising, it all starts with the banner. The design of the banner needs to achieve one precious goal: get a click from the right person. Here are some key questions to answer when designing the ads that represent the very front of your user flow:

• What type of user am I targeting?
• Are they actively seeking a solution to a problem, or are they casually browsing?
• What problem are they trying to solve?
• How can I best capture the user’s attention?
• How do I relate to the user?
• Is there a message that will resonate with the user?
• Is there a pain point that my product or website alleviates for the user?
• How can I articulate this solution clearly and quickly?
• What compelling calls to action will get our target user to click?

Your ads should address these main motivations and provide a compelling hook to get that all-important click. Up-front research and real-world testing will help to optimize the experience. Using this model, ReTargeter improved its banner click-through rate by four times. Its blog post lays out exactly how it achieved this success.

The Landing Page

The point when the user hits the landing page is when the user flow work really begins. Because these users are coming from a low-information source (such as a banner, as opposed to an in-depth blog post), you must design a flow that fills in the gaps of information by providing the user with the data that they need to be converted.

In our example, the user will hopefully be converted to an email subscriber; but depending on the business, the conversion could be to create an account, download a white paper or make a purchase. Whatever the conversion goal for the business, the key is to give the user a reason to keep moving through the flow, down the funnel.

Use the following methods to keep the user moving down the funnel:

• Build user confidence by clearly articulating key benefits, backed by easy-to-digest proof points.
• Streamline the content and design to focus on a clear call to action (in this example, to sign up for an email newsletter).
• Remove friction at every step. Ask for the minimum amount of information, and reduce the number of fields, extra clicks and page-loading time.
• Create an enticing hook, an itch that can only be scratched by completing the registration step.

KISSmetrics’ “Anatomy of a Perfect Landing Page” details the design, UI and copy elements that can help you meet your users’ need and drive conversions for your business.

Stacking Flows For A Complete User Experience Life Cycle

While viewing a funnel as something like Click on banner ad → Land on Web page → Register email is easy, designing and building stacked flows that drive the business’ ultimate objectives takes a bit more thought. In our example, we’ve successfully gained an email subscriber from the banner ad campaign, but the real business objective is to generate revenue through new purchases.

Treating the email subscriber flow and the e-commerce purchasing flow as two separate conversion funnels is an easy trap. In reality, the experiences are connected, and by looking at them as stacked flows, we can create a more cohesive interaction, one that drives optimal results for the business.

In our example, this stack is made up of the customer acquisition funnel and the customer relationship management (CRM) flow.

Stacking funnels creates a cohesive user experience life cycle.

When designing this flow, you need to consider what the biggest levers are for converting the subscriber into a buyer. Many of the earlier principles apply, but this time you have more touch points to consider and leverage.

In this flow, you need to look at all elements of your CRM strategy and the purchase flow of your website, including:

• Email communication back to the subscriber,
• Pages that the subscriber lands on when returning to the website,
• The flow from internal content pages to check-out.

Here are a few key considerations when designing the flow from subscriber to purchaser:

• Tell a visual story that the subscriber can identify with and wants to be a part of.
• Ensure that your emails reinforce the story, and give proof points to remind users why they subscribed.
• Include compelling calls to action to give the subscriber an opportunity to relate to and be a part of the story.
• Include prominent calls to action and easy, direct paths to the check-out process from the website’s internal content pages and blog posts. These validate the user’s hope about their role in the story.
• Make the check-out process as frictionless as possible, and reinforce confidence along the way to help the buyer commit to being a part of it.

By considering how the two flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion. Equally important, this flow also increases customer satisfaction because the stacked funnels keep the user experience smooth and on track to meeting their needs, with little confusion or ambiguity.

Putting Flow Design To Work For You

Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs. By prioritizing your user flows and focusing on the ones that drive the most value to the most users and to the business, you can make the greatest impact with your initial flow design.

When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind. This is particularly important with any type of commerce-driven business, for which the first conversion is often just a prelude to the primary revenue event. By stacking these complementary funnels, you create a more cohesive user experience that drives better results for both the user and your business.

So, the next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

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.

[Editor's note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

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:

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.

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.

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:

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:

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 data-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:

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.

(Smashing Magazine)

There comes a point in the career of many Web designers where the logical progression in that career is to take on a leadership position. A logical step or not, when a designer “assumes” this type of a position, there is often another “assumption” happening at the same  —  that wizard-like proficiency with HTML and CSS, coupled with a number of years in the industry, equips someone to take on a leadership role. This is, of course, not always the case.

Over the past few years, I have gone through this transition myself, moving from a Web designer to a Creative Director to my current role as the Director of Web Development. During this transition, I turned to the blogs and other resources that I had found helpful in my career to that point, looking for tips and lessons that would help me in my new role. I quickly realized was that while there are countless articles to help you become that aforementioned HTML and CSS wizard, there are precious few that deal with the move from designer to director.

In this article, I will share some of the lessons I have learned over these past few years. These are not earth shattering truths and many of these lessons are common sense, but these are the lessons that helped me along the way, and that I found myself needing to be reminded of most often, as I moved from team member to team leader.

Leading by Leading

Typically, someone who has risen from a Web designer to a director has done so because they excel in the technical aspects of the job (design, HTML, CSS, etc.) and also at solving problems. Because they are skilled problem solvers, it is easy for a director to want to solve the problems for those they are supervising, rather than leading them to solve the issues for themselves. The concept of “leading by doing” isn’t always the best solution, however. I think John Maeda, the President of the Rhode Island School of Design, says it best in his book, Redesigning Leadership:

“Leading by doing ceases to be leading when there is more doing than leading.”

For someone who is used to rolling up their sleeves and getting their hands dirty to solve a problem (or as dirty as HTML and CSS can really get your hands), this lesson of leading others to solve problems for themselves is one you will likely need to be reminded of often (I know I was).

To learn more about leadership, I highly recommend reading John Maeda’s book and visiting his blog.

How do you start letting go and allowing others to solve problems for themselves? Simple  —  you trust them and give them a shot. The solution they find with may not be the one you would have come up with, and you may need to direct them through a few extra rounds to get to the solution you would like, but the result is that you will help them get to that solution eventually!

This learning will pay off the next time they have to solve a similar issue, because by leading others to find solutions for themselves whenever possible, and really trusting them along the way, you will make your whole team stronger and free yourself up to do the other important work that is part of your new role as a director.

No Room for Negativity

If you have risen to a leadership position in an organization, it’s very likely you have commiserated and complained with the rest of the team on a number of occasions about everything from client feedback to project deadlines or budgets to general workplace frustrations. That has to stop.

Your team will take their cues from you. If you are frustrated and complaining, they will be frustrated and complaining. If, however, you take a bad situation and make the best of it and keep a positive attitude, that will go a long way to keeping the overall morale of your team positive as well. When the complaints do come, don’t ignore them, address them head on and diffuse the situation.

Now, this isn’t to say that you won’t get frustrated at times. Uncle Ben may have told Peter that “with great power comes great responsibility”, but he failed to add that with great responsibility also comes great headaches. You will get frustrated and need to blow off some steam from time to time, but you will find that by being the voice of reason and keeping calm, your own frustrations will often be diffused in the process. If you do need to vent, remember to never do it in front of your team. Their mood will mirror your own, so stay positive.

Buy Someone a Sandwich

Positive reinforcement is important to any team. This reinforcement can come in many forms, from financial rewards to additional benefits or time off, etc. One of the most effective ways that I have found to show someone their hard work is appreciated is also one of the simplest, however. Buy them some lunch.

Besides being affordable in even the most challenging economy, taking team members to lunch gets them out of the office for a bit and it allows you to interact with them on a real level. It’s easy to get caught up in the amazing advances in CSS3 or Responsive Web Design and forget that your team members are more than Web professionals  —  they are people with lives outside of the office and interests that have nothing to do with HTML.

Take someone out to lunch and leave the office behind. Don’t schedule the lunch like you would any other meeting, make it a surprise and delight someone who wasn’t expecting to go out that day. While you are out, be sure to say “thank you” for your team’s hard work. You’ll be amazed at what some good food, a real conversation outside of the office, and a genuine “thank you” will do for your team’s morale. Give it a shot for yourself  —  take your team out for lunch today and see what happens.

Sometimes even a creative side project is enough to spark the interest of your team. Try inviting everybody to a chalk board to engage creative thinking and make it clear that everybody’s opinion matters. Image credit.

If There’s Going to be a Meeting, Everyone Participates

Regularly scheduled meetings can help keep a team in sync, but meetings for the sake of meeting can be wearisome. When I first took over the responsibility of running meetings for our department, I tried a number of configurations. I tried different days of the week and different times of the day. I tried to do a number of short meetings throughout the week versus only one longer one at week’s end. I mixed it up as I tried to find the right formula, but my meetings still seemed to be lacking something. Then I figured out what was wrong. It was me.

By “leading” the meeting, I realized I can come to dominate the conversation, turning it into more of a lecture than an actual exchange of ideas. That was what needed to change.

It doesn’t matter if you do short meetings each day or a single longer meeting at the end of the week, what matters is that everyone gets engaged in the conversation. If your meetings are suffering the same way mine were, try mixing it up and ask someone to present a project they are currently working on, or a site they recently saw that blew them away, or ask them to summarize a great article they recent read. Get everyone to participate and you will clearly see the energy level of your meetings instantly start to rise.

Be Selective With Projects

As a team leader, you will often be one of the first ones in front of a new client and a new project. You will be part of all that initial excitement and exchange of ideas. This is a very exciting time in a project and it is not unusual to get out of a kickoff meeting and want to do all the work yourself. Unfortunately, that is no longer your role.

One of the biggest challenges in the transition from designer to director is the reality that your job is to often assign work to others that you really wish you could assign to yourself. As a director, will have less time to design and develop websites, because more of your time is required to help others more effectively design and develop websites.

That being said, you need to strike a balance. From time to time, you should assign a project to yourself, but be selective. Knowing you can’t personally design every new project or develop every new site gives you the chance to pick and choose which projects go to which team member, yourself included. Just remember not to keep ALL the great jobs for yourself  —  the team will definitely notice that!

Grow Your Bookshelf

Web professional are lifelong learners. The always changing nature of our industry forces us to constantly be learning if we want to keep our skills current. The change to a leadership role does not eliminate this need, it simply adds to the type of learning you must do.

In addition to books on HTML, CSS or design principals, your bookshelf should grow to contain titles on managing others or running a business. Recently, I’ve added the excellent titles from A Book Apart to my bookshelf. These titles are written by the likes of Ethan Marcotte, Dan Cederholm and Jeremy Keith  —  authors whom I’ve read for years via their blogs as well as books. I have also recently added some titles that are not related to Web design to my shelf, including Rework by Jason Fried and David Heinemeier Hasson, Delivering Happiness by Tony Hsieh, and Redesigning Leadership by John Maeda, from which a quote appears earlier in his article.

Your role as a director is a duel role. You need to manage and lead, but you also need to be current and relevant in your Web design skillset. This should be reflected in the learning you are doing. Next time you look for Web design books, also add a few titles to your cart that have little or nothing to do with manipulating pixels and more to do with managing people.

Perhaps going to a local library and taking a closer look at the leader management section there will also help you stumble on that book  —  the one your colleagues recommended to you in the good old days. Image credit.

Listen and Decide

A big part of being a team leader is making decisions. A big part of making decisions is realizing that, no matter how hard you may try, you will never please everyone.

As the team leader, you will need to listen to different points of view, but you will also have to be the one to decide which ones point in the right direction and which ones do not. In the end, you need to be the one that makes the right choice for the project, the team, or the company as a whole.

You should encourage others to share their opinions with you, from the CEO to the intern that started last week. Listen to what they have to say with an open mind and be willing to have your own opinions changed, but once you have considered everyone’s opinion, including your own, you need to decide the path to take. In the end, others may not agree with your opinion, but they will be more likely to support you in the decision you made if you truly took the time to consider all options before you made your choice.

The I in Team

Throughout this article, I have referenced the move from team member to team leader, but the reality is that even though you may be leading the team, you are still a part of it, not apart from it. Remember to use the word “us” often and show those under your supervision that you are with them.

I think a quote from E.M. Kelly says it well and gives me an appropriate way to end this article:

The difference between a boss and a leader: a boss says “Go!”  —  a leader says “Let’s go!”

Are you ready to assume leadership? Excellent  —  let’s go!

( by Jeremy Girard )

( source : Smashing Magazine )

In case you didn’t know yet, Design Informer is powered by WordPress on the back-end. The great thing about WordPress is they have tons of plugins that you can download for free. From SEO to Analytics, if there is a feature that you can think of adding to your blog, there is probably already a plugin that was created for that purpose.

Today, I would like to share the 17 really awesome plugins that I personally use to run and operate this website. Without these plugins, this site would not have all the features that it does. Some of these plugins are extremely popular, while others are not as popular, but they are still quite useful.

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Akismet

Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments”.

This is pretty much the best spam blocking plugin that you can install on your blog. I can’t imagine how much time it would take me to sort out through the comments without this plugin.

All in One SEO Pack

Out-of-the-box SEO for your WordPress blog.

This plugin is a very powerful plugin that if used correctly, can really help your site move up in the SERP’s (Search Engine Results Pages) by optimizing your site to use the proper title tags, alt tags and page titles. Every blog needs to install this plugin.

Clean Notifications

Make e-mail notifications for new comments/pings cleaner and more readable. No configuration necessary.

WordPress sends us ugly looking emails when we get a new comment. This just makes the email that you receive in your inbox more readable.

CommentLuv

Plugin to show a link to the last post from the commenters blog by parsing the feed at their given URL when they leave a comment. Rewards your readers and encourage more comments.

A great plugin that will help you generate more comments and discussion by rewarding the reader with some link juice to their most recent blog post.

Contact Form 7

Just another contact form plugin. Simple but flexible.

I use this plugin for the Contact page. The forms are easily customized with your own CSS.

Easy Popular Posts

An easy to use WordPress function to add popular posts to any theme.

This plugin is in use in the sidebar. It is a simple plugin that shows the most popular posts, and can be based on pageviews and comments.

flickrRSS

Allows you to integrate the photos from a flickr rss feed into your site.

I use this plugin to show the most recent images from our Flickr group. You can view the plugin in action in the footer of this site.

Follow My Links

Do not automatically add the rel=nofollow attribute to links in comments by the post author, strip nofollow from links to the post author’s web page.

This plugin is just for the readers. Removes the evil nofollow to the links in the comments section.

FV Community News

Let visitors of your site post their articles on your site.

This plugin allows the readers to submit recent news to this site. Check out the sidebar for an example.

Google Analytics for WordPress

This plugin makes it simple to add Google Analytics with extra search engines and automatic clickout and download tracking to your WordPress blog.

Easily add Google Analytics to your blog by installing this plugin.

Google XML Sitemaps

This plugin will generate a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO.

Another great plugin to download for SEO purposes. Submits your sitemaps to the top search engines.

MaxBlogPress Ping Optimizer

Saves your wordpress blog from getting tagged as ping spammer by installing this plugin.

I personally use this in every blog to prevent multiple pings from the same post.

No Self Pings

Keeps WordPress from sending pings to your own site.

Without this plugin, I’d have dozens of trackback/pingbacks from our own blog each day, since I interlink our posts quite often.

Permalink Redirect

Redirects all crap away from the end of the URL.

This simple plugin removes all the junk in your URL’s.

WordPress Database Backup

On-demand backup of your WordPress database.

Everyone needs to back-up their WordPress database. This plugin sends you a weekly email with a copy of your database. Very useful!

WP Page Numbers

Show pages numbers instead of “Next page” and “Previous Page”.

I use this to display pagination on this blog. It also comes with different themes to customize the look of the pagination.

Yet Another Related Posts Plugin

Returns a list of related entries based on a unique algorithm for display on your blog and RSS feeds. A templating feature allows customization of the display.

This plugin will help your readers find content that is related to the post that they just read. Very helpful in keeping readers to your site.

So which one of these plugins haven’t you heard of before? Did you find these resources useful? Let me know by leaving your comments below. Also, you should re-tweet this article by clicking on the Tweet button below. Thank you very much for reading this list of plugins.

( Source : Smashing Maganize )

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

We continue to nourish you with a monthly spoon of inspiration. This post features 30 free desktop wallpapers created by artists across the globe for November 2011. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

• All images can be clicked on and lead to the preview of the wallpaper,
• You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Real Artists Ship

“A tribute to Steve Jobs, from the crew at Busy Building Things.” Designed by Andrew Power from Canada.

• Preview
• With calendar: 1024×768, 1280×800, 1440×900, 1920×1080, 2560×1440
• Without calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1920×1080, 2560×1440

Design For Good

Designed by Nicci Miller from USA.

• Preview
• With calendar: 800×600, 1024×768, 1280×1024, 1280×900, 1440×900, 1920×1200, 2561×1440
• Without calendar: 800×600, 1024×768, 1280×1024, 1280×900, 1440×900, 1920×1200, 2561×1440

Coffee

Designed by Agnieszka Malarczyk from Poland.

• Preview
• With calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440
• Without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440

Autumn Impression

Designed by Agnieszka Malarczyk from Poland.

• Preview
• With calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440
• Without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440

The Hush

“Take time to sit and watch the leaves turn.” Designed by Jason Krieger from USA.

• Preview
• With calendar: 1024×768, 1024×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200
• Without calendar: 1024×768, 1024×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200

November Nostalgia

“November Nostalgia has a bit of the old mixed with the new.” Designed by Colin Whitehurst from Philippines.

• Preview
• With calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• Without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

November Rain

“It rains around here in november….” Designed by Inerseshen Creative Media from USA.

• Preview
• With calendar: 320×480, 640×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
• Without calendar: 320×480, 640×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440

The Most Productive Month

“Working hard or hardly working? What will your work stats look like in November?” Designed by Photo Stats from Sweden.

• Preview
• With calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• Without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Gunpowder Treason

“I doubt this piece needs any description at all, but here it goes. Because I’m a V for Vendetta fan, I decided to make a wallpaper out of the classic quote combined with the V for Vendetta “logo”. Of course this quote referenced to a historical event, which should never be forgot.” Designed by Yentl from Belgium.

• Preview
• With calendar: 1280×960, 1366×768, 1600×900, 1600×1200, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• Without calendar: 1280×960, 1366×768, 1600×900, 1600×1200, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Soul Candle

“When we do not visit the dead, they come to visit us.” Designed by Pilo Francia from Philippines.

• Preview
• With calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1440
• Without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1440

Disco Ball

Designed by Emily Shirley from USA.

• Preview
• With calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
• Without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200

A Clearing In The Foggy Forest

“A clearing in the foggy forest could be your salvation or your downfall. Be careful!” Designed by Alberto Varela from Basque Country.

• Preview
• With calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1440
• Without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1440

Pink November

“A face can manifest especially in a texture.” Designed by Niki Virág from Hungary.

• Preview
• With calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200
• Without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200

Winter Is Coming

“I always like to use the macro feature of my camera to capture all the nature’s changes. Winter is coming and the first molecules of snow appeared on the autumn leaves… Isn’t it amazing?” Designed by Tatiana Anagnostaki from Greece.

• Preview
• With calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1440, 2560×1440
• Without calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1440, 2560×1440

November Love

This November Love desktop wallpaper is designed by Medianovak from Bosnia and Herzegovina.

• Preview
• With calendar: 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200
• Without calendar: 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200

Rainy Day

“A picture from Budapest (Hungary), a city full of history in which I spent two lovely days.” Designed by Simona Gosu from Romania.

• Preview
• With calendar: 1280×720, 1440×900, 1600×900, 1920×1080, 1920×1200, 2560×1440
• Without calendar: 1280×720, 1440×900, 1600×900, 1920×1080, 1920×1200, 2560×1440

Late Atumn

“The late arrival of Autumn.” Designed by Maria Castello Solbes from Spain.

• Preview
• With calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• Without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Autumn Hair

“The colour of Autumn.” Designed by John Rubio from Australia.

• Preview
• With calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080
• Without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080

Little Mademoiselle P

“Black-and-white drawing of a little girl.” Designed by Jelena Tekulajeva from Estonia.

• Preview
• With calendar: 320×480, 1024×1024, 1280×800, 1440×900, 1680×1050
• Without calendar: 320×480, 1024×1024, 1280×800, 1440×900, 1680×1050

Grey

“It’s November. Again. And we can’t believe that another year has gone by.” Designed by Lotum from Germany.

• Preview
• With calendar: 320×480, 960×960, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440
• Without calendar: 320×480, 960×960, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440

Frozen Kingdom

“Cold, cold November somewhere in Frozen Kingdom…” Designed by Frozen Kingdom from Estonia.

• Preview
• With calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200
• Without calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200

Hunting

“Sometimes you hunt a bear, sometimes a bear hunts you.” Designed by Cheloveche.ru from Russia.

• Preview
• With calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• Without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Flying

Designed by Nindze.com from Russia.

• Preview
• With calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440
• Without calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1440

Cool November

“This big oak tree is standing in the middle of a big corn field, near the trail where I jog every other day. I always wanted to include into on of my creations, and finally, with Smashing Magazine’s wallpaper contest, it finally found its place in my November’s wallpaper. This year, autumn was very warm, and I hope this photo taken on a warm october day, will keep you warm through a cool and cold november that is coming up…” Designed by Uros Opaka from Slovenia.

• Preview
• With calendar: 1280×960, 1440×900, 1680×1050, 1680×1200, 1920×1200, 1920×1440
• Without calendar: 1280×960, 1440×900, 1680×1050, 1680×1200, 1920×1200, 1920×1440

November 1st

“The 1st day of November was the first day of the Algerian revolution. It started in 1954 and lasted more than 7 years.” Designed by Houssem Teghri from Algeria.

• Preview
• With calendar: 1280×720, 1280×1024, 1440×900, 1600×1200, 1680×1050
• Without calendar: 1280×720, 1280×1024, 1440×900, 1600×1200, 1680×1050

Thanks Gathering

“November is a month for reflecting on the past year and beginning to look ahead to the coming year. During this time, we come together as friends and family to give thanks for the good things we have received and to band together in preparation for whatever may come next.” Designed by Danielle Camorlinga from USA.

• Preview
• With calendar: 320×480, 1024×768, 1440×900, 1920×1080, 2560×1440
• Without calendar: 320×480, 1024×768, 1440×900, 1920×1080, 2560×1440

Autumn

Designed by Leen Van Severen from Belgium.

• Preview
• With calendar: 1024×640, 1280×800, 1440×900, 1680×1050
• Without calendar: 1024×640, 1280×800, 1440×900, 1680×1050

Constellations

“As a young girl my father showed me the constellations in the night sky. These are the November constellations as they will appear from the northern hemisphere placed in a landscape I dreamed of. See their names in the non-calendar version. Look at the night sky and find them!” Designed by Christina Balanou from Greece.

• Preview
• With calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1920×1200
• Without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1920×1200

November Turkey

Designed by Roland Szabo from Hungary.

• Preview
• With calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
• Without calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200

Undas

“”Undas” (Day of the Dead) is a significant holiday in the Philippines. A tradition derived from the “Dia de los Muertos” of Spain and Mexico. Families visit their deceased relatives in the cemeteries. They clean the tombs and decorate it with candles and flowers.” Designed by Bored Astronauts from Philippines.

• Preview
• With calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• Without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

( Source: Smashing Magazine )

Here are 10 effective ways to thwart the best efforts of hackers:

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Website Security Tips

Keep Your Versions Updated

This is one of the simplest ways to stay a step or two ahead of the hackers. By downloading the newest versions and updates of Windows, WordPress, and your antivirus platform, you can make your applications or website just tough enough to crack. That way, hackers won’t bother with your site and instead move on to some other site whose owner hasn’t been as vigilant.

Beef Up Your Passwords

Ok, it’s 2010. The web’s been around for some time now. Isn’t it time you changed your password from your spouse’s name, “123456” or the dreaded “password?” If this past year taught us nothing else, it’s that people are surprisingly lax when it comes to choosing passwords for even their most sensitive accounts.

Pick strong ones and and use different ones for your banking info and email, your cPanel, and your FTP accounts – otherwise, your info and your site are vulnerable.

Lock Down Your File Permissions

Do you know what your file and folder permissions are set at? Some applications require them to be set at the open “777” to install, and then most of us forget to set them back to either “755” for folders or “644” for files. Double check yours to make sure.

Mind Your Links

Do you really know what kind of site you’re linking to from your site? According to experts, so-called “open redirects” are a major cause for attacks that are perpetrated through browsers. We all know what happens when we click on a bad link; now imagine what the result will be when you put a bad link on your site. It’s always best to trust completely any site you link to.

Use FTPS For Transfers

With this handy tool, all your FTP transfers are done using SSL. In fact…

Use SSL To Send Emails

Use this especially if, somewhere in any of your millions of untrashed emails, you’ve ever sent sensitive info via email.

Make Sure Your Web Host
Runs suPHP

Under normal PHP, scripts run as “nobody,” your script is open access. With suPHP, access is limited to the user or to those explicitly granted permission. Not all hosts use suPHP, so make sure your host does and set up another potential roadblock for hackers.

Speaking of Hosts

Not all hosts are the same when it comes to ensuring your website’s security. Not all offer round-the-clock active server monitoring, or even suPHP (see above), so choosing a host that takes your security seriously takes a little legwork.

Look Beyond Shared Hosting

Be Savvy

If you know what you’re looking for, then you’re making a hacker’s job more difficult. Most hackers, if they come across a site that’s locked down tightly, would just as soon move on to another that offers easier access. You can make your site not worth the trouble by regularly scanning your logfiles for code that doesn’t belong, not installing suspicious WordPress plugins, and basically just being aware of what’s going on inside your site.

These 10 tips are just the basics, really – they’re a way to get everyone thinking about all the factors that go into running a secure site. If you make it a habit to keep your an eye on things and keep everything up to date, then you’re a much less attractive target to hackers than many other site owners out there.

For more info on the most common security lapses across the Web, check out the Top 25 Most Dangerous programming Errors (http://cwe.mitre.org/top25/). It should serve as a real eye-opener.

( source : DesignInfomer )

Here’s a task for you! Have a look at your desk, take a shot of your beloved coffee mug, send us the photo, and see if you’re added to the huge poster that we’ll be creating from the best images that we get from all over the world. We’ll prepare an exclusive version in PDF and print a limited-edition poster (20 copies). If your photo is chosen, your name will be printed on the poster, too. In addition, selected photos will be published in an upcoming Smashing Magazine post. Those with the most creative and original submissions will be awarded with one of the exclusive printed wall posters. We won’t be selling it, of course — but you already knew that.

Submission Guidelines

• The photo must be in JPG format, at a maximum size of 4000 × 3000 pixels. The file size should not exceed 8 MB.
• Each participant may send one photo at most.
• Each photo should show only one mug — not two, three or a dozen.
• Name your photo with your full name (john-peterson.jpg).
• Please do not send ZIP, RAR or another archive. Just the plain image.
• You must own the copyright of the photo you are submitting.
• Submit your photo to the email address mugs@smashingmagazine.com by 15th of October 2011.

Please note that the coffee mugs must be mugs and not cups! This is important for building a coherent, gripping mosaic. The mugs can be empty or filled, even steaming! Feel free to use any camera you prefer: a toy cam, mobile phone, SLR, point-and-shoot — whatever you have on hand. How many mugs can fit on the poster? We don’t know yet, because it will depend on the quality and originality of the photo you submit!

Some Coffee Mug Inspiration

Need some coffee-mug inspiration? Why not browse through Flickr and Google Images:

Image credit: Terry Johnston

Image credit: Adrian Sampson

Image credit: Ginny

Image credit: Terry Johnston

Image credit: Brendan C.

Image credit: Nina Matthews

Deadline and Announcement

Please submit your photo by October 15th at the latest. The qualifying submissions and the winners will be announced a week later. We will showcase the most interesting photos here on Smashing Magazine (and on the big poster, of course), including the names of the contributors.

Please note: your photo will be used only for this event, and you will retain the full rights to it.

Let’s Go!

On your marks. Ready? Set? Go! Send your photo to mugs@smashingmagazine.com! We look forward to your photos, folks!

—  The Smashing Team

( Source : smashingmagazine )