Do use a professional

Many times the first impression a person gets about your company is your website. The first impression is everything. The first time a visitor sees your website, you want them to believe your company is a professional top notch business. What you put into your website is what you will get out of it.

Sure, you can create a website yourself using various means including premade templates, free website builders from hosting companies or have a friend or family member do it for you. Unless your friend or family member is a professional, your website will lack a professional look and feel.

(more…)

1. Avoid not resetting the browsers default setting.

When creating a new website or web page, the first thing you should do is reset everything to zero. Browsers have their own default settings, mainly for padding and margins. Resetting all the tags to zero will ensure you start from scratch. Once you have used a reset CSS file, you can now start on styling your page.
<link rel="stylesheet" href="style/reset-min.css" type="text/css" media="screen" />

See our blog posting on this…

2. Avoid not accounting for other web browsers.

If you have applied a reset CSS file to your page, you’re half way there. Apart from resetting the browser’s default settings, you also have to keep in mind that not all style properties work the same for all browsers. A perfect example is the difference of overflow between IE6 and Firefox. Here is a screen shot of the difference between the two:

Internet Explorer 6Firefox

See here for yourself

3. Avoid using Inline Styles.

Using inline styles can create a few issues.
One, it makes your code longer and heavy. The longer the code, the harder it is to troubleshoot and the larger the file size of the page.
Two, changing styles on one single style sheet is easier than looking for them all over the site.
Three, it can save time if you are going to be using that same style throughout the page and website. You can apply a class an endless amount of times throughout a website, with only needing to type out the properties one time.
The best way and cleanest way to apply CSS is through the use of external style sheets.

4. Avoid not formatting your CSS file.

Formatting your properties will make it a lot easier when you come back to edit them in the future. You don’t want multiple styles being strung together in one line. There are two main techniques of formatting your styles.
One line:
div {padding:5px; font-size:12pt}
Block:
div {
padding:5px;
font-size:12pt;
}

5. Avoid being redundant.

A lot times you’ll find that your styles are redundant. Sometimes you can easily simplify and combine styles. For example, instead  of using:
table {padding:3px; margin-top:10px; font-weight: bold}
div {padding:3px;margin-top:10px; font-weight: bold}
You can simplify these two and use the following:
table, div {padding:3px; margin-top:10px; font-weight: bold}

6. Avoid not using a shorthand format.

This is also another method of simplifying and avoiding redundancy. Instead of spelling out each property over and over, you can put their values on one line.
Here is an example without the use of shorthand:
.style1 {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FFF;
}

Here is an example with the use of shorthand:
.style1{
border-right: 2px solid #FFF;
}


7. Avoid using style titles that are too specific to what it does.

For example, let’s say you want to make a title of a paragraph look like this:

About Our Company

You create a class named “.large-red-font” in order to create this appearance. The title itself is pretty self explanatory on what the class does, which is fine, but…

What happens if later on you change your mind or restyle your site? What happens if you don’t want that paragraph title being red and that large? The title “.large-red-font” can be confusing if you want the paragraph title to appear like the following:

About Our Company

Instead you should use less specific names, so if a change happens in the future, it’s not as confusing.

Below is a list of the basic SEO suggestions to keep in mind when developing a website and its pages.

1. Have a specific title for each page.

The title tag, <title> , is a must have. This is the first thing that “searchers” see when they come across their search engine results. You don’t want people to see this:

You don’t know how many times I’ve come across a relevant page that has no title. Across the top of the browser it will read “Untitled Document”. Big Mistake. Or, the page will have a title but it will be very vague, with no specifics.Having the right title makes all the difference when some does a search. The right title will attract more clicks. For example, here is a search result for “web design blog”:

As you can see, the title tag gives you a glimpse of what the website is about (if done correctly).
The first result doesn’t provide a good preview right off the bat, done poorly.
The second result tells you it’s a blog site that provides web design tips.
The third result tells you it’s a web design company providing blog design services.

2. Have efficient meta tags.

Meta tags are the key to having search engines index your site…correctly. There are hundreds of different types of meta tags. There are a few that are essential to have in order to have your site indexed.

Description
<meta name="description" content="This is a web design blog..." />

Keywords
<meta name="keywords" content="web, design, blog," />

These tags tell the search engine what your web page contains. The more accurate the tags the better chances of having your site indexed higher on search results.

3. Have content.

This sounds simple doesn’t it? By content I mean text. The worst type of website, when it comes to SEO, is a flash based site or strictly image based site. See here.
The more text you have the more the search engines can see and gauge your site’s relevance. Without any text, the search engine can’t determine what your site has to offer, and therefore can’t tell the “searcher” what your site has to offer.

4. Keywords

it’s not just important to have content on your site but also relevant content. Make sure your site’s text has popular keywords that people would use to search. You want to be as specific as you can when describing what your site is about.
For example, if you create ice sculptures, you could have:
“Our Company creates ice sculptures for any occasion and size.“
It’s better to have the following:
“Our Company can create custom ice sculpture designs for small and large sizes. We provide sculptures for weddings, parties, logos, holidays, luges, centerpieces and special events.”

The relevant keywords, that someone would use to search, are highlighted. The difference from the first option and the second option is huge. The difference can equate to a listing difference from page 2 to page 52 on the major search engines.

5. Link Building

Link building is making your website link popular. The best way to make your website popular is to have its link appear as much as possible throughout the entire web.
You can do this by posting your link on as many sites as you can.
You could start out by putting your link on Facebook, Twitter, LinkedIn, Digg, Delicious, Buzz, and all the other popular social networking and bookmarking sites. You can also do link exchanges with other sites, these sites can be related to your site or not, it doesn’t matter. The more your web link is out there the better!

I’m sure you’ve all been there. You create a web page and it looks great in Firefox, then you preview it in Internet Explorer and…doh! You scratch your head and wonder, where did I go wrong?

Every browser has their set of built-in default styles for just about every tag. Most are the same but some aren’t, especially between the two main browsers (FF & IE).

Some of the most common differences are the margins and padding in the tags. Below is an example of the differences in spacing between Firefox 3 and Internet Explorer 7.

As you can see above, there are differences in spacing in both browsers.

You can also view this example yourself, if you have multiple browsers installed, here: http://www.redicedesigns.com/blog/wp-content/links/reset_example.html

The way to make sure all your spacing’s are the same across all browsers is to reset all the tag properties. This will set all properties for all tags to minimum, or zero. From there you can style the page exactly how you intend to.

You can find the most commonly used reset CSS file from yahoo, here:
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css

There are a few keys things to remember when using a reset CSS file.

1. Always make sure when using a reset CSS file to list it FIRST, in the <head> section, in your list of styles. From then on you can add your own styles to supersede the reset styles.
2. The reset file will reset everything.
   This means your lists will be without spacing and properties, so initially the list items will appear as regular text lines. The <em> tag will not show text in italics and the <strong> tag will not show text in bold.
3. Always keep your reset CSS file separate from other styles.
   Keep it separate from the styles you will use to style your pages. The last thing you want to do is to mix up your styles. This also helps because you can always come back to the reset file to modify it a lot easier.

Introduction

Divisions or “div” are a ‘block level element’, meaning they have the “block” attribute already inherited. Divs are used to display content in a block format much like tables but also used to define sections of a web page.

General Layout

Divs are the best way to layout information on a web page because of the properties that can be applied using the simplest and cleanliest code. It is always better to use divs over tables whenever possible.

The best way to organize a web page using divs is to create specific sections for each part of the page. For example: a header, navigation, content and footer. For each of the different sections, an ID can be used to identify and style each div. It is always better to have each section or div inside one main div, normally this div is called the “container”, this “container” div will allow for more options, which will be described later.

Below is how to organize the container and its inner sections or divs.

<div id="container">
<div id="header">Header Content</div>
<div id="navigation">Navigation Content</div>
<div id="content">Main Content</div>
<div id="footer">Footer Content</div>
</div>

Below is a picture of a box model of the four sections inside the container, which also shows the style that applied to each section.

The example shows the navigation being used on the left hand side. You can set the “navigation” and “content” divs side-by-side using the “float” property. The “navigation” div will have the “float” property along with a specified width. The “content” div will have the “margin-left” property for the same value as the navigation width. Using the same value will allow the content to only flow to the right of the navigation.

Below is an example of the style applied to each section:

#header {
height:120px;
text-align:center;
}
#navigation{
width:150px;
float:left;
}
#content {
margin-left:150px;
}
#footer {
text-align:center;
}

Using a Container

By using a “container” div, you can set the width of the overall content. By not setting a “width” property, the content will fill the browser window-no matter what size. To set a maximum width for the overall content, you would do so by adding a “width” property to the container. The default alignment for the container is left, but you can also center the “container” div. You can see how to center the div below.

Centering

Unlike tables, divs do not have the “align” property, so you cannot center a div in the same way. The way to center a div element is to use the margin property. Below is how to absolutely center a div:

#container {
width:820px;
margin-left:auto;
margin-right:auto;
}

The value to use for the margin properties is “auto”. This will automatically calculate the distance from each side, left and right, and position the div in the center.

Links

You can also create a link from a div itself. Most of the time you will see this in the header, a link created from the header that points to the home page. This can be done with a bit of javascript. The easiest way to create a link from a div is below:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

The only property that is applied, via css, is the “cursor” property, this is so the visitor knows the div is a link.