Web Design Reference

HTML Email design guidelines – Campaign Monitor

webreference — Wed, 07 Apr 2010 06:47:40 +0000

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)

webreference — Fri, 26 Mar 2010 07:38:20 +0000

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

webreference — Thu, 25 Mar 2010 07:53:46 +0000

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

webreference — Wed, 24 Mar 2010 06:47:29 +0000

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

webreference — Sun, 21 Mar 2010 10:53:56 +0000

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

webreference — Sun, 21 Mar 2010 10:40:14 +0000

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

webreference — Sun, 21 Mar 2010 09:22:41 +0000

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

webreference — Thu, 18 Mar 2010 23:41:21 +0000

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

webreference — Thu, 18 Mar 2010 22:51:46 +0000

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

webreference — Thu, 18 Mar 2010 22:39:14 +0000

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/