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

Small Business Web Design - How to Make Your Business Appear Larger Than Life

July 26, 2008 at 6:04 pm · Filed under Web_Design

In a world where things are never quite what they appear to be, the internet has proven to be a very mysterious place. Large and powerful corporations like Microsoft, Apple, and Google are running the show, but their websites are surprisingly easy to imitate by any freelance artist for any teeny-tiny business owner. How is this, you ask? The web is an easy place to look larger than you really are. This is especially true for businesses around the globe. It is more simple than one might think to impersonate a company that has over 10,000 employees, even if you are a “mom and pop” shop based in the middle of nowhere-Kentucky.

For example, we have an aspiring musician. We take his or her website and make it completely stunning, along with a biography narrated in the second-person writing style. We take a few high-quality photographs of the musician, and add some embedded music, and flashy website affects. This web page automatically makes this musician seem like the up and coming celebrity, even though they’ve barely just begun their career out of their small home town. If you added a contact email address directed to the musician’s “agent”, (even if they don’t have one), it makes them seem like they are even a bit harder to attain for an act. The website radiates with brilliance, all directed at the musician. Such praise and hoopla over any one person is sure to make them seem larger than they really are, if you do your research.

If you know where you are going with your professional presence, you too, can have a website that makes your business, band, artistry, or venture seem larger than life. There are five essential steps to consider before even thinking of calling up a web designer or programmer to start your significant project.

1. Research Your Competition. - I cannot stress this enough. If you are a small online store selling designer handbags and purses, you will want to do your research on the big boys of the handbag and purse business. Not sure who they are? Take a look at Google and Yahoo, and you’ll know right away who your competition is. Size them up, because this is where you want to be ten steps ahead of! Take notes for your web designer or development team.

2. Perfect Your Professional Image- If you don’t have a logo, or you don’t have one that you are happy with; now is the time to fine-tune every element of who your business is. Thinking along the lines of who your biggest competition is, decide the best direction of your professional presence. Remember, if you are going to play ball with the big boys, you must be prepared to think like them!

3. Don’t Look for the Cheapest Web Designer- Good Web Design isn’t the cheapest you can find. This will NOT help your professional image, and almost always leads to disappointment and wasted money. When it comes to professional web design, you really DO get what you pay for. Look for someone who has a unique and very intelligent outlook on the internet and what is hot in it today. Be ready and willing to spend a good amount of money to get the job done right the first time around.

4. Don’t be Intimidated- If you are look at your larger competitor’s websites and feeling the urge to cry or give-up, don’t do it! The reason most people start small businesses, is because they want to grow into larger and more prosperous entities down the line. Prepare yourself mentally, and get yourself into the mindset that you already own a large and efficient business that makes over a million dollars a year. This leads us into our final step.

5. Prepare for Growth- I have witnessed many small business owners who decide to revamp their websites to make themselves look larger and more cutting-edge. About 90% of the time, this leads to tremendous growth for their businesses. By looking larger, they essentially pave the way to actually becoming a larger business or venture. This is the most important step, because you must tie in the “What if” factors. Like, “What if we exceed our sales, will we have more product inventory readily accessible?” This step is so crucial to actually succeeding, and not just having a prettier website in vain.

Remember that actually succeeding is something that is solely up to the business owner. However, finding the right development team also is critical in this type of growth. There are also small things you can do to make your appearance seem larger. You can obtain a toll-free “800″ phone number, if you receive a large volume of calls. This usually indicates a large or quickly growing business. It is also wise to make sure that you own a “.com” domain name that indicates your business name somewhere in it. You should have an email address at this business domain such as, “sales@yourbusinessname.com” It is also wise to have a few email addresses that pertain to each issue, like sales, tech support, information, and any other relevant services that integrate into your business structure.

Terra Andersen is a veteran web designer and programmer who specializes in fresh and innovative ideas for up and coming businesses and ventures. She is the owner and lead designer/consultant at her firm, Digital Smash Media. http://www.digitalsmash1.com
A designer since the tender age of 13, she has seen the changes and evolution of the internet through the eyes of a child, a teen, and now as an adult.

Share This

Comments

Web Design Basics

July 1, 2008 at 4:04 pm · Filed under Web_Design

Professional web design has become vital during recent years. A few years ago, it was estimated that a visitor to a web site took about 8 seconds to decide to stay on that web site or click the “Back” button. That was then, this is now: Your web site has only about 4 seconds to make an impression on the visitor. That is not much time at all! Today, people want instant results. Few people even wait to see the entire web design before making their decision. If your web design does not grab their attention immediately, they won’t stick around. And if your web site does not offer something of benefit, they won’t bookmark it and they won’t come back (more on that later).

So, with that in mind, let’s discuss some practical ways to grab the attention of web site visitors. Then, in a future article, we will talk a little about keeping their attention with good web site content. Remember, people spend most of their time on the Internet reading. They read search results, news items, how-to articles and forums. A professional web design company will take this into account. But that is for later. First, we have to keep visitors attention (remember the 4 second rule).

Get to the Point.
We live in a fast-paced society and we are used to instant results: Microwave meals in 5 minutes, lose 5 pounds in 5 days, 30 minute oil changes, see results from fitness equipment in 20 minutes a day, and on and on.

The Internet is no different and it actually may be less forgiving of web sites that don’t deliver results quickly.

The 4 second rule that we spoke of earlier does not mean that your entire web page must load in 4 seconds. Rather, it means that a visitor to your web site has to at least see something interesting within that 4 second window. So, to test your site, while it is loading, ask yourself:

• How much time passes before I see anything?
• What is the first thing I see on the web page?
• How much time passes before I can read some text?
• How long would it take a visitor to determine what the web site is about?

Try this suggestion yourself and then try to enlist the help of some of your friends. The more people you have to test your web site, the more thorough your results will be.

Ideally, the site should load top to bottom and left to right. However, your design should adhere to the reading habits of your target audience. Some countries read from right to left so, make sure you know your audience. Also, the most eye-catching elements should load first. Once these load, they will grab the visitor’s attention. Then, the rest of the page can finish loading.

What Graphics Format Should I Use?
This is probably one of the most overlooked aspects of web design. How many times have you visited a web site and cringed at the slow loading pictures. I’ll bet you did not stick around to see everything load.

In most cases, web sites that have this problem were created by someone who bought a Web Design How-To book, created a web page that says “Hello World” and now think they are an expert. Or, possibly they are learning web design and created this slow loading site as a favor for a friend or family member. At any rate, hiring a professional web design company will prevent bad design from happening to you. In the meantime, here are some very basic guidelines regarding those very important web site graphics:

More about the .JPG file format:
.JPG (Joint Photographic Experts Group) format allows images to contain up to 16 million colors. It also supports Variable Compression, which allows you to reduce the size of the image at the cost of some of the detail. In order to take full advantage of this feature, you will need a graphics program which will allow you to preview the image after you have compressed it. Some of the more popular graphics programs are Photoshop, Fireworks and Corel Draw.

JPG is not a good format for images with only a few colors or for text created as an image. The finished image will be of poor quality.

More about the .GIF file format:
.GIF (Graphics Interchange Format) support up to 256 colors. It also supports “transparency” which allows you to specify the background of the image to be invisible, thereby letting the web page colors show through.

Graphics in this format are also “looseless”, meaning the final quality is not adversly affected by compressing.

Boiling it Down.
For the most part, here is a good way to determine what format you should use for the graphics on your web site:

• If your graphic has many colors (such as a photo) use .JPG as the format, However, make sure that the file size is not so large that it prevents the web page from loading quickly. Find a good balance between image quality and file size.
• If your graphic has only a few colors (such as a chart) use .GIF as the format.

Of course, this is somewhat oversimplifying the very important role of graphics in your web site design. If you hire a professional web design company to create your web presence, he or she should follow these guidelines during the design process. You should make sure that the rough drafts you receive from the designer adhere to good design standards.

Make Them Want More.
Of course, no matter how well organized your web site is and how effective it is at grabbing the visitor’s attention, they have to view your web site as important. You have to give them reasons to stay and browse your site, to bookmark your site so they can refer to it again and to tell others about your site so you can build new visitors.

We will consider how to tackle this aspect of quality web site design in an upcoming article. That article will focus on three main ways to keep visitors coming back:

1. Offer something of value

1. Newsletter
2. Free tips
3. Monthly coupons

2. Good, quality marketing copy

1. Put effort into the words of your web site.
2. Remember, the Internet is made up of web pages and for the most part, pages are meant to be read.

3. Easy to use web site navigation.

1. If visitors can’t get around easily on your web site, they won’t stay very long.

Crystal Coast Technologies is a web design team headquartered in Swansboro North Carolina. We specialize in Flash web design and database driven e-commerce. Our blog contains more tips and the latest tech news, including security alerts.

Share This

Comments