Getting Started in Web Design

Transcription

1 Getting Started in Web Design 7 Tips You Need to Know by Candice Pardue Copyright Candice and Bob Pardue, Webmaster Course Com - All Rights Reserved This material may not be copied or reproduced in any format including print or digital unless permission is obtained from the author.

2

3 Table of Contents Chapter 1: Prepare before you Design...3 Here are the key areas your website should include...3 Chapter 2: Keyword Optimization from the Start...5 Chapter 3: Google Adsense Tips...7 Chapter 4: Promote Your Site with Signatures...9 Chapter 5: Website Structure...11 Chapter 6: Avoid the Pop-up Mistake...13 Chapter 7: Choosing Fonts and Graphics for Your Website...14 Resources:...15

4 Chapter 1: Prepare before you Design Getting Started with Your Own Website Preparation for building a web site is similar to following plans for a construction project. Have you ever looked at the blueprints for a new home? Blueprints illustrate on paper what the home will look like on the inside as well as how the home will be entered from outdoors. Within are doorways that lead from room to room. These doors are strategically placed as to not interfere with other areas of the home, but to provide easy access from one room to the next. Your website is very similar to these blueprints. So you can create blueprints of your website before you start designing it. Do this on paper by writing out a general menu and layout of how you would like the website to look online. Here are the key areas your website should include. 1. Company or website logo with a catchy heading or slogan. The logo and/or heading should be placed at the left or middle top of the page if possible. Customers will naturally read whatever is below your logo or heading. 2. Navigation menu for surfing your web pages. Create a navigation menu for the top of the page (below the logo) or down the left and right sides of the page. To get the menu on each side, you may need to draw three columns. These can be one web page table divided into three column cells. You'll learn about creating tables and columns in the web training course. You may also place menu links at the bottom of your web pages, but be sure there are links at or near the top as well. 3. Forms for mailing list and/or customer log in. If you plan to use forms, decide where you will include them on your web pages. You might have one form to gain subscribers for an newsletter and another form where customers can log in (if applicable). You can place the forms in the side menu or within your page content. Subscription forms work well when placed somewhere within the reading, while log-in forms work well in the left or right menus. 4. Your content. Down the center column is where you will place your content for the page. Whether it's a welcome message, FAQ, product sales page or an article, you'll want to add the text to the

5 middle of the page. This is where visitors will expect it to be, so give them what they want. Readers naturally move their eyes from left to right, top to bottom. 5. Footer. At the very bottom of your page - below the menus and content - include a footer with your company name, support and copyright information. You might even include a disclaimer somewhere near the bottom if you are providing tips and articles. Quick Tip: Organize your website in a way that is pleasing to the eye and easy to navigate. Visitors aren't worried so much with the look of your design, but they do take notice at how easy your site is to use. They also notice how well your content is written on each web page.

6 Chapter 2: Keyword Optimization from the Start Get Started with SEO and Keywords using these Tips Many website owners focus on keyword density within their web page content, mainly in articles and sales copy. Fortunately, you can gear up your website for search engine promotion before you even begin your design. Here's how. First, let's look at search engine optimization. What is it? Search engine optimization (SEO) is simply getting your site keyword-ready in hopes that the search engines will take notice of it. Your main source for traffic will be the major search engines. The more popular keywords you can use throughout your web pages (within reason), the more likely you will receive traffic - for free! With that said, Google has made some major changes this year so be careful. It's better to write your pages for your readers than for the search engines as the amount of time people spend on your site carries much more weight these days. A good rule of thumb is about three of the same keyword (phrase) placed at the beginning, middle and end of the content. Vary this and you should be fine. 1. Choose several main keywords. To find popular keywords for your site, do some research. Go to Article Underground and scroll to the bottom of their page. Then, click on "Keyword Densite Analyzer Tool." Past in your competitor's URL address, click on submit and you can find keywords and keyword phrases on their web page. This gives you a tremendous advantage! Try the keyword analyzer here for free... Choose a few key phrases that are popular and that best describe your site's purpose. You should use a couple of general keywords or two and three word phrases and a few specific ones as well. 2. Insert keywords in image "Alt" text. When inserting images into your web page, whether it's your logo or some other image, be sure to include keywords or key phrases in the image "Alt" text instead of the name of the image. For example, instead of typing "Homepage Image" for my logo or "Company Logo," I might type "Web Design Training" or "Learn Web Design" into the image's "Alt" text. The search engines will recognize keywords in this format and give your page greater relevance for those keywords. 3. Create text links with keywords. Another way to include your keywords is to type them into link text. Instead of using buttons or

7 graphics for your links, use text only. For example, at my site I might name a link "Free Webmaster Articles" instead of "Resources." Why? Because with "Free Webmaster Articles" I can get the keyword "webmaster" in my pages one more time. 4. Create Meta Tags Meta tags are found in your HTML code, but are not seen by visitors to your site. There are three main sections in the Meta Tags area of a web page: - Title - Description - Keywords The search engines often read these to determine how to list a particular site. Here's a free 3- part tutorial explaining Meta Tags in depth... As you can see, there are many design features that can affect your search engine rankings. Keep these in mind as you design your site.

8 Chapter 3: Google Adsense Tips Getting Started with Google Adsense on your Website If you're thinking of designing a website to earn money with Google Adsense, read this before you start... Google began the Adsense program several years ago as a way for advertisers to get more exposure for their websites. Advertisers can now have their ads shown on related websites through ad codes provided to publishers by Google. The publishers (website owners) earn commissions each time their visitors click on the Google ads. Since the beginning of Adsense, marketers, site designers and owners have tested the ads again and again to find out how they can earn the most money. What they found is that certain types of Google ads (provided by Google) work well while others barely get a click. They also discovered that placement of the ads on a web page tremendously affects the number of clicks - and the amount of profits the site owner can make! So, for sake of time, I'll let you read about some of the amazing tools that have helped me with Adsense tremendously! To name a few... Article Writing Services can keep you rich in great articles for your site, saving you time for promotion. Word Tracker helps you find "niche" keywords or markets that you can target easily within your business through the search engines and maximize your Google Adsense profits as well. Each of these tools can help you get started with adding great content to your website as well as getting your content pages listed with Google and other major search engines. Keep in mind that Google Adsense is only profitable if you offer services and content that's of value to your site visitors. Your website is an avenue of information and should provide what the visitors are looking for. Otherwise, they will ignore your site and move on to another. Also, if you buy content articles that are pre-written, try re-writing them in your own words (with permission, of course) to make them unique for your website. Use Wordtracker and the keyword suggestion tool at Overture.com to find popular keywords and incorporate them into your articles for even better results. I would suggest about 1% on your main key phrase and add in some words related to your keyword. Write naturally because Google has changed rules about stuffing keywords so the practice of putting the same phrase over and over could get your page penelized. You don't want that.

9 Be patient - no business is built overnight no matter how much money you can pour into it. Be consistent with your efforts and you will gradually see results. When you sign on with Google Adsense, be sure to read their policies and tips carefully. They have very strict rules you must follow or you could lose your opportunitiy to work with them. Also, read over their tips - they are good ones! Be sure to follow up-to-date information on Google Adsense so you'll know when Google changes the rules. Sometimes, rules change that could harm or help your website's success.

10 Chapter 4: Promote Your Site with Signatures Get Started with Signature Files With signatures, every you send can be used as an avenue to attract new visitors to your site. An signature is your business signature that is included after the close of your s. Here are some examples: Best Regards, Candice Pardue Best Regards, Candice Pardue Online Success for Internet Business Now, add a "P.S." to your signature and you'll notice a significant difference in how many people visit your site. Here's an example of a P.S Best Regards, Candice Pardue Online Success for Internet Business P.S. Learn to design your own graphics, logos, clipart, animations and more with the Graphic Design Training Course for Beginners. It's a simple step-by-step course. Take a free sample lesson here to see how easy it is... site.com People love reading the "P.S." at the bottom of a letter or . So, this is a great way to get their attention at the last moment!

11 If you use Outlook Express as your program, you can create multiple signature files and select the one you need with each individual . For example, if you answer a client who's interested in "such and such product" and you want to end with a signature file related to that product, you can already have one created. Then, you will only need to select that particular sig. file when needed. Set and Forget Imagine having 10 sig files ready to go for different product questions. You can test them and see which offers work best using this special feature in Outlook Express! How to Write Signatures in Outlook To do this in Outlook Express, select "Tools" in your Outlook program. Then, select "Options" and then the "Signatures" tab. It's fairly self-explanatory. You just create the signatures you want. When you send an , write the as usual. At the bottom - instead of signing it - select "Insert" at the top of your send box. Then select "Signatures." A menu of your signatures should appear in the form of a drop-down menu. Select the signature file you want to insert. signatures can be a powerful marketing tool if you use them right. You can customize your sig files in just moments, but see results for years to come! And, it's absolutely free! Use these signature file tips to help you get started with online business success. It's the "little things" you do for your customers that count!

12 Chapter 5: Website Structure Get Started with Website Structure and Organization As you design your website, you'll want to build it in such a way that will make it easy for you to update it later on. This is why early website structure and organization is so important. Think of your site as a conglomeration of files that all need to be in their proper place. Every file is either a web page (.html page), an image or graphic, or a special code for a specific function. When you design web pages, structure the pages in a way that's easy for you to understand. Think ahead to when your website contains hundreds of web page files and perhaps hundreds of images. Will it be so easy to find and change web pages then? Naming Your Site Name your web pages with recognizable names. If placing them in folders, name the folders with recognizable names as well. Read this article about organizing with folders for more tips on this subject. The homepage on most websites is named "index.htm" or "index.html." This allows visitors to type in the web address name only and see the homepage by default. For instance, my homepage is named: webmastercourse.com/index.html but the visitors only type in: webmastercourse.com! The "index.html" is silent, you could say. If you have a web address and a web page in a folder, you can also name that page "index.html" or some other name. It's your choice. Another Example: My folders link above is a default to the article page under that "folder." The folder is also named "folders" and the web page is named "index.html." So, visitors can get there without typing the "index.html." If I would have named it "folders.html" on the other hand, visitors would have to type it in completely or click a pre-set link to get there.

13 So, there are actually two ways to structure your website - with index-named pages in folders, or with more specifically-named pages in or out of folders. Hope this isn't confusing. It you're confused, try surfing several websites. Notice in your browser how each web page is named at the sites as you click on their different navigation links. This will help you get an understanding of how website pages are structured. If you have many pages and sections, it is recommended that you use folders to layout the structure of your website. This will prevent so many files from getting jumbled up in your main "www" folder when designing. Each section can be named accordingly. Each web page can be named accordingly as well. Use these tips as a guide to develop a website structure that works for you! Remember - design for long-term positive results!

14 Chapter 6: Avoid the Pop-up Mistake Learn about common pop up screen mistakes If you've been online any length of time, you probably realize how annoying pop-up ads can be. I learned how to play "dodge ball" with pop-up ads a while back - trying to see how fast I could click out of them before they appeared! One pop-up might be okay, but some websites really go overboard by having several all at once. These are websites that I never visit again unless I absolutely must go there for some reason. Warning: Never sign up for a pop-up exchange with a company you're not sure about. This can be dangerous because you could actually get pop-ups on your site that cause viruses or computer crashes! Also, the ad itself might contain offensive materials that you would not want to show on your website. Hover Ads vs. Pop-ups Hover ads are not pop-ups although they work similar to pop-ups. Hover ads might fade into the screen or slide in from one side of the screen. They work differently in that they are not treated as pop-ups, but as an actual part of the web page. Therefore, pop-up blockers typically do not work on hover ads. Hover ads are less threatening because they are more subtle and do not hang up the loading of a web page. I've found with my own website that hover ads work great for getting subscriptions to my newsletter. You might have used my hover ad to subscribe yourself! In a nutshell, avoid using excessive pop-up advertising on your website. It might help you gain visitors from other sites, but you could also lose many visitors for life. Stick with only pop-up or one hover ad (per page) to be safe. If advertising another person's website, find other creative ways to advertise, but don't jeopardize your own business to do so. I use Aweber to create unique hover ads for my mailing list subscriptions. I've been using them for over ten years. because they offer amazing tools and services for gaining subscribers, following up with your customers, and sending out your mailing list. Many times Aweber offers a special trial for newcomers making it easy to test this system of autoresponders for yourself. There are many other fine companies online who offer these services but Aweber is one of the most respected.

15 Chapter 7: Choosing Fonts and Graphics for Your Website Learn about fonts and how they work with your web pages... There are many fonts available that are "web-friendly" but not all fonts are created equal. Be aware that some might look great on your screen, but not so great on someone else's computer. If you open a basic HTML design software, there will be fonts already there to use. However, these are not all compatible with everyone's computer. The few "safe" fonts available are Times New Roman, Arial, Courier New, and Comic Sans. Tips for Unusual Fonts If you feel an unusual font will fit well with your website theme, you have two options. One, you can risk the font looking different on others' computers or program it somehow to change fonts with certain computer systems. (I've heard of this being done, but am not sure "how" it's done!) Two, you can type the words in that particular font and turn it into a graphic or image. Then, insert the image onto your web page. This can work well for logos, ads or headings, but not for the page's entire text. Having a large text-filled graphic would cause your web page to load extremely slow. Avoid Too Many Fonts Avoid using too many different types of fonts on a web page or within a website. This can cause confusion, and makes reading more difficult. Treat your website text as you would a newspaper or magazine. "Plain" is what people are used to seeing when reading. So keep the text font plain, a large enough size so it's easy to read, and the background white or a very light color to make it easy on the eyes. Fonts are great tools for webmasters if you use them wisely. They can enhance the look and feel of your web page and really draw attention to your headings and ads! Use the tips you've just learned to spruce up your web design. This concludes the lessons for getting started in web design. I hope you've found them helpful and will take the next steps in becoming a full webmaster. There is no time like the present to start a new career so take a moment and watch this quick video to learn more about taking that first step. I hope you lots of success!! Bob Pardue

16 Resources: Web Design Mastery Complete web design course for beginners HostNine Affordable website hosting services Aweber Resource for building autoresponders and listffordable website hosting services

17 Disclaimer: Even though we have made every effort to provide solid and accurate information for website design ideas on these pages, Webmaster Course Com accepts no responsibility or does not insure or imply any degree of success in a web based business or website design career by reading the material listed on this website. Degrees of web or Internet success varies greatly dependent upon the attitudes, attributes and ambition of each individual designer. Please thoroughly check out any information you find on this site before indulging in a web design business or presenting yourself as a webmaster. And, remember to use these tips on how to start your own website.