Daily web design tips

Tuesday, January 31, 2006

Form and input background image

Web forms are really useful, but can be very boring. Add a little something extra to your web site by giving form input boxes a background image like the example below.




To do this add the code in bold from below to your input boxes, and change http://www.giantmouse.co.uk/images/input_bg.jpg to the location of the image you wish to display.

<form>
<input type="text" style="background-image: url(http://www.giantmouse.co.uk/images/input_bg.jpg); border: 1px #ccc solid;"/><br /><br />
<input type="submit" value="search" />
</form>

More web design tips

posted by giantmouse at Tuesday, January 31, 2006 | 0 comments

Monday, January 30, 2006

Picture in address bar

Wondering how some websites display a picture in the address bar? These are called Favicon's, they are simple to make and easy to add to your website. They are displayed when you Bookmark or save a web address as a Favourite in the Internet Explorer browser [Define]

Step 1. Design your Favicon
You need an image to display in the address bar, this is usually a simplified version of your website logo. Remember it will only need to be roughly 15 x 15 pixels, so the simpler the better.

Step 2. Convert to a Favicon
Go to www.html-kit.com/favicon/ and click the "Browse" button next to the source image box. Select the image you created in step1. Ignore the scrolling text box, and click the "Generate FavIcon.ico" button. Now you need to download it to your computer, click the "Download FavIcon" button, if given the option, select "Save as" and choose to save it to your desktop.

Step 3. Add to your website
You will need to "unzip" the file you have saved to your desktop, you can do this with a program called Winzip, if you don't have it get it, because it is a very useful tool, get Winzip. Unzip the file to your Desktop so the files are easy to find.

You will have a Favicon.ico file and an "extra" folder. Save the Favicon.ico file to the "root" folder of your website. This is the folder where your home page is kept, i.e. index.htm, default.asp.

Now all you need to-do is insert a tiny piece of code into your web page. Open the program you edit your web pages, i.e. Dreamweaver, Frontpage, Notepad etc and select to edit the code or source. In between the <head> and </head>, known as the head section of the page, put the below code in.

<link rel="shortcut icon" href="favicon.ico">

You'll need to do this to each page of your site. Upload the modified pages and the Favicon.ico file to the Internet and then save your website as a favourite, and hey presto, your image will be displayed in the address bar.

More Web design tips

posted by giantmouse at Monday, January 30, 2006 | 0 comments

Friday, January 27, 2006

Control your visitors browser

Web pages were designed to be controlled by the user, for example allowing them to change font size and browser [Define] size, which is a strange concept to grasp when you first start designing web site, especially if you come from a print design background, where you dictate exactly what the page will look like.

However there are aspects you can control of their browser, one of the best examples is the status bar that is located in the bottom left of the browser. Move your mouse over a link and the status bar will show the web address of where the link goes. Some times you will want to show a message like “Free widgets buyers guide” rather then the web address. To change the status bar display you need to add some simple code to your website called JavaScript [Define]. This is a very easy thing to-do and will make a link as well.

Copy the below code into your web page where you want the link to appear.

<a url='http://www.yourwebsite.com/pagename.htm' onmouseover='window.status='Place any text you like here';return true' onmouseout='window.status='';return true'>Click here</a>

Simple changes to the code

You need to change the web address www.yourwebsite.com/pagename.htm to the page you are linking to, and replace “Place any text you like here” with the message you want display in the status bar, like “Free widgets buyers guide”.

posted by giantmouse at Friday, January 27, 2006 | 0 comments

Thursday, January 26, 2006

Generate website traffic

Generating website traffic is one of the primary goals of any website owner, particularly targeted traffic who are genuinely interested in your site. It is very hard to generate traffic without investing some money promoting a website, but how much do you invest?

The figure you need to know is cost per visitor. To work this out divide the amount you spend by the visitors, for example if you spend £100 in a month you get 1000 visitors your cost per visitor = 10p.

How much can you afford to spend per visitor? If 1 in 10 visitors buy and you make a profit of £10, then that sale has cost you £1, and you made £9, so you afford it. You can work out how much to spend on generating traffic from knowing your cost per visitor.

Generate website traffic– quickly and easily

posted by giantmouse at Thursday, January 26, 2006 | 0 comments

Wednesday, January 25, 2006

Calculate website conversion rate

Website conversion rate is the most important figure you need to know about your web site, it is the percentage of visitors that have performed a desired action. A desired action could be anything from buying a product to signing up for an email newsletter.

Website conversion calculation

Desired action / Total visitors = Conversion rate

If you don’t know how many people have visited your website you need website analytics.

Conversion rate comparisons

A website that is selling products normally has a conversion rate of around 1%, and email sign up can be anything from 10% - 30% depending on the subject.

posted by giantmouse at Wednesday, January 25, 2006 | 0 comments

Tuesday, January 24, 2006

Browser display problem

Learning to design web sites can be rewarding and very frustrating at the same time, you have the power to show any information you want to the world, yet sometimes it isn’t shown how you intended.

There are many reasons that your web site doesn’t look the same on all computers, however one of the main reasons is down to the way a browser [Define] interprets your web site. Different browsers display web sites differently, it is just one of those facts of life! Welcome to the world of web design!

It is highly likely that you are viewing this web page in Internet Explorer, as 93.3% of people in the UK use this browser ( browser usage figures). This may be the cause of your problem, as you may have not tested your web site in the other browsers.

The other main browser commonly used is Firefox. Internet Explorer and Firefox display web sites differently so you need to test your site in both. You can download Firefox here.

Not a browser problem?

If your display problem isn’t a browser issue it maybe a screen resolution issue, try website width.

posted by giantmouse at Tuesday, January 24, 2006 | 0 comments

Monday, January 23, 2006

Quick web design for complete beginners

Starting out in web design can be a very daunting process; there is talk of lots of different web technologies like html, asp, php, wysiwyg`s to name a few. So what if you just want a quick web page and don`t want to learn all of those complicated things?

The simplest solution is making a web page in Microsoft Word, yes that`s right, in Word. Write a page of information, including any images you want to display, and lay them out in Word how you want your web page to look.

Once you have your page in Word, simply go to "File" in the top left-hand corner and select "Save as Web Page". Save it to any location on your computer. Word will produce a HTML [Define] page and a folder with any images in.

You now have a web page ready for the Internet. To put that web page on the Internet you will need some web hosting space, for more information on this try this link Low cost web host.

posted by giantmouse at Monday, January 23, 2006 | 0 comments

Sunday, January 22, 2006

How much does a web site cost?

When you first start researching to have a web site made for you one of the first questions you ask is "How much is it going to cost?" It’s only natural when you are buying something. This article will answer how much a web site will cost.

If your looking for a quick ballpark figure answer, then they can cost anything from £200 to 100’s of thousands, even millions of pounds. For those of you who want a more accurate realistic answer read on.

web design cost

posted by giantmouse at Sunday, January 22, 2006 | 0 comments

Friday, January 20, 2006

Web design cost?

Web sites are very powerful marketing toosl for many businesses, small and large. However when it comes to knowing how huch to pay for a one, many people are left in the dark. To shed some light on the subject here is a begineers guide to the cost of a web site design.

There are two ways to buy a web site...

1. Off the shelf
These are predesigned web sites with your content put into them. This makes them much cheaper and quicker. However they tend to be fairly limited.

2. Bespoke
These web sites are designed specifically for your needs, and are normally charged per hour. The advantage of these sites are you get exactly what you want, but they cost more.

Learn more about web design cost

posted by giantmouse at Friday, January 20, 2006 | 0 comments

Thursday, January 19, 2006

Add the current date to your web site

If you are new to web design you may have noticed that some web sites always display the current date, and wondered how this is done. It is a very simple thing to do, and you don’t need to update your site everyday. All you need to do is add some JavaScript [Define] to your web site.

Easy way to add the date

To add the date open the program you edit your web pages i.e. Dreamweaver, Frontpage, it doesn’t matter which one it is as long as you can edit the HTML code [Define] manually. Now you need to view the html code of the site. Each pprogram is different; you may need to look in the help menu of the program to find out how to look at the HTML code.

When viewing the HTML code, copy and paste the below code in to the web page. Place it in the area you wish to display the current date.


<SCRIPT LANGUAGE="Javascript" class="timetext">

var now = new Date();

var days = new Array('Sunday','Monday','Tuesday','Wednesday',

'Thursday','Friday','Saturday');

var months = new Array('January','February','March','April',

'May','June','July','August','September',

'October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function y2k(number){return (number < 1000) ? number + 1900 : number;}

today = days[now.getDay()] + " " +

date + " " +

months[now.getMonth()] + ", " +

(y2k(now.getYear())) ;

document.write("" +today+ ".");

</SCRIPT>


This bit of code will display the correct date no matter where your web site is being viewed in the world.

More web design tips

posted by giantmouse at Thursday, January 19, 2006 | 5 comments

Wednesday, January 18, 2006

How many people have been to your web site?

To answer this question you need web analytics. Analytics will give you lots of vital information about your web site visitors, for example how many visitors your site has had, which search engines they found it in and with what searches etc. You can get this information for free on any website.

Learn about web analytics

posted by giantmouse at Wednesday, January 18, 2006 | 0 comments

Tuesday, January 17, 2006

Add to Favourites or Bookmark

To make it easier for your web site visitors to revisit your site include an “Add to favourites” option. This is also known as Book marking a page. By adding this feature to your site you will increase the amount of repeat visitors to your site.

To do this you need to add some JavaScript [Define] to your web site, which is really easy to do. Copy the code below into the section of your web site where you want the “Add to favourites” functionality to where you would like it to appear.

<script language="JavaScript1.2">
<!--
var bookmarkurl="http://www.websiteaddress.co.uk"
var bookmarktitle="Change to short web site description"
function addbookmark(){
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
if (navigator.userAgent.indexOf("Windows") != -1 &&
navigator.appVersion.substring(0,1) > 3){
document.write("<a href=javascript:addbookmark();>Add to Favourites</a>");
}
else{
document.write("Please bookmark this page.");
}
//-->
</script>

Easy changes the code

Change http://www.websiteaddress.co.uk to your web site address, otherwise people will bookmark www.websiteadress.co.uk. Remember to include http:// at the beginning of the address and put “ “ around the complete address.

Change “Change to short web site description” to a description of your web site, and remember to put “” around the description.

If you use a web design program like Dreamweaver or FrontPage you will need to switch it into code mode, which will be explained in the programs help menu. Once in the code mode insert this code into the section of the web site where you want it to appear, for example the navigation bar.

More web design tips


posted by giantmouse at Tuesday, January 17, 2006 | 0 comments

Monday, January 16, 2006

To Flash or not to Flash

Flash [Define] has changed the web for the better, before Flash interactive animations were things web designers used to dream of. However just because Flash is very powerful tool doesn’t mean you should us it for everything. Because of the limitless possibilities with Flash it becomes very easy to over-do-it by having lots of things flying around with fancy animated buttons, which confuses the user and ultimately forces them away from your site.

When to use Flash

Flash is best at making a visual impact, for example promoting an offer on your web site. For example you can make a small section of your web site Flash to draw attention to it, like an offer.

Flash is also more than capable of making decent games that can be very addictive, these will get people coming back to your site time and time again.

When not to use Flash

Don’t use Flash for your web site navigation, unless it is fairly simple. All those great effects that looked amazing on a design agencies web site probably won’t fit into a site that sells paint brushes.

If you aim to get the majority of visitors from search engines, don’t make your site completely out of Flash, because search engines find it difficult to read and include your Flash site in their results. That said you could make parts of your site Flash, like adverts or promotions, just don’t make the whole site Flash.

More web design tips

posted by giantmouse at Monday, January 16, 2006 | 0 comments

Sunday, January 15, 2006

Free online promotion

If your looking to promote your web site online for free we have got a great tip for you. Google will actually promote your products for free, allowing lots of people to find your web site. Because Google is a trusted source the visitors are more likely to buy from you.

The service is called Froogle, and it allows you to add your products to their searchable database. So for example if you sell paint brushes, anybody searching Froogle for "paint brushes" will see your products on the Froogle web site.

Try Froogle

Get your products into Froogle

To have your products included into Froogle all you have to do is supply them with information about your products. You then send them a new copy of that information every month, or for better results, every week. This information is called a "Feed", which are simple to make. Froogle explains how to make your own feed and how to submit it to them, just follow the below link.

Submit your products to Froogle

More ways to promote your web site

posted by giantmouse at Sunday, January 15, 2006 | 0 comments

Saturday, January 14, 2006

What is SEO?

SEO stands for Search Engine Optimisation, which is term used for preparing a web page to enhance its position is search engine results. For example if search engine optimisation (SEO) is applied to a web page for the search term "pet supplies", when a search is done on say www.google.com that web page will appear near the top of the results, if not in the number 1 position.

Learn more about SEO

posted by giantmouse at Saturday, January 14, 2006 | 0 comments

Friday, January 13, 2006

Learn Search Engine Optimisation

The art of making your web site appear at the top of search engines is called “Search engine optimisation”, if used effectively it can seriously increase the amount of traffic to your web site. There are several ways to learn search engine optimisation from online courses to work shops.

Search engine optimisation training

You may also be interested in…

Get to no1 in search engines

posted by giantmouse at Friday, January 13, 2006 | 0 comments

Thursday, January 12, 2006

Choosing a web design company

Some web design projects are just too big or complicated to be dealt with by one person. If so you have to call the professionals in. However with so many companies calling them selves professional, how do you know which one to choose?

How to choose a web design company

posted by giantmouse at Thursday, January 12, 2006 | 0 comments

Wednesday, January 11, 2006

Flash navigation

Flash [Define] has revolutionized the web. Before Flash web sites were static and boring. To display any type of animation or interaction visitors needed to install software, which most were reluctant to do.

Flash is very eye catching and can really improve the overall look of your site. However it is often over used or used for the wrong reasons. One particular mistake is using Flash as the main navigation buttons of a web site, because it is often over complicated and makes it harder for the user to find what they are looking for.

By using Flash for navigation buttons you will also make it harder for search engines to find all of the pages in your web site this will make it harder for them to include your pages in their search results, meaning you will get less visitors to your site.

Use Flash navigation if…

You want to make a visual impact, for example online portfolio’s or sales pitches

Don’t use Flash for navigation if…

You have a very large site with lots of information in
You want to rank well in search engines

More good web design tips

posted by giantmouse at Wednesday, January 11, 2006 | 0 comments

Tuesday, January 10, 2006

Domain name ideas

Choosing a domain name, or website address, on the surface appears to be an easy thing, choose your company name or something random, easy. However until you have to actually register one you don’t realise how hard it is coming up with a decent domain name that is available.

Learn how to find unique domain names

posted by giantmouse at Tuesday, January 10, 2006 | 0 comments

Monday, January 09, 2006

Stop spam to your email

Spammers get email address by using special programs to find them on web sites. They then send spam to them that try and sell you things. This can be very irritating as you often open your email only to find hundreds of Spam emails you don’t want.

To stop spammers finding your email address on your web site replace your email address with an image that has your email address written in it. Then make that image a link to your email address, like below.

email@website.co.uk

The actual email address is an image, you can tell because you can't highlight the text. But if you click on it works like a normal email text link.

Spammers programs can’t read images so they won’t be able to find your email address and spam you.

How to create an email link

More web design tips

posted by giantmouse at Monday, January 09, 2006 | 0 comments

Improve your website – for free

One-way to dramatically improve the way your website looks is to use good fonts. Rather than using all the standard fonts like Time New Roman and Arial use more interesting fonts for headers and sections you want to draw attention to.

Get Free fonts from here. Simply choose the style you want then download them. They include instructions for how to install each font, its easy.

A word of warning only use these fonts in graphics rather then as html, because if somebody trying to view your site doesn’t have the font installed on their computer they will see the default Times New Roman.

More web design tips

posted by giantmouse at Monday, January 09, 2006 | 0 comments

Sunday, January 08, 2006

Resize lots of images quickly

Anybody who runs a web site with lots of images will know how time consuming it is resizing lots of images. For example say you have 100 pictures that are 3000pixels by 2000pixels each and you need them to be 500 by 333, and then you need a them all as 100pixel wide images for thumb nails for visitors to actually click on. That's resizing 200 images, which would take forever!

Any decent image editing software like Macromedia Fireworks, Adobe Photoshop or Corel Photo Paint can automate the process for you. You tell it how big you want the image and which ones you want resizing and it does the hard work.

How?

The process of resizing lots of images is called Batch processing. Each image editing software does it differently. Here is how to get started in the most commonly used image edit software programs. If you need more details try searching for "Batch" in the programs help section.

Fireworks
Go to "File" then select "Batch Process". Select the files you want to resize then follow the rest of the instructions.

Photoshop
Go to "File" then select "Automate" then "Batch..."

Corel Photo Paint
Go to "File" then select "Batch process.."

More web design tips

posted by giantmouse at Sunday, January 08, 2006 | 0 comments

Saturday, January 07, 2006

Insert Subject field in Email link

Almost all websites have a link to an email address, that once clicked opens up the visitors email (Outlook, Outlook express etc). However the subject field is left blank. To insert a subject field use the below html code [Define] on your website.

<A HREF="mailto:you@website.com?subject=my website">Email</A>

Replace "you@website.com" with your email address and replace "my website" with what you want the subject to be. Remembering to keep the "?" inbetween the two.

More web design tips

posted by giantmouse at Saturday, January 07, 2006 | 0 comments

Friday, January 06, 2006

Is your website above the fold?

What does above the fold mean? Web sites don’t fold; you can’t fold them up and put them in your pocket, so why do you keep hearing the term “Above the fold”?

Above the fold means the section of the web site that can see with out scrolling down. This is important because it is a well know fact many web site surfers don’t always scroll down to the bottom of the page, therefore if your most important content isn’t “Above the fold” it may not be getting seen.

Therefore always place your most important content at the top of your page, or “Above the fold”.

More web design tips

posted by giantmouse at Friday, January 06, 2006 | 0 comments

Thursday, January 05, 2006

What did people search for in 2005?

A lot of useful information can be gained from understanding what people search for, what type of products are in demand, what type of news are people actively seeking etc.

Google have produced a list of the most searched for things in 2005, it is well worth a look. For example the most searched for news item was “Janet Jackson”, which beat “Hurican Katrina” surprisingly!

www.google.com/press/zeitgeist2005.html

You can use this information to design websites of popular interest, for example identify a particular subject that is searched for and produce a site based on this theme. That way you know there is an audience for the website. Because what is the point of building a site if nobody sees it?

More web design tips

posted by giantmouse at Thursday, January 05, 2006 | 0 comments

Wednesday, January 04, 2006

Website width

When learning to design web sites one of the most difficult theories to get to grips with is that your website doesn’t look the same on every computer. It is especially frustrating if you come from a print design background, where you will be used to having complete control over the look of your designs.

The consequences of this happening are that sections of your website can be cut of from the viewers screen. There is a simple way to avoid this.

Learn about website width

posted by giantmouse at Wednesday, January 04, 2006 | 0 comments

Tuesday, January 03, 2006

.htm or .html

Whether you are aware of it or not, you can save your web pages as pagename.htm or pagename.html, they will both work in any browser [Define].

So is there a difference?

None that really matters, however we would recommend using one and sticking with it (we use .htm). Otherwise you run the risk of linking to a web page that doesn’t exist. For example if you name your page “page.htm” and make a link from another web page to “page.html”, the user clicking on the link will get a “Page not found message”, because that page doesn’t exist. The browser is looking for “page.htm”.

More web design tips

posted by giantmouse at Tuesday, January 03, 2006 | 0 comments

Monday, January 02, 2006

Browsers usage UK

  1. Internet Explorer 93.37%
  2. Firefox 4.94%
  3. Safari 0.99%
  4. Opera 0.39%
  5. Netscape 0.23%
  6. Others 0.08%

source OneStat.com

So Internet Explorer is still dominatant but the Firefox browser has made a dent on its popularity.

More web design tips

posted by giantmouse at Monday, January 02, 2006 | 0 comments