Web Development Blog

The following Javascript will clear default text value in input boxes when you click on them. To trigger the Javascript, you’ll need to specify both title and value attributes and set class of the input field to “text”. jQuery library is required for this to work.

Javascript

$('.text').focus(function () {
	if ($(this).val() == $(this).attr("title")) {
		$(this).val("");
	}
}).blur(function () {
	if ($(this).val() == "") {
		$(this).val($(this).attr("title"));
	}
});

Examples:

<input type="text" name="q" class="q text" value="Search for terms" title="Search for terms" />

<input type="password" name="password" class="text" value="Password" title="Password"  />

I was looking to buy a premium WordPress Theme for one of my projects a while ago and I came across ThemeForest and WooThemes. There are other premium WordPress Theme stores like Elegant Themes, Templatic, Template Monster, etc, but ThemeForest and WooThemes are leading the market. After looking around for a while, I decided to review and compare ThemeForest and WooThemes.

ThemeForest

Pros:
- Useful interface (you can search themes by criteria, list themes by authors, see ratings for each theme, no. of sales made, etc)
- Cheap (average $25 – $30 per theme)
- Comes with PSD (Photoshop file)
- Lots of variety
- Comments section for each theme allow you to directly communicate with the theme author and ask questions

Cons:
- Customising each theme can be very different because they are built and designed by many theme developers around the globe.
- Support is provided by the theme author rather than the ThemeForest staff
- Mostly English Only

Quality of themes:
Most themes come with Cufon/sIFR Custom font, jquery plugins, pre-installed WordPress plugins like Related Posts, Most Popular Posts, Social Linking, etc.

WooThemes

Pros:
- Great Support / Knowledge Base available to theme users and theme owners
- Standard “Theme Options” in the admin section that is built on a single WooThemes framework to allow you to customise each theme very easily
- Available in multiple languages

Cons:
- No Advanced Interface (eg: You can’t browse themes by author or rating or popularity)
- Expensive (average $70 per theme) *Cheaper if you join the theme club
- PSD only included for Developer License (Average price of a Developer License for each theme: $150)
- Fewer themes compared to ThemeForest

Quality of themes:
As with ThemeForest, most themes from WooThemes come with Cufon Custom font, jquery plugins, pre-installed WordPress plugins like Related Posts, Most Popular Posts, Social Linking, etc. The quality of themes from both stores are very similar. Themes from both stores are written in valid XHTML/CSS, compatible with most modern browsers, etc.

Which one to buy?
As I mentioned earlier, if you are looking for a lot of variety and a value for money, ThemeForest is definitely the answer. The pricing is a lot more affordable compared to WooThemes as they have a bigger community. But if you are looking for consistency and a standard framework and are willing to pay more for that, WooThemes is your friend.

In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.

1. Changing the background color

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>

	</td>
   </tr>
</table>

2. Setting a fixed width and background color for the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

3. Changing the font size, style and color of the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

4. Setting a different font, color and style for headings

<span style="font-size: 14px; font-weight: bold; color: #ed0000;
font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>

5. Inserting a line between two blocks of text

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				First block of text.
			</td>
		</tr>
		<tr>
			<td style="border-top: 1px solid #66666;">
				Second block of text.
			</td>
		</tr>
	</table>

6. Inserting and floating an image to the left

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td width="150" align="left" valign="top">
				<img src="http://full.path.to.the.image/image.jpg" width="120" height="100" alt="My image" />
			</td>
			<td width="450" align="left" valign="top">
				Text next to the image
			</td>
		</tr>
		<tr>
			<td colspan="2">
				Copyright text
			</td>
		</tr>
	</table>

7. Aligning text to right (or left or center)

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				<div>Some text goes here</div>
				<div align="right"><a href="#">Read more</a></div>
			</td>
		</tr>
	</table>

8. Changing a link color

<a href="#" style="color: #00ccff;
text-decoration: none;">Read more</a>

9. Adding a border around the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #00ccff; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td>

			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

10. Opening a link in a new window

<a href="http://www.google.com" target="_blank"
style="color: #00ccff; text-decoration: none;">Go to Google</a>

Putting it altogether

<table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="#cccccc">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="10" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #999999; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td colspan="2" height="70" bgcolor="#000033">
				<span style="font-size: 14px; font-weight: bold; color: #ff6600; font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" height="10" bgcolor="#ff6600"></td>
		<tr>
		<tr>
			<td width="150" align="left" valign="top">
				<img src="http://eisabainyo.net/weblog/wp-content/uploads/2010/05/sexy-web-design.jpg" width="250" height="326" alt="Sexy Web Design Book Cover" />
			</td>
			<td width="450" align="left" valign="top">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit. </p>
				<p>Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non. </p>
				<div align="right"><a href="#" style="color: #ff6600; text-decoration: none;" target="_blank">Read more</a></div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<p>Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel. </p>
			</td>
		</tr>
		<tr>
			<td colspan="2" bgcolor="#cccccc">
				<span style="font-size: 10px; font-weight: bold; color: #666666; font-family:Arial, Helvetica, sans-serif;">Copyright 2010 All Rights Reserved.</span>
			</td>
		</tr>
	</table>
	</td>
   </tr>
</table>

Email Newsletter Templates

If you are looking for professional email newsletter designs, ThemeForest is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations). Our favourites are:

iNewsletter

Platnum

iPad was released a month ago, and is made available in Australia a few days ago, but already, I am seeing a lot of big name companies and brands trying to optimise thier websites for iPad. While I have yet to optimise a website for iPad, I have put together some notes about designing and optimising a website for iPad to help us get started soon.

Screen Resolution
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.

User Agent String

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10
(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.

CSS for iPad

<link rel="stylesheet" media="only screen and (min-device-width: 768px)
and (max-device-width: 1024px)" href="ipad.css" type="text/css" />

<link rel="stylesheet" media="all and
(orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and
(orientation:landscape)" href="landscape.css">

As with optimising websites for iPhone, you can specify a CSS file just for iPad devices. You can also have different CSS for Portrait and Landscape orientations without using Javascript. This is useful if you want to hide certain elements (for example, sidebar) on Portrait orientation.

HTML 5 and CSS3
iPad supports HTML 5 and CSS3 so you can go crazy with box-shadows, text-shadows, border-radius, multiple backgrounds, video, canvas and geolocation features on your iPad friendly website.

JavaScript
As with iPhone, Javascript is supported on iPad. This will enable your iPad friendly website to have web 2.0 features, AJAX, dynamic content, and animation effects. If you are looking for a good Javascript Framework to use, check out jQTouch which is a jQuery plugin for mobile web development.

Flash
Neither iPad nor iPhone supports Flash. And Steve Jobs has made it pretty clear that he has no intention of supporting Flash in the near future.

Viewport

<meta name="viewport" content="width=device-width" />

Use a constant width for viewport rather than a fixed pixel width. Similarly, when it comes to layout design, consider Fluid width rather than Fixed width design.

Touch not click
This is something to bear in mind when designing websites for iPad and iPhone. They are both touch devices and not point and click, so make sure there is enough padding between links (eg: Navigation items) and buttons are large enough to be clicked touched on.

iPad Friendly Website ≠ Mobile Friendly Website
With iPhone, you can simply redirect to your existing Mobile version of the website for iPhone users, but you can’t do the same for iPad. iPad screen resolution is many times bigger than a normal mobile screen, hence, there will be a lot of whitespace when you view a mobile friendly website on an iPad. For this reason, it is sometimes better to serve the same version of the web friendly website to iPad devices rather than redirecting them to the mobile version of the website which is designed for small screens. And according to Apple, Safari on iPad is capable of delivering a “desktop” web experience.

Preview
If you want to check out how your website would look in iPad without an actual iPad device, open this Simulator in Safari browser and type in the address of the website you wish to view in the address bar on the iPad image (not the browser address bar). You can click on the top left corner of the iPad image to switch between Landscape and Portrait mode.

But if you have got a spare $800, you can buy iPad from Amazon Online Store for the real deal.

Inspiration
As always, Apple has a list of iPad ready websites for your inspiration. If you are looking for an iPad friendly WordPress Theme, be sure to check out Mobility Wordpress Theme that provides a touch and slide friendly user interface for iPad viewers.

I needed a script that copies a text (in my case, coupon code) onto clipboard and then open the web address associated with the coupon in a new window for my Coupons for Webmasters page. For the clipboard copying, I’m using ZeroClipboard script written by Joseph Huckaby. ZeroClipboard is a free and open source library that provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. And opening a new window was easier than I thought, with jQuery and a bit of googling.

HTML Code

<html>
<head>
<title>Zero Clipboard Test</title>

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="clipboard.js"></script>

</head>
<body >
<h1>Zero Clipboard Test</h1>

<div class="coupon">
<h3>Hostgator Hosting Coupon</h3>
<div class="desc">20% off all plans for new customers</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="http://eisabainyo.net/view/hostgator">GREEN</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Godaddy Domain Name Coupon</h3>
<div class="desc">$7.49 for any .COM domain</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="http://eisabainyo.net/view/godaddy">OYH7</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Website Templates</h3>
<div class="desc">5% off any template (no coupon required)</div>
<div class="expiry">Expiry date: 10 June 2010 </div>
<div class="coupon-link"><a href="http://eisabainyo.net/website-templates" target="_blank">Go to site</a></div>
</div>

</body>
</html>

ZeroClipboard Script (download at Google Code)
You’ll need ZeroClipboard.js and ZeroClipboard.swf.

clipboard.js

ZeroClipboard.setMoviePath("http://fullpath.to.your.site/ZeroClipboard.swf");

var clip = null;
var url = '';

function init() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );

	$('.coupon-code').mouseover( function() {
		clip.setText(this.innerHTML);
		if (clip.div) {
			clip.receiveEvent('mouseout', null);
			clip.reposition(this);
		} else {
                        clip.glue(this);
                }
		clip.receiveEvent('mouseover', null);
		url = $(this).attr('rel');
	});

	clip.addEventListener('mouseUp', function(client) {
		window.open(url);
	});
}

$(document).ready(function() {
	init();
});

See the code in action at Coupons for Webmasters. RetailMeNot is also using a similar script to achieve the same result.