Web Design Discussion

So you’ve got your website built but it doesn’t appear in the search engines even for your company name. Why not? Many new website owners think that once they upload their site to the net it will instantly be recognized by the search engines. This is not true. The search engines find your site through links. For example if CNN links to an article on your web page you’ll instantly receive thousands of visitors because they get redirected through the link on their site.

Should you submit your website to 1000s of search engines and directories?

Read the rest of this entry »

One of the great and easiest ways to spruce up your web pages is to add a background image. It can be applied to the background of web pages, paragraphs, headings, text, and footers, etc. Cascading style sheets (CSS) enables you to control all the design elements on your website without affecting the content. It works nicely in the background.

How to style your web page with a background image

When using a background image for a web page make sure you also add the code for a background color as sometimes the image takes time to load. The color should be the same or close to the image color so there will be a smooth transition.

Here’s the CSS code I used to create a blue gradient background for: positivecontracting.com


body {background-color: #05366E;
background-image: url(images/bg_blue_outer_1500.jpg);
background-repeat: repeat-x; }


I created a gradient image 1500 pixels long and 5 pixels wide and tiled it horizontally. To achieve this I used the repeat-x property to make the image span left to right across the whole page.

By default, the background-image property repeats an image both horizontally and vertically however most times you need to define the background properties.

Background Properties

This determines how a background image will be repeated using the properties:

repeat
repeat-x
repeat-y
no-repeat
inherit

Examples

Header background

Here’s the CSS I used for the header background in positivecontracting.com


#header{margin: 0; padding: 0; background-color: #FFFFFF; height: 180px;
background-image: url(images/header-positive-contracting.jpg);
background-repeat: no-repeat;}


This header banner has a height of 180 pixels with white background that is not repeated across the page. No-repeat means you’ll only see one instance of the image.

How to create 3 column web page using a background image

In this example I created a thin image background 1000 pixels wide and 10 pixels long that repeats vertically (background-repeat: repeat-y) down the page to create 3 columns..blue, white, blue. This enabled me to easily add content to each of these 3 columns using CSS.


#wrapper{width: 1000px; background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url(images/bluebg.gif);
background-repeat: repeat-y;}


How to position a background image

You can use CSS to position an image in the background of your web page using the property…background-position.

Example:

Here’s the CSS code I used to position the World Impact Christian Center Logo in the center of this page:


#topline{
height: 125px;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
background-position: 200px 5px;
border-bottom-width: 760px;
border-bottom: 20px solid #6A8FB4;
}


The image is positioned 200 pixels from the left and 5 pixels from the top.

How to style your paragraph with a background image

The first paragraph of this article contains a gradient image in the background that repeats horizontally. This enables you to add nice effects to any paragraph. Here’s the sample code using inline CSS:


<p style="padding-left: 5px; background-image: url(images/gradient.jpg); background-repeat: repeat-x;">


Adding a background image within your html helps draw attention to specific areas on your web page. Have fun with it and let me know how you get on by leaving adding your comments below.

Related Articles
http://www.w3schools.com/css/css_background.asp
How Do I Add a Background Color to a Web Page

****************
Get a free evaluation of your website by visiting:
Free Website Evaluation

So you want to jazz up the background of your web page instead of using the default white color that most websites use. There are several ways to achieve this. One way is to simply change the background color and the other is to use a background image.

How to put an image as a background on a web page

If I want to change your web page background to grey use this html code:


<body bgcolor="#CCCCCC"></body>


You can use any color in place of #CCCCCC or even use the words green, red, etc.

Cascading style sheet
You can also use a cascading style sheet (CSS) and place it between the head tags. This eliminates the need to use the code above, have less code clutter and speed up the load time of your web pages.


<head>
<style type="text/css">
<!--body {background-color: #CCCCCC;}-->
</style>
</head>


Inline CSS
This is another method to add a background color. Instead of using an external style sheet placed between the head tags as shown above, code it directly into your html like this:


<body style="background: #CCCCCC;">


Inline CSS allows you to style any HTML element. For example if I want to add a background color to a paragraph use this code:


<p style="background: black; color: white;">black background with a white font color</p>


black background with a white font color

Tables
You can add a background color to tables using this code:


<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#000066">
  <tr>
    <td></td>
  </tr>
</table>


This will give you a table of 600 pixels with a dark blue background.

Tip
When using background colors for your web pages make sure you use contrasting colors (ie white on black or black on white) so your website visitors can easily read your content.

My next article will discuss How To Add a Background Image to a Web Page
****************
Get a free evaluation of your website by visiting:
Free Website Evaluation

Should you use relative or absolute links for building a website?
What is a server path?
What types of paths are there?
How to use the correct file path?
Which is best…relative or absolute links?
When should you use absolute links?

When designing a website in an html editor such as Dreamweaver it automatically creates relative links rather than absolute links. If you use the wrong server paths in your website structure your site may contain lots of broken links when it’s uploaded to your server. This will result in losing lots of visitors.

What is a server path?

This refers to the directory structure on the server. For instance I upload all my files to the public_html folder (directory) on the server. This is the root folder. If I create a sub-directory (another folder) within the public_html folder it will have a different file path. The key to maintaining the correct file paths is to use the same directory structure for your website files as on the directory structure on your server ( e.g. public_html directory).

What are relative links?

A relative link or path links to the file within your website. For example if you’re linking to a page within the same directory then you would code it like this:


<a href="http://www.about.html">About</a>


If you create a sub-directory for your images the file path for the image to link to would be:


<a href="images/pic.gif"></a>


If the folder is one level up from the current directory the relative file path would be:


<a href="../images/pic.gif"></a>


If the folder is two levels up from the current directory the relative file path would be:


<a href="../../images/pic.gif"></a>


Whenever you move a file one level up from the main directory use ../
So if your images folder is 3 levels up from the root folder (e.g. public_html) you would use this code to link to the image contained in the folder.


<a href="../../../images/pic.gif"></a>


What are absolute links?

An absolute link or path is where you use the full URL of the page you are linking to. e.g.


<a href="http://www.yourdomain.com/about.html">About</a>


Absolute links come in handy especially if you don’t know the correct file path. It prevents making errors that cause broken links to appear on your website. For instance if you don’t know how to create the correct relative path for an image 3 levels from the root directory create this absolute file path:


<a href="http://www.yourdomain.com/level1/level2/level3/images/pic.gif"></a>


Which is best…relative or absolute links?

Using relative links throughout your website file structure helps your web pages to load faster because all the files and folders are contained within the root directory (public_html folder) on the server.

If you use absolute links in your website file structure browsers need to search the internet first before finding the files on your server. This slows the loading of your website which is not good as search engines use site speed as one of their ranking factors. Web pages should load within a few seconds.

When should you use absolute links?

When you want other websites to link to content on your web page provide the html code that includes the absolute URL to the page. Do the same for the resource box at the end of your articles.

Use an absolute URL for your anchor text (hyperlinked text). Using a relative link will generate a 404 error page which means the link is broken.

Here’s an example using anchor text that includes the absolute URL to the website:


<a href="http://www.articlerewards.com/">Article Marketing Strategies</a>


Displays as:

Article Marketing Strategies

Tip
Before uploading your website to the server check all your file paths. Once uploaded to the server run the site through a link checker.

****************
Get a free evaluation of your website by visiting:
Free Web Site Evaluation

Your website has been online for a number of years but as you surf the net you realize your design looks out of date, is not cutting edge, uninspiring and lacks interactivity. The longer you put it off the worse you feel because you are not keeping up with your competitors who have great looking websites and are outranking you in the search engines.

5 signs your website needs a redesign

Read the rest of this entry »

The cost to redesign a website depends on who is asking the question. For example a solo website owner may expect to pay a few hundred dollars for a redesign, whereas a corporation with many employees may expect to pay a few thousand dollars. I run a small web design company which primarily targets small business owners so my prices are in line with most of my clients’ budgets.

Problems conveying design costs

Read the rest of this entry »

What are the essential characteristics of a great web page?
What makes you want to stay on the page or navigate to other pages?
What would make you want to return?

A good web page should appeal to your visitors as well as the search engines. I mentioned visitors first because they are the most important component for establishing relationships, generating sales and/or obtaining subscribers.

Optimizing your web page for the search engines attracts lots of free traffic. Most people will arrive at your site through searching for a specific keyword or keyword phrase.

What are the essential characteristics of a great web page?

Design

Read the rest of this entry »

Most visitors enter you website through your home page. This is because it often contains your most important keywords and other websites link to this page based on your marketing strategies e.g. home page link in your article resource box. Don’t rely on the original optimization of your web page that was done several years ago.

Reasons to Re-optimize Your Home Page

Read the rest of this entry »

Getting a custom designed website for your business is better than just grabbing a ready-made template because you’ll get a design that matches the look of your business. It will also stand out from your competitors and help build your brand. Sometimes site owners are in a hurry to establish an online presence and therefore don’t give much thought to their website’s appearance. Only later on they realize they should have invested more time and money at the beginning rather than getting a redesign down the road.

Ask for several mock up layouts before deciding on a design

Read the rest of this entry »

If you’re running a local business online consider using Google Places. It used to be called “Local Business Center.” People used to search the yellow pages to find local business listings however this has occurred less and less due to the accessibility of the internet. Instead of wasting time sifting through countless yellow pages simply enter your main keyword phrase into the Google search box to receive a number of local business websites you can contact.

Read the rest of this entry »