If you’re a freelance designer, or you work for another company, you got there not because you love business, but because you’re a designer at heart. The business side of things came as a necessary evil, but you really love nothing more than to doodle all day, mess around in photoshop, or bang out semantic code. There are a lot of traits of being a good designer which are counter-intuitive to being a good business person. But if you learn to embrace both sides of the coin, your business will prosper, and you’ll get to do more design.

It’s great to create beautiful works of art for Art’s sake, but the reality is, you can only afford do so if you’re getting paid. Yes, being a great designer means you need to be humble, accept criticism, have an open mind, listen to other points of view, be idealistic and possess all sorts of wonderful character traits of the enlightened and creative individual. But to afford to do so, you need learn how to run your business.

Be Assertive

Like many freelancers find out the hard way, there will come a day or a client that will act as a tremendous lesson and taught you to be assertive. Now remember, assertive doesn’t mean yelling and stamping your feet; it just means sticking up for yourself and not letting yourself get bulldozed. Being assertive sooner in the process will help you avoid being angry later! An unfortunate truth we find, is that some clients will take advantage of you if you give them the opening. Make sure you don’t let them!

Don’t Set a Price Until Everything is Scoped Out

That means, not just features and functionality, but timeline, urgency, number of revisions, how many other people will be involved – the whole works. Everyone’s expectations, both yours and the clients needs to be on the table, and part of the discussion. Without knowing these vital specifics about the project, we are sure to misquote the job and probably end up costing ourselves before we can call the project closed.

Don’t Be Afraid to Ask For a Deposit

This might be obvious to some of you, but many of us have had clients balk at this. Many of those new to the field are not comfortable with doing this. And as many clients are also not too keen on handing over money for work that has not been done, or even in their minds, begun, we need to approach this situation both delicately and confidently. The more hesitant we are, the more our discomfort comes across, the more likely the client is to pick up on this and allow their resistance through.

We need to simply let them know that we are completely committed to their project, and as we will be investing a large amount of time in it, we need to be assured that they are committed as well. The deposit not only shows they are fully on board, but you can assure them that it will guarantee priority and timeliness of the project on your part. It can be an uncomfortable subject to broach, but if you do not, then you might end up doing a lot of work and not getting compensated at all for your time.

Let Them Know You’re the Expert

Sometimes, no matter how you run your business, you can still run into the occasional person who wants to lean over your shoulder and tell you how many pixels to move something over. The trick is try and not take on the projects for those kinds of people. However, you need to let your clients know you’re the expert at your business, and respect that they’re the expert of their’s.

We don’t often dispute the word of our doctor, we accept their expertise. We need our clients to believe in us this way too. Image by Clarita

Whenever a client makes a specific request for something you know is a bad idea, try turning it around and asking them what it is that’s bothering them. Exactly what are they trying to solve? This allows you to first try and get to the root of the problem so that you can come up with a more appropriate way to solve it; rather than just implementing the bad idea.

Even then, that sometimes doesn’t work, and they insist on the bad idea. This is when you want to assure them that you know what they are trying to achieve and you gently push for them to allow for your expertise and knowledge to give them the best website possible. Strongly discourage going down this path, informing them why the idea could actually work against their goals. Let them know that you will do it if they insist, because you want them to be happy in the end. At which point you will want your objections to this course noted in the paperwork, pointing out that this is what they requested.

That sometimes works. Writing it down makes it into a dramatic moment where they realize you don’t want to be “responsible” for doing what they are asking, and they will then think twice.

Frame Client Input

You can almost never escape needing client approval on a design piece, but there is a way to elicit feedback properly without leaving yourself open to accepting inane or subjective input. When you approach your clients for feedback, rather than leaving the door wide open, you want to frame the questions in ways that the client will effectively be choosing between options that you are already on board with.

If you have a question about the navigation, take them some variations on the idea to choose from. Instead of simply asking, “what are your thoughts on the navigation?” This prevents them from asking for something that is simply unachievable. This can also save time if they are not very clear on what they want. And sometimes they will know what they are looking for out of certain elements until they see it.

Always use a contract!

Having a contract doesn’t mean you don’t trust the client. A contract is for protecting you and the client, and makes sure everybody is clear on exactly what is being delivered and when. It’s not an issue of honesty, but of making sure everybody is on the same page. Never start work before a contract is signed.

Because nothing is written in stone, so to speak, until the contract is signed. Image by Mary R. Voght

And we have to remember that if we receive a contract, we need to check it over carefully. If there are any parts that are unclear or make you uncomfortable, do not be afraid to voice those concerns or ask for clarification. Most of the time, we will find the client receptive to these requests, we need only ask.

Often times, a contract will be written by lawyers who are only looking out for their client, and they write for an apocalypse. You need to look out for yourself and make sure you are comfortable with the agreement, too.

Don’t Do ‘Work For Hire’

…unless you’re actually being employed full-time! Work-for-hire is a term used in copyright law which grants full ownership and copyrights of your work to the person hiring you. By default, all freelancing and contract work is not work for hire. However, it can be written in to a contract (and even then, you still might have a case for arguing it, should you choose!). Technically, something is deemed work for hire if you created it while at a job which demands you be there full-time. Working from home, on a small project is not.

You might think, “What’s the big deal?” Well, if your client wants to retain full ownership and copyrights of the work, they need to pay a premium! Think of the difference of royalty-free stock photography versus rights-managed or full ownership. Owning the full-rights costs a lot of money. Also, most of us will want to include the piece in our portfolios, so taking that away comes with a price, too.

Never Do Spec Work

Working on speculation (“Do a home page design for me, and if we like it, we’ll pay you.”) is a terrible idea. Other people have said it better, so we will not go into a lot of detail here. If you would like a full rundown on the numerous reasons that spec work is bad for you and the industry overall, then go to No!Spec and read why it’s so bad.

Don’t Give Up Passwords or Files Until You’re Paid

Let’s look at it this way. The client has seen the flattened artwork and knows how things look and that you’ve spent the time on their project. At this point, it makes no sense for them to worry about you not delivering on the final product. You just want to be paid. If you turn over the files before you get paid, the client has nothing more to gain by paying you. You’re just hoping that they end up being honest…

It is usually in your best interest to keep yourself password protected. Image by Szilard Mihaly

Make sure the client knows this up-front. It’s unfair to make it a surprise if they have a tight schedule to keep. The least amount of surprises in the end tends to work out in everyone’s favor. So include this in the contract, and be sure to highlight this point once or twice when initial talks are beginning. The internet is full of freelance stories where the designer failed to put their foot down about this, and they ended up waiting months to get paid…if they were paid at all.

Note: There might be some who would argue you shouldn’t give up layered PSDs to the client. That’s a separate discussion. For web design, when you’re working with other developers, you kind of have to.

Write Down Your Policies

It may seem trivial, but for some reason, if you say, “It’s my policy…” and you have shown this to them in the beginning, people will argue with you less. If it’s a policy, people just accept it. Not entirely sure why this works, but it has often come in handy and proven itself as a worthwhile course of action for freelancers.

In Conclusion

Being assertive is not being mean. It’s having rules and standards and ways of doing business, and then sticking to them. It’s drawing clear lines and boundaries and making sure everybody is on the same page. It’s making sure you don’t get bullied around by a bad client. Ultimately, clients will respect your ability to manage your business and they’ll come back for more.

What are your thoughts on ways to effectively assert yourself with clients? Leave us your two cents and personal experiences in the comment section below.

  

We all use images — photos and illustrations — in our daily design work. Lots of them. And while the best way to make sure your images are unique is to have custom photography or illustration done for you every time, this is not very realistic. Often, due to time and/or budget constraints, we have to use royalty-free images. And, royalty-free images, by definition, are available to anyone who pays their fee (very reasonable, compared to the fees for rights-managed images that grant you exclusivity).

The first time it happens to you, will forever be etched into your memory: seeing the same photo which had been carefully chosen for a particular client’s project (when they did not have the time or the budget to set up a photo shoot), used in an advertisement by another company. If you are lucky, it will at least be in a different industry. But what happens when it is a direct competitor? This is a rather unsettling thought.

Here are some tips, tricks and examples of what you can do to make sure your images are slightly more unique than what everyone else is using — even if you do purchase them from a royalty-free site.

Don’t Go With the Most Obvious Choice

Before you choose the image, keep in mind that often search results on the royalty-free sites are sorted by popularity — meaning that the images that have been downloaded the most times will show up first. This, of course, increases the risk of someone else using the same image. Sometimes simply browsing a little longer can help you find something relevant, yet not quite as popular.

Also, before you even start searching, think of less obvious ways to illustrate your point. You don’t have to always use computer and code images to illustrate a website or a brochure for an information technology company. Maybe something completely unexpected can work just as well? How about using pie or toast to illustrate the ease of use, or dogs to illustrate friendliness and loyalty? You get the idea; there are many ways to make a point with a picture, and they don’t always have to be the same images everyone else uses to convey the same kinds of ideas.

Choose a Detail

Once you have chosen your images, there are any number of ways that you can alter them to make it more unique. Sometimes just focusing in on one part of the image can make it very different from the original. Crop and zoom in on a detail that is very relevant to your message, and the let the rest fall by the wayside.

Instead of using the photo of many fallen leaves, why not focus on just one?

Or you could even go one step further and actually extract an element from the image that works well for your project purposes (clipping paths in Photoshop will be very helpful with this).

Instead of using the typical cookie tray, you can extract a couple of cookies and integrate them with the title.

Color Shifts

Sometimes in order to put a more unique slant on your images simply playing around with the colors can produce striking effects, and even enhance the message you are intending the images to communicate.

For example, creating a black and white version of an image, with just one element remaining in color will place a strong focus on that element. So instead of cropping to make a certain element stand out you can use the colors to highlight any one aspect that really speaks to or with your message.

Other ways that you can use the color to your advantage here is by adding some colors that are not normally found in nature. This is a fantastic way to attract attention.

Furthermore, adjusting the saturation, contrast and luminosity levels of your images can do a lot to transform them from subtle to striking.

Try Different Effects

Depending on the style that you are looking for, sometimes enhancing the image can be as easy as running a filter. This is not necessarily recommended just because they look pretty, but when you have a project that calls for a particular style, they can be handy for getting the image to the place you need.

For example, using a poster-like effect for an art gallery brochure can be very impactful on its viewers, and compliment its theme and message in ways the image unfiltered could not.

Another example would be to use a filter to add a hand-drawn look to the imagery included in a project for a family-run bakery. This effect can really add to the home-made feel and ideas the bakery wants to convey to their customer base.

Combining Images

When taking this route, the possibilities are virtually endless. With the right amount of work and retouching you can almost guarantee that the images you use for your client will be unique, even on a more limited budget.

Blending mediums can be an effective way to make your point here as well. An example of this would be to combine a photo and an illustration for a fun, not quite real effect.

Another example of this would be like using a part-photo, part-illustration to better demonstrate the process of a home remodeling company.

You can also add your client’s logo to a scene or object that emphasizes their benefit. This is a really easy way to tie the two together.

When combining images, you can also play with the size and perspective to alter them from their original, and to better serve the message you need to convey. For that larger than life quality.

You can further use this technique to emphasize custom-made objects by showing them “in the making” — even if it isn’t quite the real process.

Don’t Settle for the Same Old Image

There are numerous tutorials and techniques available to designers these days to really take our images to the next level. What we often forget, is that this can serve much more of a purpose than just demonstrating our skills. It can allow us to deliver much more unique imaging to our clients.

Further Resources

Below are a few useful posts and resources for helping you put the advice offered here into action when your next client comes calling.

• 80+ Time Saving and Free Photoshop Action Sets To Enhance your Photos
• Analyzing Photoshop Vibrance and Saturation
• The Best Technique to Enhance Saturation
• An Explanation of Photoshop Blend Modes

(rb)

  

One of the topics that the design blogging community touches on from time to time, concerns the saturation levels of the blogosphere with regards to design blogs. There are so many design centric blogs filling the landscape that the chances of capturing enough of the available audience out there so that you can generally consider your blog a success amongst the rabble are decreasing with every new RSS feed introduced into the mix. This can paint a fairly grim outlook for the future of the online design blogging community.

Could many of our beloved design blog’s futures be as shattered as this monitor? Image Credit

Now some will dismiss these claims, discounting the threat that we as an entire community are facing. Perhaps they are right. Perhaps the growing number of design blogs is a sign of industry strength and market stability. But what if it is not? What if these alarm bells and red flags that seem to be sounding off in some of our heads, are in fact valid? There are those who not only believe this is an issue that we either will face, or are facing now, but who also believe that there is hope.

And that hope, lies in a much more refined focus for our design blogs. Now there are a number of blogs in the design community that have an area of design that they tend to focus on. For example, Pro Blog Design tends to only focus on blog design, and for the most part WordPress. Many in the ranks focus purely on logo designs or on strictly inspiration, and you can even look to the Envato network of specialty sites to see more of this focusing in action.

And though many of us have a specific direction in mind, we have to wonder if it is enough? Are these focuses the keys to keeping ahead and keeping our audience? Is the future of the design blog in the finding an extreme niche to serve? With sites like Media Queries and We Love WordPress, is the landscape changing on the design front? Is this a necessary evolution?

The Discussion

The online audience is a finite group. Growing? Yes, but still finite. So at some point, we are going to reach the level where this simply becomes a numbers game. With a finite audience, also comes a maximum level of content consumption. If the audience only consumes a maximum number of blog offerings per day, and the blogosphere continues to grow and oversupply that demand on a weekly basis, then how long before the majority of the content being produced is simply wasted time and effort from the community? At what point does the growth of the design blogging field, actively begin hurting the community and the content? And the bigger question, have we already reached it?

Are we slowly tipping the scales out of our favor? Image Credit

There are many who think that we have already passed this proverbial breaking point, and that the design blog ranks will undergo something of an evolutionary die-off. Numerous blogs will simply disappear from the landscape, while others stagnate and simply cease to update. Without an active audience to appeal to, many bloggers will essentially just be screaming into the dark. Hoping that someone might happen by and hear them. A select few powerhouses will remain among the virtual ruins and ghost towns, those who have already established themselves as a valued resource. So what will be left for the rest of the design blogging community? The niche!

Trying to compete with these titans, is known to be a fruitless and frustrating venture, so in order to stay relevant after the die-off, most blogs will need to be niche focused in order to keep an active, sizable audience, and be able to label themselves as a success.

Defining Success

Now we understand, that what constitutes a successful blog is extremely interpretive. Many bloggers have established benchmarks for themselves to highlight their progress and ensure that they are in fact on a path of forward mobility. However, forward movement only tends to matter if you have some sort of endpoint in mind. An actual goal that you are moving towards. And we understand that it is really up to each individual, what that goal will be. So when we talk about having a successful blog, we cannot possibly know what each design bloggers endgame is. So we are speaking about success in terms of audience attention. Basically, in these terms, having a number of regular followers and content consumers.

After all, visibility and awareness tend to be two of the main reasons that we blog, so if the targeted audience is not responding to, or even seeing what we are doing, then our blog is not going to be much of a success. This is why the over-saturation of the design blogosphere is as pressing a matter as it is. For if we create content that is meant to benefit and improve the design community, but we have no audience reach, then our content is not so beneficial or improving anything. Much like the tree that falls in the woods without a witness, our content does not make a sound.

A Matter of Monetization

In this equation, does money matter? Image Credit

Perhaps one of the biggest measures of success for some bloggers, is their ability to monetize their site. This tends to be done via selling space to advertisers, which tends to depend on traffic. After all, there has to be some incentive for the advertisers. Focusing on a niche can actually have both negative and positive impacts as far as ad sales go. It can help because advertisers know that you have a specific target audience, and those who wish to reach more directly into that market will appreciate such a niche focus. Unfortunately, this is the same reason it can hurt your ability to sell ads. Those who wish for a broader audience reach may be turned off by this finely focused approach.

So when it comes to setting up a niche, you may have to also rethink your monetization strategy for your design blog, and attempt to redirect your efforts to yield more positive results. However, to survive when the divided online audience tires of wading through these saturated information byways, and a sort of purge occurs throughout the blogosphere you are going to have to realize that it is not all about the Benjamins as we have been programmed to think. What a lot of bloggers are going to have to realize, is that a money driven mission statement, can often drive your blog into the ground.

Those who set up their sites just to make money, tend to have subpar quality sites that reflect their desperation for monetization. They heard about the potential for revenue, and like the gold rushers of the past, they thronged to the web. Logobird had an article lamenting about some of the issues with monetizing your blog, The Shady Side of Design Blog Monetisation that is certainly worth a read.

Not only does the content of your blog begin to reflect this mission statement, but your drive will begin to diminish if the returns on your efforts are coming in lower and slower than you would like. Readers will feel this coming through, and in the end, it could actually cost you. Those who tend to be focused on the experience and the community enrichment, will tend to be the ones whose content has more appeal to the masses. Having an extremely niche focused blog, tends to show that you have a passion for the field, and for improving it. Not just grabbing for numbers. Not to mention, it allows you to worry less about blogging for advertiser’s visibility, wherein frequency wins out; and focus instead on blogging when you have something of quality to add to the overall design dialog.

The Road Not Taken

“…Two roads diverged in a wood, and I- I took the one less traveled by, and that has made all the difference.” – Robert Frost Image Credit

Finding a nice design focus that is being somewhat overlooked by the rest of the online design community, that proverbial road less taken, can not only improve your blog’s chances of surviving in this overly saturated market; but it also improves and strengthens the community. Suddenly, designers have a resource to turn to for specific areas of their needs, rather than having to search through expansive archives for a single piece that perhaps touches on the subject. When we set ourselves on a focused path such as this, we tend to dissect that area of design fully. Rather than just brush the surfaces every now and again.

And when you look at it like that, we can see the inherent value in this niche approach. It sort of borrows on the Less is More theme. When you have less of a subject to cover, you have the ability to cover it in much more detail. Also, when we regularly dissect our niche area of design, it alters our perspective. We begin to relate to the subject in a whole new way, and as a result, we can also make it more relatable to others. The more angles we view the subject from, the better we understand it as a whole. This makes dissecting it, and explaining the sum of its parts much simpler. When we try to take on the entire field of design, we get a much less comprehensive exploration of each of its numerous deep facets.

You Are Not Your Design Blog

Now one reason that some designers are leery of adopting this approach is because they feel like this somehow limits their own design work. Like their own focus has to be limited to their blog’s niche. But that is not the case. While you have to ensure that you have a good grip on your niche so that you can blog about it accurately, that does not mean that your entire design career now has to fit within that niche as well. You are not your design blog. And you are not limited to only contributing to your niche focused site either. You can still guest on other sites with a different or simply wider design focus.

In conclusion

Yes, there are both upsides and downsides to adopting this niche approach for your design blog. But in the end, if it means that your blog will remain standing and relevant after the over-saturation induced die-off occurs, then aren’t the costs worth paying? Doesn’t it make more sense to refine the focus of your design blog so that the content still reaches those who need it, rather than investing time and effort to develop content that falls through the cracks? This is no Field of Dreams, and just because we build it, doesn’t mean that they will come. Not when there are thousands of other fields that they can go to.

Needed Web Design Niche Coverage

Below are a just a light handful of some of the areas of web design that the online community to could a little more niche coverage on. So if you do decide that this route could potentially prevent your blog from becoming one of those lost to the proverbial wastelands, then perhaps one of the niches listed here might just be the perfect fit for you and your blog.

Mobility

Make no mistake about it, mobility matters! Image Credit

One thing that no web designer can deny is that the future of web design is gong to be heavily influenced by the mobile market. Since it burst onto the scene, the mobile web has exploded by leaps and bounds, promising to take the web into a whole new direction. Now whether this market becomes the dominating direction for the web design industry or not, it is clear that it is going to be a major player in some form or fashion. It’s here. It’s taken root. It’s not going anywhere. So this creates a huge opportunity for designers to get there niche blogging on.

Given that this market is still in what some would consider its infancy, that means designers are going to be looking for authoritative voices and sources for nurturing its growth. The blogosphere could certainly use some focus in that direction, so perhaps that would be a route you might entertain.

Usability

Now as the web evolves and changes, both in scope and direction, one vital design field that must also evolve is Usability Design. Interfaces and user bases are an extremely fluid area, and keeping the web design community up to date on the latest and greatest advances in UI and UX is not only a noble cause, but a much needed one. There are some really great blogs that focus on usability, but given its nature, we could always use more. Usability is beyond a fundamental aspect of web design, it is the structural framework that we build our entire designs around. So if you are looking for a niche for your design blog, perhaps this is one that you should seriously consider.

Marketing

Everything evolves, and so do our marketing strategies need to as an industry. Image Credit

Another area of web design that could use so more focus and attention, would be the marketing aspect of the industry. Not just marketing the client’s site and maximizing their potential for traffic, but marketing ourselves and our field. Web designers often lament about the way that the entire industry is undervalued and under-appreciated. Part of that impression comes from the way that many market themselves to the masses. Devaluing others in the community in order to make themselves look better in comparison. With bargain basement belittlers effectively crying out, ‘Don’t pay those over inflated prices. Pay for design not ego. Starting as low as $49.99!’

This actually reflects poorly on the industry as a whole, but without anyone telling us otherwise, we think this is the best way forward. But perhaps if we had some blogs dedicated to nothing more than helping designers find better marketing practices things could stand a chance at getting better. This could also lead to more sound industry marketing practices all around. Getting us away from SEO and Social Media Marketing, which some in the community would like to see gone as it is. This is another potential impactful niche for you to focus on your blog on.

App Design

Also, with the rise of the mobile web, and the push for a much more enhanced, and in some cases a browserless way to experience the web, apps are a big wave of the web design future. Application design is another area that the community tends to focus too few resources towards. Especially with not just the web’s evolution, but with OS’s as well. As Google continues to develop their new wave of web technologies, pushing Chrome more and more towards an independent operating system of sorts, we see new opportunities for this design focus to move even more to the forefront beyond just for mobile devices and development. Apps are effectively changing the way the game is played, and web designers need some guiding forces in that arena to help show us the way.

Anything Other than WordPress

Don’t get us wrong, WordPress is a powerful CMS, and one that is put to use in countless contexts. But if you were to take a look around at the web design blogs, you would think that WordPress was the only content management system out there. Or at least that was worth checking out. But that is so not the case. With wonderful alternatives like ExpressionEngine and Drupal, just to name a couple, the web design blogosphere seems to be completely missing out on these opportunities. So there is always potential for your niche in those arenas as well.

That’s All, Folks!

That wraps things up on this end, but this conversation is hopefully just getting started. Use the comment section below to fill us in on what you think this growth means for the future of web design blogs. Are there any niches that you think the community could use more focusing on? Do you see any positives to this sort of saturation or any negatives that we failed to mention?

(rb)

  

As the technology for mobile devices grows, so does the opportunity for development. Many companies are not creating their own apps, but instead utilizing HTML5, Javascript and CSS3 to aid in the creation of web apps and mobile websites. Reducing the initial investment, companies can get the most out of the money they are spending and release it to the public themselves on their own terms. Who wouldn’t want to save money and produce a more expandable product?

When building mobile apps with these technologies you no longer have to duplicate efforts for mobile cross-platform flexibility. By implementing the latest technology you can rely on full support (WebKit) by popular devices that use iOS, Android and the experience can be altered or downgraded for others. You will receive the best results if you build for the masses but utilize a specific strategy for your demographic knowing that not everyone owns a smartphone with HTML5 support. With over 120 million iOS devices on market and more than 302 million Android devices sold, there is a large customer base that will only continue to grow.

With the various devices available and variation of screens, developers must consider all user experiences.

Once your idea is in place and you have decided that you want to utilize the mobile platform as your base, you must determine several factors to formulate an effective plan. Whether you are bypassing desktop devices completely and focusing on mobile or just utilizing mobile marketing in your campaign you will need to define a campaign, devices to support and build for mobile devices.

On average, Americans spend 2.7 hours per day socializing on their mobile device. That’s twice the amount of time they spend eating, and over 1/3 of the time they spend sleeping each day. – Microsoft

Defining a Campaign

Before any campaign is launched it must first be defined to help flush out questions that can be detrimental if asked too late. Will you be marketing to anyone with an internet connection or just mobile devices? How will users find your website? What do you expect users to do once they arrive? How will you track behavior? These are some (of many) important questions you should be asking. While each campaign specifically revolves around very unique goals, we can discuss how you can find your own answers to the questions above.

What devices will you support?

If you are marketing to any device with an internet connection you must account for regular resolutions, high resolutions, the more complicated mobile screen trends and various mobile screen resolutions. By narrowing your campaign down to specific mobile devices (eg smartphones) depending on your needs, you can focus on as little as three key screen resolutions. For example if you are utilizing QR Codes or MS Tag (free to use) in your campaign, you can only choose to only support iPhone/iPod Touch, Android and Windows 7 Mobile. This is due to the fact that scanning technology requires a camera and a scanning app before you can be directed to the website being marketed.

If mobile tags were a family, QR codes would be the parents while MS Tags would be the spunky children.

If you are reaching out to a larger base you can utilize a flier, napkin, product package, label, menu, web banner or even a commercial to display these 2d codes for users to scan. Some establishments even place a window sticker on their front door (eg restaurants, store front merchants). If your demographic is much smaller, perhaps you can add a code within a company newsletter, promotion or business card. These methods are most effective with incentives (eg discounts, free gifts) and other methods are more successful with general company promotion. Mobile tags gained extreme popularity as instant entry for contests since personal information can be quickly accessed through a mobile phone and remove the irritation of filling out a form. Mobile tags help users initiate the process rather than delivering a coupon or content by self-engaging.

QR Codes and MS Tags can be used for:

• Content Sampling
• Event Information
• Giveaways
• Hotels/Resorts
• Loyalty Rewards
• Location Based Games
• Product Preview
• Product Reviews
• Realtors
• Retail Stores
• Restaurants
• Scan-to-Pay
• Tourism Attractions
• Tourist Attractions

When users visit your website you should have an immediate call to action. Users can watch a video, vote on a poll, complete a form or even purchase a product. When you immediately engage users you have a better chance of keeping their attention and delivering your message. Usability tests demonstrate that users see and understand less and do not engage unpleasing websites. Get users attention act on their impulses, engage users and complete your goal. Once your campaign gains more focus, it will be easier to determine the project details and make decisions as you continue to plan.

Over 85 percent of new handsets will be able to access the mobile Web. Today in US and W. Europe, 90 percent of mobile subscribers have an Internet-ready phone. – Gartner

Defining Devices To Support

After you have reviewed the resolution information we discussed in the previous section you can decide which delivery methods and mobile devices you will support. This will have a large effect on the images and code you will be developing. A mobile device is not just a smaller computer, but a whole different realm of user interaction and web development. Altering something that works for a desktop user by scaling it down will not work due to the limited screen space and touch technology.

Please note that this is a very limited list, and is by no means complete. What is important to take from this data is that a wide range of screen resolutions are out there, and new devices are introduced constantly. Source

When working with popular mobile devices you have to account for not only standard viewing (portrait) but for adjusted viewing (landscape) with images and content. By looking at the screen resolution image above you can see that the iOS low/high screen resolution and Android low/high screen resolutions are very similar. They are not exact but will help you during development keeping in mind the smallest possible max screen resolution of your mobile website will be 960 x 960 pixels due to the retina display. The lowest screen resolution you will want to develop for would be 320 x 320 for smaller Android devices. All other popular screen resolutions will fit in-between. In the following section we will discuss how to create a flexible site, even when graphic heavy.

The market today contains rapidly changing display dimensions and you will want to be certain you pick the devices you support wisely. Since cell phones enter and leave the market at an average of 18 months you will want to avoid devices that are not widely accepted since this will have an effect on the supported screen resolutions. When you start developing your mobile website you will want to utilize the HTML5 and CSS3 functionality built into these smart browsers and review which features are widely adapted.

Building for Mobile Devices

When you begin building for mobile devices you will need to take into account the small viewing areas, load times and touch screen support. Will you be including a quick launch menu or will your site only be one page? Will you offer multiple types of media or just serve specific information? With screen sizes that vary, providing relatively small viewing areas, you will need to provide quick and simple navigation to any information you are offering. This includes preloaded images, videos and identifying the page load order. With many restrictions on older devices, you cannot meet user expectations for feature rich websites thanks to the new standard people expect due to the iOS and Android systems.

Mobile websites must offer various media types that differ from the desktop but offer a similar experience.

People are used to the simple, flexible interfaces that many apps offer due to the mass offerings of the Apple iTunes store. With that in mind you must be sure to provide a similar experience on your mobile website that common apps are providing users currently. These high expectations will force you as a developer to increase performance, create a dynamic environment, test and test some more. With current HTML5 and CSS3 technology it is easier for developers to support multiple devices and offer a degraded experience for others. There are also many cross-platform mobile development tools available for use.

Many mobile Web users are mobile-only, i.e. they do not, or very rarely use a desktop, laptop or tablet to access the Web. Mobile-only in Egypt is 70 percent, India 59 percent, even in the US it’s 25 percent of subscribers. – On Device Research

Icons

A great feature that has arrived with current smartphones in the ability to save website bookmarks to your home screen and being able to create your own icon that will look like an app. There are Android icon guidelines and iPhone icon guidelines to help you through this process but we will discuss the basics to get you going.

In the past with websites we only had to identify a favicon (16×16 pixels) that would show up in the address bar next to the website URL. You would either link a PNG or ICO file directly and this was all that you needed to do.

<link rel=”icon” href=”/images/favicon.png”/>
<link rel=”shortcut icon” href=”/images/favicon.ico”/>

For mobile devices you have a whole new set of options available to you. Besides the tags mentioned above you can now identify an icon for iPhone, iPod Touch and Android devices.

<link rel=”apple-touch-icon” href=”/images/favicon-ios.png”/>
<link rel=”apple-touch-icon-precomposed” href=”/images/favicon-ios.png”/>

Older Android devices (1.5, 1.6) will see the precomposed icon and newer versions (2.1+) will use the alternate. Apple recommends a 114×114 pixel (high resolution) icon for their retina displays and the same image can be used for Android to achieve a better quality result.

The above code will work seamlessly with iPhone and iPod Touch but will not always display correctly for Android. There are issues when using an SSL certificate that is expired or differs from your domain and HTC phones will only overlay a small version of your icon when saved. You may also want to look into web capable content, status bar style and start up image for further Apple device customization.

<link rel=”Shortcut Icon” type=”image/ico” href=”/images/favicon.ico” />
<meta name=”apple-mobile-web-app-capable” content=”no” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<link rel=”apple-touch-icon” href=”/images/favicon-ios.png” />
<link rel=”apple-touch-startup-image” href=”/images/loading.png” />

Pixel Aspect Ratio

The variety of available display sizes makes for a difficult decision when creating your mobile website. As we discussed before, it’s best to narrow down your customer base and make a decision from there. You can decide to move forward with a fluid layout or create layouts for specific groups of devices. Remember the chart we looked at earlier with the iOS and Android resolutions? Instead of creating a universal layout you can instead design depending on the current device resolution and orientation. With the implementation of CSS3 media queries you no longer have to rely wholly on javascript of detecting user agents.

Compare the slight size resolution differences between pixel aspect ratios for 1, 1.5 and 2.

CSS3 media queries give developers the ability to target devices by using variables for device width, orientation and pixel aspect ratio. You can use these variables to load specific styles when developing for mobile devices. For instance the iPod Touch, iPhone, iPhone 3G and iPhone 3GS (pixel-ratio: 1) all utilize one pixel aspect ratio. You can target all of these devices very simply and target iPhone 4 (pixel-ratio: 2) and Android devices (pixel-ratio: 1.5) separately. If you were trying to create a graphic heavy website with a flexible background image, your CSS may look something like this:

#container {
	height: 675px;
	width: 100%;
	margin: 0 auto;
	padding-top: 0px;
	background: url(/images/675x675.jpg) no-repeat left top;
	background-size: 100%;
}

@Media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
	#container {
		width: 583px;
		background: url(/images/640x750.jpg) no-repeat left top;
	}

}

@Media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
	#container {
		background: url(/images/480x854-70.jpg) no-repeat left bottom;
		height: 854px;
	}
	#main {
		background: url(/images/bgContent-group.png) no-repeat -20px 5px;
	}
	#main #video {
		padding-left: 61px;
	}
}

@Media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#container {
		width: 583px;
	}

}
@Media all and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2) {
	#container {
		width: 950px;
	}
}
body.alt {
	background-repeat: repeat-x;
}

The above example may be a bit heavy for starters but it gives you a great idea of the versatility that CSS3 media queries bring to developing for mobile websites. You can alter the container width and serve up different images with a few steps. You don’t want to deliver a different experience on separate devices but rather the same experience, seamlessly across multiple devices. It is also good to remember that that hiding images with media queries doesn’t necessarily mean they won’t be downloaded

Saving Images

When working with mobile devices, fast load times are important more than ever because users are on the go and want content NOW. Because the website resolution is close to a standard desktop for iPhone 4 and Android devices, you want to pay close attention to file size and cut it down whenever possible. A great way to speed up your website is by optimizing your images using Adobe Photoshop. Avoid using “save” or Save as” and instead utilize the diverse “save for the web” feature. This will help you compare image quality, file size and make adjustments where needed. By learning about the different options available, you can optimize images, create presets and drastically change file size.

There are three main formats that you work with when creating a website and they all have specific uses depending on the image being saved.

• .jpg is a commonly used method of lossy compression. The compression levels can be adjusted and works great for photographs.
• .png is a bitmap image format with lossless compression. There is a limited color range but works well with transparency.
• .gif is a bitmap image format with lossless compression. There is a limited color range and .png typically turns out better quality.

You can notice when comparing the images that used the “Save For Web” feature in Photoshop there is little noticeable difference between High quality (36KB) and Medium quality (8KB). There is however, a file size difference of over 28KB (80 percent). The low quality (4KB) image has a noticeable quality difference and does not differ much from the medium quality in file size.

.gif (16KB) and .png (16KB) utilize lossless compression and have a restricted number of colors which produce higher quality graphics for icons and plain graphics. .jpeg (24KB) is best specifically for photography and when comparing quality and file size.

By paying close attention to file size and what images work best for your needs, you can serve up websites faster for mobile phones and on the web. Faster load times will incubate a positive user experience and save server bandwidth. Slow load times can drive away users from a website even if it has valuable content. Speeding up your website is a great way to prevent this. Because mobile devices utilize slower data transfer rates

The avg. download speed between the AT&T, Sprint, T-Mobile, and Verizon 3G networks was 987Kbps. Some providers may throttle users that exceed a monthly data limit to significantly lower data rates (ie: T-Mobile reduces download speeds after customers reach a 5GB limit). – PCWorld & Novarum Inc ’09-’10 Study

Video

When planning on delivering video to a mobile device there are various options available to you, though some devices are limited. If you are creating a one-page promotional mobile website that will only be online for a few months, YouTube would be a great option. If the mobile website will receive many viewers and have an extended life, perhaps streaming via a CDN is your best option. Today most smartphones can play videos from YouTube, Vimeo and even a CDN by streaming them without conflict. Others however, such as the Windows 7 Phone cannot since it is still catching up and uses IE6 as its base browser. To get around this, you must download a low resolution video to the device and play it locally.

In the above example you can see a placeholder image is used instead of immediately displaying a YouTube video.

You can also see an HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image.

<article>
	<video>
    	<source src="/files/368x208-low.mp4"/>
        <source src="/files/368x208-low.ogv"/>
	<video>
	<p>
    	<input type="button" id="play" value="play">
        <span id="position">00:00</span> / <span id="duration>
    </p>
<article>

Unsupported Devices

If you decide you only want to support specific mobile devices and offer a different experience for others, this can be done easily. For example, you can create a graphic website for smartphones and a text only version for older devices. If you wish, you can even block users from viewing the website via PC or laptops (though not highly recommended). By utilizing the CSS3 media queries as a catch all, you can pass all other visitors into an”unsupported” area with alternate content. If you are interested in utilizing progressive enhancement over degrading gracefully, you should read Where Progressive Enhancement Meets Graceful Degradation and Progressive Enhancement in Mobile Design.

Utilizing a more specific method of detection with user agent (as mentioned user pixel aspect ratio above) you can send users to a specific version of the site (eg unsupported for text only). The user agent refers to the software that someone is using to browse your site (eg iOS iPhone). You can use a script that will identify this and serve up separate content. There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.

body.unsupported {
	background: #01536b;
}
body.unsupported #container {
	background: none transparent;
	width: 480px;
	margin: 0 auto;
	color: #002639;
	text-align: center;
	height: auto;
	margin-bottom: 40px;
}
body.unsupported #container #pageBody {
	width: 440px;
	text-align: left;
	margin-top: 20px;
	border: 1px solid #fcefa1;
	background: #fbf9ee;
	padding: 20px 20px 10px;

Tracking

When working on any marketing campaign, tracking is essential, though often forgotten on the mobile world. With the array of websites that generate a QR Code and MS Tag for free, many do not offer tracking. Why wouldn’t you want to know who is visiting your website? If you decide to go with the old QR Code or new MS Tag, make sure there is built-in tracking! You can always use Google Analytics in your code to track, but I only suggest this as a catch-all backup plan. Tracking is free, offers great insight on your visitors and their devices.

Google Analytics will display visitor browser and OS combinations among other information.

When considering which tag to move forward with, QR Codes have been around since 1994 in Japan and are built-in to Android devices for scanning. MS Tag is fairly new but works on multiple devices just the same. The advantage comes in with size in addition to tracking. If you are planning on placing a code on product packaging, a business card or even the window of an establishment, size is important.

By comparing the size differences above you can see that there is a key advantage in using the 3/4″ MS Tag over the 1″ size. Microsoft displays the QR slightly larger at 1.25″ on its website to sway users perspectives.

Here is the minimum dimensions for each:

• MS Tag (color): 0.75 inch
• MS Tag (b&w): 0.875 inch
• QR Code: 1 inch

Another factor that comes into play over size, is the ability to alter where to send your users with the generated code/tag. Once a QR Code is generated it is permanently linked to whatever has been programmed into the code. Made a mistake and it’s already printed? You can’t change it now! MS Tags can be switched at any time, redirecting users to a new message, website, SMS, video, audio, or phone number. In this fast paced world you can use the same code for a particular client, for multiple campaigns and track them without ever changing the tag. While both tags are free for the time being, Microsoft has mentioned interest in charging in the future.

During the beta period, there is no charge to create and use Tags. And in the event that Microsoft decides to charge publishers to use Tags, any Tags that were created and used during the beta, will continue to work, free of charge, for at least two years. – Microsoft

Example Mobile Campaigns

Sean “Diddy” Combs

Sean “Diddy” Combs a United States music artist launched a social campaign titled the “12 Days of Tag”. This campaign promoted the release of his album Last Train to Paris and a $50,000 donation to charities. Diddy used Twitter to promote an exclusive giveaway to his millions of followers by giving away details on how to find the content, scan the MS Tag and unlock gifts. Participants were given exclusive content and the ability to help decide which five charities to deliver a $10,000 donation to.

Cheeseburger in Paradise

In a national campaign, Cheeseburger in Paradise restaurants partnered with beverage makers to run a promotional campaign using MS Tag. By scanning a flier at one of the restaurants 31 locations, users were directed to a video and additional information on contest entry. By ordering one of two signature drinks or joining in a photo submission contest, participants could win an all-inclusive trip to Cancun, Mexico. In addition, all participants qualify for a free appetizer card in the process.
View mobile-only website

Harrah’s Entertainment

In a national campaign, Harrah’s in partnership with Crown Royal ran a promotional football promotion utilizing MS Tag. They placed a scannable tag on printed table toppers during football game events where guest can see unique content. Guests were treated with a specific location on the Crown Royal website where they were able to look up drink recipes that included the beverage makers product.

Ben & Jerry’s

Ben & Jerry’s partnered with Stickybits in a national retail campaign utilizing barcode scanners on smartphones. Users were encouraged to scan the barcode on a newly launched fair trade ice cream to enter a contest. The first 500 users to scan the new flavors could win free products and a branded T-shirt.
View campaign details

ESET Anti Virus

As a four part scavenger hunt, ESET targeted South by Southwest (SXSW) conference attendees in Austin, TX with a QR Code. Participants scanned various QR Codes that offered up useful clues that brought them to specific locations. Including brand installations at these specific locations, the anti-virus software maker gained maximum exposure. The first 200 participants to complete the four part scavenger hunt were given a free gift (the companies software) and were entered in a contest to win a Sony VAIO laptop.
View campaign case study

Smyth Jewelers

There have been many brazen Christmas promotions seen in the past, but none as forward thinking and bold as the Smyth Jewelers 15 Days, 15 Deals Christmas campaign using a QR Code. This retailer placed a 20×20 banner on their building exterior on that could be seen by passers by at the nearest intersection. Users who scanned the QR Code on the building in addition to their social media promotion were directed to a landing page with their seasonable promotions.
View campaign details

Perhaps the best “15 Days, 15 Deals” special is an autographed official NFL football signed by Baltimore Ravens running back Ray Rice, which comes with the purchase of a TAG Heuer or Breitling watch. Smyth Jewelers is the preferred jeweler of the Ravens and this gift with purchase reinforces that valuable brand tie-in.

Allure Magazine

Allure Magazine utilized their August 2010 issue to giveaway free beauty products to readers. By creating a series of mini sweepstakes with MS Tag, readers signed up for the contest and were notified via SMS about future giveaways. The US fashion publication gave away a total of $725,000 in free beauty products to readers and the mobile tags increased entries by 28 percent.
View campaign details

Wilkinson Sword

Wilkinson Sword launched a country-wide POS campaign in the UK using QR Code. Featuring their new Hydro Razor 5, the encouraged shoppers to scan the code and access product videos and enter into a contest.
View campaign details

Colorado University

Boulder Digital Works of Colorado University launched a mobile scavenger hunt using MS Tag. The University created the game Zombies vs. Hippies to encourage students to scan posters located around campus to participate in various missions.
View campaign news

Boondoggle Lifelabs

Boondoggle Lifelabs launched a country-wide campaign in Belgium, using QR Code. Developing Likify, a service which allows marketers to add mobile tags to products and signage. When people scan the codes with their smartphone it will “like” the scanned item on the associated brand’s Facebook page. Nike used Likify in a campaign to promote their shoes by getting people to “like” different jogging routes.
View campaign details

Conclusion

As you continue to take advantage of new technology, moving with the mobile market and not being left behind is important. Implementing new technology as it hits the market, testing new innovative ideas and saving clients money will be beneficial in the long-term. While some technology may fade away, staying on the cusp of growth will help keep the market thriving and meet users ever expanding expectations of how a device and website should perform together.

Most popular activities on the mobile Web are mobile search, reading news and sports information, downloading music and videos, and email and instant messages. In the future, money transfer; location-based services; m-health and m-payment will be key drivers. – IDC

Whether you are using framework or implementing the code yourself, HTML5 with CSS3 will continue to drive the future of mobile website and application development. As elements and authoring practices for this emerging technology continue to evolve, the adaptation will continue to grow. Have you used HTML with CSS3 to build a mobile website or web application? Sound off in the comments below!

Resources

• How-To Minimize Load Time for Fast User Experiences
  Experienced front-end developers optimize their site to load quickly and display accurately across all modern browsers. Learn how to analyze the bottlenecks preventing websites and blogs from loading quickly and how to resolve them.
• Speed Up Your Website with Better Image Optimization
  We all know the importance of load time for faster user experiences and why it’s important to have them. Learn how to optimize images in Photoshop for better web performance.
• 5 Cross-Platform Mobile Development Tools You Should Try
  Cross-OS platforms for mobile development on the whole are not yet a completely perfect, have-your-cake-and-eat-it-too solution, but many of them offer an excellent alternative to ignoring one mobile OS in favor of another or, perhaps worse, burning serious resources to develop for two or three platforms at once.
• jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
  A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
• HTML 5 Resources
  This site, the HTML5 Playground, Studio, and Presentation slides are all open source projects. Tweak the code or contribute new guides!
• Estimates of Mobile Phones and Smartphones supporting HTML5
  Discover which mobile phones or smart phones support HTML5 and what they are expected to support in the future.
• Future Of Mobile Tagging Report
  Mobile tags and QR Codes provide an exciting opportunity to interact with customers in ways not previously available to marketers. This report shines a light on to the work of other marketers to both inspire you and present some mobile tagging options as you consider your next campaign.
• Infographic: Mobile Statistics, Stats & Facts 2011
  Microsoft Tag has just released a neat infographic highlighting statistics on how people are using mobile phones in 2011. There is also a video that featured late last year with an array of great mobile “growth” statistics, stats and facts for 2011.
• Global Mobile Statistics 2011
  The essential compendium of need-to-know statistics. Beware of media hype and mobile myth – put your mobile strategy on a sound footing with the latest research from credible independent experts. Global mobile subscribers, handset sales, mobile Web usage, mobile apps, mobile ad spend, top mobile operators and mobile financial services.
• Progressive Enhancement in Mobile Design
  When designing for the mobile web there are many variables to take in to consideration. Probably one of the biggest hurdles is designing for the such a wide variety of devices. There are the high-end devices like the iPhone, Android and Palm OS devices. Then there are lower level devices that can’t render high-end styles. That’s where progressive enhancement comes in.
• Where Progressive Enhancement Meets Graceful Degradation
  Two important web development philosophies are often at odds when it comes to using new or advanced technologies and supporting older browsers or low bandwidth connections. But as is the case with many polemic arguments, the best practice may reside on the middle ground between these two positions.
• Industry briefing Mobile Industry Trends 2011
  Predictions and trends for the coming year with an assessment of the market.
• Mobile and HTML5 <video> in Action with Brightcove
  Brightcove Smart Players automatically detect playback environments and device capabilities to dynamically deliver the appropriate rendition and format, so you can embed a single Brightcove player to deliver video in both Flash and HTML5.

(rb)

  

With Google+ hitting the scene, many in the design and development communities have had their productivity schedules thrown up in the air. This latest development in the social media networking waters has caused many to once more, begin losing themselves and their time to that old familiar interloper. So we have had requests from readers, on ways that we can spend less time with social media and actually get some work done.

This tends to happen with any major development in the social media fields. Suddenly, that finely tuned balance many of us worked to strike for the sake of our professional productivity has to be reworked so we do not fall behind the trends that steer the conversations in the community, or on our responsibilities at work. Some of us have yet to find that balance, and now have a new wrench in the equation to cope with and consider.

Below are some tips that we hope will help out in this respect. There are several suggestions that can keep us on track beyond downright avoidance. And given that most of us rely on social media in one way or another for some aspect of our business lives, we have to make time for this tool.

Rigid Scheduling

One of the most obvious turns that helps with this is to adopt a strict schedule for when to visit these networks, and more importantly, when to unplug and stay away from them. This can be tricky, especially when we consider how effective we need our social media exploits to be, the optimal times for being on to interact with those we follow, and all the other considerations that end up figuring into this equation.

Once you consider these factors, you may find that there are days you can possibly avoid any kind of serious social media engagements altogether. Days where you simply check in and skim the surface. Naturally, it would take some work to get there, but it may be vital to keep this necessary evil from taking over our days. The most important factor to the scheduling though, is keeping to it. Not letting time get away from us, causing us to spend more time than we intended there.

Make it About Interacting

One way to help cut down on the time you end up wasting via the various social media circuits is to strictly make it about the networking. It can be easy to lose sight sometimes that these networks are not about the gaming or anything else that turns meaningful business building time into a time suck. We need to make sure that our time is well spent, and to do so, we have to focus on the interactions. Often the promotion of our content takes precedence, but the two are not mutually exclusive.

The great thing about these platforms is the way that they lend themselves as instigators of discussions. There is so much that we can accomplish for our fields, our businesses, and ourselves through sharing and engaging with our followers and colleagues. So we cannot just write off the benefits of using these platforms effectively to enhance our overall experience in our respective fields by communicating and connecting with others through them.

Ignore the Mobile Draw

One of the reasons that many of us have a hard time turning away from the different networks is because of the amount of access to them we have these days. With so many mobile web devices on the market and in use throughout the field, it is increasingly getting easier to lose an hour or two down the social media rabbit hole. Just as we need to stick to our schedule, we also need to not take the networks with us everywhere we go. The more access we have, the more temptation we face.

Now with the number of apps designed specifically towards allowing for this uninterrupted access, our initial instincts tend to push us in that direction. But just as the old saying goes, ‘too much of a good thing can be bad’, that rule of thumb applies here as well. If we find that we have to have our mobile devices outfitted with social media access, then we might need to try and isolate our network use to only those times when we are using our mobile devices.

Filter Out the Noise

Given that we are now trying to scale back the time we invest, we want to ensure that we are not undercutting our experience overall. So we want to try and filter out the noise from our various social media streams, and cut those followers that are not actually adding any true value to the discussions. Making these cuts is essential for saving time while getting the most out of the interactions. To maximize our social media input/output.

Naturally we will each have to gauge on our own, which followers end up on the cutting room floor, so to speak, and which ones last. Only we know the true value of those we follow, so it will take somewhat of an investment on our part to get the ball rolling. Once we have trimmed the fat from our lists, we can maintain them on a regular basis to ensure that the time we invest continues to yield the best results.

Foster Connections Out of the Arenas

One of the things that we have to start learning to do more with social media, is to use it as more of a launching pad for connections and conversations, but then move those interactions out of those arenas to further develop them. This will also help to prevent us from being distracted from the ongoing dialogs by unrelated interruptions that tend to crop up from our various streams. The various networks may have made the connections possible, but taking them out of those waters can allow them to evolve in new ways. Stronger ways.

Quality Not Quantity

With all of the social media networks that are out there, it is easy to fall into the trap of trying to populate and establish a presence in them all. What is a much better approach is to chose only those networks that suit our needs and business interests the best. More often than not, if we try to take on every network we can get into, we will quickly diminish our voices in them all until we are just part of the noise that others end up filtering out.

Just like we do not tend to just follow back every person or brand that follows us, we cannot try to take our brand effectively across each available network without a dedicated team to tackle only this task. So we have to be somewhat choosy. Not to mention wise, with our choices.

Show Up to the Game

One tempting evolution in the social media playing fields is the automated sharing systems that have cropped up all over, giving users the opportunity to setup their accounts to share information even when they are not actually there. This does little for improving our social media interactions, and in fact, can build the amount of noise we come into when we actually do check in. If we have had our account working in our absence, then by the time we are back in the driver’s seat, we could have a large supply of replies and responses to sort through sapping our time.

Not only do these automated services keep our interactions one-sided and can prevent us from getting much of a return on our social media investment, they can make us seem as though we are ignoring any of our followers who are attempting to connect with us at the time they see us sharing. So it might serve our business interests best to only have our accounts being active and sharing when we are there to actively steer and engage our feeds and followers.

Tools to Help

HootSuite will save you time by allowing you to view all of your social media profiles in one place

LeechBlock is a Firefox addon that allows you to block any site for any time period

StayFocused will do the same thing for Chrome users

The article Automatically Block Websites On a Schedule links to a script that allows you to block sites on your Mac complete with instructions on using it

K9 Web Protection is meant to be used as a parental control but can also easily be used as a productivity booster

To Conclude

Armed with these various tips, we hope that you will find a bit more productive social media endeavors coming your way. We understand that not every tip will work for everyone, but with a combination of one or two you might find a recipe that yields some success. What tips would you offer for spending less time on social media networks, and more on actual design and development work? Leave your thoughts in the comment section below.

(rb)

  

Let’s face it: sales make the world go round. But as a Web designer, you’re concerned more with fonts, color, hierarchy and images than with the sales process. Some believe that designs sell themselves; while this may be true for a few designers, it is certainly not the case for most.

Whether you’re selling a prospective client on a website redesign or a potential client on a new home page, you have to demonstrate your design skills and show how your design will help them meet their goals. When it comes down to it, Web design is more about function than art.

Without any kind of sales background, having to sell our designs to a client can suddenly make us feel lost and far from our comfort zone. Image Credit

Whether you are a sole proprietor or a lead designer at a large firm, you are always selling your work. You may be selling a concept to a client or your boss, but when it comes down to it, you’re selling it to someone. And what are you selling? You’re selling ingenuity, a concept, usability, design harmony: you’re selling the creative. And because design is somewhat subjective, this sale is harder than most others.

If you learn how to sell yourself (without a sleazy sales pitch) you will be able to sell your designs more easily. This means fewer revisions, happier clients, more referrals, and a higher quality of work.

What To Do If You Don’t Know How To Sell

As a Web designer, you focus on what you do best: designing. But many designers get so caught up in the creative process that they fail to consider a business perspective. That is, they cannot articulate how their service will truly benefit the client. Without this ability, you will have a much more challenging time selling your services and designs to prospective clients.

So, what to do? Incorporate sales tactics without becoming a sales person. Follow these tips, starting with the initial meeting with the potential client.

Know Their Business

As you meet with the client, ask about their needs and expectations, and try to understand exactly what they want. You will refer back to this information in all of your meetings with the client, and it will reinforce your design when you review it with them.

Break down clients into different categories: start-up, established, service- or product-based, business-to-business sales, business-to-consumer, etc. This will help you select specific questions for each client.

Research what their existing website does right and wrong (if they have one). What does it have going for it? Where is it lacking? People appreciate honesty, but don’t offend.

A few areas to investigate:

• How many sales and visitors?
  If it’s an e-commerce website, how much sales are generated each month. How many unique visitors come to the website?
• What is the conversion rate?
  How many visitors convert into customers? What is the value of the average order?
• How many repeat customers?
  How many new customers return to make purchases? How often?

When asking these questions, think more in business terms than in design terms. The client isn’t really hiring you to design a website: they’re hiring you to increase their sales or generate more leads. If you can connect with them on this level, you will find that selling your design will be much easier.

Sell the Sizzle

The client is now intrigued and wants to learn more about your work. So, compare your portfolio of designs to their existing website (showcasing your newest work), and explain how your concepts can help them meet or exceed their goals. You could try flipping back and forth between website designs to emphasize the difference in quality.

Explain the key design elements, such as conversion-centric items and usability enhancements, and outline the major money- or lead-generating components. Explain how these elements will increase the client’s bottom line. If you can connect your design strategy to the real needs of the client, the design will have sold itself before you have even quoted a price!

Sell the Benefits

Cite the latest studies, statistics, industry trends, etc. Some people respond best to hard evidence; facts and figures.

Include the latest research to back up your design strategy. Use industry magazines, reports, benchmarks and case studies.

Paint a Picture

Help them visualize the new design with fresh ideas and examples. Use their own products, categories, services and content to help them visualize what you will do.

Discussing Price

Few of your clients will care about costs. They simply want a return on their investment. That’s right: people are willing to spend money if they know they will get it back many times over.

Your job is to demonstrate clearly that your product or service represents the safest and most secure purchase decision rather than merely being the least expensive or highest quality.

Our customers today are the most experienced in customer history. They know that there is usually a close correlation between higher price on the one hand and greater security and after-sales satisfaction on the other. Your task is to make this differential clear in your sales presentation, especially when positioning you product or service against lower-priced competition.

– Factors of Risk in Selling, Brian Tracy

Using the information gathered in the research stage, crunch the numbers and estimate how your design will increase conversions, leads, etc. Break it down into dollars and cents, so that the client can grasp the cost and benefit and you can make a convincing case for the investment.

Formulating A Proposal Or Contract

A true staple of the design process: the contract. This defines the scope of your services. Here’s what to include:

• The process
  Clearly explain or document the design process, from prototype to production. Include everything from market research to wireframing and user testing. Break down your methodology so that the client understands it.
• Services to be provided
  List all items to be included in the design, from the preliminary research to the favicon. Be sure to put a limit on relevant items (e.g. stock photography).
• Client expectations
  Clearly articulate what you expect from the client: for example, content, images, photography, turnaround time on deliverables and other assets. Include deadlines and the consequences of missing them.
• The design strategy
  Explain how many revisions are allowed and what’s included in one. Also, define how revisions above and beyond the specified limit are handled.
• Buffer time
  To play it safe, account for hours above and beyond what you think the design will take. Due diligence and research don’t always catch special cases. When you encounter one, having buffer time to make changes and additions helps a lot. Very rarely do I work on a project that doesn’t require this buffer.
• Hourly rate
  Tie in all these items with your hourly rate. Define your hourly rate for extra revisions, additional stock photography, etc. Now, when the project burns through your quoted hours and buffer time, you can fall back on the hourly rate.

What To Avoid

Knowing what to avoid is key to pitching prospective clients. Even with a strong pitch, not following the guidelines below could derail your effort.

Don’t Accept Every Client

Yes, this sounds like blasphemy, but it is very important when growing your business. Specialization truly is the key to success in design. Know who your ideal client is: e-commerce, social network, brochure website, start-up, small business, medium-sized business, large enterprise, non-profit;the list goes on. Know your strengths: lead generation, splash page, brochure website, etc.

Identify who you work with best? For whom do you achieve the best results? Focus on that market. Pass along to another firm any leads that do not meet your criteria (and maybe get a kickback for it). You will grow your business much more effectively this way.

Few firms do well by catering to all. This might work when you are starting out, but as you grow and land bigger clients, you will need to spend your time on projects that propel your design skills and company in the right direction.

Carve out a niche for yourself, and become the best in that niche. That sharp focus will attract more quality business than you would if you are all over the board.

Don’t be afraid to turn down clients or pass them onto a friend. If they don’t match your criteria, you most likely won’t be able to serve them best. Both you and the client will have lost.

Don’t Provide a Design Sample or Mock-Up

Prospective clients will often ask you to submit a sample design or mock-up for their website. They want to compare your work to that of other companies from which they are getting proposals, and they want a tangible product to make a decision. Don’t do it!

The reason is simple: you do not know the client’s needs yet. You haven’t delved into their business reality or market demographics, so you would be shooting from the hip.

Don’t devalue your service by sending a sample before getting a clear and comprehensive picture of your client’s needs and business structure. Gaining this understanding could take weeks, but it is critical when designing UIs.

Don’t Focus on Your Designs’ Prettiness or Awards

Pretty designs are fun, and awards boost the ego like nothing else, but they don’t usually give prospective clients what they need: results. Instead, focus on what your design will achieve for the client: increased sales, leads, sign-ups, page views and so on.

Don’t get me wrong: a good clean design will definitely help you in the sales process, as will design accolades and awards. But don’t think they will close the deal. Use them to reinforce your pitch or to show secondary benefits to the actual results you will achieve.

Be Cautious of Start-Ups

Ahh, the ever-popular start-up. I think every designer has invested some of their hard-earned money into developing a website for one new idea or another. But start-ups that make it are few and far between. The more start-ups you deal with, the more you will lose when their business plan (or lack thereof) doesn’t work as expected in six months to a year.

Many start-ups take a while to flush out their business plan, because they lack direction and focus. Expect much more hand-holding with these clients than with established businesses.

If you specialize in start-ups, then develop a methodology catered to their needs.

Never Ever Over-Promise and Under-Deliver

This should go without saying, but some designers are so anxious to close a deal that they sell themselves short and set the client’s expectations too high. If this happens, you will be hard-pressed to deliver a solution on time, within the specs and on budget.

Sticking to your niche helps you to set realistic expectations and to over-deliver them. Simply stated: sell what you know, and do what you know. You will get fewer surprises, and I guarantee you will end up with much better designs.

When in doubt, ask an associate or friend for a quote or to review your proposal. Make sure your time estimates are accurate and that you are charging accordingly.

Other Sales Strategies

Listening and note-taking skills (the things we were taught in school) are indispensable; unless you have a photographic memory. Take notes in every meeting with a client, and log them somewhere. Listen to your client, and try to understand their needs. Ask for clarification when you get lost.

Always send a list of references, even if the client doesn’t ask for it. It’s a nice touch and builds credibility. I also like to mention that once the project is completed, we would like to add their name and testimonial to our reference list.

Incorporate a few of these tips into your meetings. You (and the client) will benefit from them instantly.

Further Resources

• Brian Tracy International
  Outlines skills that you need to increase prospects, get more appointments, close more sales and put more money in your pocket.
• Zig Ziglar
  An expert in sales motivation, goal-setting and personal success.
• Let’s Get Real or Let’s Not Play: Transforming the Buyer/Seller Relationship
  An excellent sales strategy book, geared to technicians rather than “salespeople.”

(al)(rb)