« Older Entries
Newer Entries »

Email Client Compatibility – HTML Friendly Emails

Posted May 21st, 2011 under Browser Compatibility, Email Campaigns, HTML Tutorials, Web and Graphic Design.

As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.

The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.

The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.

So here are the secrets to making your emails look good across all of your major email clients:

1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.

2. Use Inline CSS Only unless you don’t want your emails to all look the same. Some email clients will strip out the head tag or any external style sheet references, and others anything within a style tag. Keep in mind, many of these email clients are browser based, meaning they have their own custom CSS. To protect that CSS, they’ll strip anything out that could interfere with it before displaying it. And don’t even think about javascript…

3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.

4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.

Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:

<html><body>
<table style="width: 98%;"><tr><td valign="top" align="center">
<table style="width: YYpx;"><tr><td valign="top">
<table width="YY" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 600px;" valign="top">
      Header Content Goes In Here
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" align="left" valign="top">
      <h1 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1>
      <h2 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2>
      <p style="font-size: XXpx; color: #XXXXXX; font-family: XX;
        margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p>
      <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a>
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" valign="top">
      Footer Content Goes In Here
    </td>
  </tr>
</table>
</td></tr></table>
</td></tr></table>
</body></html>

In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.

Tagged under , , . 1 Comment ».

Vector And Rastor: What’s The Difference?

Posted March 21st, 2011 under Adobe Software, Web and Graphic Design.

When working as a web or graphic designer, it is very important to understand the difference between "vector" and "rastor". These are two words used to describe the basic structure of a file or program. Take the Adobe Creative Suite for example, some of the programs included within the Suite are vector based, while others are rastor based. In particular, you should note that Photoshop is a rastor based program, while Illustrator and InDesign are both vector based programs.

Now I still haven’t answered the question of what the difference between the two is though. Well here is your explanation. The word raster refers to pixels (or points if you will), while vector refers to lines. When making an image, you can base it off of two things; individual points in the image that are colored in whatever way you want that come together to make an image, or a bunch of lines that define spaces and colors, thus creating an image. Still not getting it? That’s okay… Let me try by talking about what you’d want to use for different types of projects.

Photo Editing: Photos are loaded with tons of information all the way down to the pixel level, thus making them rastor based. If you were to take a photo and try to expand it ten times larger than it already is, it is going to get blurry. That’s because for every individual pixel of information, you are trying to turn that into 100 pixels, giving it seemingly less detail. But without simplifying that image, there is no way to really replicate it using just lines is there? That’s why photos are rastor based, but are also limited in how big you can make them.

Logo Design: Now say you are working on a logo, and you need it to work in a lot of different places (on a website, on letterhead, on a business card, or on a giant billboard). That means you need an image that can shift in size but not lose it’s definition. To do this, you want to use a vector based software. So if your logo has a "+" in it, you can make that as big as you need without distorting it, because it is defined using lines, and no matter how you alter it, it will always be two lines. Now don’t limit yourself to thinking of lines as having to be straight. Vector based software thrives off using curves. This is why vector based software is so much more ideal for making things with writing in them. Letters just don’t do well under rastor based software because you lose the specific curve of a font to aliased pixels.

And really, that’s the difference between "vector" and "rastor". You want to use rastor software when working with photos. But for pretty much anything else you are going to want to stick to vector software so that your copywriting doesn’t lose quality, and so that you can change the image size without losing quality.

Any questions? Ask away!

Tagged under , , , . No comments ».

WordPress: The Best Blogging Software

Posted March 1st, 2011 under Wordpress.

WordPress is hands down, the best blogging software out there. After using it for my own personal website, as well as several freelance clients, I’m completely convinced there is nothing better out there. Now, it is important to note that there are two different WordPress versions that you can use; the .com and the .org versions. The .com version is not customizable anymore than your average blog software like Blogger. The .org version is the one I’m about to rave about, and is the much more involved and capable option. So, there are a few particular reasons that I believe it to be so wonderful which are outlined below:

It’s Open Source
So in case you don’t know, the phrase "open source" means that the code that runs certain software is made publicly available. With publicly available code, it makes it possible for individual developers to write additional code that can get tacked on to the initial software release in the form of apps, plugins, et cetera. Without open source software, the world would be limited to only what companies manage to come up with and release. But because of the wisdom of the WordPress team, they’ve released their potentially proprietary code to the masses to promote the growth of the software via public participation, and documented all the details in the WordPress codex.

It’s User Friendly
With my background in user research, I like to think that I have a good grasp on user friendly interfaces. I have to say outside of a handful of small issues that I’ve encountered with WordPress, it is really amazingly intuitive. They’ve managed to create an interface that promotes easy usage by developers, designers, and content publishers. Normally this is a very difficult task given that all three of those groups work on such different levels and on different content. From my experience of working on back-end code for WordPress, front-end code for my design theme, and content as a blog author, it is just so easy to use.

It’s Constantly Improving
The team at WordPress manage to release updates on a very regular basis. In addition to that, because of its open source nature, there are new plugins and themes being released for WordPress at an incredibly fast pace. The best part is, if some new technology comes out, you can bet your bottom dollar that within a few weeks at the most there will be a WordPress plugin that incorporates it into the blogging software for public usage!

It’s Incredibly Functional
Going off of my last point, the plugins available for WordPress make it incredibly functional. You can obviously use the software for simple blogging. However, you can also adapt it to maintain your entire website complete with a static homepage that isn’t your blog homepage. Once that’s complete, you can introduce youtube videos, flickr photos, facebook and twitter feeds, contact forms, and pretty much anything else your heart desires. With all of this functionality, there is hardly a reason to ever go build a smaller sized website (<100 pages) without WordPress!

Tagged under , . No comments ».

SEO Friendly Two Column Layout

Posted February 15th, 2011 under CSS Tutorials and Tricks, Search Engine Optimization.

SEO Friendly Two Column LayoutMost website owners, for obvious reasons, want their websites to be highly trafficked. When I build a site for a client, I always make an effort to keep search engine optimization (SEO) in mind so I can help them grow their traffic/clientele/customer base. There are thousands of companies out there claiming they know the secret to landing you at the top of Google search results, but when it comes down to it, there is no one answer… there are a lot. One such item to try for your site is keeping the relevant content of your pages at the top of your HTML code. Sometimes this can be difficult for people working on websites that have a multiple column layout with something like navigation or ads on the left and the main relevant content on the right. Now some might say there are simple solutions to this problem involving using float left and right CSS properties for your respective divs that contain each column, but there are some layouts that require a more sophisticated solution, that is much less prone to break regardless of the actual content.

When implementing this for my fulltime employer, College Prowler, I stumbled upon a genius post by Matthew James Taylor who has a series on multi-column liquid layouts that are all cross-browser compatible and SEO friendly in the sense that I speak of above. I adapted it a little bit to account for some specific 10px margins and a specific navigation width of 300px, which you can also adjust. The requirements are quite simple to implement, and here’s how to do it:

The HTML:

<div class="mainWrap">
  <div class="mainSubWrap">
    <div class="mainContentWrap">
      <div class="mainContentSubWrap"><!--All your main content goes in here--></div>
    </div>
    <div class="navContentWrap"><!--Nav content goes in here--></div>
  </div>
</div>

The CSS:

.mainWrap {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
  margin: 10px 0px;
}
div.mainSubWrap {
  float: left;
  width: 200%;
  position: relative;
  left: 290px;
}
div.mainContentWrap {
  float: right;
  width: 50%;
  position: relative;
  right: 290px;
}
div.mainContentSubWrap {
  margin: 0px 10px 0px 310px;
  position: relative;
  right: 100%;
}
div.navContentWrap {
  float: left;
  width: 290px;
  position: relative;
  right: 290px;
}

Basically you end up using relative positioning to move the navigation box over to the left of the main content box, and visa versa, yielding the main content appearing on the right side of your screen, but appearing first in your code. The benefit to this over a simple float is the ability to assign background colors that you want to fill to the bottom of the screen regardless of whether or not the background colored div is the largest in height. It is also pretty much a sure bet that it won’t break across browsers.

Definitely give it a shot, and if you have any questions, don’t hesitate to ask!

Tagged under , , , . No comments ».

Photoshop, Illustrator, And InDesign: What’s The Diff?

Posted January 31st, 2011 under Adobe Software, Web and Graphic Design.

The Adobe Creative Suite is an amazing (albeit expensive) tool. In reality though, it is comprised of over a dozen different pieces of software that all have unique functionality, purposes, strengths, and even faults. For my web and graphic design needs, I think that three specific pieces of software are particularly relevant. I use Photoshop, Illustrator, and InDesign on a daily basis, but for different reasons. Need to know the difference between these three pieces of Adobe software? Want to know what to use each one for? Read on!

Adobe Photoshop
Photoshop is a great tool, but people often use it for the wrong reasons. Photoshop is a raster based software, meaning it works on a pixel based level. Images built using rastor based software can easily become pixelated, but that can be avoided. Photoshop is ideal for editing pictures/photos but not ideal for images with text, or for designing layouts for web or print.

Adobe Illustrator
Illustrator is hands-down my favorite of all the Adobe products out there. You can produce pretty much any type of image or file from it, so I use it to produce all of my web graphics, web designs, and even documents. Illustrator is different from Photoshop in that it is a vector based software, meaning instead of working on a pixel level, it works using lines. You can zoom in and out as much as you want from whatever you make in Illustrator, and it will never lose it’s detail. Now when you output that into a rastor based image such as a jpg, you may end up with some pixelation, but when resizing within Illustrator, you’ll never lose that detail. If you continuously resize your image in Photoshop, you will certainly distort it. So all of this makes Illustrator great for producing web graphics, documents, and full page designs, but not so great for working with photographs.

Adobe InDesign
InDesign is most commonly used for complex book layouts. My company, College Prowler uses it to layout all of our books on colleges. What I personally tend to use it for is actually to produce pdf presentations. As a designer, I much prefer pdfs over any other document type such as a Word document or Powerpoint presentation as I think they appear more professional. InDesign is a vector based program just like Illustrator, and has much of the same capabilities, but focuses it’s strengths on multiple pages and master pages. This allows you to make a master view for your presentation or book (i.e. logo in the bottom right corner, page numbers, et cetera) while also allowing you to customize each page. I wouldn’t advise InDesign over Illustrator for anything but books and presentations simply because you do lose some functionality from Illustrator.

To help you decide between software options, try out this table:

Project Description Photoshop Illustrator InDesign
Editing Vacation Photos X
Editing Photos To Print X
Editing Photos To Post Online X
Creating An Icon For The Web X X
Creating An Image For The Web X
Creating An Image With Text X
Creating A Document For Print X
Creating A Document For The Web X
Creating A Website Design X
Creating A Multiple Page Document X
Creating A PDF Presentation X
Creating A Book Layout X

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!

Tagged under , , , , . 4 Comments ».