Cardeo Minimal HTML Email Template

An minimal email template inspired by swiss graphic design. The template comes in 10 different colors, and includes a PSD file for each version. So that’s 10 PSD files, and 10 HTML files, with supporting images. You can preview the template below. Click the add to cart button to purchase it for $2.

Cardeo Minimal HTML Email Template Preview | $2
 

Key Features

• 10 colors
• 10 HTML templates
• 10 layered PSD templates
• All major email clients supported
• Built using the Golden Ratio
• Optimal width for all email clients (600 pixels)
• Easily Customizable
• Users Helvetica System Font, Arial would also work
• Photoshop CS4 minimum required for editing PSD files
• Please leave a comment for questions or support

Colors

Yellow, Red, Blue, Black, Grey, Green, Pink, Purple, Navy, Orange

Compatibilty

Template has been tested in: Gmail, Hotmail, Yahoo Mail, AOL mail, Outlook, Mac Mail, and Sparrow for Mac.

Credits

Facebook, Twitter, and RSS icons by komodomedia.com.

If you’re looking for more minimal files, please check out my portfolio on GraphicRiver.net

This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. To view a copy of this license, visit creativecommons.org or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

What’s Covered

• Different methods for slicing a PSD.
• Create semantic mark-up, and learn how this HTML relates to the original PSD.
• How to utilize techniques, such as background replacement and sprite generation.
• Use custom fonts with Cufon font replacement.
• The differences between absolute and relative positioning.
• How to compensate for the dreaded Internet Explorer 6.
• Take advantage of advanced CSS3 features.
• How to take advantage of a variety of helpful browser extensions to expedite your coding.
• Utilize the jQuery library to add a touch of interactivity.

Source Files Included

The book comes in at $29 and also includes all the source HTML, PSD, and CSS files. As well as, 4 hours of walkthrough videos.

Get A Free Book & Save Some Money

I just noticed that if you sign up for the Rockable Press Mailing List, they’re offering a free download of their Rockstar Personal Branding eBook. Not to mention, signing up will get you access to discount codes for future book releases. I received an email this morning with a discount for this book. That’s what gave me the idea to write this post. Anyhow, this is a great resource, at a great price. Make sure you check it out.

Use a descriptive naming convention

Let’s say your have 10 images you are building into a gallery. I know it’s tempting to just name them 01.jpg – 10.jpg (I’ve been guilty of it). Although this is a good convention to keep yourself organized, it’s terrible for search. Imagine how many images out there are named 01.jpg or 1.jpg. How is a search engine supposed to tell the difference?

Bad naming conventions:

• 01.jpg
• image1.jpg
• IMG0000021.jpg

The good news is the solution is simple, use a descriptive naming convention. Let’s say you are posting an image of a red Electra cruiser bike to your blog. Resist naming it red-bike.jpg (or something similar), and call it red-electra-cruiser-bike.jpg. Awesome! Now your image is optimized and will be easier to find. It’s also a good idea to use the “-” between each word in your file name. People don’t often search for redelectracruiserbike, they would search for red Electra cruiser bike. Splitting up the words allow you to optimize for keywords that the user has searched for.

Good naming conventions:

• red-electra-cruiser-bike.jpg
• electra-cruiser-bike-red.jpg
• electra-cruiser-bike-model.jpg (where “model” is the model name)

Don’t embed text within images

This is an important one, and it also applies to Flash. Any text that is embed in an image, therefore part of the image, isn’t searchable by search engines. Search engines only have the ability to crawl through the actual text on your website, code, and image alt=”" attribute(s). However, if you don’t have a choice here, make sure you paste the copy (that is part of the image) into the alt=”" description for that particular image.

This practice also holds true for Flash. At this point, I’m not going to get into all the problems for search that Flash has. However, I would recommend that you stay away from using Flash image galleries. All of your images are embedded within one file (.swf) and that makes it impossible to optimize them for search. Instead, I’d recommend you use some jquery for your gallery. Coda Slider is an excellent option that is pretty easy to get up and running.

Insert your images in the proper place

One of the most important things you can do, is to insert your image into your layout and surround it with relevant text. For example, when you’re inserting your red Electra cruiser bike image onto your page, make sure there is a title (above or below) for the bike. Also, include a description of the bike near the image. If you were to place an image of a Kona mountain bike on your Electra cruiser page, your going to be sending conflicting signals to the search engine. You need to keep a clear, consistent delivery of your message to optimize properly.

A few closing tips

Here’s a few quick tips you can use to further optimize your images for search:

• Place your images higher up on the page
• Spur on web designers to link into your pages by using great photos
• Consider creating a stand alone landing page for popular images
• Always specify a width and height for your images!
• Don’t stuff your alt=”" attribute with keywords

View Demo

What you’ll need

Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.

Setting up the HTML

Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:

<html>
<head>
 <title>ticker</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.newsticker.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
      $("#news").newsticker();
    });
  </script>
</head>

Now head down to the <body> of your file and insert the following code:

<body>
<div id="ticker">
<ul id="news">
 <li>News item 1</li>
 <li class="loud">News item 2</li>
 <li>News item 3</li>
</ul>
</div>
</body>
</html>

HTML explained

These are the main points to keep in mind with the HTML:

• The wrapping <div id="ticker"> can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this <div>, but you’ll most likely want to leave it in for layout reasons.
• Each <li></li> refers to one news item. Within the <li></li> you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines.
• Once the last item on the list is displayed, it will loop around and start over with the first item.

Adding the CSS

There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links.

<style type="text/css">
#ticker {
 background-color: #ebebeb;
 border: 1px solid #ccc;
 padding: 20px;
}

ul#news {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#news li {
 margin: 0;
}

ul#news li.loud {
 font-weight: bold;
}
</style>

CSS explained

I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:

• #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
• ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
• ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
• ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your <li> will currently make that item bold.

Summary

Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.

Download Source Files

Digital vs. Paper

Now don’t get me wrong, I like a good hardcopy of a book as well as the next guy. However, for the price tag of $5.99, you can’t go wrong with picking up the iPod version! If the book turns out to be excellent, then go pick up the hardcopy. If not, you’ve saved yourself a little bit of cash then can be better spent on something like beer.

What should I read?

For my first O’Reilly App, I decided to go with Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa. I’ve made it through the first few chapters and so far so good. Once I finish it off, I’ll be sure to post a review here on the blog. In the meantime, I’d encourage you to check out O’Reilly’s offerings in the App Store.

Make sure you check out part 1 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Photoshop Comps

Alright, time to dive into Photoshop and polish up your hand-drawn comp. Before we get to far, I would highly recommend using a grid and/or a CSS framework. I currently use the Blueprint CSS framework, which is a free download. I’ve also put together a photoshop grid template that will work with blueprint, which you can download here.

At this point I’m not going to get into tons of design recommendations. This post is about the process not the design. Once you have created your Photoshop comp, it’s time to review the comp before you do any coding.

Review comps to ensure the end goal has been met

Once you have finished your comp, let’s run through a little checklist to make sure you are on the right path:

» Did you achieve all the end goals you set up in part 1?
» Is your navigation clear and easy to locate?
» Is your sitemap and hierarchy in tact?

If your answer to any of these is no, you need to go back to the drawing board and create a new comp. Once again, don’t go with the first comp you come up with. Try a few different ideas until you get to the best concept. If your comps are looking good and meeting all your goals, it’s time to start some coding.

Coded comps (alpha)

For me the coded comps, or alpha, phase includes the cutting up of your photoshop file, and your CSS and HTML coding. Make sure you start with your HTML file, ensuring your hierarchy is setup properly. Next move onto your CSS stylesheet. I don’t add any dynamic content at this point, like javascript. My preference is to get the frame of the pages up and running, test them, then to start adding the stuff like javascript, back-end tie-ins, etc…

If you have any dynamic content to add, I usually just leave an area (perhaps a box) in the coded layout with a reference to what is supposed to go there. Many times you might be working with a developer for the back-end stuff, so leaving notes in your layout and in the code are a good way to keep the process moving smoothly. Once you have finished off doing all your HTML and CSS coding, it’s time to move onto the dynamic content integration.

This is where we stop for today. I hope everyone is finding this series useful so far. Check back tomorrow for part 3 in the web design process.

a:active {
 color: #c09;
 background-color: #ccc;
 padding: 5px;
}

The CSS Explained

Those styles will create a light grey button, with blue text when you mouse-down. The main trick to keep in mind with this technique is to ensure that a:active selector appears after: a, a:link, a:visited, and a:hover. It has to go after those selectors or it will not work. It’s that simple. Check out this technique in use over at yoursole.com. The main navigation uses the a:active technique.

One note on indentation. I used to tab out my code in the past. It’s quick and makes it easier to read. However, if you are a designer that is coding the same website on a MAC and PC (this happens occasionally for me), use spaces to tab out your code, not tabs. Notepad will not recognize the tabs and it will display your code in one big line for the entire page! Talk about annoying. It will recognize the spaces though – so space it out to be safe. It’s a little harder to read but it will save you a headache down the road.