How to newsletter – tips for Web Designers

I have presented in previous posts how to create a cool websites and how to convert more visitors into clients. Newsletters are also part of the designing/branding of a company online, they usually come together with the site, so it’s still a designer’s job. You might thing that newsletters are old school and social networks have replaced them but they still convert very well and are more suitable for non technology companies where customers don’t necessarily get that much in touch with social networking. Newsletters are great because they target a specific audience that is clearly interested to hear more about the company’s product and services.

Creating a newsletter is not that difficult but you have to create it in such way to maximize the results, just like in the case of the site:

• attracting subscribers (or having someone to receive the newsletters)
• design guidelines for the best newsletter
  • using the right dimensions
  • test the newsletter on various email clients
  • tips and tricks
  • using a service provider to send the newsletter
  • text to image ratio
  • the landing page
• converting the subscribers into buyers
  • the perfect time to send a newsletter
  • measure the conversion rate
  • do not spam

How to attract more subscribers

There are more ways to attract subscribers to your newsletter but probably the single most important factor is having something of value to offer to the subscribers. It can be:

• information – tutorials, how to’s, professional and unique content the subscribers can’t get elsewhere
• special prices for subscribers
• prizes (money, free products)
• announcements on future products
• anything else that represents enough benefit to make people leave their contact details.

These benefits (or what the subscribers will get if they sign up) should be clearly visible in the subscribe to newsletter area, together with a clear privacy policy (assuring the visitors nothing bad will happen to their contact details) and unsubscribe policy. Basically minimizing risk and maximize benefits. You should take this into consideration when designing the site. And (it’s obvious but to be sure I’m going to mention it) the newsletter subscription area should be easily reachable and visible.

Of course, nowadays attracting subscribers to the newsletter can’t be thought outside of a larger marketing plan that includes social networking. Because one of the ways to increase the list of subscribers is to expand your social network. Subscribe to other, use twitter, Facebook and YouTube to promote your services. Having a great social friend network is the best way to attract more visitors and future customers. Because posting on social networks will spread your news to your friends and from there on to their friends and so on, (that’s called going viral).

Converting from social networks to email subscribers is important because one might not be active for a while on the social networks but it’s almost sure it will get the newsletter!

For more information about how to attract more followers, take a look here.

Design guidelines for the best newsletter

Using the right dimensions

When you create a newsletter it’s best to create a teasing effect to attract the reader’s attention and to make them interested to read more about what you offer in that newsletter and go to the landing page. When it comes to the width of the newsletter, the common practice is to be less than 620px wide and that’s quite easy to follow, but what about the length?

The length of the newsletter depends on how many products or services you are willing to offer with that newsletter. If the newsletter has a monthly frequency then you should only point out some reductions for that month or some special deals. If you send a newsletter twice a year, or by season than you have more information to offer so your newsletter could be a bit bigger. But the most efficient area is what the receiver can read without scrolling, so you have to focus the most important bits of information and call to action in the first half page (that depends of course on the email client software). If you have lot of information to display, one way to make it shorter is to have excerpts in the newsletter with "read more" links that go to separate pages online.
You can read more info here.

Test your newsletter on different client email programs. (yahoo, outlook, Gmail, etc)

After you have created your newsletter the first thing you should do is to test it on different email platforms like Gmail, yahoo, outlook and thunderbird. You have to test it because everybody has a different way of reading a newsletter and there are some differences between these e-mail reading platforms. And of course, the worse thing might happen to your beautiful newsletter is to be un-readable.

For example, if you design a newsletter with some background images then you have to know outlook 2007 doesn’t support background images. The best way to design a newsletter and to make sure you have some compatibility on all platforms is to use tables. Using tables for a newsletter saves you a lot of trouble because if you choose divs then you have to place some of them with float and some email clients don’t recognize float when reading an e-mail. These email clients like outlook or thunderbird don’t recognize all HTML tags because they are not web browsers.

Another thing that you have to be careful with is the CSS. You should know that you cannot attach a CSS file to the newsletter so all the CSS tags will be placed inline. Make sure your CSS can be applied on all these email clients and that it looks the same.

(More) Newsletter tips and tricks

• You should know that when you use tables and place a background image inside a row or a column you should specify a line-height for that row or column. This a tweak for Gmail
• Another trick for Gmail is that it can only read inline CSS code. If you place your CSS at the top of the page or link to stylesheet on the web doesn’t work on Gmail
• Gmail doesn’t work great with double quotes when it comes to a newsletter. So when you want to place a specific font type remember this tip and write the old notation like font-family: verdana, arial, sans-serif;
• Forget about the spacer image. If you thought about using that spacer.gif image to space some lines inside your newsletter you should know that spam filter don’t like spacer gifs. So if you don’t want your newsletters to end up in the spam folder of your readers pay attention to this important tip.
• Here are some issues with Outlook 2007

For more tips and tricks about dealing with the HTML of the newsletter you can read more here.

Use a service provider for your newsletter

Using a service provider (like mailchimp and campaign monitor) to send newsletters is very useful because you might not have the technical capabilities to send thousands of emails from a regular server. There are of course some added benefits beside sending volume campaigns:

• They are easy to use and have a lot of additional tools
• Because you have a targeted audience, you should analyze the results of the campaign to learn how to improve the future newsletters; these service providers come with good statistics
• You can test the newsletter on various email clients (see point above)
• Unsubscribers are managed automatically
• They come with subscription forms that can be easily embedded in any site.

You can learn more about a newsletter service provider by watching this video.

Text to image ratio

One of the most common mistakes when designing a newsletter is to try to convince the reader it’s the best product that he must absolutely buy by displaying too much text information. It’s like you don’t want to miss any feature and you just add and add more text until it becomes hard to read. Of course, if you manage to convince the reader to buy the product/service from the newsletter that’s great, but usually is better to make the newsletter so interesting that it makes the reader click and get to the landing page (where you can give him more information, show videos and so on). I’m not going to give you a magical ratio because technical newsletters sent to technical people are better with text than newsletters sent to business professionals, stay at home moms and so on.

The landing page

Making the user read the newsletter might not be so difficult; you can have some great images inside your newsletter and you’ve got his attention and he might click on the action buttons inside that newsletter. If he clicks on the buy button, then it’s easy, the reader gets directly to the purchase process. However, in most cases the readers don’t buy directly, so you might need a landing page. The landing page is a regular HTML page where you can present better the product and heat things up to take action. Action might mean to download a product, to come to the brick and mortar store, anything that the sales team desires. I’m not going into details about landing pages but here are a few guidelines

• Make sure that a landing page exists and it works, unless you want traffic on your 404 page. Send yourself a test email then click on every possible link. Then ask a colleague to do the same in a different email client
• The design of that landing is also important. It could a special page that can only be accessed from that newsletter. Or it could a page for your new products or services. The choice is up to you. But the most important rule is that it should be very easy to read and understand.

Converting the subscribers into buyers

Of course that all the points above have their share of importance into converting readers. But there are a few other bits that might help as well.

When is the perfect time to send a newsletter

Knowing the right time to send a newsletter with your offer is an important factor in the conversion rate. At the largest level, if you’re sending a newsletter with sun glasses in the winter season, you might not attract as much clients as you wished for (except the case they are for winter sports). On the more precise level, depending on what you are offering, the best time sending a newsletter should be on Wednesday; or on Thursday if you’re offering weekend vacations. Monday it’s usually not a good time because people tend to have lots of emails from over the weekend to read. Friday is also not that good because people are thinking about leaving for the weekend.

There are many pro or against when talking about the best time to send a newsletter so the best approach is to pay attention to the site visitors behavior in order to know when is the right time to send them a newsletter. Tracking your visitors and analyzing the traffic of the website has most clues about the perfect time to send a newsletter.

Measure, measure then measure again (the results)

I know that’s a bit tough for a designer, but in the end, it doesn’t matter how nice a newsletter really is. What is important is how well it converts. And the only way to tell how good a newsletter is to measure the results. If you’re using a service provider, then it’s quite easy, the links are traceable via Google Analytics so you could follow the actions of the reader on the site as well. And, as important as having analytics on the campaign is A/B testing. That’s a fancy name for sending various versions of the newsletters to selected subscribers and see which one converts better.

Do not Spam

Beside the legal implication of spamming, spam is surely the fastest way to lose a potential customer. With so much spam around, you could have the perfect product and the perfect price, the reader might be annoyed enough to the point he will never buy from you.

Incentives to keep reading the next newsletter

If you do good at the above points, chances are that the readers will continue to open and act upon receiving one of your newsletters. But what if you have some sort of insurance? In book writing there is a best practice that says the end of the page should be interesting enough to make you turn the page. In newsletter campaigns is about reading the next newsletter. Here are a few tips:

• announcing future discounts/special offers in the next newsletters
• if the value of the newsletter comes from the information inside, previewing the next content
• invite subscribers to feedback on the newsletter and engage them into a conversation

Need more learning resources about newsletters? Marketing Sherpa is an excellent resource.

How to manage your web design business – first part

In the previous posts we have discussed if being a Web Designer is more than just “doing PSD” and I said that nowadays a Web Designer should know a bit of SEO, understand how to influence the conversion rates of a site and have at least a basic idea about what coding a site means. I’m going a bit further today and will be discussing about Web Designers that don’t want to be working for The Man and start their own small business. Having your own “internet” business gives you a large number of opportunities and options, some sort of a “freedom” that you can’t get as a simple employee.

Learning how to manage your online business can be a difficult task, especially if you start like most small creative business out there, without an entrepreneurial background and only based on your “productive” profession. The time, the effort and the way you understand how a business works are very critical for your success because running a business requires a different set of skills; and while you might be very good at what you do as a web designer, the competition, market and customers are the toughest “boss” you will ever have.

Without going into details probably the most challenging things when running a small business are:

• finding customers;
• cash in enough money to pay the bills;
• be efficient enough to make a profit;
• hire staff to grow your business.

For each of the points above you could probably write a book or more without covering the subject entirely. So I’m only going to make a separate post for each of them and only mention what most people fail at.

Finding customers

Finding customers is probably the most obvious thing entrepreneur wanna-be are afraid off and yes, finding them is the most important thing for every business owner. Customers are not something that can find on a local super market, but there are a few keys for success:

• Word of mouth is the most powerful tools a small business could have to get customers.
  Probably you don’t have a lot of money to do advertising, go to trade shows and other “high end” strategies, but word of mouth works all the time and even if you don’t have a site, fancy office and business cards. It’s free as it doesn’t cost you money, but to get it you usually have to overdeliver, which as we will discuss later it costs time (and therefore money).

• Get referrals from other businesses or from your existing customers.
  Finding people that sell different products or services but are still on the same market can be very helpful to your business because their customers might need your services. So placing a banner on their website can attract some new clients for you. But being a “good guy in the industry” might get you friendly help from other small businesses just like yours. And previous customers for which you overdelivered are your best sales force even if you don’t know it yet, because they are genuine in recommending your business.

• Create a strategy and plan. Go niche.
  I’m not sure if you ever watched a sales guy working, but they are quite organized: they think of where the needs of the customer meet with what you deliver then they are trying to identify where these potential customers are. You might hate doing sales, but being an entrepreneur is being the jack of all trades so you need to think what would be your ideal customer, how you might get that customer on your website and convert him into a buyer. Think about the circles they travel in, who are they likely to listen to or where do they look when trying to buy a product or a service like yours. But most importantly, don’t try to target all the potential customers in the World. I know it sounds like a good way to have lots and lots of potential customers but it really doesn’t. You should focus on a niche and become the best on it.

• Keep an eye on (your potential customers) industry events.
  If you focus on a niche is far easier to find customers and target them with specific solutions to their needs. Let’s say you are good at creating web sites for restaurants. Then the food and dining industry is your niche market. Now, where would be a good chance to meet more food and dining potential customers? You guessed it: at a food/catering industry event.

• Study the competition.
  This one is quite obvious but I mention it because I hope you won’t go to that food and catering even without checking on the competition first. You might not run into them there, but chances are the first way of dealing with sales rejection is to know what the other solutions are and where you can come up with a better solution. Checking on the competition is a good way of checking on your business, because knowing their strong and weak points can help improve your business and find unfulfilled needs in the market. Learn from their experience, how they promote their products and services.

• Realize there is no quick way.
  Studies say that most businesses close their doors in the first 5 years. If you are afraid of failing, that’s ok. Most entrepreneurs are afraid of failing and in fact if you don’t, then this is a warning sign you’re being un-realistic for some reason. But you know when most of these businesses fail? Not when they don’t have enough sales. They fail when the entrepreneur stops trying.

Next time we will talk about cashing in enough money to pay the bills.

Should designers learn coding?

Update:

Here is an interesting article from Sandra Niehaus that talks about the same subject.

In the past couple of weeks I’ve been writing why it’s important for a Web Designer to know a bit of SEO , a bit of increasing the conversion rates via usability and if it makes sense to learn CSS if you only do small websites. I’ve got partialy inspired by this article from Web Designer Depot that gives 6 Reasons Why Designers Should Code. So ok, nowadays being a Web Designer it’s more than creating PSD, but should a Web Designer learn coding? But first, let’s recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know:

Increased usability for your visitors

Understanding the expected functionality of the website will improve your perspective on how to design it and create user friendly interfaces. Make things as easy as possible, to the point you’re building the site for “dummy” visitors. If you are into building the “perfect” user interfaces but that’s adding complexity to the site usage, you’ve already created a failure path for the website.

Easier SEO

Everybody now wants “SEO Compliant sites” so what does this actually mean for a Web Designer? Basically, every web designer should create the layouts in a way basic seo is implemented from the beginning. Not only that SEO is very important for a website as it can mean the success or failure of performing the desired function (selling, presenting portfolio, other marketing functions) but it’s an added value to the web design services and you can set a price tag for this and charge more.

So now what, you should also code??

Wouldn’t that be destroying the creative side? Last time I’ve talked with a designer about code, he told me that he uses the right side of the brain for creation and doing anything else will kill the creative flow. Besides, coding is not that easy, there are a lot of technologies to learn and no matter how hard you try, a developer than only codes will always be better at coding than you. However, when you begin to code your designs just a bit, you can create your own style. And the more you practice in writing code, the better you get in delivering a better overall work. If you want to become more than a simple “PSD creator” you have to start from simple things like coding a template in HTML and CSS.

On the other hand, there will always be a little war between coders and designers. Coders seem to ignore any design element that is smaller than 5 pixels, only see about 6 colors, and don’t mind if proportions are not kept, if it works. And I bet you’re tired explaining how this should be placed there and this should be resized and this and that. My experience also tells me that you are getting a lot of “this can’t be done this way” from the coders.

So, you shouldn’t be coding because it kills the creative side, but you should code to implement your design exactly like your creative right side of the brains tells you. That’s a bit of a non-sense, so what would be the workaround? Nobody was born being a great designer or coder, everybody started from scratch and from simple lines of codes, so why shouldn’t you? So what if understanding coding techniques and actually do light coding it’s really beneficial? Sounds strange, but really, there are some principles, techniques and technologies that every web designer should have a clue about:

Knowing the limits and possibilities of JavaScript

Every new great website that you see nowadays is probably using JavaScript or some JavaScript library. And the most popular right now is JQuery. There are a lot of tutorials and examples on how to create navigation and slide down menus or effects with JavaScript based on JQuery. You also get nice design effects, usable forms and cool functionality features. But the most important part you should understand when designing web site is to know how the implementation of these “JavaScript thingies” will affect the coding time and even more importantly the speed and reliability of the website. Because if it doesn’t work, visitors will not get to see how nice it is.

CSS : A killer for some images in your design ?

You’ve probably heard by now about cascading style sheet and how to write CSS. There are a lot of tutorials about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you don’t use any images. The gradients are generated by a few lines of code. And the best part is that you can apply gradients to any elements that you want, even text and still no images are required. There are a lot more ways in which CSS could help the site, and as probably the coders will want to make a CSS site, you should at least know what’s best to do with CSS and create a design suitable for it.

Use styles and fonts that can be applied to any visitor’s settings

Being a designer it’s all about using the right fonts and the right design to create a perfect masterpiece. But by doing so, using specific fonts you’ve created yourself a problem: not every user has your collection of fonts. So this could be a problem if you don’t want to use flash to save your fonts.

Luckily there is another way by using Google Font Directory. This could be a good thing if your fonts are found on the Google fonts collection, but you will have to load that font for your website from the Google servers. This could result in more waiting time for the visitors and you know nobody likes to wait. So why would you spend this amount of time and energy when using a general font could do the same job. You can take a look here for the standard fonts between Windows and Mac.

Frameworks, useful or not?

Should every site be created from scratch or should you use a framework? That’s usually a coder decision but there are a lot of useful frameworks that you should know about, especialy because frameworks should actually involve less coding. I know every design should be unique, but there are some web standards that you have to comply to, like the standard wide for a layout is 960px. Using a framework can help you with placing parts inside the layout, or with keeping the same white space on all elements from the design.

And maybe you shouldn’t code that much to make a site?

You’ve got some clients, you agree on a design and start working with them. The client entrusted you to create the great design so why leaving money on the table? Maybe you don’t know how to code that much, but a little bit. Is there a way to do more than just designing?

Because nobody understands your design better than you, the best idea would be to use a tool that writes the CSS and DIVs for you, without actually requiring any coding. Flexi CSS Layouts is a Dreamweaver extension that helps you create the CSS layout for a site without coding, so you might give it a try and implement the design using DIVs and CSS on your own. You need to slice the design elements then use Flexi CSS Layouts to create the CSS layout. Here are some video tutorials.

The old way to get around this dilemma was and you’ve definitely heard (and the WebDesigner Depot article also talks) about programs that can generate HTML pages directly from their interface from a psd file. One way to generate a HTML page was to use fireworks and slice your design into HTML slices and then generate the HTML page with the images. The downside was that it was limited to table design. You could not generate divs directly from Fireworks using HTML slices and when generating a HTML page using a program this way, is that you don’t have control over your HTML tags and content. You don’t know what class or id goes where. And if you used special fonts and styles, or even better you want to use javascript inside your HTML page than it’s like “finding a needle in a haystack”. You need extra time to understand what the program generated and which part goes where.