Web Development Blog » xHTML

How to code an HTML Email Newsletter

eisabai — Mon, 31 May 2010 06:19:58 +0000

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

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

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

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

Latest News from the Web Development Blog

5. Inserting a line between two blocks of text

	
		
			
				First block of text.
			
		
		
			
				Second block of text.

6. Inserting and floating an image to the left

	
		
			
				
			
			
				Text next to the image
			
		
		
			
				Copyright text

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

	
		
			
				Some text goes here
				Read more

8. Changing a link color

Read more

9. Adding a border around the content area

10. Opening a link in a new window

Go to Google

Putting it altogether

Latest News from the Web Development Blog

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.
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.
Read more

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.

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

How to style a Submit button in CSS – Example 2

eisabai — Tue, 09 Mar 2010 01:31:06 +0000

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river

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

CSS

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

#button span {
	display: none;
}

Read more using jQuery live event

eisabai — Mon, 14 Sep 2009 01:53:31 +0000

The main purpose of this code is to have “Read more” for a long block of text (eg: comments) without having to separate the text into two div blocks and then use toggle to show/hide the 2nd block. This code simply uses CSS overflow:hidden property to hide long block of text. jQuery live event is used to ensure it works for content loaded using AJAX.

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


	
		
		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.
		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. 
		
		more
	

	
		
		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.
		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.
		
		more

Recommended Books on jQuery

jQuery Cookbook: Solutions & Examples for jQuery Developers

jQuery in Action

Framebar (like diggbar) example in html and css with no javascript

eisabai — Fri, 28 Aug 2009 03:26:56 +0000

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.




framebar example by Web Development Blog






Web Development Blog

Change the arrow into a hand when hovering over ‘Submit’ button

eisabai — Tue, 30 Jun 2009 05:59:29 +0000

HTML

CSS

#submit {
  cursor: pointer;
}

How to display a different header image for different pages in WordPress

eisabai — Thu, 25 Jun 2009 12:06:05 +0000

In header.php file of my WordPress theme, I have the following code to display a different header image for different pages.



/images/"
alt="" />

Highlight the current page link in WordPress

eisabai — Tue, 26 May 2009 03:00:42 +0000

If you are hard-coding your navigation menu in WordPress rather than using wp_list_pages() template tag, you will need to add a class manually in order to highlight the current page it is on.

>Gallery

Note: wp_list_pages() template tag automatically add current_page_item class to the

element for the currently viewed page.

Fieldset and Legend bug in IE8

eisabai — Tue, 19 May 2009 03:03:34 +0000

Problem in IE8:

The upper half of the

border goes missing. This problem has been discussed here and shown here.

HTML:


  
    Login
    Username
    
    Password

CSS:

fieldset {
	border: 1px solid #333;
}

legend {
	display: none;
}

The workaround:

It looks like the problem occurs only when you set the to display: none in CSS. To solve this, we will need to add a span element inside the legend and set it to display: none and remove display: none from legend.

Updated HTML:

    Login

Updated CSS:

legend {
}

legend span {
	display: none;
}

Open link in a new window using jQuery

eisabai — Tue, 28 Apr 2009 01:38:55 +0000

HTML:

Google

Javascript:

$(document).ready(function() {
    $("a[rel=external]").attr('target', '_blank');
});

$(document).ready(function() {
    $('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
    });
});

sIFR vs FLIR – Font Replacement Techniques

eisabai — Mon, 27 Apr 2009 01:20:42 +0000

sIFR

sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.

Pros

Looks nice
Does not require a server side language
Text created with sIFR can be copied/selected
Graceful degradation (If flash is not installed, it will just display normal text)
Works well with screen readers

Cons

Not easy to configure
Not easy to make font adjustments
Requires Flash installed on client’s browser
Can be slow if there are too many sIFR elements on a single page

Website | Demo

FLIR

FLIR stands for Facelift Image Replacement. FLIR uses PHP and Javascript to generate text into images with your desired font and replaces them on the fly.

Pros

Looks nice
Relatively easy to configure
Does not require Flash

Cons

Text cannot be selected/copied
Uses a server side language (PHP) to generate images and therefore requires a server with PHP
Requires GD library on the server
Slow if there are too many FLIR elements on a single page

Website | Demo

My two cents

These techniques are good alternatives to using normal image replacement techniques with CSS for websites that use CMS and require content editors to update text and headings. However, they should be used sparingly as there is always an issue with speed and bandwidth. For example, it is ok to use these techniques for headings but not for body content. After all, websites should not only look pretty, but also accessible and usable. I prefer sIFR to FLIR because although it is harder to implement, it does not require a server side language, and looks nicer. It also degrades gracefully which is an important factor in ensuring a website’s accessibility.