Yellow Web Solutions

How to design a perfect landing page

admin — Mon, 23 Jan 2012 14:01:22 +0000

Design a landing page is slightly different from designing a web page.

But what is a landing page?

If you goggle the term you will got a wiki definition:

“..landing page - is a single web page that appears in response to clicking on an advertisement. The landing page will usually display directed sales copy that is a logical extension of the advertisement or link.”

There are two types of landing pages: reference and transactional. The reference type is the on that is build on AIDA principles:

A – Attention (Awareness): attract the attention of the customer.
I – Interest: raise customer interest by focusing on and demonstrating advantages and benefits (instead of focusing on features, as in traditional advertising).
D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
A – Action: lead customers towards taking action and/or purchasing.

OK, this is the definition but how to design it?

I found some inspirational guidance in : anatomy of the landing page

and the perfect example:

In order to achieve these principles you must have:

1 - Page headlines – clear an consist

The leading page heading is the first thing visitors will read and the headlines should not confuse or bore, but compel a visitor to take a closer look

2 - Impeccable grammar and easy to understand language

Do not use complicated sentence, all texts need to be concise and clear.

3 - Taking advantages of trust indicators

There are a lots of effective way to gain trust – incorporate testimonials, press mentions, guarantee seals, 3^rd party trust and security certification.
Use image and videos

4 - Use strong call to action

Is it crucial for the visitors to know what to do , after they read headlines

5 - Buttons and call to action should stand out

Identify keywords that people are interested about – free, new, buy, download now

6 – Do not use to many links

To many link will distract the user and simplicity is the key

7 – Keep it in one screen

The most important part of the page should be above the fold of the screen, so no scroll-down to see all the important things
Here will call-to-action button so users should not scroll down to it

8 – Optimize landing page for conversion over time.

Run A/B tests, change copy, images, video and cal-to-action colors to see what users resonate with.
- Yellow – optimistic and youthful
- Used to grab viewer attention
- Orange – aggressive, use in call-to-action and attention grabber
- Red – energy, clearance sale
- Pink – romantic and feminine – use form feminine and young girls products
- Blue – trust and security, often use by banks and business
- Purple – gentle and calm, is associated with anti-aging products and services
- Green – is associated with wealth, and because is the easiest color for the eye to process it is used in finance or entertainment
- Black – powerful and smooth, is seen as a luxurious and sophisticated

9 – Social network sharing buttons

Use as much as you can the social network sharing

CSS3 basic stuff coding

admin — Wed, 07 Dec 2011 13:07:14 +0000

The basic stuff of CSS rule starts with a selector, that could be an ID or a class, and then in the curly brackets you have the property with the value:

selector { property : value; }

The specifications for CSS3 are still under development on W3C (World Wide Web Consortium – the organization that sets the standards in web development, including HTML and CSS – www.w3.org) and to avoid confusion and future compatibility with CSS properties, browsers developers introduce browsers-specific properties.

For Firefox browser:
selector {-moz-property: value;}

For Internet Explorer:
selector{ -ms-property: value}

For Chrome and Safari:
selector{-webkit-property: value}

For Opera:
selector{-o-property: value}

So and example will be :

#rotated_box
{
transform: rotate(4deg);
-ms-transform: rotate(4deg);  /* IE 9 */
-moz-transform: rotate(4deg);   /* Firefox */
-webkit-transform: rotate(4deg);  /* Safari and Chrome */
-o-transform: rotate(4deg);  /* Opera */
}

Here you can find the entire list of CSS3 properties and browsers compatibility:
http://www.w3schools.com/cssref/css3_browsersupport.asp

CSS Hacks notations for IE 6, 7 and 8

admin — Sat, 26 Nov 2011 15:42:35 +0000

Like it or not, the CSS coding is different for browsers, IE in particular.
As a HTML/CSS coder I have been put in a situation to deal quickly with CSS bugs that appear mostly in Internet Explorer, no matter what version it was: IE6, IE7 or IE8.
The elegant way (and long way I should say) to deal with this type of problem is to write separate CSS files for IE 6, IE 7and IE 8 if is necessary and put a conditional statement in the header of your index page, like in example bellow:

Problem solved!
BUT… if you want to make little modifications on a value you have to go in 3 different files, to modify the values and I find this time consuming.
The easiest way is to use IE hacks notations in your main CSS file, for different IE.

Example:

/* for all the browsers or the standard way */
 div {
margin: 0px 10px 10px 10px;
}

For Internet Explorer 8 – put a “\0/” at the end of the CSS property;

 /* IE8   */
 div {
margin: -3px 10px 10px 10px;  \0/;
 }

For Internet Explorer 7- put an “*” in front of the CSS property;

/* IE7 */

div {
*margin: -3px 10px 10px 10px;
 }

For Internet Explorer 6 – put an “_” in front of the CSS property

/* IE6 */
div {
_margin: -3px 10px 10px 10px;
 }

The observation I have to make is : this CSS will not pass the validation on : http://jigsaw.w3.org/css-validator/