A magical thing seems to occur between the moment when a web design is realized as a flat graphical image, and when it is posted live as a structured web site.  In my years in art school I met many fantastic designers who could plan and execute the first half of this process, but had no real experience with the second.

This post addresses my version of this process, including a few tricks I’ve created to streamline the entire project and save myself time and effort.  Please remember that every successful designer has their own particular method.  My hope is that, in sharing my process, I can help those just learning the process of web design in creating their own shortcuts and methods for web production.

Step 1: Have the right Plans

The graphical plan for a functioning website should include far more than boxes to suggest the locations of content and images.  It should demonstrate the size and font for specific body copy (shown in web friendly fonts;) it should account for the hierarchy of typographic elements including main navigation, body copy, and headings; and it should establish a system for the display of images that will be easy for an end user to carry out.  Beyond these basic elements of internet functionality, a good web design accounts for practical elements like browser speed and monitor resolution.

a well designed site

Step 2:  Know your Engine

Will this site employ additional functionality like a blog, CMS (Content Management System,) or shopping cart either now or in the future?  Will users be editing regions of template generated files themselves in a program like Dreamweaver?  These considerations must shape both the graphical sizes of the content and the structure we will eventually develop to display it.

Step 3: Measure the Chassis

After your graphical template is approved by the client, it’s important to understand the specific pixel heights and widths of varying elements.  In my provided example, I carefully plotted out the sizes for the banner area, the width of the navigation area, the two columns designed to display main body content and the intended sizes for body images.  You should record these sizes in a text file or on an organized sheet of paper, since you’ll be referring to them often and making small alterations for various reasons.

check the measurements

Step 4:  Get your Toolbox

This is a good time to use your measurements to cut out graphics like the page background, body content background, and any graphics that will end up in header area of the page.  I have a prepared folder sitting on my desktop that includes all the folders that will be in my new site:  css, images, Templates (for Dreamweaver DWT files,) scripts (for javascript and php files,) and “originals” for all my original layout images as a reference.  This folder also contains a text file called “develop.txt” which contains an area to record the various hex colors I assign to different types of content, and a few snippets of code that I find myself using on a constant basis.  I generally just copy this whole folder into the main folder for the new project and link it to the site manager in Adobe Dreamweaver.  This saves me the time of arranging all these folders, and gets me ready for the next step.

the tools are ready

Step 5: Weld the Frame

It’s important to note at this juncture that my sites are designed with a structure almost entirely created out of CSS Divs.  A few years ago it was common to use a shortcut program like Fireworks or its predecessor ImageReady to slice a design into tables containing appropriately sized images.  The primary problem with this type of coding is that it is resource heavy, and interferes with the proper interpretation of your site’s content by the programs that search engines like Google use to index your site.  Tables have become increasingly outdated as a design element for several years, and should now only be employed when displaying large blocks of technical data.

My system for building this hotrod of a site avoids tables all together.  Instead, I prefer to use Div windows controlled by an externally linked CSS file. The major advantages here are that any changes to that one CSS file will affect the entire site, and later changes to the design (or full redesigns) will proceed much more smoothly.

I find that when I build a site, it’s best to place all the site content in one empty and unlabeled center-aligned Div.  This allows the entire site to float to the center of the browser regardless of the screen resolution, approximating a uniform experience for viewers with different systems.

I then begin to fill this div with a snippet of code I keep in my text file that includes the div id=”" (with empty quotes,) two blank comment tags, and the closing div statement.  This block of code allows me to cut and paste in the div code, give it any name I’d like (to help me remember the site’s structure,) and then comment the beginning and ending of that window so I can clearly track the organization in instances where I will be placing Divs within Divs.

welding with skill

The most difficult part of this process will be understanding when two Divs will need to sit side-by-side inside another Div (for instance, in the body section of the example website) and contain a tiling background.  In cases like that, one can specify the width for those Divs but not the height.  Remember to insert a blank “clearance” Div (with the CSS property clear: both;) after the second internal Div but before the closing of the Div that contains them. This will allow the outer Div to stretch properly to contain both internal windows despite their float left and float right properties.

one more trick

Step 6:  Molding the Body

At this stage we can begin to insert and add the appropriate graphics as backgrounds or headers for sections of the site.  Manipulation of the CSS can create styles for the body content, body links, H1 and H2 headers, unordered lists, and images that will make these elements conform to the overall design.  The hex values you recorded in your reference text file will help you to restrict these elements to the appropriate color palette and maintain your system of information hierarchy.

At this point we’ve finished the major structural components of this particular hot rod.  After the CSS is refined to account for indentations of text, various exceptions to the main body styles, or the special needs of whatever “engine” will drive the site we’re almost finished with this template.

Please feel free to visit my other blog on how to make this simple html structure into the template for a Wordpress blog, and happy hot-rodding.

Did you know that you can stop Google from indexing certain pages in your website? You can, with a certain tool called “robots.txt”

Robots.txt , as you might have already guessed, is a text file that you can put on your website that will direct programs that crawl the web (web crawling bots) and give them certain directions. If you had a page that you didn’t want any web crawler to access, you could command web crawlers not to index it.

Let’s say you were running a personal website for MC Hammer, and you had a webpage concerning his finances that you didn’t want any search engines to crawl. Here’s what you would do:

1) Create a file called robots.txt in the root directory of your website. If you had www.mchammer.com <http://www.mchammer.com>, the link would look like http://www.mchammer.com/robots.txt

2). If you were trying to block web crawler access to “seenBetterDays.html” The contents of this file will look like:

User-agent: *
Disallow: /seenBetterDays.html

If the file was in a subdirectory, if would look like:

User-agent: *
Disallow: /subdirectoryname/seenBetterDays.html

The asterisk after User-agent denotes that this rule applies to all robots, not just Google, yahoo, or any one robot specifically.
If you wanted to disclude the entire subdirectory, it would look like this.

User-agent: *
Disallow: /subdirectoryname/

This will block web crawler access to all files within /subdirectory name/ . If you wanted to disallow access to the entire subdirectory, except for the file “exception.html,”, you would put this:

User-agent: *
Disallow: /subdirectory name/
Allow: /subdirectory name/exception.html

Finally, if you decided that you’ve had enough of the internets and all its pervasive indexing and searching, you would put in this content:

User-agent: *
Disallow: /

This basically means no robot will ever visit www.mchammer.com <http://www.mchammer.com> again, until you remove the file.

There are many, many, many more uses for robots.txt, but we’ve covered the basics in this article, so that if you have a certain webpage or group of webpages that you don’t want to be crawled, you can just include a file and keep your information a little bit more private.

Happy Wednesday, folks! Wacky Wednesday in the PR House is back for Part 2 of our first series. In case you missed last week, this series is all about developing an effective PR Plan. For those students who missed class last week… check out what we talked about here.

Let’s pick up where we left off. Part 2 is all about the following elements of the PR plan:

• Target Audience (put the bullseye on their backs)
• SWOT Analysis (again, no one has called 911)

Target Audience: That’s right folks… line ‘em up and put the bullseye on their backs. I don’t mean to just aim for males or females, old or young. You have got to be specific. The more specific you are about the audience your PR plan is targeting, the more focused your message will be and the more successful it will be. Your target audience should be broken down into two specific categories:

• Demographics: Your demographics is beyond male and female. It is about some much more. Be age specific – this isn’t just old vs. young, it is a specific age group; for example: 18-25. Know their location & climate — these factors have an important effect on the audience you are reaching [keep in mind how different climates can be in varying locations – Alaska and California aren’t in the same realm). Other key demographic areas to look at: Race, Income, Education & Employment. The more specific you are in outlining your target audience, the easier it will be to cater your message around them.
  
• Psychographics: Psycho, who? The psycho side of your target audience is their social side. You will want to narrow in on the social class, lifestyle, behavior, opinions and values of your target audience. Explore what underlies your original assumptions about them and see why this specific characteristics exists in them as a target audience.
  

SWOT ANALYSIS – no one has called the emergency teams in… but we do need to get to the bottom of the whole SWOT idea. SWOT consists of 4 important elements of your PR plan that will definitely get you thinking about where you are, where your competitors are and what you can do to capitalize.

• Strengths: What does your company have going for it? What are you doing right? Be positive and make sure you highlight “the good stuff.” You want to list the items that are working in your favor and that are a strength for your business.
• Weaknesses: This is where you want to talk more negatively, but be constructive. What are the current weaknesses your business has; what is standing in your way that will stop you from being successful? You want to highlight all the hurdles that are standing in your way.
• Opportunities: This is where you highlight what opportunities lie ahead. Opportunities are just that … areas where you have the opportunity to capture an audience, grow your business, take hold of a niche market, gain market share, etc.
• Threats: These are the things standing in your way – this is what could keep you from being successful. This could be another company or campaign. It could be a reputation or a idea in society that could damage or hinder your plan. Explore deep on this one. You want to get to the bottom of what is threatening your success — otherwise, its kind of like you are walking blindly into the light!

Again, the information is flowing this week, and you’ve got a lot to digest.

Your homework for this week is to have your Target Audience and SWOT Analysis completed. We’re half way done the plan, so stay tuned for more.

Wacky Wednesday in the PR House is a multi-part series that will be brought to you weekly (on Wednesday, of course). Over the next few weeks I will help you develop your PR plan. After that, Wacky Wednesdays will still be days for advice and knowledge on how to make your PR, marketing and advertising efforts better. Stay tuned… there’s more to come!

Twitter is very similar to a large group conversation in that you must talk to people in order for them to talk to you.  So as you try to build your twitter network remember that the same rules of social dynamics apply.

To be worth following you must be interesting, participate in conversations, offer valuable information, and keep your signal to noise ratio high.  But even if you are doing all of these things you might still have trouble getting followers.  My favorite tool for finding unique and interesting people to follow is Mr. Tweet.

Mr. Tweet is a service that can recommend people for you to follow based on a review of your twitter network.  It also provides statistics about your twitter use as well the use of others.  This allows you to know a users relevance and reciprocity before you decide to follow them.

Using Mr. Tweet you can quickly find hundreds of relevant people to follow.  Once you have found the right people start participating in their conversations and take your first step to becoming a Twitter rockstar.

Mr. Tweet

Simple is good, but beware of oversimplifying. A homepage needs to be more than just one picture of your product with an “enter” link. Gone are the 1990’s. You need to design your homepage for 2 audiences – your visitors (humans) and the search engines (robots). Here are some tips:

• Include a brief yet specific text introduction of what your business does.
• Include at least 1 important call to action (phone number, special offer sign up, buy now link)
• Include a testimonial from your customer.
• Include a few very strong photos that compliment your copy (photos of your products, your customers, or great stock photos).
• Include a bulleted list of your key products/services.
• Include links to all other key pages in your web site.
• Make sure your logo and company name or slogan is very prominent.

Your homepage needs to capture the attention of a person in only a few seconds, and encourage them to DO something (call to action) which leads to closed business.  This page also needs to have enough text information on it for search engines to actually read and understand what the website is about.

One of the easiest and neatest tools that you can utilize for web design is the rollover link.  You’ve probably seen a link that will change size, color, or take on an underline when you roll your mouse over the link.  This creates easy navigation for the user, and can highlight an otherwise plain design.

The effect is actually pretty simple to achieve using CSS. Here is how you do it.

First you create a CSS class for links.  Let’s say you’re designing a website for MC Hammer, and he wants the links to grow, shine gold, and be underlined when they are moused over.

The CSS would look something like this:

a: link{

font-size:12px;
text-decoration:none;

}

a:visited{

font-size:12px;
text-decoration:none;

}

a:hover{

font-size:16px;
color:#FFCC33;
text-decoration:underline;

}

We just defined three states for every link on the website (that uses this style sheet).  Upon hovering over a link, will change to gold (#FFCC33), grow to sixteen pixels, and be underlined.

Defining it like this will apply the style to all the links on your webpage that use this style sheet, but you can achieve the same effect with only one specific link in mind.

Let’s say you wanted extra emphasis for only one specific link.  You can create a special class that will affect any link you want it to, be not globally across the page.

Here is the CSS for the “hammerTime” class:

a.hammerTime: link{

font-size:12px;
text-decoration:none;

}

a.hammerTime:visited{

font-size:12px;
text-decoration:none;

}

a.hammerTime:hover{

font-size:26px;
color:#FFCC33;
text-decoration:underline;
font-style: italic;

}

The code is similar, but notice that we specify the name “hammerTime” as a specific class, so it won’t affect every link on the web page.  It will only affect the links that you specify.  It also has the size increased to twenty six pixels, and now also italicizes the text as well upon hovering over the link.

If you wanted to apply this style to a specific link, let’s say to a web design companies webpage, you would create a link like this:

<a href=”http://www.webii.net/design” class=”hammerTime”>WEBii: Good Design is Good Business</a>

Notice the ‘class=”hammerTime”‘ inside of the <a> tag.  This specifies that the link will use the hammerTime style instead of the global link style previously defined.

While increasing your text size by twenty pixels and italicizing, color changing, and underlining might not be the best web design practice, you can take the concept and use it to add highlight effects to your links.  Your webpage will definitely be too legit to quit.

We all need to have a plan. A plan to do the laundry. A plan to exercise. A plan keep in touch with friends. A plan for your PR campaign. We need plans. Some of them are more trivial that others – a plan for your PR is not one of them. In order to be effective with your PR (public relations, in case you didn’t know), you have to set the ground work and come up with a solid plan. Otherwise you will be spending time, and money, working towards goals you aren’t aware of and success you cannot measure.

I’m going to give you the basic elements you need in your PR plan and elaborate on them.

• Executive Summary (no, this isn’t for the President)
• Situation Analysis (does your cupcake have a cherry on top?)
• Problem/Opportunity (don’t worry the Cops aren’t coming…)
• Target Audience (put the bullseye on their backs)
• SWOT Analysis (again, no one has called 911)
• Message (RESPECT…find out what it means to me)
• Goals (we aren’t climbing Mt. Everest, at least not yet.)
• Objectives (didn’t we already decide on Mt. Everest?)
• Strategies (one step at a time…)
• Tactics (use only hefty-duty snow boots!)
• Calendar (before 2015)
• Budget (there is no price too low, or too high)
• Evaluation (if we don’t make it to the top…can we take a trip to Mexico, instead?)
• Take Action (I’ll book the flights)

You are probably saying to yourself … “what is this wacky lady talking about?” No need to worry, panic or go back to surfing the internet, it’s about to all make sense.

Let’s tackle the first 3 items every PR plan should have.

• Executive Summary (no this isn’t for the President): What do I mean this isn’t for the President? Clearly this isn’t for the man himself. The executive summary in your PR plan should be a brief overview of the whole plan. It should highlight the key points and summarize what is to come in the rest of the document.  This should be the first element of your PR plan because it gives an overview of what will be explained more specifically in the other elements. Even though this should be the first element, its not always the one you write first. Go ahead and write down some of your ideas, but know that you will be editing & revising this once your whole plan is complete. If you’ve got a busy day today, skip to the next two items and worry about this one later.
• Situation Analysis (does your cupcake have a cherry on top?) Not every cupcake has the cherry, but they all have icing. Your situation analysis is exactly what it sounds like – a analysis of your current situation. You need to describe in detail (please be specific) what is going on right now in your market, where is your company at, what is the climate in which your PR plan will take place, etc. Dig deep and really understand what is happening in your market and explore from there.
• Problem/Opportunity (don’t worry the Cops aren’t coming…). Trust me I haven’t called them about our problems because we still opportunities. In this part of your PR plan, you want to outline the problems you are facing and what opportunities lie ahead. Here’s an example: You have come out with a new line of jeans that are made for mature women. A problem might be that mature women don’t like to wear jeans. An opportunity for you is that you can show them how your jeans will make them want to wear jeans again because the fit and style of the jeans are made for their body types.
• Target Audience … gotcha! The bullseyes will not be placed until  next week.

Whew… that is a lot of detail for you to take in and process. Good news is… you’ve got time. Sit down, read (then re-read) and start to put your PR plan together. Your homework for this week is to start on your Executive Summary, write (in detail) your Situation Analysis and the Problems & Opportunities you are facing. I’ll be back next week with even more knowledge for you to digest. (Make sure you don’t eat a big lunch next week, so there is plenty of room!)

Wacky Wednesday in the PR House is a multi-part series that will be brought to you weekly (on Wednesday, of course). Over the next few weeks I will help you develop your PR plan. After that, Wacky Wednesdays will still be days for advise and knowledge on how to make your PR, marketing and advertising efforts better. Stay tuned… there’s more to come!

What tools do you use to evaluate your sites SEO?

Hopefully by now you know that Search Engine Optimization (SEO) is important for increasing your site rank with search engines.

When trying to increase your site ranking and boost your SEO it is important that you have a clear sense of your rankings so you can determine if your methods have been successful.

The SEO for Firefox add-on allows instant access to voluminous amounts of SEO related data. It can show your sites rankings with Google, Alexa, Yahoo, Digg, Twitter, and many more.

Easy access to this information allows you to properly evaluate the effectiveness of your efforts and gives you the data needed to fine-tune your approach.

Add SEO for Firefox to your SEO toolbox by visiting their site: SEO for Firefox

Even the most unusual hobbies have community websites dedicated to connecting people with similar interests. Do some quick searching and you are bound to find at least one forum related to your industry – or better yet, related to your target audience. If you are selling baby products, then joining a forum dedicated to new moms may be just your cup of tea.

Many forums offer free membership and a reasonable set of guidelines about what you are allowed to discuss. Start by replying to questions that other member’s have posted. Then get creative and pose questions of your own to poll the audience. Don’t forget to customize your forum signature (which should include a link to your website) – it will appear at the bottom of every post you make.

What This Does: You present yourself as an industry expert, spreading word about yourself and your business. You also build up links to your own web site, which helps direct visitor traffic and search engine results.

Taking It to the Next Level: If you want to take on a challenge, consider starting your own forum. Have your web developer install and customize the forum software into your web site design, and harvest a community of your prized customer base right there. It’s a great way to “sponsor” something or you might even offer it as a benefit to a paid membership.

Blogs, content management systems, and forums represent the bleeding edge of website functionality. Gone are the days when static content was needed merely to establish internet credibility; websites with unchanging information are soon eclipsed by peers with news updates, opinions, and reasons for return viewers to interact with one another.

With this in mind, I’ve compiled a very “quick and dirty” tutorial on how to turn a basic website design from a flat image into a Wordpress blog in about an hour. Please bear in mind that this tutorial ignores many of the finer points of programming and functionality to focus on a solution that the uninitiated can implement in around an hour or two.

Step One- Buy the land:

The simplest part to this entire process is the act of finding a web host or web server who can house a Wordpress site. There are a near infinite number of web hosts offering various packages designed to cater to a variety of client needs. If you have questions about what kind of web host might work for Wordpress, you should visit the requirements page at  http://wordpress.org/about/requirements/

Step Two- draw the plans:

Most designers would approach a project like this with some pencil sketches or electronic roughs. The rough design would indicate where important elements like a page title (or logo), the main navigation, and the body content would all fit together harmoniously. For the purpose of brevity, I’ll assume that the reader has some sort of basic template in an image format. The most important thing in this design is that there is a conceptual “window” area in which our blog-generated content can dwell. As long as this is planned as a part of the site, a designer or developer is only limited by imagination, time, and practicality.

Step Three- lay the foundations:

Once your hosting arrangements are satisfied, you should upload and install the Wordpress software. A new user might find this process a bit confusing at first, but I find now that a basic installation will take around a half hour depending on my upload speed and various other factors. The most difficult part of installing Wordpress is the creation of the SQL database with which the software will communicate. Different hosts have different means of creating and securing their databases, so there is no single tutorial on this step. Most hosts who offer databases would be kind enough to create it for you. Remember that the important information you need to know to complete your Wordpress information must be determined by you or your host during the creation of the database. The “wp-config.php” file must be filled with the information about your database’s name, the user name associated with it, the password, and the host name. For more information about these things read up on  http://codex.wordpress.org/Installing_WordPress

Step Four- cut the lumber:

Your original image design needs to be clipped into various parts. Next week I’ll write a detailed tutorial on the intricacies of creating HTML and CSS from a flat image design. Suffice to say, you must convert your single graphic into multiple graphics and lay them out in a simple HTML file.

Step Five- saw and hammer:

The first major step in converting this new HTML page into a Wordpress template is locating the previously mentioned content window. It is important to compensate in your coding for the fact that this window will need to either scroll or stretch to accommodate the various sizes of posts and pages generated by Wordpress. Scrolling will be achieved by adding a scroll variable to the CSS for the window in your style sheet. Stretching can be done in a number of ways, but one should remember that the background graphics for the window will be impacted by the changing size. This is a good moment to make sure that the design for this window has a background graphic that can repeat endlessly and seamlessly. With a tiling background, the text can flow downward in an unending stream without causing any visual “breaks.”

Once you locate the top of this window in your code, it’s best to write a few comments denoting this for your own purposes. I tend to note the location with the typical comment tag ().

Using Dreamweaver or a similar code editing program, you should create two files. One file should be named “header.php” and the other should be named “footer.php.” Copy all of the HTML coding from your newly created page ABOVE your notation about where the window begins into the header. Copy all of the coding from BELOW the start of the window into the footer.

Step Six- floors and carpets:

The new “header.php” file and “footer.php” file should work, if coded properly, as a seamless unit. When they are utilized by Wordpress as a template, the software will unite them into a seamless file, and any tables or divs that are separated by breaking the original HTML into two files will be united in your browser.

To test them out, just upload these two files into the folder where your Wordpress installation is active under the folder “wp-content/themes…” and choose a folder with a theme you’re not concerned with breaking. Replace this theme’s header and footer files with your own.

A moment should be taken to note that your images should also be uploaded to relevant folders on this server. Depending on how you coded your site, they may be linked in the root directory above the level that the Wordpress installation inhabits. It may take some experimentation to place the graphics in the right location, whether this means the main Wordpress directory, a level above it, or in the folder for the template itself.

Testing this template is as simple as logging into your Wordpress dashboard, clicking on “appearance,” and selecting the template where you uploaded your header and footer files. Once these files are located in the template that your Wordpress installation is using, you should be able to view the blog with the new design live.

Step Seven- housewarming:

There are an infinite number of ways to “furnish” your new Wordpress site with various plugins, customizations, and widgets. All that has been discussed at this point are the quickest steps to creating a Wordpress template from a simple static design.

Database-driven open source solutions like Wordpress, Joomla, and Drupal offer a variety of tools for aspiring designers. With each program the tools can be used to build humble structures full of utility, or grander dwellings to house digital celebrity. These edifices can serve to inform, educate, entertain, and inspire a returning website audience, making that site competitive in our world of blogs and user-generated content.