Web Design Discussion

My last article described how to embed SWF in your web page. The main problem associated with this is that the flash video plays automatically. If the video is 10 minutes long viewers will need to wait patiently for it to finish or click out of the web page. This can be very frustrating and may turn off your visitors. It’s better to offer them a control bar.

One of the best solutions to this problem is to use the Flash Player named Flowplayer. It enables you to easily embed a flash video file in your web page and allow visitors to control the playing (ie start or stop the video).

To see how the flash media player looks on a web page visit:
Paul Koko Fashion Design Gallery

What is Flowplayer?

Read the rest of this entry »

One of the easiest and quickest ways to display videos on your website is to upload it to YouTube then embed the code they provide into the html code of your website. Some of the problems associated with using YouTube are:

• lack of video quality
• lack of control
• Google is free to use your content however they wish
• Unrelated videos are displayed after yours
• Length of video restricted

If you want to avoid all these problems consider embedding a flash video file (.swf) in your web page. Most computers already have the flash player installed so it will play automatically. You can also include code within your html to automatically download the flash player if the computer doesn’t have it installed.

There are 2 flash video formats .SWF and .FLV. Since we are discussing how to embed SWF in your web page I’ll describe SWF.

What is SWF?

Read the rest of this entry »

What is a landing page
How to create a landing page
How to drive traffic to your landing page

Most online marketers will say “the money is in the list.” One of the best ways to build a large list of contacts is to create a landing page. With a large list you can continue to offer products to them to make money quickly and easily. For example if you created list of 3000 contacts and only 300 of them bought a product for $100.00 you’d make $3000.00 from one email.

What is a landing page?

Read the rest of this entry »

Recently I was asked by a client to create framed pages within his website. I’m not a fan of frames because search engines don’t index them however I believe in giving the customer what they want to make them happy (even after pointing out the pros and cons of using framed web pages).

What is an iframe?

Read the rest of this entry »

Are you still using an old version of WordPress?
Not sure why you should upgrade if your old version is working fine?
Afraid to upgrade?

You’re gonna love WordPress 3.0 “Thelonious” because it has many new cool features that make it easier and more fun to maintain your blog or website. I hadn’t upgraded my Web Design Discussion Blog for over a year because the current version seemed to be functioning well, I didn’t want to to spend time upgrading plus I was afraid something would go wrong during the upgrade and I’d lose my content.

Top 7 reasons I upgraded to WordPress 3.0 and why you should too

1. Easy to upgrade

If you currently have WordPress version 2.7 or higher it will have an automatic update feature. Simply click the link in the new version banner or go to tools-upgrade menu.

Once you are on the “Update WordPress” page, click the button “Update Automatically” to start the upgrade process. When completed you’ll have the updated version.

If you need help visit updating WordPress

2. Bulk updates

In earlier versions of WordPress you always had to disable your plugins before upgrading. Now you don’t have to worry about that because you can bulk update themes, plugins and installations all in one place. During the updates your theme will be placed in maintenance mode so visitors will know you’re making changes. You don’t even have to deactivate your plugins.

3. New flexible default theme

I never cared for the Cubic default theme because it looked ugly and was plain boring however the new TwentyTen default theme looks professional and is very flexible because it allows you to easily create custom headers, backgrounds and menus.

4. Shortlink support

This is a handy little feature within your dashboard that can generate short URLs of your posts. This comes in handy when you want to Tweet your lastest posts (long URLS consume the character limit in Twitter plus you now don’t need to waste time using a URL shortener).

5. Merge of WordPress and WordPress MU

You can now power multiple (millions) of WordPress sites from a single installation. This makes it easy to create a network of sites. For example if you wanted to create a church website, members could each have their own blog on the same domain and maintain it themselves.

6. Set your own admin username

No longer do you need to change your admin user name after installation. WordPress 3.0 now allows users to set the Admin username to whatever they like during installation.

7. Custom post types

WordPress developers can now create more standard posts and pages for better CMS capability.

Resources
http://www.wpbeginner.com/news/wordpress-3-0-thelonious-features-video/

Upgrading Your WordPress Blog- Why and How

***********************
Need help designing, upgrading or maintaining your WordPress blog or website?
Please visit: Website Design in Maryland

Does the design of your website suck?
Can visitors easily navigate your content?
Are you receiving lots of web traffic?
Is your traffic converting into sales?

These are just some of the questions you should be asking yourself when evaluating your website. A beautifully designed website won’t sell much if you’re not driving traffic to it. Getting lots of traffic won’t generate sales if your visitors have difficulty navigating your web pages or they are not converted by your content.

Many website owners look at their site from their own perspective and fail to see it from their customers viewpoint. Most visitors arrive at your site and ask “how can I benefit from what’s being offered on this web page.” They are mostly interested in what’s in it for themselves.

5 critical factors for how to evaluate a website

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 »