Leadership Viewpoint

News feeds simply funnel the latest news from major sources into your website. The constantly changing content, when done using php technology, garners the attention of search engine spiders as new content and may boost your site ranking.

I have placed 2 examples of RSS Feeds onto my website and will leave them in place for class members to view them.

The first one is on my Consulting page. Here’s how I did it.

1. Go to RSS Feeder and signup.

2. Login and select/format the feeds that you want for your site.

3. Copy the resulting code and paste it into a blank Notepad file on your computer. (START, PROGRAMS, ACCESSORIES, NOTEPAD)

4. Save the Notepad file as rssfeeds.php and upload it into the public_html file on your host.

5. Now go to the Main Cpanel Menu, and click on Apache Handlers.

6. There will be 2 data entry boxes. In the first one, type “.htm” without the quotes. In the second, type “server-parsed”, again without the quotes. Then click on ADD.

7. Repeat number 6 except change the entry of the first box to “html”.

8. Finally, go into your Webstudio page and click on the Cool Stuff tab on the bottom. Drag the HTML box onto your page where you want the news articles to appear. Stretch the box if you want it to be wider. Double click on the box and type the following into it:

!- -#include virtual=”/rssfeeds.php” - -
(Put a ‘less than’ sign before it and a ‘greater than’ sign after it.)

Upload the page to your public_html file and you’re all set!

The second example is on my Further Reading page. This one comes from Bravenet, which offers a number of neat, free extras for your website. Go to their news page and sign-up. Customize what you want, and they will generate a javascript code for you. Go into your Webstudio page and click on the Cool Stuff tab on the bottom. Drag the HTML box onto your page where you want the news articles to appear. Double click on the box and paste the code into it. Upload the page to your public_html file and you’re all set! While this one is much easier than the first example, the search engines will not see this feed, and it has no hope of boosting your site rankings.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Once you’ve gone to the trouble of adding a variety of neat graphics and photos to your website, pages may not print neatly. For content-heavy pages like articles, this may be annoying to your visitors. To address this, professional websites often offer Printer Friendly versions of key pages, usually via pdf files. While Adobe’s Acrobat Reader is free, the full Acrobat Professional product retails for $449. There are, however, other ways to make pdf files. A simple FREE software solution is available for download with PrimoPDF.

A pdf is a better Printer Friendly version than a Microsoft Word document because you have complete control of the final output that the user will print, and because everybody with access to the Internet can have a free copy of Adobe Acrobat Reader; hence they can view it. No digital alterations can be made to a pdf by typical visitors. (I’m hedging that comment because I’m sure there are probably some geeks that can do something to it.) Hence, it is very important to create your Printer Friendly versions thoughtfully. Be certain to include the URL and your company identification on the document before converting it into a pdf file. Each of the articles on my website include a Printer Friendly version. It may be helpful to view one of them as an example.

If you enjoyed this post, make sure you subscribe to my RSS feed!

As your website grows, a long list of links for individual pages can become cumbersome. By the time my website had about 20 pages, I was no longer happy with the way all those buttons looked on each page. One way to address this is via a dropdown navigation menu, like the one I used. To see what I mean by this, go to my home page and run your mouse over the navigation buttons, you’ll see them open up to additional buttons. If you hold the mouse over Programs and then over any of the topics that dropdown, you’ll see additional sub-options dropdown. To create this device, I used a simple DHTML Menu Builder provided for free via the folks at CoffeeCup. Simply enter your URL’s and page names into their little software interface and in no time you’ll have a nice little dropdown menu. There are lots of color choices, as well as an option to make it horizontal rather than vertical too, if that fits your design better.

When I first made this menu, I asked a few questions of the expert moderators of the Webstudio Online Forum. I originally found them by clicking on the ‘Help’ link inside Webstudio. These folks have a ton of experience, and continually offer help and support to users of the software. In fact, one of them didn’t like the way the boxes overlapped in my original dropdown menu, so he went in and edited the code to improve it. He was also kind enough to explain what he had done, and since then I have been able to make minor modifications myself! Use the various ‘Help’ options to add to your website and accomplish your goals.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Another nice (and smart) thing to do for your new website is to start an account with Google. Google is the largest of the search engines, and much more. Its offerings will be the topic of more than one entry. Both of these services are free.

SITEMAP

Most non-developers think a sitemap is the page that illustrates the layout of a website. I put a people sitemap on my website so that visitors can quickly look to see if their topic is covered. Among webmasters, however, there is another, more technical sitemap that is important to the spiders/robots that search the web. We want to help the robots find every page on our site, since that makes it easier for the search engines to list our pages. To make a sitemap, go to XML-sitemaps and follow their directions. Your initial URL should be your home page. Then upload the sitemap into the Public HTML file on your host server. Register with Google and follow their directions to add your sitemap.

ANALYTICS

If you are using Hostmonster for your site, you are already receiving a good bit of information on your website visitors. Google also offers very rich analysis of your website’s activity, with some different aspects and analysis. To get yourself set-up, go to Google Analytics and sign up for your free account. They will provide you with some code. Copy it and paste it into your page HTML via Webstudio Between the Header and Body. As a reminder of how to get there, double-click on the background of each page to open the ‘Object Properties’ dialog box. Go to the ‘Page HTML’ tab, and click on the ‘Between Header and Body’ option. Copy and paste the code from Google into this section on each page and save it. Then upload it to your host. Return to Google in about a week, and you’ll be amazed by the richness of the data that they are providing to you.

If you enjoyed this post, make sure you subscribe to my RSS feed!

There are SO many nice little items that you can add to your website, and most of them are free and easy. Over the next few days, I’ll walk you through a few of my favorites.

FAVICON

This is the little icon that appears before the http:// in the URL. It’s the icon that shows up in your Favorites list as well, hence the name favicon. It’s a subtle touch that big companies use. Now you can too! The first thing you need to do is decide on a simple graphic to represent your website. In my case, I took the lion from my logo. Pick an item with simple lines that will be an appropriate identity for your site. Using editing software, crop it into a square shape and save it as a small gif file. There are a few free favicon makers online. I use the one at Dynamic Drive. Their directions are very simple. Once you make it, simply drag it into your public http file at your host.

To ensure that it shows up with both Internet Explorer and Mozilla Firefox, it’s smart to place this:

link rel=”shortcut icon” href=”/favicon.ico”

into the html code of your website. You’ll need to place a ‘less than’ bracket before it and a ‘greater than’ bracket after it. (When I type them into this page, the blog software assumes it’s a code and everything disappears.) To insert this code into a Webstudio, website, simply double-click on the background of each page to open the ‘Object Properties’ dialog box. Go to the ‘Page HTML’ tab, and click on the ‘Inside Page Header’ option. Copy and paste the code from above (with the brackets at the beginning and end) into this section on each page and save it. Then upload it to your host.

When I first did this, the favicon did not immediately show up on my computer. It was, however, appearing on computers that hadn’t been to my site before. Over time, the problem resolved itself and it shows up on my computer now.

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you’ve been following along with these postings and building your site, you should now have a nice little website posted on the Internet. Now what will it take to get it listed and for people to find it? Luckily, the folks at Webstudio have a very simple method built into their program to make this easy. Simply double-click on the background of a web page, and a dialog box entitled ‘Object Properties’ will open. Click on the ‘Page Meta Tags’ tab and enter the Page Title, Description and Keywords. These should be whatever you want the page to be found under. Once that’s done for each page, it’s smart to also do it for the website as a whole. Go to Website, Website Properties, Web Search Information and complete that too. Then load the whole thing into your Public HTML file online, and you’re good to go!

There are lots of articles online regarding the ins and outs of loading these keywords. A comprehensive reference piece by Bruce Grossan provides an excellent understanding. A lot of websites employ various tricks to increase their rankings, so much so that search engines keep altering their processes to make it difficult to manipulate. In my experience, the real key to good rankings in the long term has been good content. Put worthwhile information on your website, label it with appropriate keywords, and submit it to the search engines. If you do your job, they will do theirs.

The other matter that you should keep in mind is that search engines seem to have a bias toward sites that are updated regularly. If you continually alter and improve your website, they will be more inclined to rank you higher, assuming more current content is more relevant to the searcher. Blogs work well toward this end, since the search engines are ‘pinged’ when new content is added. Whenever you do any major site updates, resubmit your information to the search engines. It doesn’t hurt anything, and it may just help.

If you enjoyed this post, make sure you subscribe to my RSS feed!

One thing about the Web that’s different from software on your computer is the incredible lack of standardization. The screen resolution issue is easily handled upfront with a decision. The challenge that multiple browsers create is not so simple. First, let’s be clear about browsers. Most people use Microsoft Internet Explorer. It is far and away the industry standard. An up-and-comer is Firefox, from the Mozilla Foundation. It’s growing in popularity and is often bundled with free Google products. It claims:

* Pop-up blocker
* Tabbed browsing
* Easy feed subscriptions
* Alerts about unsafe web pages

The past month of my own website’s analytics indicated that the proportion of usage was:

* Internet Explorer 83.49%
* Firefox 12.14%

This is important information because the two primary browsers often make your page look different to the user. Items are spaced out a bit differently, and occasionally graphic elements will overlap in one browser and look fine in the other! It’s all part of a master plan to drive website designers insane, and it’s working! It is very important that you download a copy of Firefox and look at your website in it. Webstudio’s preview feature uses Internet Explorer, so nothing extra is needed to check your website with it. Be certain to adjust your site as needed and then re-check it in both browsers before you upload to your host.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Building the website is really just the first part of the challenge. Once it’s ready, you need to have a place to post it to the Internet. There are countless options available to you. When faced with this challenge, I looked at professional reviews to get direction. After looking over several of the recommended options, I selected Hostmonster, and I have never looked back. Their customer service has been superb, and easy to understand. The full extent of their offerings has been mind blowing. They use a Cpanel interface, which makes it very simple for new people to be self-sufficient. Over time, I have added a number of features from both their CGI Scripts (has items like a site search and counters) and their Fantastico interface (installs unbelievable modules into the website, including this blog). Whenever I’ve had a question, I’ve called them and their terrific technical support people have sorted it out with me. Since I often work on this after business hours, their 24/7 support has been of critical importance.

Another aspect of Cpanel that is easy is the FTP Tools section. I liked it because it is modeled after Windows Explorer. Instead of moving files between the C drive and the D drive, now I just drag them between my computer and their server. It’s very intuitive and simple to use, so I was up and running very quickly, with no training.

The number of features that Hostmonster offers is really astounding. In addition to more space than I will ever use, they allow me to put more than one domain on my account. As a result, I’ve built and hosted websites for a few colleagues. Each of us can have as many customized email addresses as we would ever want too. They even have a direct interface with a firm that does free search engine submissions, which is pretty important if anybody is going to find your site. All this, and more, is supplied for only $5.95 a month! I’ve rarely been so satisfied with the value I’ve received from a technical product.

If you enjoyed this post, make sure you subscribe to my RSS feed!

This is the third entry in this series. Now that you have your screen resolution set and basic colors selected, it’s time to really make that home page. The use of Webstudio 4 really makes this simple. You can drag your logo and graphic elements onto the page. If you see a graphic element you like someplace online, simply drag it onto your page! Like an element from an existing slideshow or document? Drag it onto your webpage. Once the elements are on the page, lay them out in an appealing way. Remember to lay out the navigation buttons on either the top or the left side so that people can find them easily. At this point, the links will not be functional because there is nothing to link to them. Just include them in the design visually as placeholders for the time being.

Once you have the page all setup the way you want it, add the content by inserting a text object and either writing it or copying and pasting it into the text object. If you are pulling it from an existing website, you can drag it onto the page from there. Format the text font, size color, etc., thinking in terms of setting the standard for the entire website. You will want to add a copyright statement at the bottom of the page. Once you have everything all set, name the page (probably ‘home’) in the page list on the right. Then simply hit the Duplicate Page button on the bottom right to add additional pages! Customize the content for each page, replacing the Home Page copy with actual write-ups for each section. Name each page as you go.

Once it’s all set, it’s time to set-up your navigation buttons. Scan the control buttons at the bottom of the Webstudio page for LINKS, and click on that. On your far left, there will be a section called Site Links. It will match your Page List. Simply drag each one up to the corresponding button on the page. Do this until every button on the page has a link connected with it. Importantly, this has activated only the links on the this particular page. To make the site fully functional, you’ll need to either repeat this process on each page, or copy the links and paste them in place on the other pages. Either way will work fine, and you’ll have a nice, basic, customized working website!

If you enjoyed this post, make sure you subscribe to my RSS feed!

Once we had downloaded the FREE trial of the Webstudio 4 software, the first decision that we had to make was to determine the screen resolution that we wanted to design for. To aid in this decision, I presented data from the last 30 days of the Advanced Leadership Group website:

• 1024×768 54.35%

• 800×600 12.21%

• 1280×1024 11.97%

As larger and more precise LCD screens have replaced the older and fuzzier CRT’s, the 1024 x 768 resolution has grown in usage to over 54% of the user population. The challenge for website designers is that there are still 12% of users with the 800 x 600 resolution. This means that if you design to the sharper, 1024 x 768 specification, that 12% of users will be inconvenienced, needing to scroll back and forth to see a full screen of your website information. Ultimately, it is very helpful to know more about your target users, whether they are more or less likely to have the newer screens and higher resolution. Each business needs to make this call for itself.

After you lock in a screen resolution, it’s time to get down to deciding on the graphic design for the site. Start with your logo and colors. In general, it’s wise to keep your graphics simple and readable. For our business, we designed to coordinate well with our corporate brochure, reinforcing and building upon our company image. For startups and businesses that are solely online, consider the colors that are generally representative of your industry. Soft colors may be appropriate for a yoga studio, for instance, but may not convey enough strength for a war games site. Here’s a nice online resource if colors are challenging for you.

This first page is the foundation that the rest of the website will build upon, so take your time and work with it until you are really happy with it. The navigation buttons should be placed either along the top or on the left side. While another set may be added on the bottom, that is not sufficient for the primary site navigation — people simply don’t look there for them. As you design buttons, a nice rollover feature is a simple way to add life to the site; it also makes it clear to your visitors that they are hovering over a link, which is an aid to usage. Be certain to plan a button for each major category of information that you will put online. It’s smart to look around at other sites and critically assess their categories of information. Customize your own site accordingly.

If you enjoyed this post, make sure you subscribe to my RSS feed!