How to Create Optimized Landing Pages that Convert?

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time.

How to write HTML css code for Emailers?

Many of them are asking me, how to write html css code for emailers? Do it have any formates? On my view, i say yes it has a format to write. Now a days emailers are playing a majore role to promote their products or web pages in order to increase their conversion rate. Report says that a neat simple text mailers are making lots of conversions.

There are two types of mailers. One is text mailer and another one is image based mailer. Text mailers are given most important than image mailer, coz text mail can have the users glance that what he wants. But in image mailer unless the user clicks the display images he cannot view the mail. Most of the mail engine's like Google, Yahoo will not show the images until the user click the display images. This may get user get irritated and without opening the mail he will delete it. Make sure that your mailer will not fall in their Junk box.

Format for writing E mailers
A basic html and css code writing is enough for writing E mailers. Like tables and inline style is needed. You cannot apply any css file to the emailer. While writing html code, make sure that you should not use positions, backgrounds, negative margins and also padding (in cases). You must reset your css before starting an element.

Email Compatibility
Most of the companies are looking for email compatibility for all emailers just like browser compatibility. Most of them are Gmail, Yahoo, Sify, Microsoft Outlook express, Hotmail etc.. Make sure that your code is compatible for the above mentioned email services. So please use basic html and css tags in order to render properly in all these services.

Note:
Make sure that you add a link on the top of the emailers saying that cannot view, please view it in an html format. So that they can view to page in a browser, if they have problem in opening in email. And also add disclaimers like unsubscribe(if needed) at the end of the footer.

Nifty rounded corners using html and css

Rounded border
HTML Code:

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me.

Vertical align text in floating div using css

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:

It works! Vertically Center Align!

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help!

CSS Image optimization

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy.
 
Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

CSS Sprites

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:

You can see the GOOGLE sprite images, how it was created and called using css bacground.








.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you.

Difference between HTML,DHTML and XHTML

* HTML - HyperText Markup Language
* DHTML - Dynamic HyperText Markup Language
* XHTML - eXtended HyperText Markup Language


The first is the basic markup language used to create web pages. The current (and last) version is HTML 4.01, as specified by the W3C (World Wide Web Consortium).

The second is an unoffical name(DHTML). It normally means HTML combined with JavaScript and CSS to provide greater response to user action (such as mousing over an image and triggering some event like the appearance of a menu).

The third is the future (and it's here now). XHTML 1.0 is HTML reformulated according to the rules of XML (eXtensible Markup Language). It's almost identical to HTML 4.01, but follows stricter rules, such as all tags being in lowercase, no missing end tags, all attributes in quotes, etc.

The reason we use XHTML in Foundation Dreamweaver MX 2004 (and in all recent foED books) is to help you build sites that adhere to the latest standards, so there is less chance of them becoming obsolete in the future. XHTML cannot do anything *extra*, but learning to build sites using the stricter rules that it follows means you are less likely to build sites that fall apart in new browsers.

Multiple Buttons in a single image Verticaly and Horizontally

HTML codings

<br /> <br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <br /> <title>Untitled Document</title> <br /> <link href="css/css.css" type="text/css" rel="stylesheet" /> <br /> <br /> <br /> <body> <br /> <div id="selBodyContent"><br /> <br /> <div class="clssubheader"><br /> <div id="navigation"><br /> <div class="home"><a title="Artists" href="#"></a></div><br /> <br /> <div class="articles"><a title="Home" href="/articles/"></a></div><br /> <div class="rss"><a title="Data" href="#"></a></div><br /> <div class="contact"><a title="Upload" href="#"></a></div><br /> <div class="rss1"><a title="Inbox" href="#"></a></div><br /> <div class="contact1"><a title="Search" href="#"></a></div><br /> <br /> </div><br /> </div><br /> <div class="sidebar2"><br /> <div class="clsSubMenu"><br /> <br /> <ul><li class="clsArtHome"><a href="#">Artist Home</a></li> <li class="clsStatus"><a href="#">Status</a></li> <li class="clsMusic"><a href="#">Music</a></li> <li class="clsBillboard"><a href="#">Billboard</a></li> <li class="clsPhotos"><a href="#">Photos</a></li> <li class="clsBlog"><a href="#">Blog & Announcements</a></li> <li class="clsFrients"><a href="#">Friends</a></li> <li class="clsFans"><a href="#">Fans</a></li> <li class="clsComments"><a href="#">Comments</a></li> <li class="clsMessage"><a href="#">Message</a></li> <li class="clsProfile"><a href="#">Profile</a></li> <li class="clsShow"><a href="#">Shows</a></li> <li class="clsAccount"><a href="#">Account</a></li> <li class="clsSupport"><a href="#">Support</a></li> </ul><br /> <br /> <p>try<span>welcome</span></p><br /> <br /> </div><br /> </div><br /> </div><br /> </body> <br /> </html> <br />

Css codings

<br /> #selBodyContent <br /> { <br /> <br /> margin:0 auto; <br /> width:980px; <br /> * height:975px; <br /> height:935px; <br /> background:repeat-x #fff; <br /> <br /> } <br /> .clsClearFix <br /> { <br /> overflow:auto; <br /> zoom:1; <br /> } <br /> * html .clsClearFix <br /> { <br /> height:1%; <br /> overflow:visible; <br /> } <br /> <br /> /* One image multiple buttons*/ <br /> <br /> #selBodyContent <br /> { <br /> <br /> margin:0 auto; <br /> width:932px; <br /> * height:975px; <br /> height:935px; <br /> background:repeat-x #fff; <br /> <br /> } <br /> /*-- Hacks used for floating problem --*/ <br /> .clsClearFix <br /> { <br /> overflow:auto; <br /> zoom:1; <br /> } <br /> * html .clsClearFix <br /> { <br /> height:1%; <br /> overflow:visible; <br /> } <br /> .clssubheader <br /> { <br /> width:932px; <br /> height:72px; <br /> <br /> } <br /> <br /> <!--Multiple buttons in a single image starts--> <br /> #navigation <br /> { <br /> <br /> text-align:center; <br /> <br /> } <br /> #navigation a:link, .navigation a:active, .navigation a:visited <br /> { <br /> color:#C39C70; <br /> display:block; <br /> float:left; <br /> font-size:90%; <br /> font-weight:bold; <br /> <br /> text-align:center; <br /> text-decoration:none; <br /> } <br /> #navigation a <br /> { <br /> <br /> height:72px; <br /> float:left; <br /> text-align:center; <br /> display:block; <br /> color:#c39c70; <br /> text-decoration:none; <br /> font-weight:bold; <br /> font-size:90%; <br /> background:url(../images/image-a.jpg) no-repeat; <br /> } <br /> #navigation a:hover <br /> <br /> { <br /> <br /> margin-right:0px; <br /> height:72px; <br /> float:left; <br /> text-align:center; <br /> display:block; <br /> color:#c39c70; <br /> text-decoration:none; <br /> font-weight:bold; <br /> font-size:90%; <br /> background:url(../images/image-a-hover.jpg) no-repeat; <br /> } <br /> #navigation .home a <br /> { <br /> background-position: 0px 0 ; <br /> width:95px; <br /> } <br /> #navigation .home a:hover <br /> { <br /> background-position: 0px 0; <br /> width:95px; <br /> } <br /> #navigation .articles a <br /> { <br /> background-position: -110px 0; <br /> width:100px; <br /> } <br /> <br /> #navigation .articles a:hover <br /> { <br /> background-position: -110px 0; <br /> width:100px; <br /> } <br /> #navigation .rss a <br /> { <br /> background-position: -220px 0; <br /> width:145px; <br /> } <br /> #navigation .rss a:hover <br /> { <br /> background-position: -220px 0; <br /> width:145px; <br /> } <br /> #navigation .contact a <br /> { <br /> background-position: -370px 0; <br /> width:160px; <br /> } <br /> #navigation .contact a:hover <br /> { <br /> background-position: -370px 0; <br /> width:160px; <br /> } <br /> #navigation .rss1 a <br /> { <br /> background-position: -550px 0 ; <br /> widtH:245px; <br /> } <br /> #navigation .rss1 a:hover <br /> { <br /> background-position: -550px 0 ; <br /> widtH:245px; <br /> } <br /> <br /> <br /> <br /> #navigation .contact1 a <br /> { <br /> background-position: -815px 0; <br /> widtH:120px!important; <br /> } <br /> #navigation .contact1 a:hover <br /> { <br /> background-position: -815px 0; <br /> widtH:120px!important; <br /> } <br /> <br /> /*Multiple buttons in a single image s*/ <br /> <br /> <br /> .clsSubMenu{ <br /> width:275px; <br /> } <br /> .clsSubMenu ul{ <br /> padding:5px 50px 0 18px; <br /> line-height:28px; <br /> } <br /> .clsSubMenu ul li{ <br /> background:url(../images/clsBlogTable-bottomBorder.gif) repeat-x bottom left; <br /> list-style:none; <br /> padding:5px 0; <br /> } <br /> .clsSubMenu ul li a{ <br /> outline:none; <br /> text-decoration:none!important; <br /> color:#646464; <br /> } <br /> <br /> .clsSubMenu .clsArtHome a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 0; <br /> padding:5px 0 5px 40px; <br /> } <br /> .clsSubMenu .clsArtHome a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 0; <br /> padding:5px 0 5px 40px; <br /> } <br /> <br /> .clsSubMenu .clsStatus a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -55px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsStatus a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -55px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsMusic a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -83px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsMusic a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -83px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsVideo a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -109px; <br /> padding:5px 0 2px 40px; <br /> } <br /> .clsSubMenu .clsVideo a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -109px; <br /> <br /> <br /> padding:5px 0 2px 40px; <br /> } <br /> .clsSubMenu .clsBillboard a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -135px; <br /> padding:5px 0 2px 40px; <br /> } <br /> .clsSubMenu .clsBillboard a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -135px; <br /> padding:5px 0 2px 40px; <br /> } <br /> .clsSubMenu .clsPhotos a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -161px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsPhotos a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -161px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsBlog a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -187px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsBlog a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -187px; <br /> padding:5px 0 0 40px; <br /> } <br /> <br /> .clsSubMenu .clsFans a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -211px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsFans a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -211px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsFrients a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -238px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsFrients a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -238px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsComments a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -270px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsComments a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -270px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsMessage a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -292px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsMessage a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -292px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsProfile a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -316px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsProfile a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -316px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsAccount a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -344px; <br /> padding:5px 0 2px 40px; <br /> } <br /> .clsSubMenu .clsAccount a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -344px; <br /> padding:5px 0 2px 40px; <br /> } <br /> <br /> .clsSubMenu .clsShow a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -373px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsShow a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -373px; <br /> padding:5px 0 0 40px; <br /> } <br /> .clsSubMenu .clsTransaction a{ <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -25px; <br /> padding:4px 0 10px 40px; <br /> } <br /> .clsSubMenu .clsTransaction a:hover{ <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -25px; <br /> padding:4px 0 10px 40px; <br /> } <br /> .clsSubMenu .clsSupport{ <br /> border-bottom:0; <br /> background:none!important; <br /> } <br /> .clsSubMenu .clsSupport a{ <br /> <br /> background:url(../images/sidebar-menu.jpg) no-repeat 0 -399px; <br /> padding:5px 0 3px 40px; <br /> } <br /> .clsSubMenu .clsSupport a:hover{ <br /> <br /> background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -399px; <br /> padding:5px 0 3px 40px; <br /> } <br /> <br /> p{ <br /> background:#000000 none repeat scroll 0 0; <br /> color:#0099FF; <br /> font-family:Tahoma,"Trebuchet MS",Arial,serif; <br /> font-size:18px; <br /> font-size-adjust:none; <br /> font-stretch:normal; <br /> font-style:normal; <br /> font-variant:normal; <br /> font-weight:bold; <br /> line-height:25px; <br /> padding:0 0 0 10px; <br /> position:relative; <br /> } <br /> span{ <br /> color:#FFCC00; <br /> font-family:Arial,serif; <br /> font-size:17px; <br /> font-size-adjust:none; <br /> font-stretch:normal; <br /> font-style:normal; <br /> font-variant:normal; <br /> font-weight:bold; <br /> line-height:normal; <br /> padding:5px 0 0; <br /> position:absolute; <br /> right:10px; <br /> } <br />

Horizontal Buttons image:Before Mouseover

Horizontal Buttons image:After Mouseover

Vertical Buttons image:Before Mouseover

Vertical Buttons image:After Mouseover