Mint Innovation by Absolute Advantage

So when you want stunning visual effects without using Flash, where do you turn. jQuery is the answer. The Mint Innovation project  uses a collection of jQuery effects together to bring the look and feel of a Flash based site.

1. jQuery Coda Slider

Based on the Niall Doherty coda slider effect, the moving business card on Mint Innovation forms the foundation for the site. Using jQuery and cods-slider.js it allows left and right scrolling along with cross links to scroll to any page from any part of the site.

Download Coda Slider Pack
Alternative Coda Slider documentation

2. jQuery Unobtrusive Tabs

Within the sliding panels we utilised another jQuery function – jquery.tabs.js. Based on the Unobtrusive Tabs by Klaus Hartl, the jquery tabs plugin allows us to dynamically load tabbed content within the page. For added effect we used the on click fade for transition.

jQuery tabs within coda slider panel

Download the jQuery Tabs files
Read the documentation

3. jQuery Innerfade

The transitioning effect you see on the first page of the panel could have easily been achieved with an animated gif. However, that wouldn’t offer us the same amount of flexibility as using jQuery. Additionally, it reduces the sizes of the image files on an already very busy page.

The Innerfade with jQuery offers you the ability to dynamically tweak the fade type, speed, pause, and even create hyperlinks from each separate image in the transition.

Download the jQuery innerfade package
View documentation on the jQuery innerfade

4. jQuery No Conflict

Now with all this loading of jQuery going on there is bound to be some conflicts in the coding. This is where jQuery No Conflict comes in. This neat function allows you to switch the $ variable on conflicting scripts.

See our previous post on jQuery Running Slow with Conflicting Scripts – A Solution
See the jQuery No Conflict documentation

There are a plethora of factors that you need to consider when designing HTML emails that actually do their job – get to the recipient and get the message across. The list below is by no means exhaustive but it should put you in good stead.

1. Size Matters

You’ve designed your HTML content, previewed it in your favourite web browser and it looks fantastic. Well, sorry to burst your bubble. The truth is, most of us read our emails in preview panes and windows half or a quarter of the size of a normal web page. Designing a HTML email for a 1024×768 window will not display well in most email clients.

As a rule of thumb I try to keep the width of the template as narrow as possible without spoiling the look of the email. Most email preview panes are scrollable which means that the height is less of an issue.

Tip: Keep the width of your template quite narrow.
Trick: Center your content so it looks fine in both wide and narrow readers.

2. Pretend it’s 1998 – Tables Rule, CSS Positioning is Gibberish!

For all you CSS lovers and web designers out there, I’m sure that you’ll agree that it hurts when you are forced to regress into old standards and markup. Well unfortunately, when designing HTML emails you have to do exactly that.

Firstly, you should have seen that attaching a CSS document isn’t possible. Why don’t you stick it in the document head tags, I hear you say. Well, this does work – sometimes. We can use CSS to style the content of the page, however it must be put inline if it is to work properly in email clients. This makes most web designers shudder at the thought but if you want your styling to be displayed in all the different email clients this is the only way to go. And yes, it does mean repeating that styling for your page links!



Ugly, but it works


CSS positioning is a big no no when designing for HTML emails. You have to imagine you’re designing for Internet Explorer 5 – imbrace those sloppy, untidy tables. It will save you heaps of headaches in the long run. Having your divs display differently in 10 email clients is a problem we can all do without.

Tip: Use tables to define your layout.
Trick: Use CSS to style inline, not on a stylesheet or in the header.

3. Image to Text Ratio

Too many images compared to the amount of text is quite hazardous. Spam filters tend to flag image heavy emails. It seems natural to create a flyer style image and then send that as an email. Without any text, it is more likely that the email will be rejected by SPAM filters.

A lot of email clients deactivate images as standard. An email with just one image ‘e-flyer’ would get no message across in these cases.

Tip: Use small images and avoid filling the email with an image e-flyer.
Trick: If you don’t have much text to fill the email with don’t use more than one or two images.

4. Don’t rely on images to get your message across.

As already said most email clients don’t necessarily display the images by default. Gmail, yahoo, and the like de-activate images as standard. It’s not only until the user clicks ‘activate images’ that they will get displayed.

This means that if you use images to display text then your message will not get across. Additionally, if the layout of your email relys too heavily on images then it may look silly when they are de-activated. To test how your email looks without images use the Web Developer add-on for Firefox and select de-activate images. If it doesn’t make sense without the images you need a re-design.

Tip: Don’t rely on images to get the message across.
Trick: Test the HTML with images deactivated to see how it would appear without images.

5. Use the image “alt” tag to good effect.

If you’re images aren’t necessarily going to get displayed using the alt tag is essential. This will be the text displayed instead of the image. To take it a step further, you can even style this text by using the style settings for font and background within the image tags. For example,

will display

when the image myimage.jpg is not displayed.

Tip: Always use the alt tag within images.
Trick: Use the style element to manipulate how alt text and background is displayed when images are deactivated.

The jQuery.noConflict(); solves this very neatly. Here’s how to implement it:

1. Insert the following in your header with the other scripts. This is basically saying that the variable J is replacing the $ due to the conflict.

2. Open one of the conflicting scripts and replace all instances of $ with the variable J. Use a find and replace tool for speed.

3. Save the script and refresh the page. The scripts should run cleanly.

In fact, if you really want to get the most out of your blog you should be using Feedburner anyway. Feedburner, now owned by Google offer a neat service called BuzzBoost. BuzzBoost republishes your burned feed’s content as HTML you can use on any other site. You can adjust the settings within the Feedburner account and create CSS classes to adjust the way it displays.

Some helpful links…
Google Feedburner

Styling the appearance of BuzzBoost

Problem: When using XAMPP on mac os x the following message appears:

Solution: Use MAMP instead.

That really is it. When I installed the file system on the MAMP powered apache server it worked fine the first time.

MAMP for Mac OS X

XAMPP for Mac OS X

Magento Commerce Homepage