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!

CSS

#enter {
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */
	width: 260px; /* same as the image width */
}

#enter span a {
	display: block;
	width: 260px;
	height: 240px;
	margin: 0 auto;
	position: relative;
	background: transparent url(images/enter.jpg) 0 0 no-repeat;
	text-indent: -5000em;
	outline: 0;
}

HTML

<body id="homepage">
    <div id="enter">
	<span><a href="/home">Enter Site</a></span>
    </div>
</body>

Read Align an image in center and middle using CSS on Web Development Blog!

Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. The <button> tag will still submit the form that it belongs to when clicked because the type of the button is set as submit.

HTML

<button id="button" name="button" type="submit">
<span>Contact us today!</span></button>

CSS

#button {
	background: transparent url(contact.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	width: 180px;
	height: 50px;
}

#button span {
	display: none;
}

Read How to style a Submit button in CSS – Example 2 on Web Development Blog!

1. Get inspiration
Before building anything, we like to browse through existing iPhone web apps that are available. There are quite a few iPhone Apps Galleries, but the ones that we often go to are Apple – Web apps, appSafari and iPhone Application List.

2. Gather ideas and information
Now you’ve been inspired by so many good iPhone apps, it’s time to brainstorm ideas for an application that you would like to build. An original idea will always do better than a second-hand idea.

3. Plan
Planning is the most important part of creating a useful and reliable application. We like to write down our thoughts and implementation ideas in a notepad before jumping into development. Have a look at one of our handwritten notes for SEO site checker. Apart from planning the implementation details, also think about a URL and name for the application. When deciding a URL, keep it short because iPhone’s keyboard is not the easiest to type on. For example, for our SEO site checker app, the URL is http://www.anansi.com.au/apps/seo/ rather than http://www.anansi.com.au/apps/seo-site-checker/

4. Develop
One of the advantages that comes with building iPhone web apps as opposed to native apps is that you can use any web programming language. You don’t need to learn Cocoa or get yourself familiarised with Mac OS. Essentially, you are just building another web application, but for a small screen. You can use Javascript, AJAX, CSS, HTML for the client side and any server-side language of your choice; be it PHP, Ruby, Perl, Java, .NET, ColdFusion, or ASP. Download sample code from Safari Reference Library and explore how things are done.

Our tools of the trade:

1) iUI: iPhone User Interface Framework (consists of a JavaScript library, CSS, and images that make your web app looks and feels like an iPhone Native Apps)

2) PHP with a framework (Zend, CakePHP, CodeIgniter or own)

3) jQuery if required (We try to do without unless really necessary because bandwidth is quite precious on mobiles)

4) Safari is the best browser to test your iPhone web app on especially if you are using iUI framework.

5) Google Analytics to track the statistics

5. Test
During development, you may be able to get away with using Safari on your computer to test the iPhone web application, but when it comes to actual testing stage, you have to use an iPhone. There are some errors or bugs that you may only discover when you are using an actual iPhone. For example, when we were developing SEO site checker, we didn’t see the need to put “Please wait… Calculating your website’s score” overlay pop up until we realise how long it could take to load up the result page on an actual iPhone.

6. Release
Once you are happy to release your iPhone web app, it’s time to create a nice little icon and a screenshot of the app to submit to Apple – Web apps directory. Remember to read submission information for the icon and the screenshot. It takes about 2 days to be approved and listed in the directory. In addition to submitting it to the Apple directory, social networking websites are the best marketing channel to promote just about anything these days. Tweet about your app on Twitter, share the app link on facebook, blog about it, bookmark the app on delicious; the options are endless. Once it is released, watch the statistics, obtain feedback from people, continually improve the app and follow the “Release Early, Release Often” principle to ensure the success of your iPhone web app.

7. Read, learn and improve
There is always room for improvement. Read tutorials and books on iPhone Web App Development. Learn new tips and tricks. Improve your web apps. Some of our recommended books on iPhone web development are:

• Building iPhone Apps with HTML, CSS, and JavaScript
  “The future of mobile development is clearly web technologies like CSS, HTML and JavaScript. Jonathan Stark shows you how to leverage your existing web development skills to build native iPhone applications using these technologies.”
  – John Allsopp, author and founder of Web Directions
• Beginning Smartphone Web Development
  Mobile application developers and their managers need to learn mobile web technologies because it’s in their economic interest. Time-to-market and opportunity costs are significantly lower for web-based mobile applications than for native ones. In this book, Gail teaches the web standards and fundamentals specific to smartphones and other feature-driven mobile phones and devices.
• Developing Hybrid Applications for the iPhone
  “For those not ready to tackle the complexities of Objective-C, this is a great way to get started building iPhone apps. If you know the basics of HTML, JavaScript, and CSS, you’ll be building apps in no time.”
  – August Trometer, Owner of FoggyNoggin Software, www.foggynoggin.com
• Professional iPhone and iPod touch Programming
  This book is for web developers who want to build new applications for iPhone and iPod touch. A working knowledge of HTML/XHTML, CSS, JavaScript, and AJAX is necessary.

Like we said earlier, one thing we like about iPhone web apps is that you don’t have to learn a new programming language like Objective C or buy a Mac computer in order to develop an app. However, when it comes to making a profit from your apps, or ultilising iPhone App Store’s features, native apps have more advantages. If you are wanting to get into iPhone native app development without doing the programming yourself, check out How To Create iPhone Apps With No Programming Experience ebook that teaches you step-by-step how to outsource and market native iPhone app development. The company behind the ebook has launched 22 iPhone Apps so far using this method and made $56,366.69 in just ad revenue. So if you have got a good idea for an iPhone app, then it’s worth giving a shot.

Read Tips for iPhone Web App Development on Web Development Blog!

CSS

#comments .expandable .comment-body {
	height: 50px;
        overflow: hidden;
}

Javascript

$("#comments .comment-more a").live("click", function(){
	if ($(this).text() == 'more') {
		$(this).parent().parent().removeClass("expandable");
		$(this).text("less");
	} else {
		$(this).parent().parent().addClass("expandable");
		$(this).text("more");
	}
	return false;
});

HTML

<div id="comments">
	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus adipiscing. Donec risus leo, venenatis adipiscing euismod eget, ultricies vitae nunc. Curabitur fermentum tortor vitae nisl fermentum non scelerisque erat posuere. Sed auctor tempor venenatis. Morbi vel urna turpis, adipiscing molestie nisl. Curabitur ut lorem id neque mollis fringilla. Phasellus varius viverra suscipit. Proin eleifend quam in diam dictum suscipit. Praesent eleifend fringilla turpis sit amet commodo. In ullamcorper ligula non augue bibendum ultricies scelerisque tortor congue. Aenean nulla lectus, tincidunt egestas cursus sit amet, tristique non libero. Duis facilisis blandit nisi, eget cursus turpis tristique non. Fusce sodales dolor vel ligula rutrum venenatis. Cras molestie vulputate urna at iaculis. Mauris consequat accumsan mi, non facilisis enim porttitor gravida.</p>
		<p>Suspendisse et purus a tortor aliquet vestibulum. Sed ullamcorper euismod interdum. Aenean gravida, metus ac imperdiet venenatis, neque ligula viverra urna, a pellentesque elit mi id ligula. In suscipit nunc eget magna bibendum tempor. Nunc ac mauris ut risus posuere accumsan. Nulla dictum semper justo, quis adipiscing sem consectetur quis. Donec felis arcu, convallis pretium consectetur at, semper ullamcorper urna. Proin elit nisi, vehicula eget pretium ac, faucibus vitae justo. Praesent quis arcu eget massa interdum ullamcorper in nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent orci nisl, mollis et egestas ut, suscipit et orci. Morbi in justo sit amet ligula facilisis interdum ac id ante. Nam sit amet metus eget augue tristique interdum vitae in metus. Vestibulum tristique vestibulum lorem, eget pharetra ante aliquet eget. Donec fermentum adipiscing sagittis. Quisque interdum, augue non vulputate rutrum, sem tortor facilisis diam, in tincidunt nisi tellus ut eros. </p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>

	<div class="comment-content expandable">
		<div class="comment-body">
		<p>Vivamus viverra arcu non nibh sollicitudin consectetur. Vivamus sodales erat a tellus semper in feugiat eros pharetra. Aenean vel magna magna, scelerisque molestie risus. Fusce lobortis euismod justo, sed gravida neque porta nec. Aenean risus metus, accumsan et mattis et, semper non erat. Fusce velit enim, viverra a pulvinar nec, viverra vel erat. Praesent sed mi quam, vel dignissim nunc. Nullam accumsan quam ut eros congue eget accumsan arcu bibendum. Nam congue egestas fringilla. Aliquam felis mi, volutpat nec tempor eu, hendrerit quis lorem. Pellentesque pretium metus quis sapien luctus venenatis vitae pretium dolor. Fusce ac tellus a tellus posuere suscipit a quis ante. Quisque ut sem eget risus consequat ornare.</p>
		<p>Nunc id risus risus, sed pellentesque nisi. Donec pulvinar nisl sit amet eros venenatis ut dictum odio pretium. Nulla hendrerit ligula a metus rutrum sed feugiat libero mattis. Nam id mi ac leo iaculis volutpat. Maecenas nec enim ut mauris convallis auctor in sed purus. Nam porta magna vitae nisl tempus in eleifend felis viverra.</p>
		</div>
		<span class="comment-more"><a href="#">more</a></span>
	</div>
</div>

Recommended Books on jQuery

jQuery Cookbook: Solutions & Examples for jQuery Developers

jQuery in Action

Read Read more using jQuery live event on Web Development Blog!

This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>framebar example by Web Development Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin: 0;
    padding: 40px 0 0 0;
    overflow: hidden;
    font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 900px;
    height: 30px;
    padding: 5px 0;
    line-height: 1;
    background: #333;
    color: #fff;
    text-size: 1.2em;
}
#bar a {
    padding: 0 5px;
    color: #fff;
}
#frame {
    width: 100%;
    height: 100%;
    z-index: 10;
}
</style>
</head>
<body>
<!-- BEGIN: bar -->
<div id="bar">
<a href="http://eisabainyo.net/weblog/" title="Web Development Blog">Web Development Blog</a>
</div>
<!-- END: bar -->
<iframe scrolling="auto" id="frame" src="http://eisabainyo.net/weblog/" frameborder="0"></iframe>
</body>
</html>

Read Framebar (like diggbar) example in html and css with no javascript on Web Development Blog!

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Setting an opacity

.transparency {
   filter: alpha(opacity=50);
}

Change the link to a hand cursor

a.link {
   cursor: pointer;
}

Get rid of double margin bug by adding display:inline to a block level element

#sidebar {
   float: left;
   margin-left: 20px;
   width: 300px;
   display: inline;
}

Ensure proper positioning of list items

ul li {
   display: inline-block;
}

Hide extra spaces and padding

#header {
   height: 10px;
   overflow: hidden;
}

Bring a layer on top of other layers

#close {
   position: absolute;
   z-index: 50;
}

Resolve float issue in IE6 by triggering hasLayout property

#content {
   zoom: 1;
}

PNG transparency in IE6 (uses IEPNGFix code)

#background {
   behavior: url(iepngfix.htc);
}

Read Some simple but effective CSS rules for IE 6 on Web Development Blog!

  <input type="submit" id="submit" value="Search" />

CSS

#submit {
  cursor: pointer;
}

Read Change the arrow into a hand when hovering over ‘Submit’ button on Web Development Blog!

Screenshot of Web Development Blog on iPhone

Here are the steps to make a website iPhone-friendly using just CSS.

1. Create a separate stylesheet for iPhone

Tips:
1. Hide unnecessary elements
On this blog, I set the following elements to display: none in CSS. Use display: none rather than visibility: hidden because visibility: hidden will also hide the content inside an element and not hide the element completely.
2. Use a fluid layout
Set the width of your main container (or any other containers) to 100% rather than a specific width in pixel.

For example:

body {
background-color: #fff;
}

.header, .footer {
width: 100%;
}

.sidebar {
display: none;
}

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

The viewport of an iPhone is 320 pixels in portrait orientation and 480 pixels in landscape orientation.

2. Specify meta data for viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Here, I am not specifying any width because I am using a fluid layout. Setting the user-scalable property to 0 (false) ensures that the user isn’t able to zoom in or out the website. Refer to Safari HTML Reference – Supported Meta Tags to see any other meta tags that you might want to use.

3. Create an icon

This is very much like a favicon that will be used when the user add your website to their home screen. Use the following code to specify a custom icon. The icon should be at least 57×57 pixel.

<link rel="apple-touch-icon" href="/iphone.png" />

An example of apple-touch-icon for Facebook

An example of apple-touch-icon for Web Development Blog

4. Putting it altogether

Add all of the above to the <head> section of your website.

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

For WordPress (template specific)

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="<?php echo bloginfo('template_url'); ?>/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="<?php echo bloginfo('template_url'); ?>/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

A few things to note

• The overflow CSS property does not work very well on iPhone. The scrollbars aren’t displayed but you can use two fingers and scroll across the area.
• This solution does not make the website light-weight because all elements on your website are still loaded. However, it does look neater and cleaner because many elements are hidden via CSS using display: none.
• The ideal solution is to develop a special version of the website for iPhone using mobile detection script and essentially reduces the bandwidth required to load the website on mobile devices.
• Have a look at a few websites that are optimisied for an iPhone for an inspiration. View this blog on an iPhone, check out iBloggr theme (WordPress iPhone Theme) or view demos of these mobile templates.

Recommended books

• Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa
• Beginning Smartphone Web Development: Building Javascript, CSS, HTML and Ajax-Based Applications for iPhone, Android, Palm Pre, Blackberry, Windows Mobile and Nokia S60
• Developing Hybrid Applications for the iPhone: Using HTML, CSS, and JavaScript to Build Dynamic Apps for the iPhone

Read Making a website iPhone-friendly using CSS on Web Development Blog!

<li<?php if (is_page('gallery')) : echo ' class="current_page_item"'; endif; ?>><a href="gallery/">Gallery</a></li>

Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element for the currently viewed page.

Read Highlight the current page link in WordPress on Web Development Blog!