Designing Emails: Process and Inspiration

Emails are an important part of business outreach strategy. Monetizing the use of emails by making them part of business marketing strategy is quite common, but what is uncommon is emails delivering the returns you are looking for. There are quite a number of online marketing experts who believe businesses mustn’t chase returns from email marketing because they are elusive at best and the effort doesn’t justify the final outcome. As a designer, I have my own take on why not all email campaigns generate revenue.

I believe the design of emails or the lack of it is the reason behind their failure to make an impression on the recipient. With RWD emerging as the next big thing, and with designers getting caught up in the merits or demerits of minimalist design, flat design, etc., not many designers are willing to give the time and the effort required to create well-designed emails. That’s because even businesses don’t believe in investing time and effort in creating engaging, top-of-the line HTML emails.

This article is for those who still think emails are an important marketing channel and also for the unbelievers. Following a staged designing process for an email, which is actually a set of simple newsletter design tips, you will be able to create an email in no time at all.

newsletter design tips

Image Source: Stock Photo by Shutterstock

Let’s take a look at a few important aspects that are a part of the email designing process:

First Things First, Sort Out Your Thoughts

Begin by figuring out how you want your email ook like. Adopt the same kind of thinking as you would, while designing a web page. There isn’t a lot of difference between the two. Also make sure your design is simple and straightforward; the reason for creating a simple email is that you want it to work with all email clients, even those with poor standard support. While designing your email, make sure every single design element you use renders effectively on all email clients.

Create a Graphical Mockup of the Template

Before you begin the actual process of design, be sure to create a mockup of your email template. The mockup must look exactly like the final template, so that your client gets an idea of what the final design will look like. Most clients, who take an interest in the way their projects are designed, want their project to shape up in perfect conformity with their project brief. If your mockup is good, you will be given the go-ahead for actual design, but if it lacks in certain aspects, the client will provide the necessary feedback. In this case, make the necessary changes in the mockup, and then begin designing the email template.

Ensure You Use Tables for Layout

Given the fact that there are plenty of email clients that don’t support designing techniques like padding, margin, etc., you must play it safe and use tables. But while doing so make sure that you don’t set the width for the table, but for each cell in the table.

newsletter design tips

Now there are some designers who assume that email clients will figure out a width out for themselves if they don’t mention a specific width, but that’s not going to happen. Also, some email clients put in their own values, which can lead to your design breaking up. So, make sure you specify them.

Images, Inline Styles and Shortcodes
Read More

Fresh and Hot: 12 jQuery Image Gallery Tutorials

You can be a great photographer, or you can put some definitely wonderful illustrations on your website, but there is one remark. All this stuff would mean nothing, if it’s not framed suitably. The presentation of the pics is not less important than the content itself, moreover the perception of the illustration strongly depends on the way it’s showed. Maybe, that’s why web design still exists and prospers.

How to make your image gallery look attractive? Well, it’s quite easy to do with the help of modern web technology. I believe the best one is jQuery. So, developing the theme of today post, I have something for you. I searched through the web and found the fresh 12 jQuery image gallery tutorials. All of them are the latest tuts, for you to keep the current trends. Enjoy your learning.

* * *

Horizontal Portfolio Layout with CSS3 Animations & jQuery

The gallery is simply navigated by scrolling. Once you click the element, you’ll see more detailed info about it.

fresh jQuery image gallery tutorials

* * *

Photoset Grid

This tut will teach you to how to create wonderful photos grid.I must mention it’s most probably created to represent hipster photos.

fresh jQuery image gallery tutorials Read More

10 Church Modules to Install on Drupal Site

The times, when the church was associated with something outdated, passed. Now priests use all the benefits of the modern civilization – in the name of Jesus. It also concerns such its considerable part as the internet. It’s quite easy to gather the church community through the web.

Of course, in this case we have a problem of building a good site. The bad one will just compromise the God’s web-reputation: it’s better not to do the website, than to do it carelessly. We don’t need to be a professional programmer to build a website, there a lot of opportunities to use the ready platforms. One of the best is Drupal. I offer you check 10 Drupal Church Modules.

Drupal Church Modules Read More

Something Hot for Web Designers: 30 Free Dribbble PSDs

We live in a wonderful age. Internet gives all opportunities for self-fulfillment. The only thing you need is a strong wish: there are a lot of resources you can show yourself. Talking about web design I must mention a new site Dribble. Founded in 2009, it gained a strong popularity in design circles and even more. Dribbble became a concentration of design expressions: just watch, share, like.

The most interesting thing that Dribble is full of professional works, and I believe this resource is the best one to find the high-quality freebies. Actually, it’s the theme of the current post. 30 free dribble PSDs – all of them are fresh and all of them are for you, the guys who live in design, eats design and breathes design. The digest presents icons, UI elements, calendars, notepads etc., made in minimalism and flat styles. Enjoy.

* * *

Oniam UI Kit

Free Dribbble PSDs

* * *

Calendar Full

Free Dribbble PSDs Read More

Boring ‘About Us’ Page into Excellent ‘Meet Our Team’ Page (+10 Examples)

Representation of the website is very important, and the first impression is actually the fundament of interest to your activity. We talk about web design a lot, but in most cases out discussions concern the main page. We should widen the borders of our attention.

As for me, the first page after the main one I visit is About Us page. After checking the design I want to find out the details about the company. And I should mention that most websites has it poorly thought out. It seems to me that usually About Us page has the same design all over the web: boring text, address.

The first step is to transform the About Us page into Meet Our Team page. A company is not some abstract existentia, but a group of people, who are working for its success. It’s always so: some component makes something valuable. And to understand the whole we should pay attention to the elements it consists of. So, you should represent the members of your team. But do it creatively and sincerely: write the bio, make links to social profiles and their expert projects. Don’t forget the photos, nevertheless the other ways of person visualization is also good. The last important thing – outline the most unique feature of each individuality.

These are not the axioms, be creative and do everything according the interests of your company. However, you need some fundament. So, for you to imagine your perfect Meet Us page better, let me help you with visualization. Check these 10 examples of the best Meet Out Team pages on the web.

* * *

Amazee Labs

All the things I told you are present here. In addition to that the photos are processed with creative effect.

Meet Our Team Page Examples

* * *


This example is unique, because it represents team member by funny cartoon portraits. I think this original feature fully compensate the absence of bios.

Meet Our Team Page Examples Read More

Free Masonry WordPress Themes. Build Your Seamless Wall of Pictures

If we paraphrase a proverb well-known since childhood, it would sound like this: “Every photographer has his day”. Photographers, designers, blog owners, everyone who needs to present visual content online in a catching, clean way that is extremely convenient for viewing, your day has come! Do you like Pinterest’s image arrangement? Of course you do! And you know what? You can get similar website for your portfolio absolutely free. We are not kidding; this is possible due to free Masonry WordPress Themes gathered in the bottom of this text especially for you.

In case you don’t know exactly what Masonry is, let’s specify the concept. Masonry is a dynamic grid layout plug-in for jQuery created by David DeSandro. The developer himself modestly describes his creation as “the flip-side of CSS floats”. In conventional CSS floats, the objects are lined up horizontally, then vertically. Masonry turns this order over and optimizes the available space in a grid placing elements in optimal position based on the available vertical space. You can’t but agree that this solution is simply brilliant for image-based content websites as it builds a beautiful uniform wall of pictures with a few lines of JavaScript.

Layouts in Masonry style don’t lose their appeal even if the posted images vary in their heights. Masonry uses every pixel of web space to provide an immense gallery representation, where the visitor even doesn’t need to go to the next page to view the whole image collection.

If you surf the web on regular bases, you might have noticed that Masonry layouts are rather popular now. So, if you need a stylish, modern portfolio, you are welcome to choose one of the Free Masonry WordPress Themes below and customize it according to your individual requirements. By the way, most of them are responsive!

* * *


Free Masonry WordPress Themes

* * *


Free Masonry WordPress Themes

* * *

Read More

8 Effective Processing.js Tutorials

Processing.js is a sister project for Processing visual language. Everything you expect to do in Processing can be fully done in Processing.js. What it actually does is allow visualizations, interactive animations, graphs, and even video games written in Processing work in web standards without any additional plugins installed. It converts Processing code to JavaScript and runs it on a page.

Check out these Processing.js tutorials and tips that will expand Processing.js possibilities for you.

Creative Coding with Processing.js for Windows 8 JavaScript applications

The series of 11 parts will give you an in-depth instruction to the main principles and experience of creative coding for JavaScript applications running on Windows 8 using Processing.js.

Processing.js tutorials

* * *

Tutorial: Processing, Javascript, and Data Visualization

A tutorial that will lead you through the process of crafting interactive 3D data visualization using Processing.js

Processing.js tutorials

* * *

Read More

Free HTML5 Business Theme. jQuery Photo Slider & Drop Down Menu Inside

Free HTML5 Business Theme is a fresh goodie presented by skillful guys from TemplateMonster. Download is completely free, and you’re welcome to try this design for a variety of business projects. Though, you can easily customize it according to the needs of any other site you need. Both novice and professional designers can easily work with this well-coded theme.

Theme features:

- jQuery Photo Slider with Caption

- Content Slider

- Drop Down Menu

- Back-to-Top Button

- Social Icons with Hover Effect

Content wise design of this theme is good for presenting business ideas in easy-to-perceive manner. Clean corporate style creates serious tone and speaks for the solidity of the company. jQuery slider allows showcase the featured images with captions where you can place slogans or the key points of the company. The visitors will easily surf around the site due to the thought-out navigation facilitated with drop down menu and back-to-top button. With the contact links in the footer you can welcome your clients to visit your social profiles and subscribe to RSS feed. Free template live demo will show your future site in action.

Free HTML5 Business Theme:

Feel free to get this free website template with PSD source files. To download this theme with PSD files, visit the Free HTML5 Business Theme download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Feel free to use this template for your business, but you cannot resell it as a template.

Download Free HTML5 Business Theme with PSD files (48,1MB)

IMPORTANT NOTICE:TemplateMonster does not provide support services on free templates – including this one. We only provide support for the products that are being purchased from TemplateMonster. Our free templates are produced according to the latest web standards and we’ve been trying to make the process of working with them as easy as possible, so for people with minimum web development experience it should be easy to work with them. However, if you don’t have any experience, we recommend you to refer to the tutorials or community forums on how to work with platforms that each respective template is made with, or to hire someone to do the job for you.

From PSD to WordPress… How to Convert? (Essential Up-to-Date Tutorials)

Creation of a website from scratch requires much patience, diligence, skills and practical knowledge from its author. As a rule, websites are being born in PSD format, which is the native type of Adobe Photoshop files. Of course, the newborn is primary, flat and motionless. Here comes the next stage of development, when the designers face the issue of engine choice to power their website and bring it to life. Surely, there is a bunch of various platforms available on the net for different purposes. However, our today’s tutorials are focused on how to convert PSD to WordPress. You may ask what our considerations were when we selected the software.

Actually, there were several main points:

  • 1. First of all it’s free. You don’t need to spend a fortune to get a decent website as WordPress is an open source platform.
  • 2. It’s easy to maintain your website even remotely. Due to software’s flexibility, you can easily change background colors, fonts, upload images, post articles, etc. To insert the amendments you don’t need to be a programmer, an intermediate level of expertise will do.
  • 3. There are plenty of free and paid plug-ins, applications and widgets allowing to stretch the functionality and visual appeal of your website to the desired extend.
  • 4. The CMS is extremely SEO friendly. It’s even needless to say how important this feature is for any website or blog.
  • 5. After the process of conversion, your website will look awesome in all popular browsers, as WP provides cross browser compatibility together with W3C validation that ensures swift, trouble-free loading of your website.

Below you will find some useful, stepwise PSD to WordPress tutorials that will help you convert your cool design into a fail-safe working website.

* * *

PSD to WordPress Conversion

PSD to WordPress Tutorials

* * *

Convert PSD to WordPress in 5 Steps: A Definitive Guide

PSD to WordPress Tutorials

* * *

Read More

Animation jQuery Plugins: Just To Make Your Site Alive

There a lot of ways to make content alive. Some rely on talented copywriters, the other depend on the marketing activity. But there is much easier way, which is quite suitable for independent web designers. I mean animation. It can definitely breathe life in the insentient web pages and make visitors to pay attention and stay on your website. Of course, you always should remember the main rule of every activity – don’t overdo it.

Using jQuery multi-browser would totally simplify your path to animated website. You just need to download the ready plugins. And I’m here to make you animating activity even more effortless, because below I gathered the best animation jQuery plugins.

* * *

Lazy Line Painter

Animation jQuery Plugins

* * *


Animation jQuery Plugins Read More