Email newsletter is really underestimated and I rarely see websites, blogs using it as marketing and communication tool. Everyone knows he should offer option to subscribe by e-mail, but how to use those e-mails powerfuly to strenghten your relationships and maybe even promote your own products? For that topic we should even create dedicated article, but I will start with just showcasing really well designed premium e-mail newsletter templates this time.

Sometimes it is worth spending little cash to get advanced and tested features without any efforts so you could focus on more important topics.

Too many people don't evaluate highly good design and typography, but no matter how good your product,site is – if design will be terrible, it will turn people away!

And yes, by the way soon you will see e-mail newsletter from 1stwebdesigner as well, I have reason myself to investigate those topics, so I invite you to join me in this process!

1. Airmail! – Customizable Email Template

Airmail is a professionally built and designed custom HTML email template! Perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.

Airmail comes with 5 pre-built color options (white, green, blue, black, light blue) as well as 4 different layouts.

View Live Demo

2. Versatile Email Template – 7 layouts + 5 colors

Versatile is a professional HTML email template!

It's versatility is due to the:

• wide usage thanks to the 7 pre-built layouts
• 5 color schemes
• fast and intuitive system of creating new layouts.
• layered png source files for each separate item included for easy editing
• extensive documentation
• consistent look in major email clients.

Works in:

• Yahoo Mail, Gmail, Hotmail
• Thunderbird, Outlook 2003 & 2007
• MailCHimp, CampaignMonitor
• Apple Mail

View Live Demo

3. Modern Business 4 HTML Email Template

Modern Business 4 is a professional HTML email newsletter template. If you need a vibrant, strong and clean looking solution for your email campaigns to promote your latest product or service, this is the solution for you. With 3 different colors and both single and double column designs, you have many options.

With attention to detail, fantastic use of color, table based design and fully tested using a 3rd party service for email client compatibility this template is ready for your information to be inserted and sent.

View Live Demo

4. Cielo Newsletter

Cielo is a stylish custom created HTML email newsletter. It can be used for a wide range of purposes and will help both the freelancer and the businessman in their communication with clients, partners or friends.

This newsletter was tested in many online mail clients like Gmail, Yahoo, etc. Also offline clients like Outlook 2007, Outlook Express and Thunderbird. It is possible however to have some layout issues on some mail clients – it is impossible to test all of them.

View Live Demo

5. iNewsletter

iNewsletter email template for web development / software companies that want to give their clients an update on their new products and latest news.

There are 2 designs samples, with 2 different content arrangements, each having 2 different backgrounds, so you'll get 6 different layouts.

The HTML Templates have been tested on GMail, Yahoo Mail and Thunderbird. Update: Works on Apple Mail, Hotmail and Microsoft Outlook as well.

View Live Demo

6. BoldMail – Email Template Pack – 9 Colors!

BoldMail is a simple and sexy email template pack featuring 9 different color schemes!

• You get 9 different color schemes: Red, Blue, Green, Orange, Purple, Cyan, Maroon, Black and White.
• PSDs included for every color scheme.
• Email-ready templates, fully tested!
• Email templates are something that's always overlooked, so make a BOLD impact with the BoldMail email template pack!

View Live Demo

7. Elegance – HTML Email Template

Send beautifully simple and elegant emails with Elegance, a template focusing on clean typography, grid layout and balanced negative space. This template is available in three colors and two different layout options.

Tested in all major email browsers for form and functionality. Customization is very easy and instructions are well documented!

View Live Demo

8. TechOffers – Multipurpose Minimalist Newsletter

TechOffers email template has been specially crafted with a clean and neat newsletter template in mind.

Although its presented as a tech / electronics email template, it can be used as a e-commerce, shopping, corporate newsletter or for any offers or products that your company may promote.

In the included documentation you will find graphical representation of the structure. Based on this you will be able to easily modify the email template.

View Live Demo

9. CleanMail – Email Template Package – 5 Colors!

CleanMail is a simple yet sexy email template package with 5 different color schemes!

Email templates are something that's always overlooked, so make an impact with the CleanMail email template package!

View Live Demo

10. Atlantica Mail Template

Atlantica Mail is a professionally built and designed custom HTML email template; perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.

Atlantica comes with several pre-built color options (including both Dark and Light versions!!) as well as 4 different layouts (click below for samples);

View Live Demo

11. Corporate Communication

Corporate Communication 1 is a premiere designed and built html email template for corporations and business. The design allows for a large product image, 3 smaller products, lots of text, links to your website, social media and so much more.

Customization could not be simpler with the added benefit of quick edit photoshop files for all the major elements used in the design – simply open, edit and save.

12. Innovative – Product Tour HTML Email Template

Innovative – Product Tour is the perfect email template if you're looking to announce a new product to your audience or if you simply want to introduce new features.

While this template was specifically designed for new product announcements, it can easily be updated with a few copy changes to fit any type of email blasts.

View Live Demo

13. Rich Typography Email Template

RichType is a bold, clean, and ultra customizable email template. It's perfect for a wide variety of uses, from corporate newsletters to product advertisers. Best of all, the colors and layout are completely customizable using pre-built layout elements – simply copy and paste!

View Live Demo

14. Corporate Newsletter Template V1

Elegant and ultra-clean email template in 6 different colors and 4 layouts for your newsletter. This is an ideal solution for your email marketing campaigns, event invitation or periodical news.

View Live Demo

15. PhotoMail – 2 Styles, Endless Color Possibilities

PhotoMail is a simple and sexy email template for photographers and designers featuring 2 styles and endless color possibilities.

A great email template is something that's always overlooked, so make an impact with the PhotoMail email template!

View Live Demo

16. Communiqué – Premium Email Template

Communiqué is a premium email template suited for just about anything from new product announcements to weekly newsletters. It's been thoroughly tested and is compatible with all major email clients.

View Live Demo

17. Postman

Postman is the stylish solution for your email marketing, newsletters and advertising. It comes with multiple layout options.

It is also cross browser compatible, so you dont have to worry about different rendering engines of mail clients.

View Live Demo

18. Blog Mail

This advanced email template cames with a lot of great features:

• 14 customizable skins
• Tested In mayor e-mail apps
• Very easy to modify and add videos

View Live Demo

19. Structured Mail

If you are looking for a neat and structured way to send information to your clients and subscribers then Structured mail may work for you.

View Live Demo

20. Modern Business 3 DARK Email

This premium HTML email template is a perfect solution for photographers anywhere. Designed to compliment the ultra successful Modern Business 3 template available here – it echos the styling, buttons and even all 8 colors in 3 different layout styles, and includes Campaign Monitor ready versions of all the templates.

View Live Demo

21. Our Community Mail + Customizable Email Template

Our Community Mail comes with 4 pre-built color options (default, green, blue, black) as well as 3 different layouts (check screenshot) and 3 different styles (default, general and galaxy black). There is also an extra general template for general use. It is extremely easy to customize and use.

View Live Demo

22. Platnum Email Template

Platnum is a modern and stylish newsletter template, suited for any business that wants a solid newsletter.

View Live Demo

23. BizLetter – E-mail Template

BizLetter is easy to customize and easy to edit e-mail newsletter, comes with 2 layouts:

• Full-width one-column;
• Right-sidebar two columns layout.

View Live Demo

24. i-Elegant Newsletter Template

i-Elegant is clean, multi usage, and elegant newsletter solution. It comes in 10 themes : gray, black, brown, green, orange, light blue, light and dark blue, blue and green, orange and gray, light and dark gray.

View Live Demo

25. MyMemo – Clean 1 Column Email Template

• Works In All Major Clients
• Logo PSD included
• Single Column Layout
• Original and Inline CSS
• Easy to Customize

With this template, you get the original CSS as well as the ready-to-mail inline CSS.

View Live Demo

Which one is your favorite? You need to pick just one out, I know each one is amazing design and code work.

CSS3, along with HTML5, is quickly shaping up to be one of the most exciting and useful Web technologies in years. In this article, I will be explaining some of the new graphics-rich techniques and properties available with CSS3. You will learn what is likely to be approved as part of the final spec, what is still a work-in-progress, and how to deal with cross-browser incompatibilities and lack of support in older browsers. Ready? Here we go.

Introduction to CSS3

CSS3 is a collection of modules that extend the previous CSS2 specification that we all know and love. Most of the graphics effects discussed in this article come from the Backgrounds & Borders module. There are a number of other additions in CSS3, some of which are more layout-focused, others enable ways of dealing with content styling that previously required server-side HTML generation or JavaScript.

The important thing to remember is that CSS3 is still a work-in-progress, so just because some of the latest browsers support these features doesn’t mean that (a) you should expect all browsers to support these features soon, and that (b) you won’t have to change how you do things later on once CSS3 becomes a full fledged standard.

What Used to Require Images No Longer Does

The annoying problem of having to save out dozens of special image slices just to create a nice button or box style is solved with CSS3. Using several new properties, many of the common graphical effects we designers like to employ on a regular basis are easy to create right in the code. These include (click each image for demo & source code):

Shadows

Recently, designers were just starting to get used to the fact that you can easily add shadows behind text. Internet Explorer doesn’t yet support the text-shadow property, but Safari and Firefox have for some time. But what’s really exciting is now you can add drop-shadows to boxes and controls using the box-shadow property. The syntax for box-shadow is much the same as text-shadow, which we describe below.

Gradients

Wow! That is all done with CSS, no images required. Just so you realize how fast things are developing, CSS3 doesn’t actually specify a standard syntax for gradients yet, so currently there is one syntax used by WebKit (Safari, Chrome, etc.) and another used by Gecko (Firefox). We will explore both approaches in this article.

Borders with Rounded Corners

CSS has allowed several different border styles (double, inset, dotted, etc.) for some time, but now with CSS3 we have the ability to add a border radius to some or all corners. Yes, rounded corners are now possible without resorting to crazy JavaScript hacks or images! Another part of the CSS3 specification is border images, which is also interesting. It’s a rather complicated technique all by itself, so I will save that discussion for another time. You can read more about the spec at the W3C.

How to Style Boxes

A good mindset to employ when using the latest CSS3 techniques is first to find an acceptable baseline style that is supported by incompatible browsers. We’ll cover some thoughts about older browsers or IE support later in this article, but the idea here is to style a box or page element without using shadows, rounded corners, gradients, etc. and see if you are reasonably happy with the result. If it looks decent, then you can go ahead and add all the nice eye candy with the knowledge that if someone is using a browser without the necessary CSS3 support, they’ll still have a reasonable experience.

For today’s example, we’re going to through three stages to add in our special styles.

Start with the Baseline

.styledbox { background-color: #fed; border-top: solid 1px white; border-bottom: solid 1px #669; padding: 10px 18px 10px 18px; color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; margin-bottom: 10px; }

This CSS code will get us started. Create a div and enter in some text, and you’ll see a basic box look.

Add Rounded Corners

As with most of these properties, we have to maintain more than one syntax to support multiple browsers (a real drawback currently). Since I develop first in Safari on the Mac, I’ll start with the WebKit version.

-webkit-border-radius: 8px

Aha! The corners are now rounded. Next, I’ll add the Gecko version:

-moz-border-radius: 8px border-radius: 8px

When at all possible, always add the version without any prefix. That way you’re future proofing your style sheet in anticipation of the CSS3 final standard.

If you want to have additional control over the radius of each corner, use the border-[top-left|bottom-right|etc.]-radius syntax. Note that currently, the Gecko version is slightly different: -moz-border-radius-topleft, etc..

Add a Drop Shadow

Now, we’re going to add the drop shadow. If you’ve ever used the text-shadow property before, this syntax will look familiar.

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Now here you’ll notice I’m not using typical hex codes for the colors but am using the new rgba syntax. The first three integers are the expected 0-255 range of colors values, but the last one is a decimal number from 0.0 to 1.0 that represents the alpha value (literally the opacity of the color). The ability to specify semi-transparent colors is truly welcome and allows us to create shadows that work well on different backgrounds.

Again, don’t forget the alternative versions:

-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

Adding a Gradient Fill

OK, this is where things are going to get tricky. The CSS3 spec for gradients is so new and undefined that there’s a completely different syntax whether you’re talking about WebKit or Gecko. I had to spend some time going back and forth between BBEdit and Safari to get it just right, and then when I switched over to Firefox, it took another while before I could figure out how to duplicate my results.

Gradients can be applied to a few common properties. Usually you’ll want to use background. Here’s the WebKit syntax:

background: -webkit-gradient(             linear,             center top, center bottom,             color-stop(0%, #fffffa),             color-stop(30%, #fed),             color-stop(80%, #fed),             color-stop(100%, #fffffa)             );

For each color-stop, you can use a percentage or a position value (px, etc.). I think percentage is nice because it will scale with the box.

The Gecko syntax is different in rather confusing ways, but requires less typing:

background: -moz-linear-gradient(             top, #eef, #cce 30%, #cce 80%, #eef 100%             );

I recommend starting with the background selector for the solid color, then do the WebKit version, then do the Gecko version, for a total of three background selectors. Browsers will go down the list and use the one that they understand.

Final Result: (demo & source code here)

Bonus Feature: gradients on top of images!

As you can see, the final product looks really nice. You can even stack multiple boxes on each other and see how the shadow effects and corners are drawn. But then I had an idea. I’d heard that CSS3 supports multiple backgrounds, so could I actually create a gradient with alpha transparency on top of a background image? The answer is: yes.

background: -webkit-gradient(             linear,             center top, center bottom,             color-stop(0%, rgba(255,255,255,0.8)),             color-stop(30%, rgba(255,255,255,0))             ), url(http://www.siteshine.com/images/tan_background.jpg); background: -moz-linear-gradient(             top, rgba(255,255,255,0.8), rgba(255,255,255,0) 30%             ), url(http://www.siteshine.com/images/tan_background.jpg);

The key is to specify the WebKit version with the gradient, followed by a comma, followed by the url to the image. And then do that all over again with the Gecko version. That provides us with a beautiful “shine” effect at the top of the box rendered directly on the image. With CSS3, you won’t have to worry about height-related image tiling issues for glows or shadows again!

Styling Forms

Form styles can be tricky as browsers sometimes won’t render controls styled by CSS (they continue using the native OS’s UI elements). Or they use some of the selectors and ignore others. Generally, your best bet is to stick with text fields and buttons, and use Javascript-based custom controls for drop-downs, radio buttons, check boxes, etc.

Here’s an example of a couple of form elements styled using CSS3:

One cool thing I did was add extra styling for a “glow” ring when the form element has the focus using the :focus pseudo-class.

You can also create an awesome button using a single span tag. Check this out:

<p>Here is some text. <span class="roundbutton1">Click Me</span> And more text.</p>

What About Older Browsers?

The key with supporting older browsers or particularly Internet Explorer is to choose your battles carefully. Some designers will decide they need every user’s experience to be top-notch and so will eschew virtually all CSS3 effects in lieu of using images as before. Other designers may be so gung-ho about CSS3 that they forget that many users will not experience that great of a visual design.

What I recommend is to try as hard as you can to create elements using standard CSS2 syntax first. If you get to an acceptable place, then add the CSS3 effects you want. If you don’t find the baseline acceptable, then you’ll need to go the old-school way. If you go through this thought process with every element individually, then you’ll probably end up with a site design that has some elements done old-school for maximum compatibility, and other elements (perhaps less critical ones) spiffied up for the latest CSS3 browsers.

What doesn’t make sense is to spend time creating image-based versions, then creating alternative CSS3 versions. Yes, serving two different versions depending on the user’s browser could save a small amount of bandwidth, but I don’t see it as being worth the effort. Go with one version or the other and stick to that.

Conclusion

CSS3 promises to end many a headache for graphics designers and give the Web site development community a great, open-standards tool with which to create fantastic effects and visual styles — all without the need for any special backend software or browser plugin. While there are some hoops to jump through and some compatibility issues at this point, the ease of implementing CSS3 styles simply can’t be matched. If you’ve been wrestling with Photoshop and obscure HTML/CSS markup and hacks to create common graphic effects, those days will soon be over! And that’s a good thing.