Design

10 Tips to Remember When Designing For Email

When it comes to online marketing one of the most used forms is Email marketing. The purpose behind email marketing is often to get a message across, whether this be to promote an offer, serve targeted advertisements or initiate deals. Email marketing is a great way to improve your brand image as well as knowledge of your services.

Often many designers make simple mistakes when creating an email, provided here are 10 tips to create better email designs.

Plain Text Version

This is without a doubt one of the most important things to remember when designing an email, always create a TEXT version of the email. Not all email clients handle HTML too well, some may not render email messages crafted in HTML. Furthermore including a plain text version makes your email more readable on mobile devices.

email3

Keep everything within 500-700px wide

The width of the email should be 500-700px and centered. This is just as important as the tip above, if not even more important. There is nothing worse than receiving an email where you need to scroll from side to side in order to read the whole message. Why? Simply we are creatures of habit, we don’t take the time to read every word in a text we scan it. Since our eyes tend to focus on whats straight ahead of us, the stuff on the sides will get blacked out and ignored by our brains.

howwide

Allow Easy Unsubscribing

There is no if/but/maybe about this, it is absolutely essential that your readers can unsubscribe from your email, don’t try to be smart about this by hiding the unsubscribe mail in some obscure place within the email. Unsubscribing should be a painless process that virtually anyone viewing the email should be able to figure out. Remember if the recipient doesn’t want your email they are not going to read it anyways. You might be sending 1,000 emails, but if only 50 are being read then your system is not very effective.

unsubscribe-button1

 

Plan for no images

While you might have just downloaded the perfect image from Shutterstock, please remember that many email clients block images in messages unless the user decides to see them, pretty much that means that often your beautiful images will never get seen. Another problem is if your message is embedded in an image, then the same rule applies most readers will never see your message because your images are blocked.

khols_noimages

Test it on-the-go

Just like you would test a website before launching it you should really test an email before sending it out to your final audience, remember that not only should you test these on the most popular clients such as Yahoo, Gmail, Outlook and others but also test to see how it looks on a smartphone or mobile device, If you don’t own a device then grab a friend who has one ask them if you can test your mail on their device!

Email-providers

 

View in Browser

There should be no reason why you would not allow people to view your email as a Web page. Face it, there are just some people who prefer to look at things in a browser, furthermore not all email clients render HTML as you expected and therefore making it possible for your readers to view your mail in a browser makes everyone happy.

View-email-in-a-browser

Relevant Subject line

I cannot even begin to state the importance of this, if your subject line screams “I am spam from spam company don’t bother reading” well then guess what your reader isn’t going to read it, furthermore if your subject line is “READ ME I AM FULL OF BS” all in capital letters then they will also move on, or how about the “Make $1,000 in a jiffy!!!!!!!!!!” if nothing else then all the exclamation marks will deter anyone from reading this email, and besides spam filters will most likely mean your readers will never even see these emails.

email-subject-lines

Call To Action

So you have the best/newest/fastest something and you want to add a CTA, or Call To Action in your email, then make sure it is clear exactly what this action is, if you want your reader to do something then don’t just add a ‘click here’ button instead add something like “click here to…” tell them what will happen when they click here.

31_cta_buttons_psdchest

Don’t use video

Yes over the past few years there seems to be a video for everything, with sites such as YouTube getting more and more popular there should be no reason why you would include an actual video in your email. If your reader is using a slow internet connection then it will take them forever to load your email. Furthermore more and more email clients are filtering out emails with large file sizes, in other words if you add a video you run the risk of ending up in the Spam folder.

Movie Icon: Email

Make it clear who’s sending the message

Lets face it, if you don’t know the sender of an email you are more likely to just hit the delete button. Just like in real life people are suspicious of strangers and the same goes for email. In other words make sure your sender ID states exactly who you are, furthermore make sure your logo is visible at the top of your email.

Email Envelope on White background

The post 10 Tips to Remember When Designing For Email appeared first on Design Reviver.


Weekly News Roundup – 18 January 2013

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at how you can implement Responsive Web Design, four things media companies must do in 2013, different design elements to optimize your blog, as well as how you can make sure your animations are triggering at the right time.

The Next Step in the Evolution of Responsive Web Design: Responsivity Analysis

Beyond any question, responsive web design has become the standard for anybody who wants to make a strong presence on the internet. With the passage of time, rules, best practices, layout standards and guidelines have been commonly created, implemented and accepted by most web designers and developers.

responsivity_01

50 JavaScript Libraries for Charts and Graphs

How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?

I have been a long time fan of jqPlot for its open source approach, simplicity, examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery

4339699941_62011a1f3a

 

4 Things Media Companies Must Do … or Die

Adaptive design. It’s one of the big buzzwords in digital media right now, but what does it mean? Nick Davison, director of web development for ad firm Digitaria, has come up with the quickest explanation we’ve ever seen, not only for adaptive design, but for static, liquid and responsive designs as well. Best of all, it’s almost completely visual.

4ThingsMediaCompanies

Use These 5 Design Elements to Create the Optimum Blog User Experience

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

uprinting

21 Fresh Examples of Websites Using HTML5

After all the buzz involving the HTML5 CSS3 duo, it is nice to check how websites are using all the good practices you can get from HTML5. When the buzz around the subject started, we could see a lot of websites totally animated. Now, after all the benefits of HTML5 settled, we can see websites taking advantage of it to create smooth transitions, nice image sliders and subtle animations. It is interesting to see the evolution of practices in this matter and that is why today we gathered some examples of websites using HTML5. Enjoy!html06

25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity

Using CSS3 and Javascript, you not only are able to do some awesome stuff but also to do it more efficient and faster. If you don’t know how to work with cascading style sheets or with JavaScript, then the best way to learning it is by looking at some examples, tutorials and coding techniques.

1.-css-jquery-technique

12 Extremely Useful And Powerful Free CSS Tools

Don’t Forget to participate in a contest where you can win the world’s biggest UI elements pack “Impressionist User Interface Elements Pack” for 3 winners (1 developer license and 2 personal license) to design your project more creatively.

csstools31

11 Useful CSS Code Snippets for Responsive Web Design

Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more.

responsive-design3

Getting animations to trigger at the right time

When we redeveloped our new website, we decided to use CSS3 animations to provide an impressive and interactive site experience. However, we struggled to time the animations to trigger at the right time.

Image2

50 Useful Tutorials To Learn PSD To HTML Conversion

Once again we have gathered a very useful and helpful collection of detailed tutorial for PSD to HTML conversion. Today, every designers, web developers or blogger should know how to convert PSD files to HTML code. This technique is very important for them because with this technique they can easily convert their designs into active blogs or websites. And also this technique makes their work easy and save their valuable time too.

psd-to-html-conversion-01

The post Weekly News Roundup – 18 January 2013 appeared first on Design Reviver.


Killing Contracts: An Interview With Andy Clarke


  

Editor’s Note: Andy Clarke is known for his design work, books, conference presentations and contributions to the design community. Over the last 14 years, he has designed for amazing clients, written two books, and has given over 50 conference presentations and hosted workshops and training events for Web professionals all over the world.

Andy Clarke
Image by Geri Coady.

Do you remember those “10 Useful Legal Documents for Designers?� Well, it turns out that you, designers who read Smashing Magazine, liked one in particular: a plain-language, straightforward “Contract of Works for Web Design,� which is based heavily on Andy Clarke’s “Contract Killer�. Since Mr. Wong published that template ten months ago, more than 1,600 designers have downloaded it on Docracy alone.

Why is this legal template so popular? Does it really work better than other contracts? Can it help you close that job faster and protect you from getting stiffed? Could it become an industry standard, like grid systems and agile development? Could it help designers save money on legal fees? Who better than Mr. Andy Clarke himself to answer these questions!

Question: Hi, Andy. Your company is called Stuff and Nonsense. That’s how many people would define contracts. Why do you think contracts are often unreadable and puzzling, and what brought you to write your own model from scratch?

Andy: Being at best obscure or at worst intentionally misleading is precisely how many people view contracts. That’s likely because the contracts we are so often asked to sign have been written in language that’s unfamiliar to most of us. You might think that contracts must be written this way, but they don’t. Contracts can be written in any style you like, in language that’s as formal or as informal as you are. Use your contract to set the tone for the relationship with your clients. Of course, you’ll need to cover all the issues, but there’s no reason you can’t do that while still being you.

I appreciate plain speaking, and I try to be as direct as possible in the way that I talk with my clients. Over the years that I’ve run Stuff and Nonsense, I’ve seen a lot of contracts, and none of them either had my “voice� or covered the specific aspects of Web design or development that are important to my work. I was frustrated with what I found, so I sat down one day to write my own contract, the “Contract Killer,� and published it for anyone to use.

That was, amazingly, four years ago, and although some of the details of that original Contract Killer have changed, the fundamental principles have stayed the same. That’s because many of the issues that designers and developers and our clients face have also stayed the same. Still, in the latest version, Contract Killer 3, I’ve made some changes to reflect what many of us are doing now, particularly in relation to responsive and mobile design.

Battle of forms.
Conflicting terms of standard form contracts often result in legal disputes. Image by Steve Snodgrass.

Question: How do clients react when you send them the Contract Killer? Do you ever have to fight the “battle of the forms�?

Andy: The original reaction to Contract Killer was astonishing, and over the last four years the feedback I’ve received from designers and developers has been overwhelmingly positive. I know of some people who say that the contract has helped them get work. Many use Contract Killer out of the box, while others include their own payment terms and copyright assignment. Some have added whole new clauses — for example, about termination. I feel very, very happy that so many people have found Contract Killer useful.

Reaction from my own clients has been overwhelmingly positive, too. No one has ever refused to sign it, and no one has asked for it to be replaced with another contract. In fact, the simple straightforward language has encouraged my clients to sign and return it faster than any other contract I’ve ever used. I guess that’s because being clear means there’s less need to check with a lawyer.

Question: You’ve been using this contracts for years now. Has it held up? Did you find some edge cases that exposed certain weaknesses? And, if so, how did you fix the problem?

Andy: I’ve used Contract Killer with every client for the last five years. Occasionally I’ve made changes to specific clauses — often around copyright assignment — when clients have requested that. But you know what? That’s OK. A contract is just another point for us to communicate — in this case, negotiate — with our clients. Changing a few words doesn’t matter much. How we handle changing those words matters a lot.

I’m now much more explicit about the fact that browser testing is about ensuring that a person’s experience of a design should be appropriate to the capabilities of the browser or device they’re using and that websites will not look the same in browsers of different capabilities or on devices with different-sized screens. I’m also particular about the desktop and mobile browsers I test on, although I know this will vary between designers and developers.

Question: Do you have any tips on how to use a contract as a communication tool? For example, how do you handle a client who requests an overly broad license?

Andy: Many clients, too many in fact, know little about what’s expected or involved in a successful Web project. They may have had a poor prior experience, so even if they don’t come right out and say it, they’re looking to you to show them how it’s done. Your contract is a great place to start showing them how you do business. Handle this stage well, and your project will run much more smoothly. Let’s look at an example from Contract Killer 3, the copyright ownership clause:

We’ll own the unique combination of these elements that constitutes a complete design and we’ll license that you, exclusively and in perpetuity for this project only, unless we agree otherwise. We can provide a separate estimate for that.

It’s a fair clause that’s designed to prevent a client from using and reusing the work for other projects without agreement. This means that if you design an e-commerce store for them, they can’t launch a second site using the same design. This is a sticking point for many people, who wrongly expect that they will own the rights to everything they pay you to produce for them for any purpose.

When this happens, explain the good reasons why the clause exists and, if it’s appropriate, offer them a new price that includes complete ownership and that reflects its potential value to them in the future. Don’t be afraid to stick up for what you’re asking, and always, always remember, this is your contract that you’re asking them them to sign. Make it work for you.

Contract
Make your contract work for you. Image by Steve Snodgrass.

Question: In Contract Killer 3, you argue against fixed pricing, but you also promise flexibility. Can you explain how to negotiate a pricing scheme with a client who prefers fixed pricing or insists on a cap?

Andy: Fixed or project-based pricing has its roots firmly planted in the old-fashioned waterfall development process. But many people, including me, have moved to a more agile-based way of working. In an agile workflow, change is embraced, even encouraged. This means that fixed-price contracts quickly become irrelevant because if the requirements change, the price might change, too.

I organize my projects into week or two-week long sprints. Each sprint has a theme, a set of requirements that I’m going to finish during the period. It might be a sign-up process one week and a shopping cart the next. We’ll cover all the areas of a project across these sprints; and because the client knows the price in advance, he or she can budget. If a client has a great idea for something new or wants to change their mind, no problem. I roll up those requests into another sprint week, and the client can then make a business decision about spending money on those items.

Question: Have you ever faced a situation in which a client was asking for too many changes, one after another? How did you deal with that?

Andy: Several years ago I worked with an agency on a new site for a travel company. The agency had negotiated the price with its client, and I worked on a fixed price. Although the agency had drawn up the original brief and I followed that up with my own scoping meetings, things quickly went downhill as the client flip-flopped through ideas and change requests that were costly and complicated. I tolerated the situation as long as I could, but it became apparent I was making a loss on the project, and I withdrew.

This problem arose not because the client changed their minds — no, that shouldn’t ever be considered an issue; in fact, it should be encouraged — but because the agency and I were working to a fixed price. This left everybody with a bad taste in their mouth. Had we all worked in the agile way I just described, changes would never have been an issue, and it’s likely the project would have been a success, rather than a failure.

Question: What are the top three things a designer should keep in mind when preparing or reviewing a contract?

Andy: First, and possibly most importantly, you should ask your clients to sign a contract every time you work with them. It doesn’t matter whether they’re a first-timer or you’ve worked with them a dozen times: it’s vital that you agree on the scope and terms of the work. It took a while, and one or two unfortunate experiences, for me to learn that contracts are intended to set out what both parties should do.

Make the contract your own. It’s great that people like Contract Killer so much that they’ll use it out of the box, but your contract should be in your voice, not mine. Use the writing of a contract as an opportunity to put your personality into your paperwork. There’s no reason why a contract shouldn’t be funny and a joy to read. After all, you want someone to sign it.

Lastly, take the time to tailor a contract to a particular client and project, and make sure you’ve addressed everything you’re going to do for them. If you get a hint of any potential issue — for example, that they personally use an old browser or device — write about how you’ll handle that in your contract.

Stuff & Nonsense
Stuff & Nonsense – amazing design work for amazing people.

Question: Despite the saying, the client is not always right. How can you say that to them without being the a*shole?

Andy: No one, no matter who they are or what they think, is always right. (Well, except my wife. She’s always right about everything. Obviously.) One thing I’ve learned over the years is that clients love to feel involved in the design process. Sometimes, though, they make suggestions only so that they feel they have put their stamp on the project. There are simple ways that designers and developer can prevent this from happening. This is something I wrote about recently for Smashing Magazine:

  • Don’t email pictures of websites to your clients and then ask for their “thoughts.â€�
  • Don’t wait until after weeks of work to have a “big reveal.â€�
  • Set up the proper environment to receive structured feedback, and then ban all unstructured feedback you might receive by telephone or email.

Please remember: you are the designer. You are the person who has been hired to solve a problem that the client either can’t or doesn’t have the time to solve themselves. Your solution to that problem is worth a lot to their business, so never underestimate your role, skills and influence in the design process.

Question: I hear you are working on a “Killer NDA� (non-disclosure agreement). Sounds great.

Andy: Writing a Killer NDA has been on my mind for a while, as I’ve been asked to sign some horribly confusing examples over the years. I have no idea why NDAs have to be so complicated; after all, their intent is to make sure that everything that’s shared stays secret.

I’ve called this contract “Three Wise Monkeys� — see no evil, hear no evil, speak no evil. Three Wise Monkeys deals with just three things:

  • What’s confidential?
  • What can we say?
  • How long does the agreement last?

You can read it here. It’s licensed under Creative Commons 3.0, so if you want to personalize it, you can do so. It’s also on GitHub and Docracy.

Andy's Three Wise Monkeys contract.
Simple is good. Andy’s “Three Wise Monkeysâ€� contract deals with just three things. Image by Anderson Mancini.

Question: Last question: who are the “men with big dogs� referenced at the very end of your contracts?

Andy: I’m not afraid to say that on several occasions we’ve been forced to hire a debt collection agency to recover our money. On one occasion, we hired a debt collector from the client’s town, because we knew he would be ashamed if it became known locally that he was a bad payer. There’s no excuse for late or non-payment, and you should never be apologetic about wanting your money. Always remember, if you’ve done the work, you deserve to be paid. So, when all else fails, hire a professional. Preferably one with a big dog.

Have you used Contract Killer or a version of it? Share your experience in the comments!


© Veronica Picciafuoco for Smashing Magazine, 2013.


The mysterious WebKit placeholder overflow bug

A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason.

I first noticed it in narrow mobile viewports when testing changing the orientation from landscape to portrait in the iOS Simulator, which made me think that it happened only in iOS WebKit. However when I made a minimal test case to try to isolate the problem it turned out that it happens in WebKit-based desktop browsers like Safari, Chrome, and iCab as well. I haven’t been able to reproduce it in any other browsers though.

After a lot of testing I found the culprit, and it was a quite unexpected one to me.

Read full post

Posted in , .

Copyright © Roger Johansson


iOS WebKit browsers and auto-zooming form controls

One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the browser will automatically zoom in on the entire page a little when you tap the form control.

The intention is likely to be helpful and ensure that you can see the text you’re typing or the options in the select element. This is fine, of course. What’s annoying is that the browser doesn’t zoom back out once you’re done with the control, so you have to pinch the screen and manually zoom out. Not showstopping, but rather annoying. This behaviour seems to be the same for all browsers that use WebKit, which as far as I know means all iOS browsers except Opera Mini (which does not auto-zoom form controls).

For end users I don’t know if it is possible to avoid this, but for web developers there are a couple of ways.

Read full post

Posted in , .

Copyright © Roger Johansson


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress