Web Design Tips and Tricks

Creating a Basic Web Design Template

Get Web Design Tips and Tricks on mps-web-design.com. Creating a Basic Web Design Template topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

A "template" is simply a design format which you can apply to all (or most) of the pages in your web site. The first advantage of using a "template" system is that it allows you to make your most important design decisions at the beginning, and then just focus on content. The second advantage is that it allows you to quickly create new pages based on your standard design.

The disadvantage is that many template-based websites look homogenized and seem to lack a unique character. Designers who sell templates tend to use the same formats over and over again, insert the same generic images, and use the same techniques.

Just as important, templates are often not ready-to-go right out of the box. They almost always need modification, and often modifying a professionally prepared template is difficult because the designer will have used techniques you may not fully understand or are specific to the tools he or she used to create it.

So it is preferable not to think of a web template as the kind of thing you buy from an online template store. Rather just think of it as a basic page format that can be used over and over again. The best template is therefore one that uses "standard" techniques that can be modified without the use of specialized tools or programs (like Front Page or Dreamweaver).

Creating a Basic Template

If you are not familiar with web design, try working with a "bare bones" template to begin with. There are two ways you can go. You can work with basic html and tables, or you can create your basic template with CSS. Since CSS is rapidly becoming the new standard, it is probably better to begin with CSS -- especially if you have not yet become used to constructing web pages with tables.

CSS stands for "Cascading Style Sheets", but at the beginning it is not important to understand what that means. What is important is to understand that CSS allows you to create a set of formatting parameters in a "style sheet" (a seperate file) which you then can very easily apply to your individual pages. In other words, you seperate the "style" from the "content".

A simple style sheet can contain just three or four design elements. Here is an example which you are free to copy (right click and "Save target as" to a location on your hard drive, then change its name to "sample-1.css".)

Style Sheet Sample (be sure to change its name to "sample-1.css").

This template contains a definition for the body text, a header component (with a background image), a "navbar", and a definition for two headline styles, h1 and h2.

Now that you have a style sheet you can begin building your web site by creating a basic home page. Here is an example which embeds the style sheet referred to in the previous paragraph. You can get the html code by just opening the page in a browser window, looking at the "Source" code, and saving the resulting file on your hard drive as, for instance, "sample-1.html".

Now you should have two files in the same location on your hard drive -- "sample-1.css" and "sample-1.html". You can get the image file by just right clicking on the image in the sample page and saving it to the same location on your hard drive.

Your second step will be to create the pages referenced in the "navbar", so make sure you think of names for these pages before proceeding (e.g., howitworks.html, products.html, about.html, sitemap.html, contact.html). Then build your hyperlinks into the navbar. (Look at the code of the sample file to see how it is done.)

Once you have your basic home page with links, this then becomes your template. Just save it as "howitworks.html", "products.html", etc., and make the changes to the specific pages.

The result (once you upload it all to your host server) will be a basic, functional website containing a number of properly interlinked pages. It will also be search engine friendly because the design is not cluttered with scripts, and the most important elements are clearly laid out at the top of the page.

For more web design tips and techniques see the Linknet Marketing Resource Library.

Lets face it, when a visitor does arrive it only follows that we should do our best to help them see the value in our website, no?

Welcome new visitor, here is our feed, blah blah... Can't we do better then that?

I see a lot of variations on the Welcome new visitor, here is our feed type of thing when I arrive at blogs and such these days. Sometimes this gets customized if the site determines that I am a "Googler" (visiting from a search engine) and then offers me some piece of text to try and make me become a passionate user of their site.

This strategy never makes me a passionate user.

What does work is when I read the page in question and then navigate around the site and find more great content.

So the trick should be to make great-content discovery the goal.

Welcome Googler, let us help you out

Here we present one solution that works for helping people discover your site. As a side effect it will increase your pageviews in a proper, natural way. (We have a whole pile of other solutions for this, however that manuscript post isn't quite ready yet.)

1. Check referer string
2. If search engine, grab query text
3. Do a full text search on your content to find other articles on your site that are related to their search query
4. Pass the resulting list to the reader in a user friendly way
5. Maybe keep that list persistent for the session, unless they close it

What we have done is created a custom, on-the-fly navigation system based on their search query! This little widget should work to keep them poking around your site.

Placement etc.

We've been using this on several sites now (along with some other ideas alluded to above) and it works. Pageviews per user go up. Bounce rate falls (more on that in the future too).

We have had to play with the placement of this box: top of the page? Floated to the right/left of the main page content? Following them down the page (with js)?

As they say, your mileage may vary, but chances are you will get more mileage out of more readers, and that is a good sticky thing.

More Articles: