Posts Tagged ‘web designer’

How can I make a profit?

This article is going to deviate a little from my normal posts because I’m not going to just focus on the web but instead give small business owners a few simple pieces of advice that can help you run a sucessful business both online and in a traditional setting.

What is profit?

First, let’s establish that the goal of every business should be to make money but more importantly, it’s to make a profit and the most proft possible over the life of the business.

If we accept this to be true, then we need to stop and take a deep breath because we need to seperate profit from sales because the amount we sell isn’t actually a reflection of our total profit, in fact a company with high sales can actually be losing money!

Let’s take a look at this in a practical example, of somebody hiring a web designer to help them build a website. In this example let’s say that the website will cost $10,000 to build (it’s a pretty fancy website) plus $10,000 in marketing to successfully launch it. From my experience many people would assume the cost of the website is $20,000 but in reality there is the cost of operating the website and continued marketing so let’s add another $2,000 per month to the website cost plus $1,000 for somebody to look after it each month. In total, our website has a cost of $56,000 for the first year of operation and $36,000 each year after.

N0w, let’s assume that on our website we’re selling something. This could be a monthly membership, physical product which need to be mailed or electronic downloads. Regardless of what type of product you’re selling, there will be costs associated with processing credit cards and delivering the product. In our example, let’s assume we’re selling an item that costs us $10 per unit (each time we sell) and we’re selling that item for $30. At first glance, you may assume that you’re earning $20 per unit but in fact, you’re not since you have to account for your total fixed costs as well. The following chart shows the actual costs per item, assuming the business only operates for one year.

totalcosts1 How can I make a profit? image

As you can see, you’re actually loosing money for the first 1,750 items sold and only making profit above that point. What that means in real world terms is that while you may have collected $52,500 in income from your new online business you spent $56,000 to build and maintain the website plus $17,500 to sell 1,750 products which means you are still short $3,500 which we call a loss.

To calculate the actual break even point for your online business we need to use a fancy math formula, it looks like this:

Revenue(x) = Cost(x)

Actually, that’s not fancy at all. It’s pretty simple really, so let’s expand it to show the break down.

Revenue(x) = Units Sold x Price

Cost(x) = (Variable Costs(x)) + Fixed Costs

So our final math equation (don’t be scared, it’s actually much easier than it looks) is:

Price(x) = (Variable Costs(x)) + Fixed Costs

We know that our Fixed Costs are $56,000 and our Variable Costs are $10 and that our Price is $30 so we can replace those in the equation:

30x = 10x + 56000

Math is awesome, so I know that I can move the 10x to the right side of the = sign as long as I subtract it. This works because if I said 30 “apples” are worth 10 “apples” plus 56000, I could cancel the 10 “apples” from either side, which would result in:

20x = 56000

Now, if I divide both sides by 20 I convert my x (which is the unknown we’re searching for) into a 1 and 56,000 becomes my required units.

x = 2800

So, in order to break even at our business (that is, to have our total sales be equal to our total costs) we need to sell 2,800 units of our product assuming that our fixed costs are $56,000 and our variable costs are $10 per item on a $30 sale.

Expanding the model over two years

In the first example, the fixed cost of your business startup was assumed to be fully utilized in the first year of your business, but realistically a website could last longer so if we want to spread the cost of that website over two years.

To do this, we need to remember that the fixed cost of the website is $15,000 to start plus $3,000 per month. This means that in year one, the cost to run the website is $56,000 and in year two it is $36,000. The total fixed costs to run the website for two years is $92,000 so let’s take a look at the chart with those numbers.

totalcosts 2 How can I make a profit? image

Now, we can use the equation from before to calculate our break even point.

R(x) = C(x)
30(x) = 10(x) + 92000

20(x) = 92000
x = 4600

So, in order to break even (not profit!) you will need to sell 4,600 units at $30, with a cost of $10 per unit and $92,000 in fixed costs over two years.

Charging More

If you would like to charge more, simply change the value of R(x). So if you’d prefer to charge $35 per unit:

R(x) = C(x)
35(x) = 10(x) + 92000
25(x) = 92000
x = 3680

If you find a cheaper supplier and still want to charge $35:

R(x) = C(x)
35(x) = 5(x) + 92000
30(x) = 92000
x = 3666.66

Using this basic formula, any business can quickly calculate what it takes to make a profit buy simply determing the value of x (the number of units you must sell to break even) and adding 1.

How to hire a web designer

Before rushing into your big online business idea, there are a lot of things to consider and the first is how to hire a web designer.

Have a plan

Let’s take a look a few key points when hiring a web designer, first you need to establish what it is that a web designer is going to do for you. Before you even approach a web designer, know what you want. It’s far too easy for web designers to accidently overwhelm you with technical jargon and deliver something that might not meet your needs.

Understand their role

A web designer is a tool much like a hammer, you can build a great house with them but you can’t depend on them to be everything, all the time just like you can’t expect an architect to be a great plumber. What most people think of as web design falls into several special categories:

  • Web designers, the people who control the look and code static HTML for browsers to read
  • Web developers, who program website dynamic code for ’smart’ websites
  • Web marketers, who promote your website and create social media links
  • Web architects, the people who plan complex websites
  • Web content developers, people who write and edit text for your website

Freelance web designers are often great at one thing, sometimes two but rarely three or more. If you’re unsure if the web designer you’re talking to can complete all the tasks required, hire additional help.

Shop Smart

If you’re the type of person who wants (or needs) to succeed online, shop smart and shop around. Once you have a comprehensive plan for what you (the business owner) wants, talk to at least three web designers and get equally comprehensive quotes from each. Remember, you’re in control of your own website and need to feel educated and properly equipped to make the best choice possible.

If all else fails, ask me for an opinion I offer comprehensive consulting services designed to help business owners make better website decisions and build better websites.

10 WordPress Plugins I Couldn’t Run a Site Without

Before I give you my real list, let me tell you that there are some basics that don’t even deserve to make this list because if you’re running a blog without them, you’re simply working too hard. Plugins like Askimet, WP Lockdown, Theme Switcher, WordPress.com stats, the WordPress.com stats smiley remover and WordPress Database Backup.

Delete Duplicate Posts WordPress Plugin

Simply put, this plugin does exactly what it’s name implies. It gives web masters like me the opporunity to quickly scan tens of thousands of postings in databases to ensure there are no duplicates. It’s wonderfully powerful when you have a thousands of feeds to maintain, and only a few hours to do it in. It also happens to be from my close friend, Montreal web designer Christopher Bavota.

WP Auto Tagger

Oh man … I can not stress what a dream this plugin is. Tags are like keys to SEO gold, they’re one of the few things that a blog owner can do well and immediately see amazing results in the search engines but they’re such a pain in the ass to write. Basically a tag is what your article is about, but in popular single words and catch phrases. What WP Auto Tagger does is great, it breaks down your article and suggests the best tags, automatically. That’s a huge time saver.

Syntax Highlighter

This bad bay is the Jonas brothers of WordPress plugins. Sure it’s fairly pointless and a text editor could do the same job but when it comes to saving time (and money) it’s brilliant. What it does is takes a bunch of rough gobbly gook code like this:

$rss = fetch_rss( $url );
$pcount = 0;
$storycount = 0;
$textdate = date(“F jS”, mktime(0, 0, 0, str_pad($month, 2, “0″, STR_PAD_LEFT), str_pad($day, 2, “0″, STR_PAD_LEFT), $year));

echo $textdate;
foreach ($rss->items as $item) {

if (!$first) {$title = $item['title'];$first=1;

$content .= “<h3><a href=’”.$item['link'].”‘ title=’”.$item['title'].”‘>”.$item['title'].”</a></h3>”;
$content .= “<p>”;

if ($item['link_enclosure']) {
$content .= “<a href=’”.$item['link'].”‘ title=’”.$item['title'].”‘><img alt=’”.$item['title'].”‘ src=’”.$item['link_enclosure'].”‘ class=’alignleft’></a>”;
}

and turns it into …

[source lang="php"]$rss = fetch_rss( $url );
$pcount = 0;
$storycount = 0;
$textdate = date("F jS", mktime(0, 0, 0, str_pad($month, 2, "0", STR_PAD_LEFT), str_pad($day, 2, "0", STR_PAD_LEFT), $year));

echo $textdate;
foreach ($rss->items as $item) {

if (!$first) {$title = $item['title'];$first=1;

$content .= "<h3><a href=’".$item['link']."’ title=’".$item['title']."’>".$item['title']."</a></h3>";
$content .= "<p>";

if ($item['link_enclosure']) {
$content .= "<a href=’".$item['link']."’ title=’".$item['title']."’><img alt=’".$item['title']."’ src=’".$item['link_enclosure']."’ class=’alignleft’></a>";
}
[/source]

When it comes to saving time, that’s a huge helper.

WP Super Cache

It simply terrifies me how many people are not running this plugin or a similar flavor of it. It makes your site safer, easier to manage and much faster for the end user. I’ll also mention that by running it you can use a host like BlueHost for $7.95 a month to run dozens of websites instead of spending hundreds a month to run just one site on complex, over priced servers.

Enforce www. Prefix

Actually, I’m going to cheat here and tell you that this and Canonical URL’s are plugins you should have for massive SEO curb appeal. Basically Enforce www. Prefix forces your website to always use the correct SEO address and Canonical URL’s tell’s Google that your article is the source, so even if people repost it you get credit.

Google XML Sitemaps

We all want Google to come to our site right? Well, let’s make it easy for them! Sitemap will provide Google with a free pass to all your content, no matter how deep your links are.

Get Image from Post

People love pictures and with this simple plugin your website will be able to post pictures as part of your excerpt. Speaking of excerpts, Get Better Excerpts will allow you to pull complete sentences or words from your excerpts.

SEO Friendly Images

Between this and SEO Smart Links, I’ll be honest most websites are on auto pilot. The SEO Friendly Images ensures your images have the proper tags to make the most of search engines, while Smart Links adds valuable data to your hyperlinks.

WordPress Admin Quick Menu

quickmenu 10 WordPress Plugins I Couldnt Run a Site Without imageI might be a little bias but this is truly my favorite plugin. It allows you to add your own menu items to the WordPress Admin client, basically creating shortcuts between your website and important things like AdSense and Analytics. It’s completely customizable and saves endless frustrations between myself and clients but providing them immediate access to critical links.

Download Counter

Just like Analytics lets you know who’s visiting and where they’re going, you’ll want to track what people are downloading from your website and how often. This saves a fortune in report generation time, by simply allowing me to tell my clients weekly how often software has been downloaded.

Getaway Graphics WordPress Theme

theme preview Getaway Graphics WordPress Theme image

Being a web designer, I change my themes almost as often as I change my shoes but that always leads to the inevitable question of what to do with the old themes?  Well, I guess the best thing to do is to release them to you, the public!

The Getaway Graphics theme is a prototype theme I developed and used on http://getawaygraphics.com for approximately a year. This theme is actually a recreation of the original but features a lot of great functionality including an easy to navigate side menu, full rich archives and a large main content area.

It is a fixed width theme, at 800 pixels wide, white and blue with dark grey text and solid headers for easy navigation. 

The theme will also help you scale photos to the correct width and includes rich optimized content formating for better search engine placement. Since this is my first WordPress theme in a while, I’ll be improving upon it greatly over the next few months, if you’d like to offer support or feedback please visit my new forums at http://forums.thisismyurl.com to leave feedback about the theme. 

Preview the theme

Download the theme for free.

getaway graphics theme 300x300 Getaway Graphics WordPress Theme image

Where to go to school to be a web designer

 

Thinking different
Creative Commons License photo credit: mackz

One of the most common questions I receive from young people (or adults looking for a new career) is where to go to school to become a web designer. It’s a tough questions because as I pointed out a few days ago in another post, the jobs people do on the web are pretty poorly defined but if you’re dedicated to doing something on the web, my honest advice is not to go to school for the web. I’ve seen a ton of ads for schools offering to train you in this or that, give you a diploma (or even a degree) in web marketing etc. but since I’ve worked for both colleges and universities … I can tell you that the programs are for the most part simply designed to fill seats, not offer quality education. So then what to do? Well, it really depends on what you’d like to do both now and in the future.

 

Web Design & Rich Media Design

If tweaking pixels is your thing and you wake up every morning trying to produce great artwork like my friend Katie, then you’ll want to be a web designer. These people turn art into commercial marketing solutions, so the best place for them to go to school is a little service called their local design studio. If you’re good enough to kick Photoshop’s ass, spend ten hours a day proving yourself and by the time you have five years in the business you’ll be among the best.

I use my friend Katie as an example because when I was teaching at a local college she out performed expectations, her work was stunning but when asked why it was so good, her answer was always so humble … she sat in her room and drew most of her life. So, if you want to be a web designer … skip school, sit in the local park and learn to draw. Once you’ve accumulated a portfolio that out performs everybody else, you win.

Web Publishing

Web Publishers (as I wrote) are about paying attention to detail and formating content effectively. There’s no school that can train you for that but if you are going to go to school, I’d recommend taking an English program or something along the lines of Communication or Journalism. Being a good writer will add a strong ace in your pocket and being able to edit the work of others will only add to your marketability.

Web Marketing, Management & Masters

Running a website is effectively running a business, so take a Business or Marketing program to become a better web manager. These days a great Web Master is somebody who can analysis ROI (Return on Investment) as well as code or design, so having a background in business management will make all the difference for you. 

Web Programmers & Developers

The vast majority of the web is programmed in one of two languages, either PHP or ASP/ASP.net. Both of these are called scripting languages because they’re not real programming languages which means that they’ve been developed to accomplish simple tasks such as web applications but would not effectively translate to more complex programming languages such as Java or C++.  This causes a dilemma for people who want to become web programmers, since few schools teach scripting languages instead offering object orientate programming and theory.

While there’s nothing wrong with earning a Computer Science degree to become a web programmer, they are different disciplines and it would be like teaching a crane operator to pilot a boat, similar but different. My advice for people who want to become a web programmer is simple … just do it (is that trademarked?). Pick a simple project such as a form to email gateway and write it, then try something a little harder and eventually you’ll be a web programmer.

The Cost of Training

One of the reasons that I’m such a big advocate for people training themselves is the cost of education. Training to be a web designer at most schools will cost you $30,000 or more! For that amount of money, I’d recommend sening Seyd a few bucks for putting together his post 15 Sites Which Will Make You a Mind Blowing Designer which links to the best tutorial sites on the web.

Fredericton Web Design

I can appreciate that not everybody in my sleepy little town can afford to hire a top tier marketing agency or print fantastic brochures but everybody deserves a great website, which is one of the reasons that I get so upset when I look around at the state of websites here in Fredericton.

As a business owner, I think it’s time for everybody in the city from tourism to retail and services to look at their own website and ask themselves some basic questions:

  1. Has my website been updated in the last month?
  2. Does my website reflect my business objectives?
  3. Is my website meeting my marketing requirements?
  4. Does my website link to other Fredericton businesses?
  5. Am I proud of my website?

As I’ve written throughout my website, the purpose of a website is to market yourself and your business so if you’re not able to answer those five basic questions in a positive manner, perhaps it’s time to hire a local Fredericton web designer to help you build a better website?  Here are some great local, Fredericton web design firms you can call to help build a great website (in no particular order):

What to look for in a website designer

When you’re looking to hire a website designer, be sure to ask for a few basic things to ensure that the website project goes smoothly.

  1. Ask for references, web designers are notoriously cranky … make sure you can work with the person you’ve hired.
  2. Look at their previous projects, do you like the style and creative energy they’ve put into it? Chances are, your website look and feel similar in the end.
  3. Do your research by seeing how well their clients appear in Google. For example, if you’re a local car dealership search Google for other dealerships the web designers built to see how it ranks.
  4. Shop around and get quotes from at least three web design firms before making your selection to ensure that you’re getting the best value for your dollar.
  5. Ask your design team if they really have the time, experience and expertise to build your website. Remember, your marketing project shouldn’t be a learning curve for them.

Get a second opinion, it’ll save you in the end

As a consultant, I often help non technical businesses make sense of their online marketing solutions. If you’re moving forward on a web marketing project why not give me a call and let me help you work with your web design team here in town? I offer small and medium sized businesses a fresh set of eyes to review web projects and help ensure your site meets international standards, meets deadlines and comes in under budget.

What image format should you use on your website?

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
  • The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
  • The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
  • the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent  pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the  Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif  and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers.  Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

export dialog What image format should you use on your website? image

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve.  Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial. 

How to center an image with CSS

I had a funny problem the other day when I was rebuilding my portfolio, I’d completely forgotten how to center an image using CSS. What I wanted to do was align my portfolio piece images to the center of the screen but regardless of how hard I tried they kept ending up on the left.

girls are evil left How to center an image with CSS image

This is the default position for an image of course, so I wasn’t too concerned about it. If I wanted to ensure that it was always on the left I could of course always add the following code to my CSS file:

[source lang='css']img {
float: left;}[/source]

This would ensure that my image not only aligned to the left but also allowed text to wrap around it’s right hand side. If I wanted to only align the image to the left, without allowing wrapping text I would add:

[source lang='css']img {
float: left;
clear: both;}[/source]

Or if I wanted to do exactly the same thing to the right, I would use the following CSS code:

[source lang='css']img {
float: right;
clear: both;}[/source]

girls are evil right How to center an image with CSS image

Right and left alignments in CSS are really easy, but what about centering the content? If I was a lazy web designer, I could always use HTML to center the image but that’s a bad practice to get into. HTML is designed to publish content, not format it. 

[source lang='html']

 How to center an image with CSS image
[/source]

Since the center tag is used to format the appearance of HTML I try to avoid it, which turns me back to CSS (Cascading Style Sheets) to center my content.

girls are evil center How to center an image with CSS image

Generally in CSS if you want to center something you simply set the left and right margins, if you don’t know the width of your object you can specify it in the CSS but in my case each portfolio piece width is different so I needed to be more generic.

[source lang='css']img {
margin-left: auto;
margin-right: auto;
display:block;}[/source]

The trick (if it really is a trick) is to include the display:block line. As we all know (cough), HTML elements are made up of two types of objects. The block objects such as <p>, <h1>…<h6>, <div>,<ul> ect. and inline objects such as <strong>, <b>, <em>, <i> etc., the <img> tag is by default an inline object which means that web browsers do not automatically attempt to associate a buffer for the object.

Since the <img> tag does not have a pre-existing space or area, it can not be centered in an area until you instruct the web browser to assign it an area. For example if you wrapped the image in a <div> or <p> tag, you could text-align the <p> or <div> tag as such:

[source lang='html']

 How to center an image with CSS image

[/source]

[source lang='css']#centerme {
text-align: center;}[/source]

This example works because the <div> tag is a block and therefore the web browser already knows it has a space it can occupy but if you don’t want to clutter your HTML with unnecessary <div> tags, you can simply use the CSS display:block; property to instruct web browsers to treat the <img> tag as a block and accomplish much the same trick.

Happy coding!

How to build a free website

There’s a secret that many web designers don’t want you to know, it’s that there’s no cost to building a website. In fact, you don’t even need special software to do it, everything you need is already installed on the most basic computer available today. In order to build a website, here’s all that you need:

  • On a Windows computer – NotePad
  • On an Apple Macintosh – TextEdit

textedit 300x281 How to build a free website imageNow that you have all the tools that you’ll need to build a web page, you need to understand a few things about building web pages.

How to Format a Web Page

Web pages are divided into two specific areas, the <head> and the <body>, each of these two areas does something specific and before you can build a web page, you need to understand the basic purpose of each section.

Setting up Your First Web Page

basic html How to build a free website imageFor a web page to be recognized by a web browser (the software application used to view a web page) we first need to tell the browser that our document is an HTML document. To accomplish this, all we need to do is place the code <html> on the first line of our document followed by </html> on the very last line of our document.

Once those tags are in place, most web browsers will understand that the content being displayed is an HTML document. I say most because technically, there is a bit more that you should put in there if you want to ensure the site is 100% compatible with all modern web browsers, but explaining the fine details of DOCTYPE structure is a little beyond the scope of today’s tutorial. Needless to say, placing the tags <html> and </html> will tell web browsers what your document is but if you’d like to technically perfect, place the following code instead:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
</html>

Once that’s done, remember that all other code must be placed between the two <html> tags to be recognized as valid HTML.

The <head> Section

The <head> tag of a web page is the reserved for things which other computers and software applications require to understand your web page properly. For example, when a web browser loads your web page there are specific things that it looks for in order to understand what language your site is in, what your web page is about and the name of your page. Within the head section, we want to include details such as:

  • Links to alternative content such as RSS feeds, XML site maps and mobile interface files
  • Javascript links and or content to help the functionality of our page
  • META data for robots to read including a page description, keywords and generator
  • Cascading Style Sheet (CSS) details or links
  • The document content type
  • Codes and robot commands for foreign applications
  • Pingback processing directives
  • The web page icon file location
  • Canonical labels for search engine optimization
  • Base directory directives
  • The title of your document

Sounds like a lot right? Well it is, and it’s all very important stuff. Essentially, the <head> section of your web page stores all the mechanical and client side information required to properly index, label, categorize and distribute your web page as well as the information needed to successfully display your web page in a users browser. I could write a whole post on each of the items above but for now, it’s simply important for you to know that the <head> is used to store those pieces of information and you can add them at a later date.

html with head How to build a free website imageAdding data to the <head> of the document is done the same way as all elements of an HTML document, by opening and closing an HTML tag. In this case, the <head> tag must be opened and later closed </head> in order to store the appropriate content. Between those tags, you may store a series of HTML or xHTML (we’ll talk another day about the differences) data devices for use in rendering your pages. For example, here is a basic <head> element for a common web page:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
</head>

You will notice that in this basic example we only store the basic information required to make a web page work, the http-equiv which tells web browsers that the document being served is in text/html format (as opposed to text/rtf which is a Rich Text document or text/javascript which would be a JavaScript file) so that the web browser looking at this document understands it is an HTML page. untitled document How to build a free website imageAdditionally, the <head> contains the <title> tag which closes (</title>) after labeling the document Untitled Document. If you loaded the source code into a web browser, you would now see a blank document with no content displayed to the user but a new title at the top of your browser, labeled Untitled Document. This document title is the label being fed to the web browser from the <title> tag contained within the <head> of this document.

The <body> Section

If the <head> of a web page is the content being presented to other computers, then the <body> is the content being displayed to human eyes (or text readers) visiting your web page. Creating content on a web page is wonderfully simple. If you’d like to have a web page say hello, simply add the code:
<body>
hello
</body>
html with body How to build a free website imagePresto! You now have a fully functional web page, albeit a little dull. The <body> section works by displaying exactly what you type as content, so anything (and everything) you add between the two <body> tags will appear on your web page but you have to be careful, HTML needs the content marked up (labeled) to be properly viewed in a web browser. Just in case you didn’t know, HTML stands for HyperText Markup Language, a Markup Language is simply text that’s been formated to be read by computers. For example I can create my own Markup Language right now called Chris Ross’s Markup Language (CRML) that looks like this:
[-open-]Hello World![-close-]
Now I have my own Markup Language but since nobody uses it, it’s pretty much useless. On the other hand, everybody with a web browser uses the HyperText Markup Language (HTML) so let’s look at it. HTML has a handful of common codes used to display content effectively, they are:
  • <p>, always followed by </p> which displays text in paragraph format
  • <br>, which never has a </br> but instead is written <br/> in xHTML and represents a line break (where a paragraph is often displayed as two line breaks to separate content)
  • <ol>, which always needs a </ol> for ordered lists (numbered lists) and <ul> with a </ul> for unordered list (bullets), both also require <li></li> tags for each list item in the list to work
  • <b></b> or <strong></strong> tags mark text as important. The <b> tag was replaced with the <strong> tag a few years back since not all languages bold words to make them more important
  • <i></i> makes a word italics but like the <b> tag, was also replaced. These days, you can use <em></em> to place emphases on a word or phrase
  • <h#> tags are special and always need an corresponding </h#> tag where the # symbol can be replaced with the numbers 1 through 6 (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) which represents the level of a header in your document
  • <img /> will allow you to place images in your document but requires special parameters we’ll talk about another time
  • <a> followed by a </a> tag will hyperlink the text between the tags to another document but also requires special parameters.
  • <table> tags can be used to display tabular data (like charts) on a web page. It needs to end in a </table> tag and can include headers (<th></th>), rows (<tr></tr>) and columns (<td></td>). Why columns are <td> is beyond me, but that’s what they are.
  • <div> tags use a closing tag of </div> to divide content into various areas of a page, much like the <span> tag, the <div> tag has no visual effect on content but is used by programmers and designers to affect content.

Essentially, the ten tag structures above represent the HTML code found in every single web page on the planet. There are other tags, but have either been replaced or are simply bad tags. For example the <u></u> tag will underline content and the <blink></blink> tag is simply wrong … even the creator of the tag, Lou Montulli (it’s odd to think somebody actually invented a tag eh?) appears to wish it would simply die.

When put together, the <html> document label tells a web browser the information is a web page, the <head> indicates content reserved for other computer systems to read, while the <body> shows content to the end user.

In total, the 26 tags here represent the whole of the content required to build your own web site for free. If you’ve found this post at all useful, please feel free to leave me a comment below, thanks for reading.

February Contest & Prize Giveaway

As you all know, I’m trying to build my website and increase the readership and to me, the best way to increase my readership is to increase the quality of my articles.

Welcome to February, the coldest and darkest of the months (or at least it is for those of us here in Canada). This month I wanted to warm us all up by offering a prize so delightful that everybody can benefit. Luckily for me, the great people over at Marketcircle  agreed to lighten everybody’s mood and give away three copies (worth almost $120) of their increadable software package Billings 3. Now later in the week, I’m going to go into a bit more detail of why I love this product so much but this post isn’t about the software, it’s about how to win it. 

Billings

As you all know, I’m trying to build my website and increase the readership and to me, the best way to increase my readership is to increase the quality of my articles, my writing and what I’m covering here on thisismyurl.com.

How can you help me with that?

Simple, between now and the end of February I challenge each of you to:

  1. find an article on my website that you think could use improving 
  2. leave a comment on that post and include the URL to a great article on a similar subject that you’ve read elsewhere on the web
  3. include a brief description of why you enjoyed that piece

That’s all there is to it, the more you enter the better your chances.

Prizes will be announced March 1st and randomly selected from the comments which match the criterial.

About the Prize

Billings 3 is an award winning time billing tool designed to be so easy to use, ever a web designer can do it. The tool features recurring billing, time management tools, expense tracking, one click invoicing, customized invoices and coming in 2009, iPhone integration.

What’s Your Revenue Model?

So you want to build a website and you’ve put together the cash to hire a local web design firm, and you’ve started searching for the perfect person to help you with Search Engine Optimization, you’ve even found a great writer, a strong photographer and a killer web designer to put it all together. There’s only one thing remaining and it’s a Twitter of a problem … how do you make money?

See, I say Twitter because I personally think Twitter is a funny story. As I pointed out last week, I’m addicted to Twitter and love the service but as Andy Beal pointed out, there’s no revenue model for the service yet which means that they’re losing money to offer the service. No biggy for now, I’m sure they have a plan but what’s yours?

There are, as far as I can tell only three ways to make money on a website. Perhaps a fourth but we’ll get into that later. The three methods for making money that I can think of are:

  1. Sell a product from your website which people are willing to buy.
  2. Sell content on your website which people are willing to pay for.
  3. Sell advertising on your website.

The first model is pretty straight forward. Sell something which people will pay to either download or order online. This works great for selling everything from books (electronic or otherwise) to music, movies or pope bobble head dolls.

The second model, well … we call it porn. Actually I’m sure there’s something else people would be willing to pay for online but I’ll be damned if I can think of it right now. Premium memberships to websites is a tough business model but lucrative if you can get it right.

The final model is to sell advertisements to companies who in turn sell products and/or services to people. This is pretty common these days and it’s how I keep the lights on here at thisismyurl.com, those ads you see at the top and bottom of the website make me money every time you visit one of my sponsors.

I mentioned that there’s a fourth model, but it’s not really a direct model so I’m reluctant to include it in the three methods above. The model is to use your website as a marketing tool, this is the most common use of a traditional website. Take for example a bed and breakfast or camp ground, their website may (or may not) offer online bookings but it’s true purpose is to promote information to people who are going to spend money in the real world.  While I envy guys like Jeremy who can pay their bills by selling Facebook ads, my website is a lot like a hotel’s site … I pay my bills by building websites for clients who often first learn about me through my website.

So before you hire the web deign team and get started, ask yourself the honest questions and figure out how you plan to make money online.

Top 10 Web Site Mistakes That Businesses Make

Many small businesses fail to take advantage of the great, low cost marketing opportunities found on the web and make costly mistakes which can be easily avoided.

Where are you?

I don’t get it but a lot of small businesses think hiding their contact information is a good idea. I could get into why your contact information on every page is good for localized search engines, or how it could help regional linking but you know what? It’s simply common sense for a business to want prospects to be able to find them. If you’re a public facing business (retail, restaurant etc) your address should be on every page, it’s that simple. Other companies need an easy to find link, clearly labeled to a contact page.

What do you do?

Honestly, I’m a web designer and half the time I can’t figure out what companies do based on their website. Does your website over think the process? Most do. If you’re a restaurant, post a menu. If you’re an inn, show me your rooms. Post your product or service in the easiest, clearest way possible.

No Images

The only thing worse than a website without contact details? A boring, stale, dull one with lots of text. Pictures say a thousand words right? Well, stop typing so much and buy a $100 camera. Take pictures of your products and people, let me see your lobby, reception area, board room and then I’ll feel better about spending money with you.

Your Company is Run By Robots

Web site are not about technology, stop worrying about fonts and colors. Let me see your people, this goes back to the picture issue above but honestly, it’s worth a second point. Who’s won awards this month? New hires? Experienced professional? Let me know! By the way, having a video on your website is brilliant, people love videos.

Fire and Forget Web Sites

Nothing ticks me off faster than a business who launches a website and ignores it. The Internet is the first place your prospects are going to go to, and they’ll simply move on if ignore them. Answer every email, provide updated content, add a blog to keep content fresh and follow up on every comment on your site. Prompt service wins business.

Outdated Content

If your business wants to succeed, respect your website is an extension of your physical business. Look at it all the time, assign it to somebody in your office or if you can’t afford the time, assign it to me but for the love of all that is digital … Christmas is over in December, make sure your website isn’t promoting St. Nick by News Years. The same goes for the big trade show, holidays, news events and staffing requests.

Butchering the Brand

If your website doesn’t look like your brochure, fire your web designer. Honestly, there’s no reason for your logo to be different on a website. There’s no reason you don’t look as good no, scratch that. There’s no reason you don’t look BETTER on the web than you do in print or in person. Think about it, full color printing costs money but on the web, it’s free.

Broken Down Sites

A 404 Error is the technical term for a website page that no longer exists. 500 is the error code for sites which failed to execute a PHP script from your site … if your clients ever see this, you have no business running a website.

Web Sites Designed by Friends and Family

If your cousin is an award winning designer, hire her but if she’s a database administrator or makes a living putting monitors on desks for a living … walk away. Your website is an extension of your brand, it’s about marketing not technology so hire a designer with a proven track record building quality sites.

Typo’s and Mistakes

Broken images, grammatical errors, poor spelling … these are signs of a business owner who doesn’t care about the company and that tells me that they’re not going to care about the product they sell. Before a website goes live, make sure it’s done.

Effective online marketing is easy, it’s cost effective and it’s a key element of the marketing program of a modern, success business.

If you’re already running a website, take a few moments and ask yourself:

  • Does my website look better than my business card?
  • Does my website tell my clients what I do?
  • Does my website tell prospects how to reach me?
  • Is my website easy to use?
  • Is my website’s content fresh?

Once you’ve asked yourself those questions, ask 20 other people those five simple questions about your website and really listen.

How do I become a web master?

Being a web master is one of the coolest jobs in the world but how do you become a web master in the first place and what training should your get before applying for the job?

First off, what does a web master do? They’re the glue that holds a website development team together, a jack-of-all-trades who knows how to create graphics and code for the website but they’re also often responsible for writing content, developing marketing strategies, testing the quality of the website and building everything from buttons to business relationships. In short, a web master is the heart, soul, blood, sweat and tears behind a website.

To be a good web master, you’ll need to learn how to be good at not only the creative side of the art but also the technical side. There’s no use having a great looking website if you’re not capable of fixing the bugs in the code as well. Furthermore, you’ll need to understand the business side of the site and how to deal with hosting companies, review analytics data and meet marketing objectives just like a store manager would need to do.

Of course, there’s various degrees of being a web master just like in any other field so if you’re more comfortable building HTML code, you might want to focus more on being a web publisher or for people who love Adobe Photoshop, the role of being a web designer may be more suitable but for those who like running websites there’s only one job .. the web master. 

As for education, the industry is one that’s always changing. There’s no use spending four years and $40,000 learning to do something that’s going to be outdated by the time you’re done so don’t focus your education on technologies. In 2005 for example, Java was the big thing and many websites used ASP as their primary language, if they used a scripting language at all. Today, I’d venture to guess most websites use PHP but tomorrow they might be Python, Ruby or any language we’d yet to hear of. So don’t base your choice to learn to be a web master on the language instead, choose a skill that’ll never go out of fashion and supplement it with a thirst for technology knowledge. 

If I was going to start over today and hope to be a great web master? I’d go to community college or university to study Marketing or Business, possibly Communications or Commerce with a minor in Computers for any of these degrees. Then, I’d buy a copy of the Adobe Master Collection and spend at least as many hours a week learning Flash, Photoshop, Illustrator, Dreamweaver and Fireworks as I spend in class and homework. With these skills, your education will naturally help you become a great web master.

What if you can’t afford or don’t want to go to school? A lot of people make a mistake when they’re young and go to college (I know somewhere out there your parents just convulsed) but the truth is, college isn’t about school it’s about learning and some people are not ready to learn when they’re young. For those people, becoming a web master is just as easy. Pick up the same software as your college bound buddies (Adobe Photoshop, Illustrator etc) and put in 1,000 hours of hard work and determination. Becoming a great web master is a little like leveling up in Warcraft, it takes time but eventually you’ll be great at it.

Remember, being a web master isn’t really about being the master of the web it’s about being able to bring an expert knowledge of design, programming, marketing or business to the yet unbridled technology industry.

What is a Web Master?

Though my career, I’ve often been asked what the role of the Web Master really is. I’ve always struggled with the answer because a Web Master isn’t really a programmer (although your Web Master should be able to program) and they’re normally not a Web Designer, but have all the skills of a Web Designer. They’re also not quite in the world of marketing professionals and they’re not really in the IT department either, although in both cases they need to know the trades in depth.

This is where I also got stuck before today. They’re not designers, they’re not programmers, they’re not marketers and they’re not IT people yet, a good web master needs to know how to design, how to program, how to market and how to deal with technology issues.

My friend Daniel once told me that he spent years as a Stage Manager for theaters throughout Canada. I thought this was pretty cool, so one day I asked him what a stage manager did, he told me that he had no idea but without one, the theater fell apart. In my career I’ve often retold that story to explain what a Web Master does but these days I’ve finally figured out what separates a Web Master from everybody else … to be a Web Master is to be an Evangelist within our industry.

What do you think?

Eight Awesome Icons for Popular Social Networking Sites

PreviewSo, some of you might already know my design partner Chris, he’s a Montreal web designer which roughly translates into he sits in cafe’s and reads poetry most of the time but last week, he uploaded a set of eight free social networking icons. They’re good but I thought that I could do something better so I cracked open a copy of Adobe Fireworks and put together my own eight social networking icons for your amusement.

Sure, his are vector but mine have funky shadows and if you’d like, you can wrap mine up and give them to your loved ones for Chris-e-mas.