$(document).ready(function() {
// add your snippets here
});

1. Display Warning Message for IE 6 Users

if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
	$('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}

2. Add hasJS class to body tag when Javascript is enabled

$('body').addClass('hasJS');

3. Clear default text in input fields on click

Sample Usage:

<input type="text" name="search" class="search" value="Keywords" title="Keywords" />

$('input[type=text]').focus(function() {
    var title = $(this).attr('title');
    if ($(this).val() == title) {
        $(this).val('');
    }
}).blur(function() {
    var title = $(this).attr('title');
    if ($(this).val() == '') {
        $(this).val(title);
    }
});

4. Show/hide more content on click

Sample Usage:

<p><a href="#how-to" class="toggle">How to write a good article?</a></p>

<div id="how-top">
	How to tips go here.
</div>

$('a.toggle').toggle(function() {
	var id = $(this).attr("href");
	$(this).addClass("active");
	$(id).slideDown();
}, function() {
	var id = $(this).attr("href");
	$(this).removeClass("active");
	$(id).slideUp();
});

5. Open Print dialog

Sample Usage:

<a href="#" class="print">Print this page</a>

$('a.print').click(function(){
	window.print();
	return false;
});

6. Add “hover” class to table data (and change the background color of the class via CSS)

$('table').delegate('td', 'hover', function(){
	$(this).toggleClass('hover');
});

7. Open link in a new window if rel is set to external

Sample Usage:

<a href="http://www.google.com" rel="external">Google</a>

$('a[rel=external]').attr('target', '_blank');

8. Add “odd” class to alternate table row (and change the background color of the class via CSS to have stripes effect for table)

$('tr:odd').addClass('odd');  

9. Check if div exists on page

if ( $('#myDiv').length ) {
    // do something with myDiv
}

10. Check/Uncheck all checkboxes

Sample Usage:

<div class="options">
	<ul>
		<li><a href="#" class="select-all">Select All</a></li>
		<li><a href="#" class="reset-all">Reset All</a></li>
	</ul>

	<input type="checkbox" id="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" /><label for="option3">Option 3</label>
	<input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>

$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});

$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});

Read 10 Useful jQuery Snippets on Web Development Blog!

“We built Store Locator for iPhone with Generation Y and mobile technology in mind,” says Ei Sabai Nyo, lead developer for Anansi Web Development. “Generation Y wants information right now, right where they are, and with the Store Locator for iPhone, they will be able to locate stores closest to them with their smart-phones like an iPhone when they are on the road. For businesses, this offers a perfect opportunity to increase their mobile presence and attract more Gen-Y customers.”

Store Locator for iPhone offers:
- Search Stores by Postcode
- Search Nearby Stores (using iPhone built-in GPS)
- Integration with Google Maps app on iPhone (directions, street view, traffic information)
- Native iPhone app look and feel
- Both Portrait & Landscape Support
- An easy to remember app URL, eg: http://sitelocator.mobi/apple/

In addition, Store Locator for iPhone comes with a Back-end Administrator Console which is all web based, allowing business owners to Add, Edit, or Delete store locations from anywhere!

Pricing & Availability
Store Locator for iPhone is available from as little as $50 a month for franchise owners and service providers in Australia.
http://sitelocator.mobi

About Anansi Web Development
Anansi Web Development is a leading Web Development Agency based in Sydney, Australia. It is founded by Ei Sabai Nyo, an aspiring Gen-Y Internet Entrepreneur and Web Developer. The company uses open source technologies and latest web development technologies to provide cutting-edge web and mobile solutions for various organisations. Anansi Web Development is well known for its free web apps developed for the latest and most advanced smart-phone, iPhone. For more information, visit www.anansi.com.au

Contact Info
For press inquiries, and any other questions, please contact hello@anansi.com.au.

Read Official Press Release: Target tech-savvy Gen-Y customers with a Store Locator for iPhone on Web Development Blog!

Myer Store Locator

Store Locator for iPhone
Get your business found by many smartphone users all over Australia.
Let your customers locate your stores quickly and easily.
Obtain an easy-to-remember web address sitelocator.mobi/yourstore
No need to install anything! Just touch and go!

SIGN UP NOW!

What does it do?

The iPhone Store Locator is a store locator web app that works by postcode or your location via GPS. There are two main components to the Store Locator app; front end and back end.

The front end allows users to locate a store or a business by postcode or by their current location (using iPhone’s built-in GPS). The app will find up to 5 store locations nearby that are within approximately 25 kilometers (15 miles) radius of the specified location.

The back end allows franchise owners and service providers to add the locations of their offices and stores from a web based system and this will automatically geocode addresses. The web based back end enables businesses to add, edit and delete store locations from anywhere via a simple user interface. Businesses can also customise the brand of their front end app by uploading a logo.

Why a web app instead of a native app?

One of the most common questions asked is why we chose a web app over a native app for this project. There were quite a few reasons why we went this way, but let us highlight 3 main benefits for businesses and developers.

1. Benefits For Businesses/Clients

Accessibility (No Download/Install)

There are some popular Store Locator native iPhone apps on App Store like Starbucks Store Locator and McDonalds Store Locator. However, the problem with a native app is that you need to download and install the app first before you can use it. And most people who just need to use the app every once in a while are not likely to download the app. This is why web apps are better. If, for example, you are looking for the nearest Myer store while you are on the road, the first thing you would do is go to Myer website. And on Myer website, you will see a banner ad with a special message for iPhone users that goes something like “Looking for a Myer Store near you? Click here!” and once you click/touch on that link, you will be taken to the Myer Store Locator for iPhone. Since it is a web app, you don’t need to install anything at all. All you need is Internet connection and WebKit-based browser which you already have with your phone.

Portability

With native iPhone apps, the app is only available for one single device – the iPhone. However, with the web app, we have developed it in such a way as it is compatible with most browsers so you can use it not just on an iPhone but also on other smart phones like Android, HTC and Blackberry. It is a great win for businesses because they are able to reach broader smart phone users on multiple devices and platforms with one single app.

Cost Saving

Getting a web app developed is much cheaper compared to getting a native app developed. With Store Locator for iPhone, business owners get the best of both worlds. Unlike having a website where the business owner has to manage hosting, domain name registration, etc, Anansi Store Locator is a hosted solution and therefore all the technical details are looked after by Anansi. There is no need to spend thousands of dollars on development or server infrastructure. Since the app is already developed and hosted by Anansi, all you need is to pay for is a subscription fee. Users of the app won’t need to pay anything as it will be available for free on the web.

2. Benefits For Developers

Ease of Maintenance

Since iPhone web apps don’t need to be approved by Apple to be listed on App Store, the developers (Anansi Web Development), can release updates whenever necessary. Updates take effect immediately the moment they are deployed onto the web server, as oppose to native apps where updates have to be installed by the user on their iPhone. As a web app developer, you can be sure that every user of the app is using one single version, whereas with native iPhone apps, it is possible for users to be using different (outdated) versions.

No Sharing of Revenue Stream

Apple takes about 30% of the price from iPhone apps sold on App Store. However, with web apps, the developer doesn’t need to share the revenue. The cost of running/hosting the web app works out to be much cheaper than sharing the revenue with Apple.

Full Control

Native iPhone apps are like desktop apps that are installed onto your mobile device while web apps are accessed from a web location via a URL. Having a web app means the developer has full control over the app, when it comes to configuring, deploying and upgrading the app. It suits our business model because we need to allow business owners to be able to sign up and make their Store Locator app available as quickly as possible, and this is not possible with native iPhone apps where you have to go through approval from Apple to be listed in the App Store which could take at 1-2 weeks.

iPhone web apps, however, are not without its flaws. Web apps are generally not as sexy as a native app. However, in our case, we are developing a utility app, not a game app, and therefore sexiness is not a requirement! The user interface for the iPhone Store Locator is designed to look and feel like a native app so we feel we are geting the best of both worlds. If you are interested in taking a look or signing up for your business, check out the app site or contact us at any time.

Read When an iPhone web app is better than a native app on Web Development Blog!

1. First Post
The first ever blog post for Web Development Blog was written almost 5 years ago, on Christmas Day 2005. It is titled Welcome to All Things Web.

2. A post I enjoyed writing the most
I enjoyed writing almost all the Web Development Tutorials on this blog, because writing them gives me a sense of satisfaction from sharing my knowledge with other developers all over the world.

3. A post which had a great discussion
I wrote a tutorial on Removing file extension via .htaccess 3 years ago in 2007 but it is still the most popular blog post on this blog, linked by many and have the most number of comments – mainly by developers and webmasters asking questions or helping each other.

4. A post on someone else’s blog that you wish you’d written
This is a very tough one because there are many blog posts that I like. But if I had to choose one, it would be Why all programmers should blog written by Joerg Mueller. I personally would like to see more blogs by programmers and developers. I think we have way too many designers blogs but not as many developers blogs.

5. Your most helpful post
My most helpful post has to be Web Hosting Comparison Chart that I put together. Before publishing that post, I received many emails from friends and blog readers who asked me the same question, Which host do I recommend? It is very hard to recommend a single hosting company to everyone because the requirements for every website are different. But after writing that blog post, whenever someone asked me the question, I could just give them the link and they can make their own decision. In my opinion, helpful posts are the ones that provide an answer to a question.

6. A post with a title that you are proud of
I am not much of a copywriter, so my post titles are never entertaining or catchy. But this title certainly catches almost everyone’s attention, “Making a Passive Income Online“. And I am proud and amazed at the same time because I didn’t even try hard to come up with that title.

7. A post that you wish more people had read
I wish more people read my rant “So you don’t like ads on websites/blogs” and gave their 2cents worth.

Read 7 Link Challenge for Web Development Blog on Web Development Blog!

So, what are the server requirements to host WordPress 3.0? According to the WordPress official website, your WordPress host should meet the following minimum requirements:

• PHP 4.3 or greater
• MySQL 4.1.2 or greater
• The mod_rewrite Apache module (This is necessary to have pretty SEO-friendly URLs)

Note that WordPress will soon quit support for PHP 4 and MySQL 4 (read official announcement here), so if you are planning to continue using WordPress next year (2011), I strongly recommend that you switch to a hosting that has PHP 5 and MySQL 5 to avoid having to use an older version of WordPress in the near future when the newer versions no longer support PHP 4/MySQL4. Both Dreamhost and Bluehost have PHP 5 and MySQL 5.

I have used more than 10 web hosting providers for my online projects but here are my recommended hosting for WordPress 3.0.

Dreamhost

Dreamhost is an ideal hosting provider for advanced users. Their Control Panel is a bit different to CPanel/Plesk but they have so many more features than CPanel/Plesk if you know what you are doing. And if you install WordPress using “WordPress one-click installer” on dreamhost, they will upgrade it for you automatically. This is a good feature because you don’t have to manually upgrade WordPress whenever a new version comes out. But you need to be careful not to hack the core code or core files of WordPress because your changes will be overwritten when they install a new version. I have heard a lot of mixed reviews about support at dreamhost but I have never really had to contact them because their knowledge base and wiki are quite comprehensive. I am using Dreamhost for this Web Development Blog and it is my recommend hosting provider for developers and technical savvy people. Dreamhost costs $8.53 per month which is a bit more expensive than most shared hosting but you do get what you pay for and you can get $30 off by using this coupon: WEBDEV30.

Test drive Dreamhost now.

Screenshot of Dreamhost's one-click installs

BlueHost

Bluehost is an ideal hosting provider for basic users. Each hosting account comes with a CPanel and one click install feature to install WordPress on your hosting account in less than 3 minutes. The install feature also allows you to install a previous version of WordPress so if, for some reason, you need to install WordPress 2.9 instead of WordPress 3.0 for plugin compatibility reasons, you can do so easily. The following video shows you how to install WordPress on Bluehost using their one click install. I am using Bluehost for a few of my websites. At $6.95/month with a free domain name for life and unlimited domain hosting, the price is very affordable.

Test drive BlueHost now.

Video Tutorial of how to install WordPress using SimpleScripts on BlueHost

Read Recommended Hosting for WordPress 3.0 on Web Development Blog!

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"  />

Read Clear default text in input boxes on click with jQuery on Web Development Blog!

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.

Read ThemeForest vs WooThemes on Web Development Blog!

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

Read How to code an HTML Email Newsletter on Web Development Blog!

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.

Read Designing and Optimising Websites for iPad on Web Development Blog!

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.

Read Click to copy and open site script on Web Development Blog!