The foundation of an SEO campaign relies on the keywords that are chosen and implemented into website content, so the first step is to conduct keyword research and carefully select the right keywords. Keywords should be chosen that have search volume and are most relevant to the website content. This can be tricky for a business that is trying to generate demand for something new. If it’s new, there will be no demand (yet) for the keywords.

This is a concept that many businesses just don’t understand. They come up with all of this new terminology that supports a new product and want to target this set of new keywords. What they aren’t getting is that the only people that know those keywords are the people within their business. Obviously, those keywords aren’t going to get you too far. Targeting brand new keywords might get you ranking for those keywords, but since no one is searching for those keywords they certainly won’t generate any visitors.

Businesses that are trying to create demand for a new product or service need to be flexible when it comes to keyword selection and find the right balance. New keywords can be included in the mix, but related keywords that have search volume should also be included. Conduct keyword research to find solid keywords that will actually generate traffic to the site.

Since keywords are so important to an SEO campaign, and a business with a new product or service is trying to create a demand, it can’t rely only on SEO. It’s important to educate through content marketing and advertising. It takes a lot of time, effort, and money to create a demand so it’s important to fully support the product or service and follow through.

Writing by Brick Marketing in SEO

Social Sharing Buttons
Social sharing buttons are important and absolutely essential to include on your blog posts. However, you don’t need to have 20 of them. 5 is plenty. Think about your target audience and where they are most likely to share your content. If you are a B2B LinkedIn should be included, but for B2C it might not make sense. Including a “Share This” button that pops out all of the other social networks is also an option. Just don’t include a slew of social sharing links that take the eye away from what’s important.

Ads
A website that is used for business shouldn’t include ads for many reasons. First, it looks unprofessional. It also makes the website visitor wonder what your true intentions are for the website. Do you want them to buy something or click on an ad? It’s an unnecessary distraction. The same holds true for the blog. Do you want visitors reading your content or clicking on ads? Some blogs even include ads in between paragraphs of the blog post content! Talk about distracting!

Archives
It seems to be common practice for bloggers to include an archive on the side of the blog that lists all of the months that the blog has been active. The question is, do people actually browse a blog this way? It seems like if they were looking for something in particular they would instead browse the Categories section. What is the purpose of the Archive section? Is it just to make you look good and to show how long you’ve been blogging?

Take a look at your blog and consider what’s necessary and what’s not. Removing some of the unnecessary items will give the blog a clean, professional look.

Writing by Brick Marketing in Content Marketing

Optimize for Local Keywords
The first step of an SEO campaign is to conduct keyword research to find out how people are searching for what you have to offer. First, conduct the keyword research nationally. Then, once keywords have been chosen, localize them by inserting the city or town, city or town and state, and neighborhood (if applicable). So instead of targeting “cupcake shop” you would target “Anytown cupcake shop”, “Anytown MA cupcake shop”, and “Anytown Massachusetts cupcake shop”.

Submit to Local Directories and Create Local Search Profiles
It’s important to take the time to submit to the local profiles of the three main search engines, Google, Bing, and Yahoo!. These local search profiles are featured prominently on a search engine results page for a local search. Basic listings are free, but paid “Enhanced Listings” offer more options like photos, logos, and a more detailed business description. Don’t forget about local directories like Yellow Pages and Local.com and for many businesses it makes sense to have a Yelp presence.

Have a Mobile Friendly Website
A large percentage of searches for local establishments are conducted on a mobile device. As more and more people use smart phones and tablets, it’s becoming increasingly important to have a website that is mobile friendly. If a visitor can’t view your website, they obviously won’t purchase or do business with you.

Include Contact Information on Every Page
Include a physical address, a mailing address, and a phone number on every page of the site and make sure that this text is crawlable by the search engines. A good place for this information is in the footer of the page.

Optimized Social Profiles
Social media is no longer only a place to connect with friends and family. It’s also a place for consumers to connect with brands. Take the time to optimize social media brand pages just as you would optimize your website and incorporate local keywords. For example, instead of titling the brand page, “Suzy’s Cupcakes”, title it “Suzy’s Cupcakes – An Anytown Bakery”.

Writing by Brick Marketing in SEO

Beyonce Knowles is looking for an ad agency to fix her website, which she dislikes because it’s basically just a glorified blog. Says Ad Age’s source:

“Beyonce herself hates the website because she doesn’t think that it looks like who she is as an artist, someone who likes fashion and art and photography and travel,”

The assignment would be a huge plum for any agency because Beyonce wants to meet with the shop personally. But beware, the account comes with one major drawback: The brief for the task is apparently “thin” — usually the sign of a client who doesn’t really know what they want, and therefore who may be horribly indecisive — yet she will only give agencies a turnaround time of about 48 hours.

There is no way she’ll get quality work from those specs. Ms. Knowles, give Madison Avenue some time to get it right!

Social media icons are integrated into every major website design today. They are frequently displayed prominently in sidebars and headers in order to promote such things as RSS feeds, Facebook fan pages and Twitter profiles. They are cropping up all over, creating a near endless demand for these resources.

Whilst you can link to your social media accounts with basic text links, it is far more common to use a social media icon that stands out and grabs the attention of visitors. Today we will be showing you 50 social media icon sets that you can download for free and use on your website to promote your social media profiles.

[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!]

The Icon Goodies

1. Splatter Social Media Icons

2. Free Social Media Bookmarking Icon Set

3. Cheers: A Free “Social” Icon Set

4. Heart: A Free Social Icon Set

5. Free social media icon set

6. OLED social icons

7. Free Google Plus Icon Vector

8. Free Google Plus Icons Set

9. Social Media Sleek Icons: Icon Pack

10. Vintage Icon Set For Bloggers

11. Google + Circular Icon Set (PSD + PNG)

12. 81 Pixel perfect Social Media Icons

13. Ultimate Social Network Icon Pack (45 Icon Sets)

14. [Freebie] Social Truck Icon Set

15. Page Peel – A Free Social Media Iconset

16. Exclusive Scribble Social Media Icon Set and Tutorial

17. ElegantThemes Free Social Media Icon Set

18. Vector Social Media Icons

19. Neon Social Media Buttons

20. Social media icons

21. Free Sweet Candy Social Icon Pack

22. Ball social icons

23. Handycons 2 – another free hand drawn icon set (also see HandyIcons 1)

24. SocialClean- Free Social Network Icons

25. Social Media Icon Pack

26. Sea Sand Beach Social Icons Pack for Vacation

27. Icon set: Free glossy social icons

28. Starry SIite! New 16 Social Media Icons + PSD!

29. Social Media Stars Icon Set

30. Circle Social Media Icons

31. Glossy Aqua Style Social Media Icon Pack

32. Old Bottle Crowns Icon Set

33. SocialMate: 28 Free Social Media Icons (Includes PSDs)

34. Free Set of Social Media Icons – Large Icons Social

35. Isometrica (Volume 1): A Free Social Media Icon Set

36. Free Icon Pack: Vector 3D Social Icons

37. Social Media Icons Pack in 3 Sizes for Download

38. 27 Circular Social Media Icons in 3 Sizes

39. Social Media Icons

40. Web Social Media Button

41. Socializic

42. Social Media Bubbles: Icon Pack

43. Social Media Bubblicons: Icon Pack

44. Social 3D Icons

45. Somicro: 27 Social Media Icons

46. Free Stamp Social Network Icon Set

47. Simple Social Icons PSD

48. “Buddycons” – Vector Social Media Icons

49. 28 Social Media Icon Badges

50. Simplito: A free social icon set

We hope you have enjoyed this free collection of free social media icon sets new and old. What are some of your favorite free social media icon sets to use in your web design projects? Let us know in the comments below!

By Christian Krammer

In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Print style sheets are useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on, when they don’t have an Internet connection. However, print styles are often forgotten in the age of responsive Web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver just a slightly better user experience. So, how do we start?

[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!]

Getting Started

Let’s look at the process of setting up a print style sheet. The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

For this to work, we have to prepare two things:

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: <link rel="stylesheet" href="css/style.css"/>

In rare cases, using screen styles for printing is the way to approach the design of the print style sheet. Although making the two outputs similar in appearance would be easier this way, the solution is not optimal because screen and print are different kettles of fish. Many elements will need to be reset or styled differently so that they look normal on a sheet of paper. But the biggest constraints are the limited page width and the need for an uncluttered, clear output. Building print styles separately from screen styles is better. This is what we will do throughout this article.

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media="screen" and the media type for printing to media="print", omitting it for the first one if you want to build on the screen style sheet.

To illustrate, I have set up a simple website of the fictional Smashing Winery.

Our example website.

Everything needed for a proper screen display is in place. But as soon as the environment changes from virtual pixels to real paper, the only thing that matters is the actual content.

The two pages of the unaltered print preview. The header is not yet optimal, and both the main navigation and footer are superfluous.

Therefore, as a first task, we will hide all the clutter: namely, the main navigation and footer.

Depending on the type of website, you could also consider hiding images by default. If the images are big, this would be wise, to save your users some printing costs. But if the images mainly support the content, and removing them would compromise the meaning, just leave them in. Whatever you decide, limit the images to a certain width, so that they don’t bleed off the paper. I’ve found that 500 pixels is a good compromise.

Alternatively you could also rely on the tried and trusted max-width: 100%, which displays images at their maximum size but not bigger than the page width.

You might want to use a simple trick to get high-quality images when printing. Just provide a higher-resolution version of every image needed and resize it to the original size with CSS. Read more about this technique in the article “High-Resolution Image Printing” on A List Apart.

Of course, we should hide video and other interactive elements, because they are useless on paper. These include <video>, <audio>, <object> and <embed> elements. You might want to consider replacing each video element with an image in the print style sheet, too.

With the main navigation, footer and images gone, the actual text is getting ever closer to center stage. But work remains to be done, especially with the header.

Adjusting To The Right Size

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. (thanks for the tip, Designshack)

Now let’s tweak some general settings for the fonts. Most browsers set the default to Times New Roman, because serif fonts are considered to be easier on the eyes when read on paper. We can use Georgia at 12-point font size and a slightly higher line height for better legibility.

However, to retain some control, we should explicitly set the font sizes below. The chart on ReedDesign gives us a feel for this; but with all of the screen sizes and resolutions out there, these are only rough estimates.

Apart from special cases (like the <h2> heading, which would otherwise be too close to the preceding paragraph), we don’t need to touch the margins or appearance of any elements, because they are handled quite nicely by the default settings. If you don’t like that certain elements are indented, such as <blockquote>, <ul> and <figure>, you could always reset their margins:

Or you could override the default bullet style in unordered lists…

…and replace it with a custom one; for example, a double arrow (and a blank space to give it some room):

You could also make <blockquote> stand out a bit by enlarging it and italicizing the text.

The Header

Currently, the remaining things to be dealt with in the header are the <h1> title and the logo. The first is there just for accessibility purposes and is hidden for screen display using CSS. While we could use it as a sort of header in the print-out to indicate the source of the content, let’s try something more attractive. Wouldn’t it be nice to display the actual logo, instead of the boring text?

Unfortunately, the “Winery” part of the logo is white and therefore not ideal for printing on light-colored paper. That’s why two versions of the logo are in the source code, one for screen display, one for printing. The latter image has no alt text, otherwise screen readers would repeat reading out “Smashing Winery.”

First, we need to hide the screen logo and the <h1> heading. Depending on the relevance of the images, we might have already decided to hide them along with other unneeded elements:

In this case, we have to bring back the print logo. Of course, you could use the adjacent sibling selector for the job (header img + img) to save the class name and live with it not working in Internet Explorer 6.

Otherwise, you could just use header .screen (or header :first-child) to hide the main logo. And then the second logo would remain. Keep in mind that in print layouts, only images embedded via the <img> tag are displayed. Background images are not.

Voilà! Now we have a nice header for our print-out that clearly shows the source of everything. Alternatively, you could still remove the second logo from the source code and use the header’s <h1> heading that we switched off earlier (in other words, remove it from the display: none line). Perhaps you’ll need to hide the remaining logo as we did before. Additionally, the font size could be enlarged so that it is clearly recognized as the title of the website.

As a little extra, the header in the print-out could show the URL of the website. This is done by applying the :after pseudo-element to the <header> tag, which unfortunately won’t work in IE prior to version 8; but because this is just a little bonus, we can live with IE’s shortcoming.

To see what else these pseudo-elements can do, read the description on the Mozilla Developer Network, or consult Chris Coyer’s excellent article on CSS-Tricks.

Another thing about IE 6 to 8 is that HTML5 tags can’t be printed. Because we’re using these tags on the example website, we’ll have to apply Remy Sharp’s HTML5shiv in the header. The shiv allows you not only to style HTML5 tags but to print them as well. If you’re already using Modernizr, that’s perfect, because the shiv is included in it.

Unfortunately, the behavior of the IEs is still a bit buggy even when this shiv is applied. HTML5 tags that were styled for the screen layout need to be reset, or else the styling will be adopted for the print-out.

Some developers add a short message as a supplement (or an alternative) to the displayed URL, reminding users where they were when they printed the page and to check back for fresh content. We can do this with the :before pseudo-element, so that it appears before the logo. Again, this won’t work in IE 6 or 7.

To distinguish it from the actual content, we’ve given it a gray border, a bit of padding and italics. Lastly, I’ve made it a block element, so that the border goes all around it, and given the logo a margin.

To make it more discreet, we could move this message to the bottom of the page and append it to main container of the page, which has the .content class. If so, we would use the :after element and a top margin to keep it distinct from the sidebar’s content. As far as I’m concerned, the URL is indication enough, so I would rely on that and omit the message.

Finally, we need to remove the border of the logo to prevent it from showing in legacy browsers, and move the <header> away from the content:

The header shown two different ways, one with a logo and simple URL, and the other with a message and the title in plain text.

The Missing Link

Obviously, on paper, links aren’t clickable and so are pretty useless. You could try to build a workaround, replacing links with QR codes on the fly, but the solution may not be feasible. To put the links to use, you could display the URL after each string of anchor text. But text littered with URLs can be distracting and can impair the reading experience; and sparing the reader excessive information where possible is advisable.

The best solution is the :after pseudo-element. It displays the URL after each anchor text, surrounded by brackets. And the font size is reduced to make it less intrusive.

We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector is perfect for this:

The possibilities for links in printed documents seem to be almost endless, so let’s try some more. To distinguish all internal links, let’s precede them with the website’s domain (omitting all the other properties, to keep things concise and clear):

Then, we can hide internal links (#), because there is not much to display:

Also, external links will be appended as is, like above. Let’s consider SSL-secured websites, too (i.e. ones that begin with https://):

But there is one thing to remember, especially with external links. Some are very long, such as the ones in the Safari Developer Library. Such links can easily break a layout, like at the screen output. Luckily, a special property takes care of this:

This breaks long URLs when they reach a certain limit or, as in our case, when they exceed the page’s width. Just add this property to the first of the above declarations. Although this property is basically supported in a wide range of browsers — even IE 6 — it works only in Chrome when printing. While Firefox automatically breaks long URLs, Internet Explorer has no capability for this.

Finally, we set the link color to black to improve the experience for readers.

URLs, whether internal or external, now show up beside links with special treatment.

Aaron Gustafson went one step further and built the little script Footnote Links. According to the description:

This script builds a list of URIs from any tags within a specified container and appends the list as footnotes to the document in a specified location. Any referenced elements are given a dynamically-assigned number which corresponds to the link in the footnote list.

Aaron’s article on A List Apart “Improving Link Display for Print” gives more insight into the idea behind this script.

While we’re at it, letting readers know where quotes come from, such as those wrapped in <blockquote> and <q> tags, would be thoughtful. Just append the cite attribute (which will be the URL) after quotation marks, like so:

Side By Side

We haven’t yet dealt with the sidebar content. Even though it appears after the main content by default, let’s give it some special treatment. To keep it distinct, we’ll give the sidebar a gray top border and a safe buffer of 30 pixels. The last property, display: block, ensures that the border shows up properly.

To separate it even more, we could set a special print property:

This will move the contents of the sidebar to a new page when printed. If we do this, we can omit all of the other properties.

The sidebar on screen (left) and printed out (right). I’ve grayed out everything else to make it more obvious here.

We could do the same for comments. Comments don’t appear in the example, but they’re still worth touching on. Because they sometimes run long, omitting them in the print-out might be reasonable (just set display: none for the whole container). If you do want to show the comments, at least set page-break-before. You can also use page-break-after: always if there is content to print on a new page. The page-break-before and page-break-after properties are supported in all major browsers.

We can also use widows and orphans properties. The terms derive from traditional printing, and they take numbers as values. The widows property sets the minimum number of lines in a paragraph to leave at the top of a page before moving them entirely to a new page. The orphans property sets the number of lines for the bottom of the page. The orphans and widows properties are supported in IE 8+ and Opera 9.2+, but unfortunately not in Firefox, Safari or Chrome.

Now that we have taken care of the sidebar, the print style sheet is ready! You can download it here. The file is fully documented and so can serve as a helpful reference or starting point.

The completed print style sheet.

Just For Fun

You might be asking, “Why can’t we just put the sidebar next to the main content, like on the website itself?” Well, the screen and print outputs are a bit different. Unlike the former, print-outs aren’t very wide and thus don’t have much space to fill. But depending on the font size, the line length could exceed the maximum of 75 characters and so be more difficult to read.

In this case, we could, of course, limit the width of the main content (preferably not too much — we shouldn’t set the line length to fall below about 55 characters) and then absolutely position the sidebar just below it, just like in the screen display. But describing this method falls beyond the scope of this article, so please consult the screen style sheet of the example website (line numbers 112 and 141 and down).

In my humble opinion, avoid such experiments. While in principle, print layouts have endless possibilities, focusing on the content and removing everything else is better. The better way to ensure an optimal line length is just to shrink the page’s width or enlarge the font size.

Preview Made Easy

Print Preview by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function, but with one difference. Instead of opening a separate page, it shows a sleek overlay, with “Close” and “Print” buttons at the top. It also has the convenient “P” shortcut. You might want to check out the demo page, too.

A Missed Opportunity

Imagine that you were able to visit any page, hit “Print” and get an optimized version of the page to enjoy on paper. Unfortunately, we don’t live in this perfect world. Some websites still rely on JavaScript to generate print versions, and many other designers simply don’t care. But this is a missed opportunity. A carefully composed print style sheet could be used not only for printing but to optimize legibility for screen reading.

As the website owner, you can determine the images to display (if any), the optimal font and size, and the presentation of other elements. You could make the content more appealing than the versions produced by Instapaper and Readability by giving the print version the extra attention it deserves.

The Future

While using CSS3 for screen layouts is pretty common nowadays, it hasn’t quite established itself in the print environment yet. The W3C has an extensive description of “Paged Media,” but unfortunately support is very limited at the moment, Opera and Chrome being the only browsers that enable a few of its related properties. With decent support, it would be possible to use the @page rule to set the dimensions of the page, switch to a landscape view, alter the margins, and do much more. Even media queries are were conceived to respond to different page sizes.

Websites Designed Well For Print

Let’s take a look at some examples of websites optimized for print.

A List Apart
The slick multi-column design is simplified into a single column, full width, which intuitively mirrors the website’s sensible hierarchy. Article titles and authors are no longer active links. And beautiful clean typography is kept intact, thanks to the compatible fonts and simple colors; no font change is necessary, although the font-size value increases slightly. Advertising and affiliate styles are hidden, and the result is a simple, clean printed page that easily conforms well to any printer or page set-up in the document. A List Apart is exemplary, save for one important point: the logo does not appear anywhere in the print-out.

Lost World’s Fairs
The smooth printed page helps to carry the visuals of the website for Lost World’s Fairs. The main title and its colorful background are swapped for a simplified version in the print-preview style. However, some images could be removed to save some expensive printer ink. (Updated).

The Morning News
One would expect most news websites to employ the print-preview function, yet that isn’t the case. The Morning News has prepared its content for print without much concern, happily excluding background images and color, while still getting its message across.

James Li
James Li has designed his personal website exceptionally well for this purpose, carefully preserving all spacing and key elements. The logo is a part of the printed product, whereas the navigation links are not: very clever, because navigation has no value on a printed page unless it is informative in and of itself. Non-Web fonts are converted to simple printable ones (see “Other Stuff…”). Brilliantly executed for print.

TechCrunch
TechCrunch’s recent redesign tweaked not only the visual design of the site, but also the small details that have to be considered when the site is viewed on mobile or printed out. The print layout is very clean and minimalistic, without unnecessary details, yet also without links to the actual page that was printed out. The TechCrunch logo is omitted as well.

R/GA
Although the logo isn’t present in the printed version of this website, attention is paid to the spacing of the content within. While the Web version has simple lines and a clean space, the printed page tightens up elements in order to best use the space. A strong grid and effective typography add to the effect. In this example, some images could be removed as well.

Studio Mister
An excellent job of the print-preview function. The page has been meticulously designed to a grid and requires little in order to prepare it for print; some attention to the background color of text and not much else. Unfortunately, though, the logo is a background image and thus excluded.

Bottlerocket Creative
Although this logo isn’t represented in the print-out either, the folks at Bottlerocket Creative have done very well to adapt their typographic style for offline viewing. Assuming the design was created mainly with images would be easy, but meticulous attention to type is evident upon closer inspection.

OmniTI
OmniTI has optimized its content for print not by shrinking the main column, but by increasing the size of the text and not crowding the images together. The playful look adheres to good spacing. The only drawback? Many of the line breaks have been eliminated, causing some words and sentences to run into each other.

In Conclusion

There’s a lot to consider when preparing your website to be printed out by readers. The process forces you to scrutinize every element of your content like never before, all because someone will want a hard copy of your work. Yet most of all, it’s important to recognize the difference between printing and actually reading. Perhaps these techniques hold merit in helping you visualize content for mobile devices. What better way to kill two birds with one stone than to work out your layout for the mobile while considering printing view at the same time to make sure that your content prints flawlessly for offline archival? The time you invest could double in value.

For more information on preparing content for print, including by modifying CSS, check out the following articles:

• “Print Style Sheet: The Definitive Guide,” Trenton Moss, Webcredible
• “6 Things I Learned About Print Stylesheets From HTML5 Boilerplate,” Joshua Johnson, DesignShack
• “CSS Design: Going to Print,” Eric Meyer, A List Apart
• “CSS-Tricks Finally Gets a Print Style Sheet,” Chris Coyier, CSS-Tricks
• “CSS Print Profile,” W3C
• “Media Queries,” W3C

Each week, we’ll feature a selection of the best job opportunities posted for the week. This week, we’re featuring jobs in Social Media/New Media, WordPress Development, Illustration for Emoticons and more!

To apply for any of these jobs, simply pick up a FreelanceSwitch membership for an affordable $7 a month. See something you like? Join now!

Social Media / New Media Consultant Needed

Budget: $1,000 to $2,500

We are an established Digital Solutions company with a start-up mentality looking for a New Media/Social Media Consultant.

The project includes helping our nation-wide clients build social media and new media strategies, performing monthly analysis of their Facebook pages and email blasts, monitor weekly trends and provide insight and analysis (we have community managers already in place) and helping our firm identify new media opportunities that will best help our clients most effectively reach their target demographic.

This project starts in December for a 3-month trial engagement and requires approximately 10 hours per week. There is potential that this project will lead to more work on an ongoing basis.

Learn more & apply!

WordPress Developer

Budget: $10,000+

Our client is a leading “conversations” agency specialising in social media and working with an enviable range of national and international clients. With a positive 2012 already in their sights they are looking to expand their development team and need exceptionally talented mid-to-heavyweight web developer to join their London team in to deliver social platforms and applications. Far from being “just” a developer your work will be varied and you’ll have the opportunity to contribute throughout the creative process. Essential technical experience includes: Jedi-level skills in WordPress, PHP and MySQL, thorough proficiency in HTML, CSS and JavaScript as well as being comfortable with the basics of managing a LAMP or LEMP stack.

Learn more & apply!

Freelance Illustrator for emoticons

Budget: $100 to $500

We’re creating an app that requires emoticons with different emotions and facial expressions. We’ll need about 10-15 in total. If we like your work, we’re going to need you on a regular basis to create other sets for us but with different themes. (maybe animals, different colors, male-female, etc) But for now we need a generic set of emoticons to launch.

Learn more & apply!

Tech Blogger

Budget: Less than $100

We need a regular blogger who has knowledge about the computer and electronics industry. You will need to regularly blog about hardware, software, PC components, electronics, or tech news. We prefer someone who has a passion for the industry, as this enthusiasm will then be reflected in your work. This will be an on-going project, depending on what you deliver. We need at least 1 post per week.

Learn more & apply!

Game Development for iOS/Android

Budget: $5,000 to $10,000

I’m looking for experienced iOS/Android developer and designer to redesign game client for already existent MMO game. Server part for game already finished and I can provide full access to REST/JSON API and you need to build new game client based on this.

From you I need:

• Provide all assets (UI mockups, graphics, sounds etc.)
• Provide full development process
• Application must be compatible with screen resolutions for: iPhone (with retina and without ), iPad, Android

Learn more & apply!

• Amber Leigh Turner |
• Website |
• Other Articles

Amber Leigh Turner is a graphic and web designer from Nashville, Tennessee, focused in branding design and development. A full-time freelancer and full-time student, Amber spends most of her time doing what she loves to do, and nothing less. Amber is also the muscle behind StudentsThatFreelance.com, a blog and forum community dedicated to all things student freelancing. Visit her website at amberturner.com or follow her on Twitter.

We’ve all had that client. The one who comes to you with a huge, complicated assignment and proceeds to be a gigantic pain in the rear about it. They do things like neglecting to answer their phone or email, change their minds a dizzying number of times about details in the design, all the while demanding that you do the impossible in a matter of minutes. Oh, and did they mention they expect you to do these things free of charge?

Clients like these are ubiquitous in the world of freelancing. There’s just no escaping them. Most freelance designers will work with at least one obnoxious client at some point in their careers. They can suck the enjoyment and creativity right out of a project, and leave you wondering why you didn’t go to law school like your mother wanted you to.

As horrible as things can get with a bad client, even a reasonable client can be a huge drain on your creative output as a designer. Rather than hassle you endlessly over insignificant details or attempt to art-direct you into a corner filled with ugly stock photos and animated GIFs, these clients will nonetheless have you struggling not to toss your computer out the window out of frustration and stress, with their restrictions and rules about what they want the design to look like.

But you have to listen to your clients. Keeping your clients happy is very important, and is an integral part of the job as a freelance designer.

1. Presentation is Key

You really should give the client what they’re asking for (well, sort of). You might be surprised at how much clients will allow you to get away with creatively. The key is how you present your work and your ideas.

A mediocre idea that’s presented well can outperform a great idea that’s presented poorly. So, logic would tell us that a great idea that’s presented well is the winning combination to shoot for.

Spend a few moments to get inside your client’s head. Talk to them, listen carefully, figure out exactly how you need to package your ideas so that they will choose the option that’s best for their needs.

Do your research and present your case clearly. Support your design decisions with data. You could, for example, use usability research results to back up your choices. Yes, this takes a bit of extra effort, but it’s almost always worth it.

2. Be Clear About Out-of-Scope Work

There’s an easy way you can mitigate the problems caused by bad clients in a project. Some of the most frequent complaints given about design clients have to do with time. Designers gripe that their clients expect them to be time wizards, completing an impossible amount of work in the space of a day, or even mere hours. Your client wants a rush job or extended labor, but doesn’t want to pay you for your extra time.

So, what do you do? In your project contract (there should always be a contract between you and the client on any project you work on), include a clause which breaks down your expected compensation in the event of a rush job or any overtime work.

Make it very clear to them what they’re asking for and how difficult it is to accomplish, when they want you to redo the web page layout of the site to a two-column layout from a three-column layout, for example. If you’d rather not be stuck doing revision after revision, include a set number that you’ll allow each client to have.

Be specific about the project’s deliverables and outcomes, and protect yourself by having a solid terms and conditions agreement in the event of out-of-scope work. (Read Avoiding Unscoped Work from Unreasonable Clients for more strategies on how to sidestep this common issue.)

When the guidelines and parameters for what you will and won’t do are set in stone, it does wonders for your peace of mind.

3. Use Contracts

If you don’t currently present every one of your clients with a working contract, now would be an excellent time to start.

You can find free contract templates all over the Web that cover a wide scope of freelancing needs. (To get started, check out this list of free freelance design contract templates on Speckyboy.)

A terms and conditions agreement template (in PDF format). Source: Sessions College

There are also several books that contain a wide assortment of contracts and legal forms specifically for designers. For example, check out Business and Legal Forms for Graphic Designers by Eva Doman Bruck and Tad Crawford.

The optimal solution, however, is to simply consult with a contract attorney and let them draft your company’s business contracts. If you’re intimidated at the thought of going to a lawyer, don’t be. I promise you, it’s not nearly as scary (or expensive) as being faced with a mountain of revisions from a client who isn’t legally obligated to pay you for your extra hard work.

4. Make Sure Your Portfolio Represents Your Business

You want to make sure that every single piece of work in your portfolio is tailored to the needs of your ideal client. In a lot of ways, this helps in making sure that you work with people that best matches the way you work, acting as a sort of filter and preventative medicine against clients that you might not work well with.

If you’re trying to attract a higher-caliber client, you’ll need to adjust your portfolio accordingly. If you work well with programmers/coders, have a portfolio that caters to this group of people. If you prefer dealing with small-sized businesses or startup companies as opposed to Fortune 500 companies, build a portfolio that is attractive and focused on the needs and wants of these businesses.

5. Realize Your Role as an Educator

Another important hat for designers to wear is that of the educator. We’ve all heard of the clueless design client who has no idea how to download an email attachment, much less understand the ins and outs of what’s required to complete their project.

I’ve found that having patience with people and taking care to explain in detail what is expected from them has helped me avoid quite a few catastrophes in the past.

If you struggle with being able to communicate difficult concepts to your clients, consider making friends with a teacher, particularly one who teaches young children. It may sound silly, but people who work with children on a daily basis must develop a keen sense of how to package information in easy-to-consume ways — which words to use and which to avoid, where exactly to begin your explanation, even what tone of voice to use.

Being able to communicate well can help defuse a situation that might otherwise get out of hand and end in frustration for both you and the client.

For more tips on this subject, read A Simple Guide on How to Effectively Talk to Clients.

6. Be an Underachiever

Allow me to share a personal story from my days as an in-house designer and content writer. I’m one of those people who can produce a large amount of quality work in a relatively short amount of time.

Because of this tendency, I’ve found that freelancing suits me far better than in-house work. Why?

Firstly, it allows me to have near complete control of my own time. I’m no longer chained to a desk, droning away with lame busy work that has nothing to do with anything creative.

Secondly, and more importantly, it allows me to keep my freakishly prolific work ethic a carefully-guarded secret.

When you produce a lot of work in a short amount of time, you tend to assume you’ll be rewarded handsomely for it. Unfortunately, most people figure out pretty quickly that that’s almost never what actually happens.

Most likely, you’ll just be loaded down with more work. Once people find out how fast you are, they’ll get spoiled and will start expecting the same level of output from you in the future.

As many designers can confirm, it’s almost never the actual work that takes the most time. You’re a designer. You know what you’re doing and how to use your tools to your best advantage. The biggest time drain is usually getting the client to be on the same page as you are in terms of the idea.

If you’re a freelancer, my crazy suggestion to you would be to slow down. Not “slacker” slow, but try not to let your clients in on your amazing superpowers. Impress your clients by under-promising and over-delivering.

What do you think about the balance between creativity and the crazy demands of clients? Has any strategy worked well for you in your career?