Monthly Archives: April 2017

Tip for you who like Web Designer

Learn (at least) some basic HTML.

Whenever I suggest this to beginners they always ask why they should learn to code HTML when we have programs like Dreamweaver and FrontPage that do it all for you? The short answer is that they don’t, at least not all the time. While these programs are very useful (and I highly recommend that all web page designers learn to use one), they do have their limitations where it can be easier to hand code the HTML yourself. If you don’t know HTML, this can be a problem. You don’t have to learn everything there is about HTML, but you should learn the basics and some key tags that are used all the time:

<a href=””></a> : The link tag is the most important tag there is. HTML is all about linking documents (web pages) together and as such they form the basis of making the web work.

<table> </table> : The table tag is used to create tables. Originally it was invented to present data (like a stock report) in tabular form. Soon after, inventive HTML designers started to use them to format the entire web page by inserting not only text but also images into tables. Today 99% of web pages are formatted using tables.

<div></div> : Div tags allow you to demark a portion of your page so that you can do things to it. Another way of saying ‘demark a portion’ can be ‘to put into a container’. Once a part of your web page is in this <div> container, you can do all kinds of stuff like style it, animate it, make it visible or invisible etc … Div’s represent the next generation of formatting HTML pages that is in many ways superior to tables.

Learn one *wysiwyg program like DreamWeaver or GoLive and learn it well.

Each of these programs has its advantages and you may be tempted to jump from one to another because of some neat thing that it does. Often you find when you are using the new program, that you miss features of the old one that you rely on. So you should stick to one and really learn it well. This will go a long way to making you a productive web designer.

Keep your web pages simple.

Once you start to understand how to make web pages, you will be tempted to go all out with animated gifs, rollover affects, and fancy designs. The problem with this is that it can easily lead to confusing pages for the viewer and hard to maintain sites for you. Web sites are always in need of changing and updating. You will be thankful when that inevitable day comes and you have an easy to update modular site to work with instead of an inflexible over-designed mess.

create Styling your web page.

A quick introduction to Cascading Style Sheets, a key tool for web designers.

I was recently asked about CSS on the killersites web design forum and liking what I wrote, I decided to use the post to begin this article.

CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages. An example of a style change would be to make words bold.

For example:

In ‘old school’ HTML, you would use the <b> tag like so:

  <b>make me bold</b>

This works fine, except that now, if you wanted to change all your text that you initially made bold to underlined, you would have to go to every spot in your page(s) and change the tag to the ‘underline’ tag.

Another disadvantage of ‘old school’ HTML:

Let’s say you wanted to make some text bold, change its font style Verdana and change its color to red – you would need a lot of code wrapped around the text:

    <font color="#FF0000" face="Verdana,
        Arial, Helvetica, sans-serif"><strong>This is text</strong></font>

This is verbose (too long) and contributes to making your HTML messy. With CSS, you can create a custom style elsewhere (thus separating the styling information from your HTML,) give it a unique name, and then ‘tag’ your HTML to apply the style properties.

This is the same text, now styled with CSS:

    <p class="myNewStyle">This is text</p>

To complete this ‘style operation’, we need to insert this code in between the <head></head> tags at the top of your web page:

   <style type="text/css">
<!--
      .myNewStyle {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #FF0000;
      }
      -->
</style>

This CSS code defines/creates the style we just applied to the text:

This is text

In the above example we include the CSS in the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page.

There are many times though, when you will be applying your styles to many pages – it would be a hassle to have to copy and paste your CSS code into each page.

Besides the fact that you will be cluttering up your page with redundant CSS code, you’ll also find yourself having to edit each of these pages if you ever want to make a style change.

Like with JavaScript, you can define/create your CSS style in a separate file that can be ‘linked’ to from within the page, where you want the CSS code to have effect.

Example:

   <link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

The above line of code links your external style sheet called: ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags of your web page.

CREATING AN EXTERNAL STYLE SHEET

To create an external style sheet, all you need to do is create a simple text document (on Windows you simply right-click and select new -> text document) and then change it from the file type ‘.txt’ to ‘.css’.

For example:

   style.txt becomes style.css

You change the file type by just changing the file names extension. The file name’s extension on Windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when, for example, you try to open it.

You probably guessed it, CSS files are just specially formatted text files … much in the same way HTML pages are.

There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.

When working with an external/separate CSS document, there are a couple of points to remember:

1. When you insert CSS code directly into the page itself, you need to wrap the CSS code in these tags:

 <style type="text/css">
   ... (CSS code goes here) 
     </style> 

2. When you place all your CSS code in a separate document, you should NOT include the above CSS wrapper tags in your CSS document – you just need to write out your CSS code.

You would just add your CSS code directly to the page like so:

.myNewStyle {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #FF0000;
    }
   .my2ndNewStyle {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #FF0000;
    } 
    .my3rdNewStyle {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 12pt;
      color: #FF0000;
    } 

In the above example, I’ve created a series CSS classes that can be applied to any HTML tag like so:

    <p class="myNewStyle">My CSS styled text</p>  

or

   <h2 class=”my3rdNewStyle”>My CSS styled text</h2>

You will notice that I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps, to a size that is preset in the browser (ex: 10 pixels).

When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!

In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:

   h1 { font-family: Garamond, "Times New Roman",
        serif; font-size: 200%; }

What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.

Here is another example of where I give the whole page bigger margins:

    body { margin-left: 15%; margin-right: 15%; } 

As you can see, you can redefine any tag and change the way it looks! This can be very powerful:

    div {
      background: rgb(204,204,255);
      padding: 0.5em;
      border: 1px solid #000000;
    }

Set in the above code, any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.

Color in CSS can be expressed in a few ways:

  1. In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
  2. In rgb -> rgb(204,204,255) is a light purple blue color.
  3. With named colors like: ‘red’ or ‘blue’

I typically use hex color since I am familiar with them, or I just use named colors. So the last example can be rewritten like so:

    div {
    background: green;
    padding: 0.5em;
    border: 1px solid #FF0000;
    } 

So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.

By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want when you know your codes. Luckily, many programs (like Dreamweaver) provide easy to use color pickers for you, so you don’t need to know the values for the code.

In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over effects without images:

    :link { color: rgb(0, 0, 153) } /* for unvisited
        links */
    :visited { color: rgb(153, 0, 153) } /* for visited links */ 
    :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ 
    :active { color: rgb(255, 0, 102) } /* when link is clicked */ 

The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images!

One important note with the above code: it is important that the style declarations/rules be in the right order: “link-visited-hover-active”, otherwise it may break it in some browsers. A good way to remember this order is “LoVeHAte”

CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must-learn tool for web designers. The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely.

A MINOR WARNING:

Like with many technologies, CSS has a lot of capability that most people will not need to use often – so don’t get caught in the trap of thinking that if there is some functionality/feature available, that you have to use it

30 Ways to Increase Your Website Conversion Rate

Getting traffic to your website is great, but if that traffic doesn’t convert, it’s almost useless. This article will outline 39 proven strategies for getting your visitors to take action, whether that’s filling out a form, handing over their email address or making a purchase.

1. Include as few fields as possible.

When asking for information in an email opt-in form, ask for as little information as necessary. Here’s an example of how using one additional form field decreased conversions by 11 percent.

2. Add a guarantee.

Include a no-questions-asked refund policy on all purchases. This reduces risk, and increased sales will usually more than make up for any returns.

3. Use tangible action verbs.

When testing out different calls to action, try using action language that spurs visitors to take action (for example, “grab yours,” “reserve your seat”)

4. Use testimonials.

Testimonials reduce risk and provide social proof. Use them on product landing pages as well as on your email opt-in landing page.

5. Clearly state the benefits of your product or service.

Listing the features of your product is important, but it’s even more important to tell potential customers exactly how your product will help them or solve their problem.

6. Pay careful attention to your headline.

Your headline is perhaps the single most important element of your landing page. Brainstorm at least 10 possibilities before choosing the strongest one.

7. Keep conversion elements above the fold.

Opt-in boxes and other conversion elements should be above the fold for optimal results.

8. Use video to humanize your brand.

Include a simple video on landing pages to show there’s a real person behind your brand.

9. Create dedicated landing pages for pay-per-click ads.

If you’re using AdWords or another form of PPC ads, be sure to send these visitors to a dedicated landing page (not your home page!).

10. Include subscriber or social-media follower counts.

Just like testimonials, including social proof helps reduce risk and increase conversions.

11. Incorporate strong calls to action (CTAs) into every piece of content on your site.

Let your readers know exactly what you want them to do next, whether that’s click a button, read a blog post or fill out a form.

12. Recommend related products.

Include links to related content or products to keep visitors engaged and on your site.

13. Include stock numbers.

If you have a tangible product, include the number of remaining stock with your product descriptions (for example: “Order now … only 3 left in stock”).

14. Lose the hype.

Most consumers are too savvy to fall for hype-based copywriting. Lose the hype, and focus instead on writing clear, compelling copy that helps your visitors make a purchase decision.

15. Test variations of your CTA button.

Your “buy now” or “order now” button may perform quite differently depending on where it’s placed, what color it is and how big it is. Test out several variations to see which ones perform best.

16. Tell visitors exactly what they’re going to get.

Provide visitors with absolutely everything they need to know about your product: What are the features and benefits? What does it look like? What are the possible uses? Who will benefit most from it? How will it be delivered?

17. Include a clear value proposition.

Tell potential buyers what’s special about your product. How is it different and better than every other, similar product on the market?

18. Give your visitors tunnel vision.

When creating a landing page, remove anything that could potentially distract your visitors, such as a navigation bar and other CTAs. Your landing page should be 100 percent about getting your visitors to take one, specific action.

19. Include a privacy statement on opt-in forms.

Your privacy policy can have a huge impact on your email conversions. In oneexperiment, changing the wording just slightly resulted in a 19 percent increase in conversions.

20. Get your visitors excited.

Use emotionally-charged language and amazing storytelling to get your visitors eager and excited to try your product.

21. Keep input fields optional.

f you must ask for numerous fields of information, keep as many as possible optional to increase the likelihood that visitors will complete the form. You can always ask for additional information later.

22. Meet the expectations of your PPC visitors.

If visitors are coming to your landing page via a PPC ad, make sure your ad copy is consistent with your landing page copy. Your ad should tell them exactly what they’ll find once they click through to your site.

23. Offer various payment options.

Believe it or not, not everyone wants to use Paypal. Consider offering a variety of payment methods to satisfy the preferences of all your potential customers.

24. Include consumer reviews.

There’s no doubt that consumer reviews are extremely influential in helping people make purchase decisions. In fact, according to a study by Zendesk, 88 percent of respondents said their buying decisions were influenced by positive and negative reviews.

25. Test out various color combinations on your landing pages.

Different colors can signify different things to different people (for example, light blue can be calming, while red can evoke feelings of stress or even anger). Test a variety of palettes to see which ones result in optimal conversion rates.

26. Use high-quality images.

Using generic, tacky stock photos can send the wrong message about your brand. Use professional-quality photos where possible.

27. Use CTA buttons rather than links.

Buttons are more obvious and more clickable, particularly when viewed on mobile devices.

28. Use a chat tool.

Offer live chat to help answer questions and alleviate any concerns potential customers may have.

29. Use directional cues.

Move your visitors’ attention to your most important on-page element through the use of arrows or other visual cues. Just be careful to stay tasteful — flashy red arrows generally don’t work like they used to!

Related: Everything You Need to Know About Using Videos on Your Website

30. Try a single column layout.

One experiment showed a 681 percent increase in conversions when changing from a double column layout.

A web designer’s secret weapon

A fast way to build quality web sites

Now that the web has matured, the experts have discovered what works and what doesn’t work when it comes to web site design. Out of this experience come web templates; web site designs that have been tried and tested.

As with building a house, there is no longer a need to reinvent the wheel with every project – today you can select a web design template and get your website online fast!

Don’t reinvent the wheel!

As a software architect and programmer, I can tell you that a core rule in that field is to not reinvent the wheel. This basically means that if someone else has built it already, you should use it! You are wasting your time and money trying to recreate things from scratch.

Fortunately you can now select from a huge collection of proven web site styles that you can use ‘out of the box’ or use the web site template as the foundation to your own creation.

My own experience

I’ve been creating web sites since 1994-95 and have seen and tried just about all the possible ways of approaching a web project.

In the early years we would create all our web sites from scratch; this was a slow, tedious and expensive process. Besides trying to make the web pages look good, you had to figure out how to make it work with all the browser and within the limits of your potential visitors’ computers:

  1. Will the web site end up being fast enough for people on slow modems?
  2. Will it work with Netscape and Internet Explorer?
  3. Can we fit all the required sections so it works in an 800×600 screen resolution?

In those days I was not to keen on website templates because I wanted to produce an ‘original web site’. But Ialways discovered that the web site ended up looking like other web sites already out there!

Why was this happening?

It happened (and still happens) because web developers have figured out what works … and they do it! In the same way that the automobile industry has figured out that a car seems to work best with four wheels, web designers over the years have figured out the best way to structure and design a web page. As such you’re going to see most web sites work with the same handful of proven designs and styles … given a project’s needs.

The web site designer’s point of view

If you try hard enough, you can probably come up with some funky style for a page with for example, a new wacky navigational menu. The problem is that everybody expects to see a web page layout follow certain basic rules; navigation sections have to be arranged in a certain way, links have to look a certain way … being consistent makes the web site easier for the visitor to use.

No worries, you can still be original within the context of a template; people do it all the time. The web site template serves as the framework for designers, where it eliminates the grueling structural work and frees you to develop the subtlety of the web site’s style.

With so many web site templates to choose from these days, you are almost guaranteed to find the basic style and layout you are looking for. You can then build off of that, speeding up the process – makes good sense for you and your clients!

The business point of view

Web site templates save you time and money; the production cycle of a web site project is at least cut in half when you use a web site template. Another advantage of using templates is that you can show the web site designers what you want rather than trying to describe it to them. The reverse is also true where the designer can show the client several templates that he/she can choose from – this alone will always be a great tool!

I have also found over the years that most people don’t really know what they want until they actually see it. Templates allows the business owner to identify what they really want in a web site and actually buy it right there and then. They can hand the template off to the web designer for the personalized touches.

Even the great artists develop a ‘template’ of their own

This is just a side note, but it may be worth considering:

Artists typically become known for their style, this style is consistently applied in their work and it defines their careers. Picasso is one such artist; if you look at any of his paintings, you can clearly see that it’s a Picasso.

Other examples are found in the music of the Beatles and the Rolling Stones; you may have never heard a particular song, but their styles are so well defined you instantly know whose song it is.

An artist’s style is really just a template of what works for them. In a sense, an accomplished artist creates his or her own design template and then applies it to their work.