Archive for March, 2009

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. 

Hyper linking in Dreamweaver

HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.

Hypertext is text on a page that contains a Hyper Link

A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.

Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.

How to make a hypertext link in Dreamweaver

How to make a hypertext link in Dreamweaver

There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.

Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:

[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:

  • accesskey to make the link a keyboard shortcut
  • class to assign a CSS class
  • dir (rtl or ltr) to make the text run right to left or left to right
  • id to make the anchor text have a proper name
  • lang to assign a language value
  • style to format the tag
  • tabindex to index the tab order for the link
  • title to assign a title tag
  • rel for the link relationship.

Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:

[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]

Absolute Paths vs. Relative Paths

One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.

This tutorial is part six in a ten part series.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

Saturday was Skirt Day!

Today I’m going to take a break from writing about building better websites or HTML shortcuts and celebrate with a certain amount of awe and relief the greatest day in the Canadian calendar, Skirt Day.

Now for those of you who don’t know about Skirt Day (and I am sure there are millions of you) it’s a little like Easter in the sense that it doesn’t have a set day. In fact it comes to different parts of the country on different days but this year in my sleepy little town of Fredericton New Brunswick it came on Saturday, March 28th. Also like Easter, Skirt Day is the celebration of new beginnings and fresh hopes.

 

Skirt Day in New York City (photo by bnittoli)

Skirt Day in New York City (photo by bnittoli)

Skirt day is, simply put the first day of spring that you step out of your local coffee shop and  notice all the women are wearing skirts for the first time since Thanksgiving.

It’s a magical day and before anybody gets all high-and-mighty that it’s a sexist holiday, Skirt Day can be celebrated by women too. Every woman knows the day I’m talking about … you look out of your office window and men simply look better, they’re jackets are off and suddenly for the first time in months you can see hope again … that’s what Skirt Day is all about.

Now, as wonderful as Skirt Day is … today we have freezing rain so I’m not going to celebrate too much but, here’s hoping that pretty soon all the snow will be gone, bikes will be out and we can all enjoy a BBQ in the summer heat.

WordPress.com Stats Smiley Remover Plugin

When you install the WordPress.com Stats plugin from WordPress it adds a small, simple graphic to your posts which looks like a small smiley face. Generally it’s located in the footer of your theme but no matter how hard you try, you won’t be able to find it (or remove it) from the code.

Why? 

The smiley face is actually being loaded through a series of JavaScript calls from a remote server, the graphic isn’t actually located on your website at all! It’s part of the WordPress.com Stats plugin and is designed to help track visitors to your website but … it’s kinda ugly and a pain in the ass so to get rid of it all you need to do is add some code to your header.php file. Specifically, open your style.css file and add the following CSS:

[source lang="css"]img#wpstats{display:none;}[/source]

If you’re absolutely petrified of opening and editing your CSS files directly you can either pay a WordPress expert to do it for you (that’s the choice that my wife always prefers) or you can download my simple plugin which can be uploaded to your website and activated, automatically adding the code to the proper place.

How to Install

  1. Download the plugin
  2. Log into your WordPress Admin (http://[yourwebsite]/wp-admin
  3. Surf to Plugins -> Add New
  4. Select the ZIP file and Install Now
  5. Activate the Plugin

For those of you who would like to know more about the Smiley Face frustrustration, Ryan Imel wrote a great piece on it a while back and there’s also a great piece on My Digital Life.

 download file WordPress.com Stats Smiley Remover Plugin image

How You Can Help

I love developing plugins for WordPress and do my best to always keep them free but of course it take a lot of time and effort to build these plugins so if you’d like to say thanks, the best way is to take a few moments and write about the plugin on your own website, include a link to my website from your posts or download and rate the plugin on the official plugin directory.

Support forums are now online! If you have any questions, please visit http://forums.thisismyurl.com.

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 schedule a post on WordPress

One of the greatest tools in WordPress is the ability to create posts and articles during your downtime but have them display at a later date. For example, I like to write a lot of my content while I’m sitting at the library waiting for my kids to wrap up local sports but I hold onto that content for days or even weeks before it’s placed on my website.

How do I do it?

Super simple actually, when you write a new post you can set the scheduled date for publication by clicking the Edit button located beside the publish immediately text in your Publish dialog box.

schedule a post in wordpress How to schedule a post on WordPress image

Holding content back for a later date is a great way to publish a successful blog because it allows you to write effective content while you’re available to do so but still allows you to control how often you publish content.

Another interesting use of this technique is for people who are looking to run an events calendar. By it’s nature, WordPress won’t allow you to display scheduled posts but there’s a way to do it which would allow you to publish only scheduled content:

[source lang='php']
$ScheduledEvents = new WP_Query();
$ScheduledEvents->query(‘post_status=future&order=ASC’);
[/source]

The post_status=future query allows you to create a new loop and display only future events, which would be perfect for bands or other blogs looking to display a list of upcoming events. More on that another time, thanks for reading.

What to do now that you’ve lost your job

Losing your job is a lot like getting dumped by the love of your life but it doesn’t have to be. I used to teach a class called Career Management at the Center for Arts and Technology here in my small city, in that class I taught students how to begin their careers but  I think at its hard, the lessons I taught struggling 3D animation students is true for all career paths and levels.

 

 

First, let’s establish that your career is irrelevant. I know that’s a tough thing to admit but I want you to honestly feel the power of that statement, even say it out loud. Your career is irrelevant. It doesn’t matter, it never did. 

Secondly, look at what is in your wallet. What matters can be found in your wallet, open it up and look at the pictures of your loved ones. If you don’t have pictures of loved ones, it’s time to find some. If you got hit by a bus today what would your wallet say about you? If who you are is defined by the name on your business card I’ll give you tip, you can print business cards for around $49 per 1,000. You can be the Queen of England if that’s what makes you happy, so stop identifying yourself with your job title.

Look at your cell phone. Now … the tough question. Who’s in your favorite five? Take a few seconds and look at your iPhone contact list and ask yourself how many of those people do you love and how many love you in return? If you can’t find a half dozen people you’d trust with your cat in that list, you’re in trouble. If you can’t find at least two that you’d trust with your life, your job has taken over your life. What’s my point? People matter, jobs do not.

We spend our lives in high school trying to get good grades so that we can go to a good college, and we spend college trying to get good grades so that we can get good jobs. We move out of our neighborhoods, away from family and even across the country to pursue a dream of working for big name companies. Once there, we form relationships with others at those companies and then when our company closes or we’re laid off we lose our social networks and start over. It’s not the loss of a job that you mourn, it’s the loss of a tribe.

How to change your life

First, there is always one tribe that you’re part of. Go see your parents, they know you better than most people and they’ll be honest with you. Plus, your mom will make you pudding. Smell the house you grew up in, look at pictures of yourself in old cowboy outfits and try to remember who you really are. Too many people I know woke up one day and had no idea who they were or how they got there. Remember Ben Wades quote even bad men love their mommas? It works the other way too, go ask her how you got where you are today and maybe she’ll tell you where you need to go tomorrow. 

Secondly, have a good look at your life. If you need to have a good midlife crisis, do it. Take a plane to the other side of the planet and learn to kick box in Thailand or stay home and learn to mix drinks behind a bar. The technology industry is a tough beast, maybe what you really need is to get out and relax. I have a good friend who was killing himself working hard in the film industry, he left it a couple years back and now he’s the happiest man I know. If your career is killing you, quit.

Third, know what matters. This is critical. You might have been an IT wiz kid for the past 20 years but maybe it’s time to be a chef or a plumber. Look at your beautiful house and ask yourself if you need it, ask your wife if she’d be just as happy with you owning a gas station or working at the local hardware store. Knowing what matters will help you know what you need to do.

Finally, follow my simple three step guide to happiness:

  1. Set realistic goals.
  2. Reach your goals.
  3. Repeat.

Something a little more helpful

Need something a little more helpful to get yourself back on track? OK simple … let’s talk about what you are and how you fit into the world. You’re an expert in your field or at the very least you should start believing that you are. Remember there is always somebody just behind you on the learning curve so it’s time for you to start writing a blog every day, help others understand what you know, so you can learn more.

I know that sounds counter intuitive but the more you talk about what you know, the more people help you learn more. They correct your assumptions, add to your knowledge and increase your understand of your subject. I once heard an old Chinese medicine theory about ginseng, apparently medicine men would give you ginseng for just about everything, if it cured you then it worked and if it didn’t cure you, you didn’t drink enough of it. Knowledge is the same, if you have enough of it you’ll always be successful. You only fail because you lack enough of it.

There is no wealth like knowledge, no poverty like ignorance. - Ali ibn Abi-Talib

Keep that in mind, I don’t care if your 35 learning to be a 3d animator or 55 learning to build shaker cabinets for the first time, knowledge is like a fresh mountain stream, the more of it you take the better you feel but unlike water it never runs out. In fact, the more of it you share the more is returned to you. That’s why writing a blog is so powerful, in order to write quality content you must first read quality content. Writing a blog isn’t about always being right, in fact something it’s about being corrected by people who know more than you do.

My 30 day challenge to you

Over the next 30 days I want you to wake up every morning an go for a half hour walk. Here’s what you’re going to do on that walk:

  • Smile at the pretty girls in the coffee shop, or wave to the local barber
  • Hold a door open for somebody or help somebody in a small way
  • Buy fresh fruit from a produce shop and enjoy it

When you get home, read ten blog posts about a subject that interests you and then write one of your own. If you don’t already have a blog, I’ll set one up for you for free. If you don’t know how to find blog posts that interest you, search Google Blogs.

Subscribe to a dozen job sites using an RSS reader. Every day, after you’ve written your blog post take the time to send a personal email and resume to no fewer than ten positions. Point them to your website, let them read about your experience and expertise. 

Do that everyday for 30 days and I guaranteed you that you’ll be turning down work by the end of the month.

iGoogle by Apple?

igoogle iGoogle by Apple? image

OK, I’ll admit that the screen shot above is a complete fake. I mocked it up in Adobe Fireworks in about 30 seconds but on Matt Cutt’s blog this morning he wrote a post called How to Write a Chrome Extension in Three Easy Steps  which I’m sure most of you completely overlooked (shame on you) but just think about the fun you could have on April Fools day with this horrible, despicable … devilishly easy to write plugin for Chrome. :)

How to make a post sticky in WordPress

Hi guys, I’ve been pretty busy the past couple weeks trying to get some major projects wrapped up (more on that later) so I haven’t had a lot of time to write around here but I’ve got a small arsenal of content written so I’ll be scheduling some of my tutorials for release over the next week.

I love geeks, outsiders often laugh at our obsession with acronyms but truthfully most of the time we just come up with really silly names for things. Case in point, sticky posts … they’re literally posts that stick to the top of your list. We could have called them a million things but somewhere along the line they simply became sticky posts.

How’s it work?

By default, WordPress will always list posts from the newest to the oldest but a sticky post overrides this order and always appears at the front of the list, in the order of publication for sticky posts. It’s like having two lines in a bank, where one always gets served first.

Making a Post Sticky

I’m not sure why Matt and the boys decided to make this function so hard to find but I get a lot of questions from my clients about how (and where) to make a post sticky. In fact, it took me some searching the first time so I can just imagine how frustrating it could be to new users.

Once found, it’s super easy:

sticky post in wordpress How to make a post sticky in WordPress image

Simply click the Edit button located beside your Visibility option and check the checkbox. As  I said, I’m not sure why this wasn’t put somewhere a little more intuitive but my theory is that with all the other great interface improvements in 2.7 they didn’t have the time to fiddle with this.

Girl Guides are Evil Shirt

girl guides are evil Girl Guides are Evil Shirt image

Based on my Girls are Evil shirt, this was a one off design for a local Girl Guide leader (that’s like a Girl Scout in the US) who worked with my daughter for the past couple of years. Much like regular girls, Girl Guides are evil too.

I need your swag.

google checkout tshirt I need your swag. image

Example of swag shirts

Hello my name is Christopher Ross and I have a problem. It’s not a big problem but it’s causing a disruption in my life and I don’t know what to do about it. With the recent economic downturn, companies I’ve come to rely on to keep me clothed are going out of business. If this keeps up, I might actually have to buy new shirts instead of wearing the swag sent by big companies.

The History of Swag

(or at least my made up version of it)

One of the weirdest things about ubber geeks (to which I consider myself a proud member) is that we tend to receive, pilfer or trade countless promotional items from software companies. My theory is that the marketing departments (primarily cute women) come from outside the cult of technology, notice that a lot of IT guys are often kinda cute and have stable jobs but wear the same shirts all the time. To solve this dilemma, they invented the swag wagon and convinced us that changing out shirt would be cool because we could brand ourselves with logos for various software companies. 

What happened next came straight out of an Ed Wood film … the geeks took it one step too far. I know, I was there and I saw it with my own two eyes. Empowered by the fact that we suddenly had girlfriends, geeks started trading our shirts in the secret dimly let rooms of online forums, next came inter company shirt swapping which was often organized by cute marketing girls in an attempt to broaden their geek selection. Finally, like all good things the process fell victim to the internet and before anybody could control the outbreak, marketing lost control. 

28 days later it wasn’t just ubber geeks wearing sweet Photoshop swag, quazi geeks and even nerds and dorks became part of the trend. Before you knew it, penguin pajamas for babies sat along side Microsoft coffee cups in the suburbs of once grunge infested Seattle.

The Begining of the End

As the first recession of the dot com bubble bust came to a close and the death shutters of Y2K narrowed, many ubber geeks thought the cycle of swag-and-buy would never end and we became disenfranchised with the economic highs (swag) and the lows when we became forced to covet our shirts like collectable action figures and sometimes buy new shirts.

We became resourceful and started making our own shirts. Coincidentally, this decision occurred about the same time the cute marketing girls abandon the IT industry in favor of the rising pharmaceutical industry.

In short, we’d evolved. 

princess bride hello stickers 300x216 I need your swag. image

Shirt 'stickers' worn by both children and adults afflicted.

These days, unable to get our t-shirt fix from free swag handouts, those capable of designing our own t-shirts find ourselves creating shirts, often from our favorite movies (to the right you’ll find my tribute to The Princess Bride).

Version 2.0

Once the lure of marketing savvy predators, the virus of free shirts quickly spread and evolved into the shunned secret world of designing new shirts for ones self but like all great infections, the mutating strand wasn’t finished yet.

Statistically, reproduction was inevitable and before the world knew it … the geeks (often with the assistance of the marketing department) reproduced and a version 2.0 of themselves was born.

v2.0 was a cross platform application, often inheriting characteristics of both the technically capable but poorly documented IT genes and some of the marketing savvy of mom. Unfortunately,  in their efforts to help socially incompetent technologists bond with the child, moms may have made a few fundamental mistakes.

  1. They allowed software developers to teach their children how to dance
  2. Often left unemployed, the IT department was put in charge of movie selection
  3. Failing to recognize the danger signs, fathers have been left to dress their children

The results, while history has yet to judge the v2.0 generation are evident. School yards filled with Google shirts, children rock climbing in Adobe silk screened shorts … even Microsoft water bottles adorn locker rooms. Of course, the worse was yet to come … some mothers actually encouraged the rampage and as a result little girls everywhere went to school wearing custom shirts.

 

Two shirt designs my daughter proudly sports.

Two shirt designs my daughter proudly sports.

What you can do

Please, if you want to stem the tide of custom shirt design and save an entire generation (if not the planet) from the evils of out of work web designers armed with Illustrator … do your part to help save humanity. Hire a designer today, or better yet, send me your swag … it’s like sponsoring a child in a poor country except I’m an adult in a wealthy country.

25 Things to Do to Increase Your Website Traffic Right Now

Everybody wants to be successful on the Internet right? Of course we do, nobody want’s to be sitting at home on prom night especially when there’s money involved so how do we do it? Well, here’s a list of 25 things you can do right now to increase your website traffic …

Make Your Content Accessible

Use the SEO Checker I built to see what Google can see. This tool will also help you understand what visually impaired people in your community can see … they make up almost 10% of the population, so can you really afford to only appeal to 90% of the market? 

Use Valid xHTML Markup

xHTML is the language web pages should be built in. If you write your page in sloppy code, it’ll be harder for web browsers to display it properly so just like a Word document, you have to save it in the right format for your audience to read it.

Translate Your Content

thisismyurl.com is available in 20 languages, 40% of my traffic comes from outside the US and Canada and is viewed in a language other than English using a free online translation service, I know it’s flawed but it’s the best I can offer and people learn from my postings.

Understand Keywords

Keywords are the heart and soul of the Internet, they’re like fresh pasta in Italian cooking or eye shadow to drag queens … if you don’t understand the value and application of keywords, get off the Internet.

Build Relationships with Other Websites

Almost half my traffic comes from Google, the other half? Came from other websites and referrals from great people that I taught something to and in turn taught me a lot.

Add a Google Sitemap

Google want’s nothing more than to know about you, it’s the companies only goal in the universe, so help them to help you.

Help People

Speaking of helping, help people. When you see a website with an error or run into a problem on a site, let them know. If you can fix a glitch, tell them how … I’ve picked up countless readers and sources of inspiration by simply being supportive.

Use Analytics

Back to Google for a second, they have a tool called Google Analytics. It’s free, it’s powerful and it’ll help you understand your audience.

Join Social Networking Sites

Websites like LinkedIn and Facebook are powerful tools to help people. Helping people leads to trust, trust leads to prospects and prospects lead to clients.

Add Fresh Content

Ask yourself, why do people come back to your boring old stale content? They don’t. If you ran a restaurant you’d have daily specials right? Well I think running a restaurant is easier than running a website, so make sure you have fresh content served daily.

Know Who’s Better Than You

There are a lot of web sites out there that are better than me:

 

 

Know who’s better than you and read them every day. The best way to learn is to know you need to learn. (btw, if you didn’t make the list don’t be sad I have hundreds of sites I read every week, these are just the first ones I though of)

Respond to Criticism

There’s a lot of things that I write on my blog that are not as well researched as they could be, and when I’m corrected I love it. You’ll notice if you pan through my comments that I don’t remove the negative … in fact I relish them. If people take the time to point out your flaws, thank them and you’ll grow.

Write Good Content

The best way to build traffic to your website? Make people want to come back. It’s harder to get new visitors than to keep your old ones.

Be Timely

Write about things that you know will be timely but don’t chase trends, it’s not relevant what others are writing about … only what your readers are reading about.

Get to Know Yourself

The past five months of blogging have taught me a lot about myself, I look back at some of the early pieces I wrote and know that I’ve changed. That’s part of what blogging is, it’s about growing not only as a business but also as a person and learning new things.

Make your Title Tag Valuable

Your title tag is a critical piece of the organic marketing puzzle, if you don’t understand how or why to use it properly … excuse my french but vous êtes vissé

Add an RSS Feed

I don’t care what type of business you are … if you can add an RSS feed to your web site do it! Let people know what you’re up to if they want to know. Same goes for Twitter, use it to exploit your interests.

Give Stuff Away For Free

I love giving things away for free. I have website templates, plugins and artwork people can download for free as well as over 600 pages of advice here on my website. Guess what? It cost me nothing and it put me on Alexa’s radar without having to do anything complicated.

Respect Your Audience

There’s only one thing more important then you on your website, your audience. Take time to get to know them and help them.

Know Your Goals

Why do you own a website? You’d be surprised how many people have no idea why they want to run a website … it’s a little sad really.

Use a Content Manager

Websites that are build on a content management system (I use WordPress) make it easier for people to update their websites. Websites that are updated more often get more traffic.

Read Matt’s Articles

Matt Cutts is Google. Actually he’s not but he’s the face of Google, the man who talks to all of us and tells us what Google is thinking, explains what they’re up to and helps lowly web masters to interact better. His job … to help the public make the most of Google, so why don’t you read his blog?

Join Forums

Forums are a great place to generate free traffic to your blog. They help you build relationships with other bloggers, build respect in the community and get into endless conversations about topics that interest you.

Comment on Other Websites

One of the most overlooked methods for building traffic to your website is to simply comment on other peoples websites. Remember my point about helping others? Point out flaws or add to the conversation and you’ll be generating great traffic back to your website.

Analyze and Adapt

Finally … the most important point … look at your analytics often and improve your website to help your audience make the most of your content.

20 Awesome Photos of Canada

Canada’s one of those places that most people never get to truly see, even Canadians tend to huddle in just a few cities and never get out to see the amazing landscapes, fjords (yes, we have fjords) and natural beauty that makes it such a cool place to live.

 

 

Wall of Water
Creative Commons License photo credit: >WouteR<

 

 

Visiting Canada is fairly easy, we’re just north of the US. That’s not completely true. Where I live is actually east of Maine, so technically we’re like a hat wraps around the head of America … more like a toque. Weather here is the same as most northern US states, Vancouver Canada is just north of Seattle so it rains there a lot. Altantic Canada is east of Maine, it’s cold here four months a year but gets up to 30*c in the summer (that’s around 86*f).

 

 

 

 

Lake Louise Reflection
Creative Commons License photo credit: jurvetson

 

fall in Vancouver
Creative Commons License photo credit: jmv

Our national sport is technically Lacrosse but you’re more likely to find us armed with a hockey stick or cycling than playing it. Our money is worth about 80 cents US per dollar, prices are mostly the same which means that if you bring $1,000 on vacation here, you’ll have $1,200 to spend. Prices are much lower than in England, about half.

 

(Edit (May 20th) Tim was kind enough to email me and let me know this one is actually Halifax England, not Halifax Canada. Sorry about that, I will now subject myself to the combined scorn of photographers and bloggers)

 

Falls in Quebec city
Creative Commons License photo credit: pfala

 

 

 

 

 

 

One of things my English relatives always seem to find fascinating about Canada is the size. It’s huge, massive, giant … pretty gosh darn big. The photo’s I’m showing here come from all over the country, Driving from coast to coast is about 6,000 km (3,728 miles), that would take about 138 days to walk across assuming you walked for eight hours each day.

 

Her majesty
Creative Commons License photo credit: jurek d.
Newfoundland Colors
Creative Commons License photo credit: jurek d.

 

IMG_0590
Creative Commons License photo credit: Spacecat

 

Newfoundland view
Creative Commons License photo credit: ZannaLyon

 

IMG_1085
Creative Commons License photo credit: Spacecat

The last few photos are from an area of Canada called Newfoundland. It’s on the North Eastern coast of Canada and is closer to Greenland than the US, which in my opinion is pretty awesome. The area was the first to be discovered and colonized by Europeans and is home to seasonal iceberg migrations.

I hope everybody has a good weekend, with luck the snow will be gone soon :)

Billings Time Management and Invoicing Software for Macintosh

Over the month of February, I asked all my regular readers to help me build a better website by telling me how I could improve my website or pointing me to better articles, I have to say honestly that I was overwhelmed by the feedback. Many of you send me private emails with great resources and I want to say thanks to everybody who contact me. As a prize to the best contributions (which I have to admit I randomly selected because everybody was so helpful) the fine people over at Marketcircle agreed to give away three copies of Billings, the most awesome time management and invoicing software for Macintosh.

Billings 3 isn’t about accounting, it’s a time management tool for designers which feels more like an extension of the Mac OS than an account tool. The interface is easy to learn and uses standard iTunes style drag and drop functionality. In fact, the tool appears to be built from the ground up to take advantage of the Mac OS by integrating directly into Mail and Address Book.

billings mactinosh invoice 245x300 Billings Time Management and Invoicing Software for Macintosh imageThe software comes complete with some stunning templates to make your invoicing less about accounting and more about your companies image, which of course is important to any designer. There are around 30 templates to choose from or you can use the invoice designer to create a unique theme for your business.

invoicing2 Billings Time Management and Invoicing Software for Macintosh imageSending an invoice is as simple as clicking the button, Billings will then ask you if you’d like to print the invoice, save it to PDF or automatically open Apple Mail to email the invoice to your client.

Improved Wordflow

What’s unique about this particular package is the integration between client management, estimates and invoicing. A typical work cycle for a project outside of Billings involves me tracking most things on paper or spread sheets, leaving dozens of emails marked unread to indicate which tasks have yet to be accomplished but with Billings, I simplify the process using the following steps:

Create a New Client

 

Using the Mac OS, Billings shares details

Using the Mac OS, Billings shares details

Before I can send an estimate to a client, I need to create them as a client but there’s no clunky copy and paste with Billings I simply right click the client’s name in Email and add then to the Address Book. Once the new client is in my Mac OS address book, I import them into Billings. That way, if I change their details in one application (Mail, MS Office, Billings etc) their details are automatically changed in Billings.

 

Create an Estimate

mac quote 286x300 Billings Time Management and Invoicing Software for Macintosh imageNow that my new client is in Billings, I can create a quote using the internal quote tool pictured here. Billings allows me to set my overall billing rate for all clients as well as specify my rate per client and per project. Another benefit is that it allows me to quickly offer my client a discount or if they deserve a PITA (pain in the ass) tax I can quickly do it here.

The quote also allows me to set taxes for individual clients or projects, set this specific quote to be billable or “for my eyes only” which allows me to track time regardless of if clients see the final bill or not.

estimate 150x150 Billings Time Management and Invoicing Software for Macintosh imageThe resulting estimate is automatically formated and transfered to my email application so that I can easily customize my message and send it off to the client.

Working on the Project

Once my client has accepted the estimate, I can begin the project by clicking a simple iTunes style button labeled Start Working. Pretty complicated so far right? It gets better.

tracktime2 Billings Time Management and Invoicing Software for Macintosh imageEach job is controlled by a series of timers, you can have as many timers as you’d like per job or you can add fixed rate items such as hosting or domain name registrations to the final tally. Timers are used to calculate actual time on the project and can be set to round to the nearest minute or time interval. If I get up to run an errand and leave the timer running, Billings automatically stops the timer and prompts me to deduct the time I was away from the computer.

Once I’ve completed each timer, I accept the charges or choose to mark the time as non billable, which allows me to track a lot more than my client ever knows and improve my billing capacity down the road. Dr. Michael Markovitz, the CEO of Yorkville University once told me that without data you can’t run a business, that’s sound advice for running a multi million dollar company or a small consulting team.

timed billing Billings Time Management and Invoicing Software for Macintosh image

Invoicing the client

invoicing21 Billings Time Management and Invoicing Software for Macintosh imageinvoice for chris 231x300 Billings Time Management and Invoicing Software for Macintosh imageNow the fun part, sending the bill … it’s actually a snap with the built in One Click Billing system. Basically, you click the button and send the bill by email or printing it out.

The same system works for generating monthly statements or reports and it’s this simplicity that has done a few things for my small business:

  1. Now I know how much time tasks take
  2. I can produce estimates faster than other designers
  3. My estimates are based on information, not hopeful projections
  4. I can track outstanding tasks and complete assignments in a timely manner
  5. My invoicing is stream lined
  6. My mortgage is paid.

Frankly, I think that last one is very important but more importantly for me is that because Billings makes my life easier, I can focus on what matters … getting jobs done and spending time with my family instead of fighting with other billing software.

Reporting Tools

billings for february Billings Time Management and Invoicing Software for Macintosh imageWhat I actually love about Billings is that it tells me what I need to know in simple, easy to understand language such as the brilliantly named Billed & Collected report displayed here. 

It tells me what I billed and what I collected. Brilliant.

Other reports let me quickly see who still owes me money, which accounts have retainers applied and who’s accounts are behind schedule or are costing me more money per project or task.

You can download a copy of Billings on a 21 day trial to see for yourself.