HTML Email design guidelines – Campaign Monitor

April 7, 2010

A handy roundup of hints and tips on designing HTML email from the Campaign Monitor team.

The number and variety of email clients and their frequent lack of support for web standards means that you have to put your web design hat on from nearly a decade ago to get anything like consistent results.

This article gives you a great summary of how to achieve that.

Email design guidelines – Articles & Tips – Campaign Monitor.


Smart Image Resizer (PHP)

March 26, 2010

An easy way to resize images on the fly in PHP – this script allows you to specify parameters such as width and height and an image source and it will generate a new image based on those parameters.

Using a cache mechanism which can be overridden, the script will deliver an image already in the cache folder if the same parameters are supplied again, but you can override this.

You can also adjust the quality (for Jpeg images), and the script does a good job of sharpening the new image.

Smart Image Resizer (PHP): a simple way to create thumbnails and more on the fly – Shifting Pixel.


Create A Color Palette From An Image Using Kuler

March 25, 2010

A nice little tutorial from Jennifer Farley on Sitepoint explains how to use Kuler (a free tool from Adobe) to create a colour palette from an image you upload:

How To Create A Color Palette From An Image Using Kuler.


Rich snippets – Webmaster Tools Help

March 24, 2010

Google Webmaster Tools documentation about rich snippets.

Rich snippets are Google’s take on marking up structured content using meta information to describe that content – such as microdata, microformats or RDFa.

The information types currently supported are reviews, people profiles, business listings and events.

Marking up your structured data in this way can enhance the listing appearance of your data in Google’s search results. It won’t affect the page’s ranking, but of course it may help with clickthrough rate.

see Rich snippets – Webmaster Tools Help.


TipTip jQuery Tooltip Plugin

March 21, 2010

A simple and effective jQuery Tooltip plugin by Drew Wilson. It uses the title attribute so can be applied to most elements on the page and uses CSS for display, with some CSS3 enhancements.

It’s also clever enough to position itself appropriately (top, bottom, left right etc) in relation to the element and the browser window edges.

TipTip jQuery Plugin | Drewwilson.com.


JQuery Form Validation with the Ketchup Plugin

March 21, 2010

The Ketchup Plugin is a nice easy way to perform client-side form validation using JQuery.

It includes a useful set of pre-built validations and is customisable in look and feel.  However, you can also extend it with your own validation logic if you want.

Check it out here: Ketchup Plugin.


Custom Borders Using CSS2.1

March 21, 2010

Román Cortés consistently demonstrates some amazing effects using just CSS on his blog at http://www.romancortes.com/blog.  A couple of rather famous ones are his Pure CSS Coke Can and 3D Meninas.

However, he also has a nice little effect styling a blockquote  as an effective “pull quote” with a single background image and use of the :after pseudo-element.  The blockquote expands to accommodate the text, and is simple and neat.

Find it here:  http://www.romancortes.com/blog/custom-borders-with-css-21/

Also, check out his brilliant contact form.

Thanks Román!


Pure CSS Speech Bubbles

March 18, 2010

Do you ever have a blockquote and feel the need to make it render as a speech bubble?  Possibly, possibly not; but just in case you do, Nicholas Gallagher shows us how to do it using just CSS (admittedly with some CSS3).

http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/


The Wonderful World of Geolocation

March 18, 2010

Christian Heilmann’s nice roundup on Smashing Magazine of Geolocation possibilities, outlines a number of ways to get Geo information using a range of freely-available APIs:

http://www.smashingmagazine.com/2010/03/08/entering-the-wonderful-world-of-geo-location/


HTMLIpsum – Snippets of Lorem Ipsum Code

March 18, 2010

Here’s a handy reference site that allows you to copy & paste different blocks of HTML content in various content guises – paragraphs, lists, a table, a form and so on – great for snapping in to test that layout.

http://html-ipsum.com/