So last time around I did an overview of VERY basic principles that will make your Website grow and reach your target audience, WITHOUT selling your soul to a (potentially) fishy SEO campaigner. The abridged basics are

• Make it Look Good
• Make it Organized
• Make it Say Something
• Make it Good Under-the-Hood
• Use HTML PROPERLY
• Don’t fall for Quick Fixes

Today I want to start at the top and talk a little bit about the first two topics, Make it Look Good and Make it Organized – because as the old adage goes, “You never get a second chance to make a first impression”!

So let’s talk FIRST about the SECOND item… (I’m not sure why I put Looking Good first anyway).

Site Plan. Structure. Logic. Flow.

Sound vague, cryptic and complicated?

Step #1 for a well-built Web site is planning your layout. It seems much easier to “Just Do It” and start building pages. But I guarantee that if you don’t take the time to lay out your site and put some structure and organization on paper BEFORE your “creative juices” do their thing, you’re going to spend many long hours saying “now how can I make this…”

I’ve never regretted sitting down with a client, my Design Consultant (my wife), or by myself and thinking “What must this site include, and what is the BEST way to include it?” You just won’t regret it. Ever. An ounce of prevention is worth a pound of cure.

So take the time, right now, at the start of things (or at whatever stage you are at now), and give some thought to structure and layout. It’s terribly important.

Start with the basics. What is the purpose of your site? Are you promoting a product, a business, a person, or just your blog? Will you be promoting more than one TYPE of product or service (or a combination of BOTH). How many? Do you need a way for people to Contact you about your products or services, or to give feedback on whatever you are posting? Is there legal information that should be easily accessible to your visitors? Do you need a “Directions” page to help potential clients find your office?

It’s good to think big and think ahead. Maybe right now you only need a Home page, About Us page, Contact page, and one Products page. But perhaps down the road you’d like to showcase two entirely different product lines? Will you (at that point) really want a ‘Product A’ link and a ‘Product B’ link from you home page/nav bar, or would you prefer to direct visitors to your Product page and then link to ‘A’ and ‘B’ products from there? Try to think through this and plan accordingly, to save you from totally re-building your website every time you add a product or service.

Try to develop a high quality Site Map up front. A Site Map is a logical, hierarchical structure of the pages and how they link together. See example .

Generic Web Site layout

A good Site Map and logical layout will help you to develop a clear, simple and flexible navigational system that is easy to follow (for your customers), easy to maintain, and easy to build upon.

In the example above, we have a basic site layout that contains a navigation bar (it could be placed anywhere, but I would place it at the top or left of each page) that contains 3 Root links (About Us, Products/Services, and Resources), each of which contain 3 Nested (or sub) links. EACH PAGE also contains all of the links shown at the bottom of the Site Map, most likely in a supplemental navigation pane in your “footer” at the bottom (or side) of each page.

This logical layout allows visitors to quickly and easily identify what they are looking for, and if you have it. And IF you DO have it, you’re in business!

This also allows your visitors (at any time) to quickly click “Contact Us” or “Help” if they have a problem or a question that they can’t find an answer to elsewhere on your site (because they didn’t look OR can’t find it).

Finally, we can talk about Layout and Design…

How do you want each page to physically appear? There are a couple key rules that I recommend you stick with…

• Simplicity - don’t confuse and bewilder your visitors with too many glaring banners, graphical adds, image links and crazy complicated graphical buttons.
• Consistency - keep things the same, especially your overall layout and your navigation bars. People want to easily and quickly know where they were, where they’re going ,and how to get back – or they freak out and leave altogether!
• Neutrality - don’t overdue the crazy colors, crazy fonts (for many reasons), crazy pictures or anything else “out there” – unless you’re trying to alienate people, try strike a balance in everything you do – it’s the professional way!

Browse the web, search for “free website templates” or “website layouts” to get some examples and ideas of great ways to lay things out. Even go to some of the “Big” sites (microsoft.com, apple.com, foxnews.com, cnn.com, etc) and take notes from the guys who see the BIG TIME traffic – what do they do, and what DON’T they do?

As you can see from my own, personal website, I like centered. I like rounded. I also like clear Headers and Footers that are consistent throughout the site (I used PHP to save time and coding with these – more on that in another post). You can visit any page on my entire site and easily find your way back to where you started – it’s all accesible from any point via either the footer nav links or the main Graphical Navigation bar (which uses Javascript/JQuery and CSS – thanks to Stu Nicholls!).

It’s simple, it’s easy to follow, and it’s all there.

Now, maybe my colors aren’t great – but that’s fine, to each their own. This is the stage where you really make the site “yours”. Use your logo. Use your photo if you want. By ALL means use YOUR colors. But make sure that they don’t scare people away…

Again, browsing through free templates from freecsstemplates.org or freewebsitetemplates.com will give you plenty of ideas on how to do this. For ease of use and maintenance, I highly recommend learning CSS basics and putting them to good use. They are your greatest aid in maintaining consistent and aesthetically pleasing web pages. Good free tutorials can be found here http://www.w3schools.com/Css/default.asp and here http://www.csstutorial.net/.

As you go, keep revisiting the 3 basics – Simple, Consistent, and Neutral (or Professional).

This is NOT a comprehensive list, nor a tutorial for building a good site. It’s more of an “Off The Top of my Head” suggestion list of critical elements that I have found to be indispensable in building and maintaining quality web sites. Look around Eberly Systems and see what you think… we just recently were rated a 95 by HubSpot’s  WebsiteGrader.com (HubSpot is a leading Market Research and Analyst firm, and WebsiteGrader is their flagship Website Ranking / Grading tool). Visit www.websitegrader.com and enter our address (www.eberlysystems.com) to see exactly what they have to say about our layout, content and design.

For more tips and ideas, stay tuned for part III – till then (whenever “then” is), stay tuned for continuing Blog and Site updates!

I’ve spent the last several days fiddling around with Magpie RSS, attempting to feed Blog updates onto my home page via RSS.

Well, you’d think it should be easy, as I found no fewer than a dozen “simple” tutorials on parsing the output via PHP and customizing the feeds. But of the 5 or 6 different scripts that were freely available, only the last one I found actually worked.

The funny thing is, as I brushed up on my PHP, I realized that the issues were mostly very simple ones – syntax, mostly, and bad programming. You’d think people who write Magpie / PHP walkthrough’s would test their code…

Anyway, it’s up and running, and it’s working great – you can now view summaries of the latest Blog posts directly at www.eberlysystems.com – our Home page, plus breaking news as it becomes available.

For anyone who is interested in what I came up with, here’s the basics…

• Download MagpieRSS from http://magpierss.sourceforge.net/
• Install per the included “Install” file (open via your web browser – it’s in HTML format)
• Insert this PHP script into your page and customize the lines in bold
• Enjoy!

Script:

<?php
require_once(‘magpierss/rss_fetch.inc’);
$rss = fetch_rss(‘http://www.eberlysystems.com/blog/wp-rss.php‘);
if ( $rss) {

#in this case, we only want to display the first four news feeds:
$short_items = array_slice($rss->items,0,3);

#to be polite, set magpie to only refresh a feed once every half-hour:
define(‘magpie_cache_age’, 900); # 30 x 60 = 1800 seconds

#tell magpie to use utf-8 encoding
define(‘magpie_output_encoding’, ‘utf-8′);
define(‘magpie_input_encoding’, ‘utf-8′);
define(‘magpie_detect_encoding’, ‘false’);

#now we tell magpie how to format our output
foreach ($short_items as $item) {

#define the link to the story as $href
$href = $item['link'];

#set the item title as $title
$title = $item['title'];

#set the item content as $longdesc
$longdesc = $item['description'];

#to only display the first 60 characters of the title and
#the first 100 characters of the content:

$desc = trim(strip_tags($longdesc));
if (strlen($desc) >= 175)
{
$desc = substr($desc,0,174).”…”;
}
if (strlen($title) >= 25)
{
$title = substr($title,0,24).”…”;
}

#and now we want to put it all together to show the image icon,
#followed by the item title, followed by the content on a new
#line in a smaller font.
echo “<h2 align=center><a href=\”$href\”>$title</a><br /><span>$desc</span></h2>“;
}
}
?>

Happy New Year to everyone in case I don’t get to update again before 2010!