simonshullfoust.com

Conversion Tracking with Google and GoodBarry

Simon Shull Foust — Thu, 31 Jul 2008 22:02:47 +0000

If you have an online business that relies on paid placement for a good portion of your meaningful traffic, then Google’s conversion tracking is extremely important.

The concept is simple. You run Google AdWords campaigns to drive targeted traffic to your site, and you have conversion tracking code on certain pages so you can track your success. One common method is to place the conversion tracking code on a ‘Thank You’ page, which is a page visitors are taken to after filling out a form of some kind - whether a simple contact form, or subscription or quote request. This way, you know which visitors found your site through a paid advertisement on Google and then made their way to a form which they then filled out.

With GoodBarry, placing this tracking code on the correct page is easier than you think. Simply go to “Admin > Customize System Messages” and then click on the “Web Forms Confirmation Page” to edit that page. From there, use the HTML view on the editor to paste in your tracking code, and you’re ready to go!

Additionally, if you’d like for different forms on your site to have different confirmation pages (perhaps so you can have different types of conversions to track) you can edit the form action and create new confirmation pages as well. Simply follow the directions found in the online business wiki here, and then create the new confirmation pages with the appropriate tracking code for each.

Title Tags and Body IDs with GoodBarry

Simon Shull Foust — Tue, 29 Jul 2008 19:15:30 +0000

While integrating sites with GoodBarry I’ve noticed that you can edit both the Title Tag for a given page (as well as the Body ID) right from the content editor. This is a very helpful tip, because the default title tag is often insufficient as a description of a given page.

If you have a page called, “Home” then that’s what the Title Tag is going to say unless you do the following. Go to your administrative area and go to the web page you want to edit. Then click over to the html view in the content editor and make sure you have the proper tags there. You should have , , , <body>, and their end tags in addition to the content of the page. For instance:</p> <pre><html> <head> <title>Home

This is an example of content.

What you want to do is edit the Title Tag to be more descriptive. Maybe something like Homepage of Simon Shull Foust. And also, feel free to add an ID on the Body tag so you can reference this particular page in your StyleSheet. This is often used to apply special styles to the navigation of a website - a sort of “selected” state.

So if you wanted for the link in the main navigation of your site to be gray when you’re on a given page, you can add your ID to the body tag like this: and then in your StyleSheet make a reference like this: #home #nav li.home a { color: #777; }.

So, in a sense, the Title Tag and Body ID specified for each of your content pages overwrite your Site-Wide Template, which most like just has a body tag with no ID. This is a very helpful practice to give you more control over individual pages.

Just Completely For Fun

Simon Shull Foust — Thu, 17 Jul 2008 23:06:28 +0000

Ok so listen, this one is just completely for fun. Titled, “Grandpas Wake” or alternately - “He would have wanted it this way.” This song has been stuck in my head all day since seeing this.

GoodBarry and XML Sitemap

Simon Shull Foust — Thu, 03 Jul 2008 05:46:24 +0000

After integrating your site with GoodBarry and filling all your main pages with content you will want to activate your sitemap.xml for better search engine indexing. (To do this go here: “Admin” -> “Google/Yahoo/Live Optimisation”). However, you also want to make sure there are no pages in your sitemap that shouldn’t be there.

For instance, when you sign up for your free 30-day trial some example pages are created so you can see how they work. You’ll want to edit or delete those before submitting your sitemap.xml to Google Webmaster Tools. Your sitemap.xml will auto-update every 24-hours, and periodically auto-submit to various search engines.

Getting Started with GoodBarry: Integration

Simon Shull Foust — Thu, 03 Jul 2008 05:06:48 +0000

Ok so let’s say you’ve got your design finalized and you’ve even had it sliced into valid xhtml/css. Integrating your site with GoodBarry isn’t as tedious as you may think it could be. There are basically two templates you’re going to need to edit.

But first, upload all your images, css files, and JavaScript files (if any) via FTP. Then log in to your GoodBarry control panel (yourdomain.com/admin) and hover over the third link from the top right (named “Admin”) and go down to “Manage Site-Wide Templates”.

You’ll see, “Main”, “Printer”, and “Sub-template”. Click on Main first and check out how the default template looks in the wysiwyg. You’ll probably need to remember a lot of the tags you see like {tag_pagecontent} and place those in your template where you want them.

So what you want to do is click the blue less-than/greater-than arrows at the bottom of the editor to go to the HTML view. Here is where you want to replace what’s there with the HTML from your build-out. But don’t forget to include the stuff from the default template you’ll need - such as the reference in the header to the ModuleStyleSheets.css file, along with all the tags you’ll want to use. When you’re done hit “Save and Publish” and that’s basically it.

Now, I just glossed over what is a really easy process for more advanced users. And future blog posts will be more in depth about specific topics, including GoodBarry integration. However, if you’re interested in integrating your site with GoodBarry and you’d like the peace of mind that comes with having professionals do it, check out my company - CMS integration is one of our specialities.

No Longer a Freelancer: SF Creative Open for Business

Simon Shull Foust — Tue, 01 Jul 2008 20:22:19 +0000

Though I have worked as a web designer specializing in PSD to HTML conversion and CSS in some capacity for several years now, I was really only a full-time freelancer for about 7 months. During that time simonsportfolio.com (which now forwards to simonshullfoust.com - my new blog) became one of the top search engine results for things like “css buildouts”. I learned a lot during this time, and I am happy to say that I’ve started my own business, named SF Creative Group!

So if you arrived at this site looking for simonsportfolio.com, thanks for visiting, and I hope you find this new blog helpful!

The transition from working for other people, to being a freelancer, to owning my own business has been amazing, and I’m really excited about the things we’re doing over at SF Creative. I hope you’ll check us out today, especially if you’re in the market for CMS integration, PSD to HTML conversions, or full scale web design and developement.

Freelancers: 3 Steps to Effective Time Management

Simon Shull Foust — Sun, 18 Nov 2007 00:58:27 +0000

Time management can be difficult, especially when you’re first starting out. Should you plan every second of every day? Should you go with no schedule at all? How much time should you spend emailing, blogging, looking for new work? This post covers some important things I learned about time management from my own experience, and it is especially focused the time spent doing things that actually grow your business (rather than say, how to keep a good schedule in general).

First, identify the top 5 activities that you want to do every day to grow your business. How do you know what grows your business? Identifying what grows your business can be tricky, especially if you are just starting out. This is where you’re going to have to put your trust in people who’ve been there and done that. Check out my post, “Top 5 Ways To Grow Your Freelance Business” for some ideas as well as links to posts by others on this topic.

Here are my top 5 things. But first, please note that these 5 things (I’m speaking particularly about the details) may not be your 5 things, and you shouldn’t feel like they have to be. Whatever works in this post, use it. Whatever doesn’t, throw it out. (I learned that from Bruce Lee and C.S. Lewis.)

Blogging (”Offline” & Online, Posting on social networking sites, blogs, forums, etc.)
Marketing & Branding (”Offline” & Online, My Portfolio Site, Google AdWords, etc.)
Actively Seeking Work (”Offline” & Online)
Research & Planning (Whiteboarding, reading magazines and blogs in my area etc.)
Exercise (Body, Soul, & Mind – I can’t function at my best without the right exercise.)

Secondly, dedicate a block of time every day to doing those 3 things. And some things need more attention per day than others. For a frame of reference: I spend 1 hour each day on Blogging related stuff, and 30 minutes each on the other 4 things. That’s 2 hours of my day doing 5 things. The rest of the day, I work on whatever projects I have to do.

The idea is to do 5 things that bring your profit (whether immediately or gradually) every day, and to do them efficiently. By efficiently I mean in a way that best uses your time in balance. It’s easy to spend 4 hours every morning just reading digg, blogs that you like, sites related to your field, etc. But you have to set a fixed time (on things that are profitable) and stick to it.

Obviously, you’re going to need a way to track the time – a way that is better than looking at your watch/phone/clock. I use TimeTracker, but I’m upgrading to Harvest soon here. Here is a screenshot of what my list looks like in the morning:

I don’t spend an equal amount of time on the sub-tasks as the main task. For instance, I try not to spend too much time per day foolin with AdWords (or Analytics for that matter) because you can get lost in there. It’s too fun. And it’s not necessarily profitable. So, some days I don’t do anything at all with AdWords. Also, not every day is an “How is my SEO” day, etc.

Lastly, examine how your business has grown after 30 days and reorganize your time. This is important. Using TimeTracker (or whatever) you can look back and see how well you met your goals of spending a certain amount of time on each thing. Then you judge how your business has changed or not. Now it’s time to decide how to reorganize your time on these 5 things (if at all) OR choose different things altogether.

Here are some articles by others that may be helpful:

5 Ways To Grow Your Freelance Business

Simon Shull Foust — Sat, 17 Nov 2007 23:22:23 +0000

This post is a brief description of how I have grown my freelance business, and how you can too. I talk about the sites I read and post on, how the people I’ve met have helped me, and how you can possibly find the same success. This is really aimed at people just starting out, but it may be helpful or interesting to established freelancers and businesses. Leave a comment and let me know what you think.

Blog, read & post on blogs and forums related to your business. You probably either know that already or have at least heard it before. It’s really basic – these things connect you with people who can help you, and if you know what you’re talking about and can communicate well, then posting in these places will give you credibility. One month after I started doing this, I met more people who were interested in working with me than I met in the previous three months combined.

Personally, I have found that joining sites like LinkedIn has been profitable. In the Answers section of the site, you can find questions that people are asking about your niche (whether it’s web design, development, graphic design, etc.). Answering and asking questions on that site is a good way to meet people and show that you know what you’re talking about. This gives you credibility, and with that people are more likely to offer you a job or accept a proposal you make. So, networking with professionals and prospective clients online is one potential avenue for finding new business. (But this doesn’t mean you don’t have to do the same thing “offline”.) Another good site to read (with a forum to post on) is FreelanceSwitch.

Don’t lower your rates – if anything, raise them. There is a tendency to worry about the competition, and whether or not you’re not getting work because others are doing it for less money – especially if you’re first starting out or if you’ve hit a dry spell in your incoming jobs. But you have to charge what you know your service is worth. If you’re too cheap, you look unprofessional. People will assume that you’re a noob. Clients who don’t want noobs, but want professionals, are more likely to be good clients who pay you on time and give you less of a hassle. Charging what you’re worth is crucial. Once I started charging what I was worth, I felt better about what I was doing and I had a renewed passion for finding business, as well as for getting projects in on time and with excellence.

Connect with people who can help you. I work part-time for a dot com that sells home improvement products (PlumberSurplus). Pretty different business than what I spend most of my time doing – web design. But the people that work there are very good at what they do. I’ve learned things about SEO, marketing, sales, and ecommerce that has helped me immensely in my own business. Also, I know people who work in the brick and mortar world (that sounds so lame) who have taught me a lot about people and what they want in a product or service. And it’s always translatable to what I do. Listen to people who are good at what they do, no matter what business it is, and apply the principles to your own business.

Don’t be afraid to ask for a job. Depending on your personality and experience, there can be a general timidity about asking for a job. You meet someone you know needs business cards (let’s say you’re a graphic designer), but you know they’re already talking to a big graphic design firm. It’s easy to feel intimidated, thinking to yourself things like, “They don’t want me; I’m inexperienced; they’ll go with the firm.” Or you might be afraid to ask for the amount of money that you want to ask for.

Listen, (yes, like Nike) just do it. Ask. Don’t be a pussywillow. What’s the worst that’ll happen? They’ll say, “No thanks” or laugh in your face? So what? Move on. It’s their loss. Don’t even think about it again. Sometimes I ask for jobs I think I have maybe a 5% chance of getting. Because I lose nothing. I can only gain. Once I started offering my services to people, asking for jobs, making proposals, guess what? I started getting more business. Wow.

Lastly, never stop growing your skills. None of this means anything if you’re not good at what you do. Take a night class or practice the kinds of jobs that you want to get – then when you get them, you know you’re ready. When I started getting really good at what I do, I had a renewed confidence and that made everything else much easier. Suddenly I knew how I wanted to market myself, I wasn’t afraid to ask for jobs, and to ask to be paid what I’m worth.

Don’t you want to feel that way too?

Here are some helpful related articles by others:

Highlight Comments of Users Logged In

Simon Shull Foust — Mon, 12 Nov 2007 11:50:28 +0000

I don’t require people to log in to post comments on my blog posts, but people can register if they want to. When styling my comments list on blog posts I decided to highlight comments by users logged in. You’ve probably seen other blogs where comments that are posted by the site admin(s) are styled differently than comments from other users.

On my blog, if a user comments while logged in you see a subtle image on the top right hand side of their comment that says “Member”.

Achieving this was actually quite simple with Wordpress. First locate the following lines in your comments.php theme file:

id=”comment-”>
Says:

As you can see, we already have a class on the list item –

– which is to apply the class of “alt” to every other comment (that’s how you achieve the alternating gray or white background). Rather than get too messy trying to a second class to the list item (which is definitely doable, such as

), we’re going to apply a class to a paragraph instead.

So we’re going to deal with that third line only. I didn’t want to use the tags, opting instead to simply use paragraph –

– tags. So I replaced the third line with this:

user_id) echo ‘ class=”member”‘; ?>>:

What this is saying is IF the commenter has a user ID then apply the class “member” on that paragraph element. (Wordpress assigns user IDs to registered users. So, if the commenter has an ID then that means he/she is a registered user and is logged in.)

Next we simply have to add some styling information to our css file, in this case:

#comments ol p.member {
background: url(’images/member.png’) top right no-repeat;
}

The element on in the html reads:

Username:

for every user logged in.

That’s it!

Hat tip: Here’s how to do it for only admin.

Using CSS With Images: Mini-Gallery

Simon Shull Foust — Sun, 11 Nov 2007 09:45:13 +0000

Recently I was working on a proposed redesign for one of my clients product pages, and I wanted to use one space to display the product image and any secondary images. I didn’t want to display all of them at once, because I didn’t want to take up that much space. So I decided to use css to create a mini-gallery or mini-slideshow of sorts. Here’s how I did it.

First, I decided what size I wanted my main images to be - in this case, 300 x 300 pixels. I also knew that I wanted them to have a 5 pixels padding and a border, because I like that effect. I knew some of my images in the Surplus database weren’t square, so I decided to leave the border off of the images and just keep the padding:

.imagePadding { padding: 5px; }

I created a div container called “secondaryImage” and styled it with the border. This way, if an image isn’t square, the border around it will still be square. With a 5 pixel padding, that brings my div to 310 x 310 pixels, with a hidden overflow (no scroll bar) for reasons that will become apparent later:

#mainImage {
width: 310px;
height: 310px;
border: 1px solid #c0c0c0;
overflow: hidden; }

Now, I decided to put the images in a list with no bullets (list-style: none), and simply specify the height of each

so that even if an image isn’t the full span of the div (300 x 300), only one image will be showing at a time. The css looks like this:

#mainImage ul { list-style: none; }

#mainImage li {
width: 310px;
height: 310px; }

Next I want to create small thumbnails of the three images so that when clicked, the main image appears in the main image box. I’ll make these about 30 x 30 pixels and give them a border. In the html, I’ll put them in a list and style them in the css to appear below the main image box. The css looks like this:

#thumbs {
list-style: none;
clear: both; }

#thumbs li {
float: left;
margin: 3px 10px 0 0; }

#thumbs li a:link, #thumbs li a:active, #thumbs li a:visited, #thumbs li a:hover {
width: 30px;
height: 30px;
display: block;
border: 1px solid #c0c0c0; }

One final thing I want to do to the css is to use a wildcard margin and padding line so that all margins and padding are set to 0, giving me greater control over these elements. This is a good thing to do because different browsers have different default margins and padding, so it is good to make everything 0 unless specified. And while we’re at it, let’s specify that images should not have borders unless specified, otherwise images that are enclosed in anchors (links) will have a border. To do this simply use:

* { margin: 0; padding: 0; }

img { border: 0; }

The final result looks like this. Click here for the full html, and here for the full css.