Soapbox // Sounds better than "Blog"

Home » Soapbox » I want a website

I need a website!

Load time
Functionality
Navigation
Text / link decoration and colors
Re-design

Load time
It's safe to say that it's a lot easier to design a website for a client than it is to design your own. Reasons being usually you coach a client to lay out a clear idea of the look and feel of their site, but, who’s coaching you?

It’s understandable that we all want our websites to stand out, but you have to be careful you don’t stand out too much, you’ll end up being the elephant in the room, the website that does everything, but does too much. Stick to the mantra “too much of anything, can’t be good”.

You can try a few tricks.
a) Use a simple layout. White backgrounds usually have that clean office feel, or if you prefer, a solid dark color or a wooden background image like mine.
b) in your HTML code you can add an “onload” command.

Let’s try loading the image “imagetoload.jpg” which is in you “images” folder on your website.

Between the <head></head> section add this script

  <script type="text/javascript">

                        function loadImage()

                        {

                        alert("Image is loaded");

                        }

  </script>

Now, between the <body></body> section, paste this code where you want the image to be loaded.

<img src="www.yoursite.com/images/imagetoload.jpg"  onload="loadImage()" />

Functionality
You need to clearly identify the purpose of your website, it’s scope and use this to measure it’s effectiveness. A hotels, for example, may use a website to promote specials, increase the amount of potential visitors booking rooms using their online reservation service rather than telephone. So you need to make a list of things that you want visitors to be able to do on your site.

Include in your website planning also, your target audience. This is your basic measuring stick on how to go about marketing your site.

Navigation
The next logical section to look at is navigation. Now that you figured out what you want the visitor to be able to do on your site, we move to the “how?” Keep in mind that your cute navigation setup could backfire if you forget a basic rule to site navigation.
“How do you work this thing?”

If the visitor has to search for the link to a page, chances are they’ll just skip it all together. It’s always best to keep navigation simple, if you have multiple connected pages that you should do sub headings.

Here’s a link to learn the basics
http://www.w3schools.com/css/css_navbar.asp

Text / link decoration and colors
Let’s talk about colors. A rule of thumb with using colors on a site is “stick to uniformity”. That’s a fancy way of saying make sure your colors match. If you want to highlight certain words, use 1 specific color that will draw attention but keep in mind that nobody wants to look at a site full of neon text.

Stick to darker shades of gray or black text for the main text
Use the same color for your links, which is very easy in CSS.

Using CSS, you can either (a) link an external .css file or (b) type the code into your html script.

External .css file
Between the <head></head> add this code

<link rel="stylesheet"  type="text/css" href="nameofcssfile.css"  />

It’s always best to keep you files organzed. Keep your picture in you “images” folder, your javascript in you “js” folder and your .css files in your “css” folder. In this case your link will look something like this.

<link rel="stylesheet"  type="text/css" href="/css/nameofcssfile.css"  />

If you chose to add your css script to your html file, then try these examples.

TEXT DECORATION
Somewhere between the <head></head>

<style  type="text/css">
   h1  {text-decoration:overline;}
  h2 {text-decoration:underline;}
  </style>

No anywhere between the <body></body> where you want your text to appear, add this code:

<h1>This  is heading 1</h1>

<h2>This  is heading 2</h2>

LINKS
Somewhere between the <head></head>

<style  type="text/css">
 a:link  {color:#FFFFFF;}    /* this set’s the  unvisited link to white */
 a:visited  {color:#000000;} /* this sets the visited link to black */
 a:hover  {color: #2E2E2E;}   /* sets the mouseover link color to a dark gray */
 a:active  {color:#0000FF;}  /* sets the color of selected link to blue */
</style>

Now somewhere in between the <body></body>, add this code

<p><a  href="index.html" target="_blank">This is a  link</a></p>
                      You can  also use the font family option, to keep the fonts consistant
                      <style  type="text/css">
p {font-family: {Verdana, Arial, Helvetica, “Trebuchet MS”,  Tahoma, Geneva, 
“Lucida Sans Unicode”, “Lucida Grande”, “MS Sans Serif”,  sans-serif;}
</style>

Re-design
The web design industry is constantly growing, so you never want to get complacent with your current look but should always keep in mind that at some point you will need to make changes to keep up with your competition.

One good way to measure your own website is getting your visitor stats. Your hosting company usually has this as a part of their service. You can check out what pages get the most traffic, how long your visitors stay on each page, what they search for the most while they’re there, for starters.

Also check out and magazines dealing with your industry visit some of the websites mentioned in the articles, and look at the key features you like about their website and try to incorporate some of these ideas into your site. Keep in mind though; big businesses have big bucks to hire big designers to get big results. If you can’t compete with that, stick to the one thing money can’t buy.. customer satisfaction.

For the design stuff.. I can handle that