Creating a Basic Web Design Template

November 16, 2008 at 7:12 pm · Filed under Web_Design

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.

Rick Hendershot is a marketing consultant, writer, and internet publisher who lives in Conestogo, Ontario, Canada. He publishes several websites and blogs, including The Linknet Network of Websites. This network provides an inexpensive way to advertise your website, and get as many as 100 low cost links.

Share This

Comments

Good Web Design

September 13, 2008 at 1:05 am · Filed under Web_Design

Too many web designers get confused about what type of site they’re creating — witness the site that was up for a long time . If you’re creating a site that’s for a media company (movie, music, etc.), fashion company, art school sites where there’s no accountability for the bottom line, then it’s ok to use “wild and crazy” design techniques. But remember, “It’s a temporary thing.” This type of design is not supposed to be serious and last forever. Have fun.

But if you want your website to look reasonable and is functional, devote your energies to keyword rich content, site maps, privacy policies and the other standards that seem to be missing from a lot of websites. The things that the Search Engines like to see and will reward with higher rankings. A ‘crawler’ can’t see fancy flash gizmos or premium quality images over 100 kb each.

If you’re creating a real web site for a real company, you have to choose a design that’s not quite as exciting. Something more responsible and restrained. Something dependable. Something you’d marry

It would have to be to keep it clean and simple. There is nothing worse than a cluttered looking website and there is nothing that will repel visitors more quickly than a slow loading website. Take a look at a few of the ‘TOP’ Internet based company’s websites like Adobe.com. The largest image on their Home page is 6 Kb. There is no Flash, no music. Even Microsoft.com has one small, unobtrusive ‘flash’ component in the bottom left corner and their largest image is 18 Kb.

Many private Internet users are using ‘56kbps dial up modem’ connections (according to research firm Instat-MDR). So, by building a website that is only accessible in a reasonable amount of time to DSL users, you are effectively disqualifying yourself from visits by 80 percent of the people likely to be interested in your product or service. They will not wait.

The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load.

Minimize the use of images - Images do enhance a page but don’t make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Very often simple designs are the best. For web design source files visit my site http://www.davbindu.com/

Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image.

Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like.

Cut down the use of animated gifs - Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor’s attention to a particular section of your site.Or design simple icons icons that add a little color and draw the attention of a visitor.

Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small.

Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.

Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don’t make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.

Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site which is extremely useful.

This information is collected from number of sites and modified and reused, I will remain grateful to the respective original authors. Thus it is no way copyrighted and if you want, you can reuse these articles in your newsletter, web site or ebook. You don’t need to take my permission for re-publishing these articles, as long as you display the resource box at the end of each article.

Mrs. Vaidehi Ghag is Web Designer in mahar - a unique Industrial online Business Directory.

http://www.davbindu.com/

Share This

Comments

Web Designers Beware!

July 22, 2008 at 5:12 am · Filed under Web_Design

As a web designer, I have a personal interest in a new trend which threatens to put me and my kind out of business. That “threat” is Web Design Templates. In short they are ready-made web design products which can be used as a basis for a fast and high-quality website. You usually receive a Photoshop file (.psd), Flash file (.fla), HTML files with your tables and initial scripting already complete, fonts, sounds and anything else which may be part of the website design.

A couple of years ago these templates were a small issue in the world of design. Most of them were of minimal quality and there were not all that many out there. Now some of the “big players” like BG Website Templates, The Discount Directory and Plantillas De Website are supplying spectacular designs which include 3D animated Flash, multimedia and dynamic programming for prices comparable to dinner out. Many of these templates rival even the best custom designer’s work. So how can we (the humble designer) survive?

• My first suggestion is to “aim high”. By that I mean start targeting a “higher end” clientele. Most companies of any size will not want to have a website design which may well be found on dozens of other websites around the world.
• These templates, while very impressive, are still templates. They still require the knowledge and skills of a professional for them to function to their full potential. So consider promoting your customization skills to those clients who are looking for a low cost solution. You can still make a pretty profit on the website and you’ll get it done much faster. Another advantage to this method is that the client has already chosen a design, so the process of “back and forth” designing is removed.
• Finally, you may choose to directly promote templates on your own website. You may feel that you’re cutting your own wrists, but as mentioned before, the clients who wish to use a template most likely didn’t want to spend the money for your custom work anyway. Once you’ve saved them money on design work by selling them a template, you have a much better chance of upgrading their order with add-ons like chat rooms, help desks and newsletters. In the end you may end up coming out ahead.

Whether or not our careers as designers will survive this competition remains to be seen; but in the meantime it doesn’t hurt to at least become familiar with web templates. Knowing your competition is key to success.

Written by Gene Tewksbury
Webmaster/Lead Designer at Blue Gel Media
Exciting custom web and multimedia design and development.
Copyright © 2005 Blue Gel Media
This article may be reproduced if all content, links and byline remain intact.

Share This

Comments