CreateBetterWebsites.com

How to Translate Webpage Content

admin — Wed, 28 Jul 2010 19:37:24 +0000

Do you want to translate webpage content on your website to different languages? It’s a great idea to offer translation if your site caters to international visitors.

There is one very easy and simple way to do this using Google translate on your website. Visit the google translate site and follow the instructions.

You can choose all languages or specific languages if you like. For example if I want to translate webpage to only Russian then in the Google translate tool I choose specific languages and then just select Russian and English. Always add English as well. This way your user’s can go back to English as well.

It gives me the following code to copy and past on to translate this webpage to Russian.

And this is how it looks on your website. You can place it anywhere of course. Try it out and see how it works.

On this Strength Training site for example, you’ll see it on the top right column for every language. So user’s can translate all pages to any language.

NOTE: On this particular webpage the code above gets translated as well. Which I don’t want. But I don’t know how to avoid that. So if you are translating this and want to copy the code from here make sure you go back to English first then copy the code.

How to Build an E-Commerce Website

admin — Tue, 27 Jul 2010 22:21:48 +0000

So you want to sell online but you’re not sure where to begin or what you need to get started and get going. E-Commerce sounds like a scary word but it’s not.

With some careful planning and research anyone can setup an E-Commerce site.
You can end up paying anywhere from zero dollars to thousands of dollars to get started. It all depends on your needs and requirements.

Don’t worry though even If you’re on a low budget you have some great options. Before you build it do a little research to decide on a few things first. So what all do you need to get started?

There are 5 main things you must have to get up and running with your online store.

Domain Name: This is the first thing you need make sure you choose a domain name that reflect your business name well or something catchy and easy to remember.

Hosting Account: You’ll also need a place where you can store all the information, files, images, customer information etc that are used for your website. A hosting account is a server or computer that stores your files and serves them on the internet to your users.
The things to look for in a hosting account are how much space and bandwidth do they provide. Some hosting accounts also offer free shopping cart systems that can be setup with a click of a button.

Another thing to look for is if they offer SSL certificates. See below to learn what this is. Some hosts offer free shared SSL and also the option to buy your own.

Merchant Account: A merchant account is used to receive payments from the customers online. Some merchant accounts also allow you to process payments by phone as well. Paypal, Authorize.net, Google Checkout, Amazon are all good merchant account options.

Shopping Cart: A shopping cart is the framework or the interface by which customers can place their orders. These are the pages you see online when you purchase things. The include the products, your buy buttons, checkout and all that is needed to process and integrate your shopping cart.
There are many shopping carts out there making it difficult to choose one. Some hosts offer free shopping carts. Read the article on How to Choose a Free Shopping Cart.

Shared or Private SSL: Finally you need a way to make your payment pages and personal information pages secure (HTTPS). Notice when your buy online you are taken to a secure page to enter you payment information.
The address displayed in your browser’s url is proceeded by https instead of http. An SSL certificate allows you to serve secure pages (payment pages) over HTTPS instead of HTTP. This encrypts the data as it’s sent through the internet for processing and secures the entered information.

Without the SSL your customers wont trust you and will not buy from you. Make sure you payment system is secure.

Learning how to build an E-Commerce site can be a complicated or as simple task depending on what you need. If you’re not sure and are stuck you can always hire a pro to setup your store for you from start to finish. Make sure you setup a system that you can easily maintain yourself once it’s all setup.

Visit our Web Design page to see our rates for an E-Commerce site. If you are in need of something more unique don’t hesitate to contact us and ask for a quote.

CSS DIV Code Instead of Tables

admin — Mon, 26 Jul 2010 18:10:54 +0000

It’s always better to use CSS div code instead of tables for layout items in HTML. Use tables only if you have tabular data and lots of it. But if for example you just want to display a 1 row, two column item on your pages use div’s.

Here’s a n example.

This is the first column. I can put anything in here.

This is the second column and again I can insert anything in place of this text.

The rest of your content goes here below the two columns. This part needs to be styled to clear: both. See the code below for this.

Here’s the HTML Code for the above example:

This is the first column. I can put anything in here.

This is the second column and again I can insert anything in place of this text.

This is the rest of the content below the columns.

Here is the CSS code for the above;

#col1 {
width: 48%;
float: left;
font-weight: bold;
padding: 10px 0 10px 0;
}
#col2 {
width: 48%;
float: right;
font-weight: bold;
clear: right;
padding: 10px 0 10px 0;
}
#content-below {
clear: both
}

How to Accept Credit Cards on Your Website

admin — Fri, 11 Jun 2010 16:49:58 +0000

Growing Your Business – How To Accept Credit Cards on your Website

In the fast paced age of the internet, not accepting credit cards can be a death blow to a growing business trying to make a name for itself on the web. Customers are unwilling to send checks online when they can move on to the next merchant and pay by credit card. It is imperative that businesses that wish to grow and thrive learn how to accept credit cards online.

Decide on an Account Type

The first step is determining if your business will be using its own merchant account or using a third party merchant account. Each type has its own advantages and disadvantages.

To get your own account, your business will need to open a merchant account at a bank. Each country has its own requirements and restrictions. Your bank can give you more information about opening a merchant account. Using your own account adds a degree of professionalism to your website, but can come with a hefty start up cost, and the liability of accepting your own credit card transactions.

Third party merchants are a better choice for smaller businesses that lack the capital and infrastructure to handle their own transactions. A third party merchant handles all the back-end involved in processing credit card payments, but for a higher transaction fee.

Choosing a Merchant

If you’re setting up your own merchant account, you’ll be handling all credit card transactions yourself, and your local bank can walk you through the proper steps. If you choose to use a third party merchant, you’ll want to pick a company with a proven track record, good administration, and reliability. Here are a few of the more well known merchants.

Paypal: One of the forefathers of internet commerce, Paypal is both reliable and easy to use. Personal accounts cannot accept credit card payments, but Premier and Business accounts can, and per transaction, it’s cheaper than most other 3rd party merchants.

Amazon Store: The web store at Amazon gives the seller access to the customers from the Amazon search engine. They use a per month charge, but are reputable and recognizable.

Google Checkout: With prices comparable to Paypal, Google Checkout allows merchants to sell goods, both real and digital, as well as services and subscriptions.

CCBill: A powerhouse in the internet merchant market, CCBill offers security, reliability and professional support, but you pay for those features with a heftier revenue percentage.

CCNow: A 3rd party merchant for physical goods. They charge a retail margin of about 5% with small fees for extra services.

Setting up Your Shop

Most of the third party merchants offer pre-made forms that you can customize to fit the theme and layout of your website. Some merchants, like Amazon, allow you to create your entire site within the boundary of their main merchant site, saving you money on hosting services for your company.

Whether you choose a 3rd party merchant, or you decide to set up your own merchant account, it’s important that you use the most secure options available. More and more consumers are venturing online for their shopping needs. Customer trust is a valuable commodity, and any business looking to participate in e-commerce must learn how to accept credit cards online in a safe and secure way.

Vertical Collapsible, Expandable Menu

admin — Tue, 25 May 2010 23:39:49 +0000

A vertical collapsible, expandable menu is a great way to organize a large site and create a much more user friendly experience. A navigation menu is probably one of the most critical pieces in web design. So making your navigation subcats easy to find and all in one location can be a great way to help your user’s find things on your website.

In this article I show by example a vertical collapsible, expandable menu which is extremely easy to implement and can be great for organizing large navigation systems.

Start by organizing your menu subcats into categories and subcategories.

Menu Example

Click on the links below to expand and collapse the categories.

The first thing you’ll need is the Javascript code which collapses and expands the menu.

var myvar;
function menuinit() {
document.getElementById(‘m1′).style.display = ‘none’;
document.getElementById(‘m2′).style.display = ‘none’;
document.getElementById(‘m3′).style.display = ‘none’;
document.getElementById(‘m4′).style.display = ‘none’;
document.getElementById(‘m5′).style.display = ‘none’;

}
function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById(i).style.display = ‘none’;
myvar = ”;
}
else {
document.getElementById(i).style.display = ‘block’;
myvar = i;
}
}

if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, menuinit, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, menuinit );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
menuinit();
};
}
else
window.onload = init;
}

To add additional categories to this you’ll need to add to the Javascript as well. For example to add a sixth category to this menu, simply add the following line of code to the end of the menuinit() function.

document.getElementById(‘m5′).style.display = ‘none’;

You can add as many extra categories as you need this way.

The HTML code

Category 1

subcat 1a

subcat 1b

subcat 1c

subcat 1d

Category 2

subcat 2a

subcat 2b

subcat 2c

subcat 2d

Category 3

subcat 3a

subcat 3b

subcat 3c

subcat 3d

Category 4

subcat 4a

subcat 4b

subcat 4c

subcat 4d

Category 5

subcat 5a

subcat 5b

subcat 5c

subcat 5d

Download the files

The CSS File
The Javascript File

How to Use Robots Mets Tag on a Website

admin — Thu, 06 May 2010 19:09:31 +0000

The Robots Meta Tag is used mainly when you don’t want search engine spiders to index a webpage or to follow the links on a webpage. Another way to control this is through a robots.txt file. But here I’ll just discuss the Robots Meta Tag.

When a webpage is indexed in search engines it means that the page is in the Search Engines database. So when someone searches for keywords related to your indexed page, your page will show up in the Search Engine Results page. The follow directive tells the Search Engine to follow the links on that page as well.

The default behavior if this tag is not specified is for the search engines to index the webpage and to follow the links as well. So it’s not necessary and not recommended to add the below code to a page if you want it indexed and followed.

If you want a webpage indexed but don’t want the links on that page to be followed then you’d use the directive below. Generally if you have an outgoing link but don’t trust the link, then it’s wise to use the nofollow. To specify the nofollow for an entire page, use the Robots Meta Tag below. This would apply to all links on the page.

If you want specific links not to be followed, not all links on the page, then you wouldn’t use the above directive. Instead You can specify nofollow per link using the below link link tag example.

Contact Us

Most websites contain pages that we want the search engines to index so that internet surfers may find them when looking for information on our website. But there are times when you don’t want a page indexed.

For example you may create a website just to share family photos not with everyone on the internet but just with family and friends. Another example is when you create websites for your customers that you share only with customers and not with the public. In these cases it’s a good idea to add the Meta Robots Tags directive for noindex and nofollow like the example below.

Then there are cases where you don’t want a page to be indexed but you want the links to be followed. Good pages to do this on are utilities pages, like contact us, privacy policy, and terms of use pages. Use the below directive in these cases.

Sticky Note Like CSS Boxes To Add to Your Website

admin — Wed, 05 May 2010 05:36:43 +0000

Here are some examples of sticky note like CSS boxes you can add to your website. You can use them for quotes, for special ads, for sign up forms, free giveaways, etc. They can be used for anything you feel like needs to be highlighted in some way. They look pretty cool and grab some attention.

Each CSS floating box includes the CSS code and HTML code you can use. Just copy and paste it to your documents.

This is a cool looking sticky note css box and I can use this to place a special ad etc with some light weight code and no images. This has no borders or shadows and is just a plain jane box.

The CSS Code

.plane-sticky { padding: 10px; background: #FDFB8C; width: 200px; height: 200px; }

The HTML code

The text inside the box goes here

This CSS floating box has the text formatted a little like handwriting. It looks more like a sticky note in this case. You can add any text in this area.

The CSS Code

.sticky-handwriting {
padding: 10px;
background: #E57895;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: blue;
line-height: 1em;
}

The HTML Code

The text inside the box goes here

This CSS box is similar to the above but has a border arount it.

The CSS Code

.bordered-sticky {
border: 2px solid #363636;
padding: 10px;
background: #2f9be4;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: #363636;
line-height: 1.1em;
margin-left: 10px;
}

The HTML Code:

The text inside the box goes here

This CSS box has a little more detail. it has a border around it and a shadow behind it.

The CSS Code

.sticky-shadow {
width: 220px;
height: 220px;
background-color: #3f3b3b;
color: inherit;
margin-left:10px;
margin-top: 5px;
}

.bordered-sticky {
border: 1px solid #3A7197;
padding: 10px;
background: #fdfb8c none repeat scroll 0% 0%;
position: relative;
bottom: 5px;
right: 15px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’;
font-size: 26px;
color: #3A7197;
line-height: 1.1em;
margin-left: 10px;
text-align: center;
}

The HTML Code:

The text inside the box goes here

How To Increase Website Traffic

admin — Tue, 04 May 2010 22:06:55 +0000

Do you want to know how to increase website traffic? If you are a website owner then chances are this is always a priority and something you can almost always improve on.

You can never have too much traffic. After all, what good is it to have a website if nobody ever sees it? There are several proven ways to get more people to look at your pages.

Some traffic building methods are totally free, other than the time involved, and some require a little cash investment and some quite a bit. Regardless of anything else, the most important factor in attracting more visitors will be to give them something of value to look at.

You must have interesting, quality content on your site. Having great content gives people a reason to return again and to refer the site to others. Information should be offered that is helpful and useful. People only visit any particular place on the web because they want to find news, solve a problem or to be entertained.

Creating good content should always be the first priority. It should also be updated as frequently as possible to keep it fresh in order to develop a following of return visitors.

If you are not comfortable with writing your own ad copy, consider outsourcing the work. Find a friend or colleague with writing talent who might want to contribute articles. There are many dependable Internet sources that will write original content for a nominal fee.

Never copy material from another website for your own use and always be original. The major search engines are very sophisticated these days and will spot duplicate content immediately, sending you to the bottom of the engine listings. No matter what other forms of promotion you may use, you will still want to get in on the action that comes from search engines. This is where most people will look first for information.

Improve your search engine ranking through the use of keywords in your content. This is what is known as SEO, or search engine optimization. For example, if you sell dog food, be sure that those words appear in your page titles, first paragraphs and throughout all your articles, without over doing it.

Use words that people commonly think of when they want your product. Saying, “Gourmet canine cuisine” may be clever, but it will not be the first thing people will search for.

Another very important strategy to increase your traffic is the use of back links. These are links on other websites that link to yours. Using the previous example, if you are able to get a link on a site that sells dog collars or other related accessories, people will find you there.

Just as important, search engines rate sites on popularity and this will get you noticed and can bring you closer to the top of the list. Naturally, the best way to get others to link to your site is to offer to link to theirs.

Another way to get traffic and valuable back linking is through article marketing. This is where you place relevant articles on the various directories about what it is that you do.

When these are read, the reader will have the option to click on your main page for more details. This not only creates instant traffic, but also helps boost your engine rankings.

Finally, if you have a budget, consider buying advertising. The first listings you see when you do a search are not always there because they are the best. They paid for that position. The most popular programs are known as pay per click.

Companies like Yahoo, Google and others will give you better placement, for a fee. When you have someone click on your listing, you are charged a certain amount. This absolutely demands having good content, since you pay every time someone looks.

How To Use CSS

admin — Mon, 03 May 2010 06:26:37 +0000

Just when you begin to feel comfortable with HTML and really get to grips with website design along comes CSS. But don’t fear, if you could learn HTML, then CSS will be easier.

One of the main problems web developers face, is the number of different browsers that are likely to be used to read their website. Just when you get the site to work fine with Firefox, IE or some version of IE has a problem with it.

All browsers tend to render or interpret the HTML code slightly differently. So they all read the words correctly but the story doesn’t always come out the same.

This is where CSS or Cascading Style Sheets come into the picture. CSS is a programming language that specifically addresses the interpretation of the base HTML code. So, in essence, the HTML coding tells the browser what the web page consists of and where to find it and the CSS code tells the browser how to display it on the viewers monitor.

Occasionally your browser may read the HTML before it reads the CSS and then you have the cases where you get a momentary flash of un-configured text before the page loads correctly.

I’m sure most people who surf the net regularly have experienced this and it is one of the best examples of CSS at work. Another good example of this is when you open sites that are garbled with overlapping text and graphics that are clearly not what the author wanted as an end result. This happens when the CSS block is missing or corrupted.

This also happens when you open sites with a browser that does not support CSS such as those sometimes found on mobile phones. For this reason web developers need to think pro-actively when they design so that, in the event of the site being opened by a non-CSS enabled application, the content will at least make sense.

CSS is also particularly powerful when it comes to configuring content for different output protocols such as on screen, print or even speech and Braille browsers for impaired users. The code also tends to make for slicker, less complex site structures with minimal code repetition.

CSS coding syntax is also pretty simple by comparison and consists of 3 basic parts that are generally laid out in this way
selector { property: value}

Let’s break that down a bit more. The selector indicates the actual HTML item you wish to address for example the header of your page. The property part of the code indicates the exact property of the element that you wish to specify e.g. The font. The last part or value indicator tells the browser which property will be applied for example Arial.

The completed code would look something like this
h1 {font-family:arial)

The browser would read this as header one needs to have its font set to Arial. Nice and simple. You can also combine multiple properties and values.

h1 {font-family:arial;background:#eeeeee}
So the above would mean header one is Arial font as in the previous example but the second property, separated by a semi-colon, means that the background colour is grey.

This may all seem a little complex at first but how to use CSS is very simple once you get used to it and the language is a critical tool for ensuring the cross browser compatibility that allows us to view sites accurately and as their authors intended.

And it makes for much cleaner and organized HTML code, with all the styling code out of the way and in one place. This separation of style and content is more maintainable and also much more flexible.

How to Learn HTML

admin — Mon, 03 May 2010 06:09:51 +0000

If you’re creating a website, you may want to Know how to learn HTML, you might be surprised at just how easy it is to achieve this. Not only are there many different resources available online, there are also plenty of how-to books, tutorials, as well as online or on-sight classes that you can attend if you want to have a more structured and detailed setting.

In short, HTML stands for Hyper Text Markup Language. It’s a language designed to create webpages. However, in regards to webpages, HTML allows for the creation of document-type structure by denoting structural semantics for text. This allows for things such as headings, paragraphs, lists, links, quotes, as well as other items.

HTML enables you to embed things such as images and other objects like videos or third party interactive tools etc. HTML elements in the general form in which the language is written. This language consists of what are called tags, surrounded by angled brackets, within a webpage’s contents. It is this format that helps write scripts, which in turn runs the page itself, factoring in appearance, layout and more when in regards to overall design and performance.

However it is more common now a days and much more practical to use CSS to separate the style or layout of the page from the content, so HTML styling elements are no longer considered good practice.

You can learn HTML online through how to articles and sample code etc. One of the best resources is w3.org. Practice creating a simple HTML document and learn only as you need to do specific things for your website for example. In time you’ll find that you will start to feel like you have a pretty good grasp.

No matter what learning path you choose in how to learn HTML, it is generally a good rule of thumb to focus one step at a time and start with the basics and take it from there. Many tend to rush, winding up more confused than is necessary, although there are plenty of resources available where you can practice coding.