Step 3 - WebJunk Guide to your First Web Site

Step 3: Site Design and Content

This step is broken down into sections. You should read all sections in their entirety as there is much important info you will not read anywhere else.

GUIDELINES
There are several guidelines for web site design. Back in the early to mid 1990's people used to say "if you build it, they will come." Sounds like something from a movie! There were few web sites with not much on them and there were many topics yet to be filled by web sites. The new saying is "If you build, no one will know!" Web sites today are competing against MILLIONS of other web sites. Millions as in 1,000,000. And each is competing for a number of minutes of attention of visitors.
There is one word which I consider the most important word on any web site. I will repeat it often. When people write to me or catch me on discussion forums 99% of the time I write them back using this word. The word is "Content." Content is the information, text, pictures, videos, music, sounds, etc. that visitors to your site will spend time reading, looking or listening to. If you have no content there is no reason for visitors to spend any time on your web page. Content is also what defines your site.
When it comes to major mistakes in new web sites it is here. The mistake is not a poor site design but the opposite, Over Design. Take a look at some of the top web sites on the Internet. Twitter, Google, Yahoo, Amazon are not only popular but profitable. Most are very simple designs indeed.
Content is king. Bigger graphics, music, multimedia slideshows, fancy code, have nothing to do with content. They do make a site slow to use. Consider 60% of Web traffic in the US is still on dial-up. When you add the extras you are keeping those people from using your site. Its a numbers game. If you reduce the numbers who can potentially use your site then you are reducing the potential customers and users. With competition among web sites so high you can not afford to lose visitors. People come for the content and not the bells and whistles. Not that you should eliminate them completly but keep to a minimum.
In matching your site to your visitors you are essentially matching content to the visitors and their interest. If you want a site to attract dog owners, your content will be dog oriented. That may sound condescending but have seen all too often where people create sites and the content does not match. My own experience is that first time visitors must find 15-20 minutes of content oriented to the site theme. Thereafter each week should be at least 10 minutes of NEW content. If you can not keep their attention that long there are plenty (and I mean plenty) of other web sites that will. Discussion forums, classified advertising, or other visitor driven information can be the content for your web site. But you need to attract visitors Before they will create the content for you. Why post to a discussion board that has few or no posts? They will not expect a response. Why post a classified ad if no one will read the ad? You yourself have to create the content. The next step relates to attracting visitors but without content you will lose them even faster.
Your site needs to have a central focus. Decide what you are trying to communicate or bring users in for. Write out (remember things called pencil and paper?) the areas and menu choices for your site. This will help in deciding on the structure.

DESIGN CONCEPTS
When you have the structure, you can begin on the appearance of the site. You can start this also on paper which can save a lot of time in the long run. It should be kept clean, easy to read and easy to locate the links and menus. Colors, backgrounds, layout, etc. is all a personal choice. Again, do not over design. And forget those annoying pop-up windows as it drives people away.
Most of you reading here will presume the next most important item would be the look of the web site. You would be completly wrong. It seems there is an almost direct relationship between people who place maximum importance on the look or appearance of their web site and the failure of those web sites. Some of the most visited sites are also the ugliest. Many people want to have flash graphics on their site for special effects or to make the site more colorful. But when you do that you are also reducing the number of potential visitors. Flash requires the visitor have a flash player installed on their computer. Many do not and many (at work) can not install it. Also you may use flash which requires a different version of the flash player. You are trying to attract visitors and not turn them away at the door! So what is the next most important item? Ease of use. A cluttered site or one difficult to navigate means a site visitors will quickly abandon.
Your first (Home) page is your landing page. It is the most important page on your site. Within an average of twelve seconds a visitor will decide whether to browse further into your site. Less is more here. If they are waiting to download music, large pictures or a flash intro most will go to another web site before your page finishes loading. Also be aware people from work may leave immediatly when music or sounds begin. Remember they are supposed to be at work and don't want their boss to catch them! Make sure your landing page clearly informs the visitor what your site is about and what they will find inside. You need to sell them on your WEB SITE here. Sell your content, service or product INSIDE your site.
Pictures and graphics can be a major part of your site. The goal is to keep their file size as small as possible. Your digital camera creates beautiful pictures at 5 Megabytes in size. This is great when printing large photos but useless on the Web. It will take aboue a minute to download on DSL or cable modem. For a dial-up user it can take over twelve minutes!!! Pictures can be easily reduced in size. Preferably 50k max which will still retain excellent quality when viewed on a 19" computer monitor. Keep in mind if you have multiple pictures on a single page you need to reduce the size further. A better way is to create a thumbnail (smaller image under 8k) and then require clicking on the image for the full-size (50k max) image. You want an entire (html plus pictures) single web page to stay under 70k in size.
When designing a web site think simple. Fifth Grade simple. The New York Times is written for a fifth grade education. Be consistent in look. Keep links or menu choices to the same area of the page, clearly visible, not burried between graphics or text. Fonts should be the same throughout and better to stick to standard type fonts such as: Arial, Verdana and Times New Roman. Limit the choices a visitor has on a page. Depending on the type of website I try to limit choices to 5-6 per page. 12 absolute max. Too many choices confuses visitors and gets them lost. It also shows a lack of focus. If needed move extra choices to a sub-category. That being said avoid burrying the choices in page levels. If they have to click on one page to go to another page to finally get to a third page with the link they need, it is too complex. KISS. Keep It Simple Stupid. It is advantageous to keep the links, buttons, menus, etc. large enough that someone with a small screen (like a laptop) can easily click on it with a mouse. A common mistake here is too much content on the main page that the links or menu is nearly hidden. Simple.

SITE DESIGN SOFTWARE
Creating your site means either using a software program or writing code directly or even a variation of both. When using a program it is creating the code for you. The "code" or language is HTML or Hyper Text Markup Language. If you are new to designing a web site you will not want to write code directly. You will use some sort of software program. These programs range from the very simple to some so complex you can spend months learning how to design a basic web page. Some low-end hosting companies provide an on-line web site creation program. You use your browser to access the program. They are fairly simple to use and create very simple often boring pages with limited functionality. They are fine if you are just putting up a single page site but insufficient for anything beyond that. There are two types of more advanced programs. The first type is a program you run on your own computer to create the pages. They range from Free to hundreds of dollars. I will go in more details later in the html editing software section as they require extensive info.
The second type runs on the web server itself and are called Content Management Systems or CMS. These programs have an interface for creating web pages but rather than creating the individual web pages, they save the content (for each page) into a database. The menus, layout, header/footer, and other standard shared features of the site are stored seperatly. This gives the entire site (all pages) the same look, feel and interface. It also means when adding or changing content you only need to deal with the specific content and not an entire page design. The installation can sometimes be complicated enough to have someone familar with them do the initial setup and configuration. But once setup, creating web pages & content can be very easy and some provide the ability to make very feature rich sites. The real strength with these types are that you can update the site when you want and without incurring ongoing costs to a web designer and without the need for knowledge of html code. Additionally with most, you can give limited access to others (seperate login) to allow them the ability to update only the section of the site you want.
With either type you need to consider the learning curve. If it will take you many months to learn to use, often people will give up before they complete the web site. Since everyone learns at a different level you need to find what works for yourself. Also base the choice on the complexity of the web site you want. If it is a single page some of the larger applications (of either type) would be overkill. Consider as well that nearly all web sites must be dynamic. Web sites seem to need almost constant tweaking. Or you find certain colors, graphics or organization needs to be changed. Ease of use at YOUR level helps with making these updates.

HTML EDITING SOFTWARE
There are a number of ways to create the actual pages of your site. If using a Content Management System (CMS) then you will be working inside its editor. For standard static web pages you can use:
1) On-line Authoring interface
2) Website Builder Software (usually free download from your hosting company
3) Purchased HTML Editors
4) Kompozer/NVU

The first choice allows you to create solid pages but might be limited in functionality. Very easy to use for beginners. The second takes it to a further step.
HTML is the language of web pages. It is what tells a browser (Internet Explorer, Firefox, Opera, Safari, etc.) how to display the web page. HTML controls color, size, style, placement, wrapping, location, etc. of text, graphics, and other components of the web page. I will not get into the details of html. There are many sites devoted to explaining it. The first I recommend to check out is: http://www.w3.org/html/ You will find a wealth of specific information and an HTML tutorial. But if you are just beginning with web design I would recommend using an HTML Editor program. Still, it is always good to have at least a basic understanding with HTML so if something goes wrong you can fix it or at least understand the problem to communicate to a web designer.
There are two types of HTML editors. The first is a direct code editor where you always are looking at the code. The second is a WYSIWYG editor where you actually are seeing the web page as you are creating it. We will only deal with the second. Prices range from $50-400 each. These types are fairly easy to use although there are times you need to have some knowledge of HTML code. The more expensive versions offer additional functianality including ability to edit graphics or pictures and creating complex forms. You need to match to your requirements. Frontpage from Microsoft has become a very popular editor but I strongly urge you to avoid it like the plague! The code it generates is several times larger than what is needed, it creates very slow web pages, will use large amounts of bandwidth and has a steep learning curve. Additionally Each version of Frontpage has compatibility issues with browsers other than Microsoft's own Internet Explorer. You do not need to eliminate potential visitors before your site is even started!
You can spend up to $2000 (that is Two Thousand!) on an HTML editor. I will recommend and discuss one here that is much less. Kompozer (formerly called NVU) is 100% free. Hope that is in your budget. It is fairly easy to use and offers features that work for nearly all web sites out there. You can download Kompozer for Free! from http://kompozer.net/ Kompozer also makes very clean code which translates to fast web pages.
You can create pages even before choosing a hosting company. Create some pages in Kompozer or whatever software you choose and save the files on your computer. In your browser in the address/URL fiel enter something like: file:///C:/folderforwebpages/webpage.html The will allow you to view the web page exactly as someone on the Internet would. While programs like Kompozer and Frontpage allow you to view the page while you are editing, there are times where things such as formatting will change when seen in your browser. Also an ongoing issue for web designers is that different browsers and even different versions of the same browser will display the page differently. I keep multiple computers and have an assortment of browsers to test the pages. While this probably is not something you can deal with, just bear in mind this detail.

TRANSFERRING WEB PAGES TO YOUR HOSTING SITE
Once you have created your web pages you will need to transfer them (upload) to your hosting account. Most HTML Editors have built-in facilities to do this, sometimes called Publish. If not or you would like a better choice you should use a FTP (File Transfer Program) client to do the job. It will also allow you further control of the files and steps that may be needed. An excellent FTP client application is Core FTP. They have a Free version called Core FTP LE which can be downloaded from http://www.coreftp.com which will provide all the functionality you will need to start with. It is extremely easy to use. If using a Apple Mac computer you will want to get Fetch while not free is inexpensive.
When you use FTP to transfer files you will need the Username and Password given to you by your Hosting company. Be aware of where you need to place the files. The base directory or path is usually not accessible to the world wide web. Normally web pages will need to be placed under a path similar to:
/www or /public_html. If unsure, ask technical support for your hosting company as only they will know.
At this point you may have a working web site. You might think you are pretty much done. You would be totally wrong! The next step is the most important by far. Your web site would not exist without visitors. Read the next Step "Attract Visitors". Twice!