In this article, I am writing by summary from the article that posted on this URL http://www.sitepoint.com/code-html-email-newsletters/

There are important to note is that Mail Template is not going to show on web browser, but Email Client. Mail clients are light years behind the eight-ball in terms of CSS support, which means that we must resort to using tables for layout if we really want our newsletters to display consistently for every reader

Whether you choose to code your HTML email by hand (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email:

•     Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
•     Use inline CSS to control other presentation elements within your email, such as background colors and fonts.

1: Use HTML Tables for Layout

Recommended to use one column or two column layout.

• For a two-column layout, create one table each for the header, the two center content columns, and the footer — that’s three tables in all. Wrap these tables into another container table. Use the same approach for single-column layouts, but give the content table one column. This approach is especially suitable if the design of your email contains images that are broken up over multiple table cells. Otherwise, a single table with td rows for its header (with colspan="2" if the design uses two columns), content, and footer should display fine in all but Lotus Notes email software.
• Use the attributes within the table and td tags to control the table’s display. For example, setting border="0", valign="top", align="left" (or center, if that suits the design), cellpadding="0", cellspacing="0", and so on. This primarily helps older email clients to display the email in a (barely) acceptable way.
• Even if the design of your email doesn’t include a border around your table, you might find it helpful during development to set border="1" to help with the debugging of any problems that arise with the internal alignment of tr and td tags. Change it back to border="0" for testing and production.

 

2: Use Inline CSS

• CSS style declarations appear below the body tag, not between the head tags.
• No CSS shorthand is used: instead of using the abbreviated style rule font: 12px/16px Arial, Helvetica, you should instead break this shorthand into its individual properties: font-family, font-size, and line-height.
• spans and divs are used sparingly to achieve specific effects, while HTML tables do the bulk of the layout work.
• CSS style declarations are very basic, and do not make use of any CSS.

 Important Note:

• Sometimes, a switch from percentage widths to fixed widths is needed. While this is not ideal — because readers can and do resize their email windows while reading — sometimes, using a fixed width is the only way to have a layout to display properly in multiple email clients.
• If there’s a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that doesn’t work, apply CSS margin and padding attributes. HTML spacing works better with older email software.
• Image displacement can occur when a td cell is closed right below an img tag. This is an ancient HTML problem. Putting the tag right after (on the same line as) the img tag eliminates the annoying and mystifying 1-pixel gap.

• Avoid using JavaScript. Most email software will disable it anyway.
• If an image is sliced up and spread across several HTML table cells, test the email using many test accounts. Sometimes, it might look great in Outlook but be shifted by one or more pixels in Hotmail and other services. Also consider making the image a background image on a new HTML table that encases all of the table rows and columns that would display parts of your background image; this often achieves the same effect as slicing an image up, but uses less code and can provide better results (see below). Note that Outlook 2007 does not display background images; be sure to test your email code with your target email software.
• For background images, use the table’s background attribute instead of using CSS. This works more consistently across email software than other potential solutions.
• Store the email images on a web server — preferably in a folder that’s separate from your web site’s images (for example, in a folder called /images/email), and don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to web sites.
• Be sure all your images use the alt, height, and width attributes. Setting values for these attributes improves results in Google Mail, as well as maintaining your layout when a reader has their images turned off. Note, however, that Outlook 2007 does not recognize the alt attribute.
• Use the target="_blank" attribute for the a tags, so that people who read with webmail services don’t have the requested page appear within their webmail interface.
• While a 1×1-pixel image can be used to force spacing to create a precise email layout, spammers often use 1×1-pixel images to determine if their email has been opened. As such, using this practice will increase the likelihood that your email is classified as spam.
• Similarly, avoid using a large image "above the fold" in the email. This is another classic spammer practice and may cause your email to be interpreted as spam.

(Note for old email client)

• Define the background color in a td cell with the bgcolor attribute, not the CSS style.
• As noted above, use the background attribute in the td cell for background images instead of using CSS. One side-effect of this approach is that the background image can be made as tall as needed — if the content used in your email template is likely to vary in size, using an extra-tall background image in this way allows the height of the email shrink or expand, depending on the height of the copy, from one email to the next. Remember, though, that Outlook 2007 ignores background images completely.
• If it works better, use the padding declaration to control margins within a td cell. The margin style does not work in these cells, but padding does.
• If you need a border around a td cell, keep in mind that Google Mail displays a border around a td cell when it’s defined in a div, but not when it’s defined as a border style in a td tag.
• If you need a light-colored link against a dark background color, put the font definition in the td cell (so it applies to p and a tags equally) then add a color: style to the a tag.
• If the p and a fonts appear to be different sizes, wrap the a tag in a p tag.
• Google Mail aggressively uses the right-hand column of the Google Mail user interface, which squeezes the HTML email into the center panel. Be sure the padding style in the content tds is set to 10 pixels all round, so that text does not hit against the left and right edges.
• When testing an HTML email with a Google Mail account, it’s likely that you’ll find that one or more font styles are missing in the td, h1, h2, p, a, and other tags. Inspect every font carefully to make sure Google Mail displays the fonts correctly.

Display3D ... Add latest flash player package to Project Library Goto http://www.adobe.com/support/flashplayer/downloads.html Find: PlayerGlobal (.swc) , the click on link below to download swc Copy swc to project folder, then open project with FlashDevelop , then right click Add to library. And now you can use Display3D class in your Flash Application. [notice]: refining

In this post, I would note the way to cache resources for offline support. This is useful, when we want to build application for iphone or android, our user just visit our website and they can add our built application to home screen, they (users) can launch application when they don't have internet connection. Here is the note: - Create file called chace.manifest in the same location of your index.html. - In that file, list all resources that you need to load base process for application

CACHE MANIFEST

CACHE:
icon.png
index.html
phone_startup.png
tablet_startup.png
public/app.css
lib/touch/sencha-touch.js
lib/touch/resources/css/sencha-touch.css
jsons/icons.json
jsons/lodgingsearch.json
images/activities_icon.png
images/choice_icon.png
images/detail.png
images/icon-shadow.png
images/icons.png
images/lodging_icon.png
images/logo.png
images/map_icon.png
images/restaurant_icon.png
images/service_icon.png
images/special_icon.png
images/star0.png
images/star1.png
images/star2.png
images/star3.png
images/star4.png
images/star5.png
images/stars.png
app/app.js
app/routes.js
app/controllers/AppController.js
app/controllers/Album.js
app/views/HomeView.js
app/views/Viewport.js
app/views/subview/LodgingSearchList.js
app/views/subview/Map.js
app/views/subview/OrbitMenu.js
app/views/subview/RestaurantSearchList.js
http://maps.googleapis.com/maps/api/js

NETWORK:
*

The above code, you may see there are two block: CACHE and NETWORK. all resource that need to be load offline you need to list in CACHE block, another resource that you allow your application to load from online server should list in NETWORK, or just put star sign (*) to tell the application that all otherwise have to use network connection. In this case if your application work with data store and store offline, you have to use NETWORK:* . - Something to add to index.html

<!doctype html>
<html manifest="chace.manifest">
<head>
...

- add type to .htaccess

AddType text/cache-manifest manifest

[continued on testing] Post about localStorage , please click here!

Sencha Touch is java framework to build web mobile application. In this post I will note about how to store data in LocalStorage this take advantage to make application work offline.

We need to create 2 data store object as below:

store to load data from online server.

this.store = new Ext.data.Store({
            autoLoad: true,
            model: 'Icons',
            proxy: {
		        type: 'ajax',
		        url: 'jsons/icons.json',
		        reader: {
		            type: 'json',
		            root: 'icons'
		        }
		    }
        });

store to save data from store that load form online server to localStorage

this.offlineStore= new Ext.data.Store({
        	model: 'Icons',
        	proxy: new Ext.data.LocalStorageProxy({
        		id:'data',
        		proxy:{idProperty:'id'}
        	}),
        	autoLoad: true,
        	autoSave: true
        }); 

Create event handler to catch if application is connect to server or cannot connect to server. 1. When application connected to the server, load event of object store will fire. so we will update data from store to offlineStore

this.store.on('load',function(store,records,opts){
            	console.log("load from online");
            	this.offlineStore.proxy.clear();
            	this.store.each(function (record){
            		var iconEach = this.offlineStore.add(record.data)[0];
            	},this);
            	this.offlineStore.sync();
            	    
            },this);

2. When application can not connected to the server, exception event of object store will fire, so we set timeout to the store to load data from server, if timeout is reach , store still cannot load data, so we load data from offlineStore instead.

        this.store.proxy.addListener('exception', function (proxy, response, operation) {
        		console.log("load from offline");
        		this.orbitIcons.bindStore(this.offlineStore);
        		this.offlineStore.load();
		        		    
    	},this);

The process of this should illustrate as image below: