Beautiful rays of sun coming through trees Photo by Bogdan Fiedur
Are you ready for Part 4 ?
This is where we will show you:
A) What design software is available.
B) The 3 most important rules for website design.
C) Other design considerations.
If the design talk is above you at the moment, don’t worry, you will soon catch on – and if your main aim is to get a SITE THAT SELLS up and running fast, then put up a simple site first and develop it later.
Believe me, you only need a SIMPLE site to make money on the web. It is the words and techniques you use to sell your product or service that will generate an income for you online. You can waste valuable time concentrating on all the wrong things, such as learning how to make animated gifs and Java applets!
All you need is a catchy logo and to follow our tips below on good site design.
A) Which Design Software to use ?
If you are new to website design, it will take you quite a long time to produce your own professional looking site if you try to do it from scratch.
However you can get a ready-made professional site with numerous templates to choose from when you go to
You can customize the site completely and do not have to display any annoying banners!
If you understand basic HTML you will have more control over what you can do with your site. There is an excellent introduction to HTML – located at:
http://www.thewebseye.com/HTML.htm
If you want a WYSIWYG program or want to do it all yourself, it is all available at http://members.adlandpro.com/redir/freewebsitenew.asp
From their WYSIWYG editor, to easy-to-use CMS (Content Management Systems) like WordPress, Joomla or Mambo, it’s all there with both instructions and support.
In the meantime however read on to find out the secret to successful design.
B) The 3 Most Important Rules of Web Design
You need to remember that website design is not only about having an attractive site, there are a number of other considerations.
1) The CONTENT of your site must be interesting and worthwhile.
2) The site must be easy to navigate.
3) Don’t overload your pages with slow loading graphics.
Let us look at each of these in more detail.
1) The CONTENT must be interesting and worthwhile.
Someone once said, “Content is king,” and this is even more true, today. This is the most important rule of web design.
Fresh, interesting, unique content is what the search engines are looking for and what will get you found amongst all the millions of websites now online.
Once someone has come to your website, you must give them a reason to stay on it. You must make it “sticky”
– and can use one or more of the following.
– make your site different to the thousands of other sites out there.
– include unique content – if someone has come to your site, you have what they are looking for, so present your information or product in a unique way which will make a visitor choose your site over another.
– include FREE products, or free information – or a FREE newsletter! See example here.
http://members.adlandpro.com/archives.aspx
– Include a message board or a chatroom or create a community setting which keeps visitors coming back to your site. See example here.
http://community.adlandpro.com/
– you can even offer a free web-based email service from your site. See example here.
http://freemail.adlandpro.com/
– UPDATE YOUR SITE frequently to keep your visitors coming back and your ranking up in the search engines like Google.
You could run a weeklyblog, for example.
2) Navigation
a) Make sure that when a visitor first visits your site, they can get what they want with one or at most 3 clicks of a mouse.
b) Make sure that the buttons or links to your pages are obvious.
If you want to use button links (graphical links) for navigation, make sure to use alt text (don’t worry – that will be explained later) and have text links to your web pages as well, perhaps at the bottom of each page. This is because some people disable images so that they can browse faster, AND more importantly, some search engines do not follow hyperlinks from images, so when they spider your site, they will not pick up the linked pages. You want to make your site as search engine friendly as possible!
c) If your site is very large and you cannot make navigation easy with one or two clicks, consider using a pop-up or drop-down menu. You can download nearly any script you might need for free from The Java Script source at http://www.javascriptsource.com/ and you don’t need to know how to write Javascript to use scripts – you can “cut and paste” the script
into your HTML.
If you have not got to grips with HTML yet, leave the Javascript till later. If you choose to use a CMS like WordPress or Joomla, many of these things are simple to do with just a few clicks, if you take the time to follow the detailed and simple instructions they offer.
3) Optimize your Graphics
Use .jpeg (.jpg) and .gif graphics for your images.
These are the two file formats universally used on the web – basically because they take up less space without much loss of quality.
a) Optimization – This is where an image is reduced to its smallest file size while retaining its best quality.
A basic rule of thumb is save the images in .jpeg format for photos and use the .gif format for your logos, and other graphics. Understanding the difference in how these file formats compress an image is important in designing good web pages.
For a more in depth look at JPEGs vs GIFs have a look at http://www.TheWebsEye.com/graphics.htm .
You will also find links here to some good FREE graphics sites as well as where to download trial versions of software for creating graphics. PAINT.Net is an excellent, Open Source (FREE) very powerful and easy-to-use program, available from http://www.filehippo.com .
(We suggest you bookmark that site, as it is a fantastic source of free and safe software.)
b) The second thing to remember is that the larger an image is the more KB it will take up, so don’t fill your page with photos that are 600 x 480 pixels that take up the whole screen
– most visitors will not wait for such large graphics to download.
However remember also that you can make a large GIF take up only a few KB by using one or two colors – useful for backgrounds. Here is a good tutorial on how to deal with large images if you need to have them on your page:
http://en.kioskea.net/faq/2264-reducing-the-size-in-bytes-of-an-image
c) Finally remember there is no point in including unnecessary graphics on your page – they only take up space.
Don’t waste space with Java applets or animated GIFs just because you want to show off some cool new effect unless the graphics will really make your site sticky.
Once again – look at it from your visitors point of view – Will the graphics really make your site sell?
C) —- Other Design Considerations —-
There are a number of other things to consider when designing your site:
Not all browsers see your web pages the same way. If you designed a great looking site using Microsoft Internet Explorer, try also viewing it in Firefox, Chrome, Opera and Safari; it might look very different ! Keep changing it until it looks right in all these popular browsers.
Not everyone has the same resolution screen. Most use 1024×768, but some use higher resolutions. Some still use 800×600 pixel screens. Add to this the fact that more and more people are using tablets and smart phones and other hand held devices, and it can seem a bit overwhelming!
Don’t worry… we have you covered!
If you design with 1024×768 in mind, your site should still look fine in higher or lower resolutions. Bear in mind that if you have a lot of text, long strings of text are more difficult to read than shorter ones, but if you need to get around the browser size factor, you can use tables with widths specified as percentages instead of pixels.
HTML allows widths of tables and forms to be defined as a specific number of pixels, or as a percentage of the browser window.
By using the percentage option, the elements defined are seen in relationship to the viewer’s own browser window. If you specify 90% you leave room for a margin.
When using percentages, you also need to test the page in various browser window widths to assure sure that you get the desired layout. What appears on separate lines in a narrower width may be strung out in a single line across a wider screen.
But don’t worry much about this. There are several ways to deal with that they we can deal with later.
– Frames –
There is a place for using frames on the web… For example, if you want a certain part of your site to be always visible without having to reload each time, or to be always visible when a visitor scrolls down the contents.
There are some disadvantages however. For example if you want to reference a particular page of your website in an email or newsletter, it will load without the frames and therefore without the navigation menu. Therefore you need to refer visitors to the index page.
Also some search engines find it it difficult to index a frames site because they treat each frame as a link; however you can get around this by putting content which you want the search engines to find in the <NOFRAMES> tag</NOFRAMES> which comes at the end of the page after the frameset.
Before using frames, carefully consider whether or not your site will benefit. Remember that much of this is optimized for the search engines and a pleasing layout when you use the readily available CMS like WordPress and others. There are other aspects of website design which run into the next topic – website promotion.
We will take a look at this when we look at promotion in next lesson.
Take care,
Bogdan Fieldur.
Next lesson..
===============================
Copyright 2013 AdlandPro
———————————————————
Bogdan Fiedur 
[…] Part 4 Website Design […]
[…] Review previous lesson here.. […]