Firebug in IE

By Sean Sanders on October 20, 2009 at 6:50 am in Development, Technical, css, html

firebug-logoI’m Sean Sanders, one of the relatively new programmers here at T&S. Our former programmer Nick Little blogged previously about tools to help with web development, and one of those tools I find incredibly useful is the Firebug plugin for Firefox. There are some situations when having the ability to look at the CSS in other browsers the way you can in Firefox is helpful.  This is especially true with IE. Because of the way IE chooses to (not) display CSS rules, we often have to create style sheets just for IE to make it display our sites properly. A few days ago I found myself in a situation where I was trying to debug a site in IE7 and wanted to figure out exactly which rules were being applied. I looked into seeing if there was a way to use Firebug in IE.

What I found was a short bit of Javascript the people behind Firebug had written to be able use some of Firebug’s functionality in other browsers. They call it Firebug Lite.  This isn’t the full addon for Firefox, so you can’t change CSS on the fly the way you can in Firefox, but it’s still useful for being able to see how the rules you’ve created are getting applied. The following is the script for adding it to your website:

<script type=”text/javascript”
src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Also, for ease of use I wrote a bit of PHP to quickly turn the Firebug Lite script on and off.

<? if ($_GET['firebug']=="1") { ?>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<? } ?>

Now all you have to do is view the webpage normally when you don’t want to see the Firebug information, and add the parameter ?firebug=1 to the end of the url if you want to turn on Firebug. (Or, if there are already URL parameters, &firebug=1) I mentioned IE earlier, but if you are having trouble with your website in other browsers, such as Safari or Opera, it works equally well.

Moving business processes online

By Tim Priebe on September 10, 2009 at 10:28 pm in Development

boyideaA website is unique from other marketing mediums (even social networking) in that it can actually handle some of your business processes in addition to being a marketing tool.

But how do you find processes you can move onto your website?

The best way is to go through your business processes with one of the following types of people (listed in order of preference):

  1. A web professional
  2. A friend who isn’t that familiar with your business
  3. Yourself

Regardless of who goes over it with you, make sure that you list every single process out that you can think of. Start at the marketing process, how you get leads or potential customers. Then move to the actual sales process. If you’re in a service-based industry, this will likely involve sales meetings. If you’re in retail, it will probably involve the potential customer actually shopping in your store.

After that, discuss the purchase process. Then if you’re creating something for the customer after the purchase, walk through that process, including both internal communication and communication with the customer. Finally, go through what happens when the project is complete. Through everything, describe the processes as completely as possible.

As you go through all those process, keep an eye out for processes that are calculable, or ones that are the same each time. Look for things that you’ve already see online. Forms, automatic calculations, disseminating information or anything that can be put into video form would be perfect.

You should be able to find a process or two that you can move online. Since your processes probably change over time, make sure you reevaluate every year or so.

Finally, make sure you don’t force a customer to go online if they try to call you for the information. Go with the flow Whatever method they want to use, go ahead and use it. Many people will prefer the website, but if one particular customer wants to just call you, let them.

Display the top level category in Wordpress

By Tim Priebe on July 16, 2009 at 12:00 pm in Development, How-To, Technical

Wordpress LogoThe is just a quick Wordpress code snippet for those Wordpress programmers or code dabblers out there.

Recently we needed a page in Wordpress to display the top parent page title rather than the current page’s title as the heading on the page. Here’s the code we used to accomplish that:

<?
$currPost = $post;
while ($currPost->post_parent) {
  $currPost = $currPost->post_parent;
}
$title = get_the_title($currPost);
?>

<h2>[ <?php echo $title; ?> ]</h2>

Manipulating Wordpress strings that print directly

By Tim Priebe on July 13, 2009 at 9:00 am in Development, How-To, Technical, html

Disclosure: This post is for tech-inclined Wordpress users, who like to code, or even do it out of necessity. If that doesn’t interest you at all, or you have no idea what I’m talking about, feel free to ignore this post.

We’re big fans of Wordpress around here. Unfortunately, many of Wordpress’s functions directly print out text and HTML instead of returning a string that can be manipulated directly.

Fortunately, there is a way around that limitation, ob_start. You can feel free to read the  documentation of ob_start, but the short version is that it buffers your output temporarily so you can save it as a string and manipulate it before outputting it.

Let’s look at an example. We’ve added some meta data to a post to display some dates and locations on a page. (Click to enlarge)

Wordpress meta data

Now let’s look at the code.

<?php the_meta(); ?>

The above code outputs the following HTML:

<ul class='post-meta'>

<li><span class='post-meta-key'>July 14, 2009:</span> Marketing Rxpo</li>

<li><span class='post-meta-key'>July 7, 2009:</span> Client Mixer</li>

</ul>

We want two changes. First, we don’t want the colon (:) after the date. Second, we want the spans to have a class of Date instead of post-meta-key. With the code as is, Wordpress just displays the info, with no way to change it. So let’s use ob_start instead:

<?php
ob_start();
the_meta();
$out = ob_get_clean();
$out =  str_replace(':</span>', '</span>', $out);
$out =  str_replace('post-meta-key', 'Date', $out);
echo $out;
?>

Here’s the output we get now:

<ul class='post-meta'>
<li><span class='Date'>July 14, 2009</span> Marketing Rxpo</li>
<li><span class='Date'>July 7, 2009</span> Client Mixer</li>
</ul>

Naturally, any string manipulation that can be done in PHP can be performed, this is just a simple example.

Embed a YouTube Video in a Wordpress Blog, part 1

By Tim Priebe on February 23, 2009 at 11:38 am in Development, blogging

There’s a couple of ways to embed videos in a Wordpress blog. The first is a simple copying and pasting of code. The second actually allows you to post them directly from YouTube’s website, but it’s slightly more complicated to setup initially.

Copying code from YouTube’s site

First, watch the video you want to put on your blog. For our example, we’ve picked the video we did on linking to your Facebook profile.

youtube-embed-1

In the screenshot above, you can see an area highlighted to the top right of the video. Simply copy the code in the Embed field.

Next, visit your blog and create a new post or page.

youtube-embed-2

In the screenshot above, you can see a couple of highlighted areas. To the top right of the post’s content area, click on the HTML tab. Then, paste the code into the content area. Click the publish button, and you’re good to go.

Next time I blog, we’ll take a look at the slightly more complicated (but better in the long run) way to post videos to your blog directly from YouTube.

The Fireworks Advantage

By Dave Roach on January 22, 2009 at 4:14 pm in Design, Development, Reviews

Adobe Fireworks CS4 BoxFireworks is often overlooked. Many (most) web designers today use Photoshop to design their websites, and a lot of them have never considered or (*gasp) even heard of Fireworks. Adobe Fireworks is made for creating websites. That is what it was built for, and it does it well. Fireworks enables you to rapidly prototype and design for the web. With it you can create a clickable PDF that will act as a prototype. Also, you can quickly create export and optimize slices (Fireworks is better at optimizing images than Photoshop).

Now don’t get me wrong, Photoshop is an extremely powerful tool and is amazing; it has way more features than Fireworks, but if all you are doing is designing websites, then you should use software that was specifically made for doing just that. Another excellent feature to note about Fireworks is that it is compatible with Photoshop. For the most part, you can open a psd in Fireworks, and it will recognize all of your layers and styles, and with CS4, compatability between Adobe’s programs have been further improved.

If you are a web designer and have not looked into using Fireworks, you should at least try it out and see for yourself how efficient it really is. There are hundreds of other excellent features Fireworks has to offer, read more about them at Adobe’s site.

Rounded Corners vs. Rounded Corners in Fireworks

By Dave Roach on January 13, 2009 at 6:26 pm in Design, Development, How-To

When designing a site in Fireworks, I have found that working with rounded corners can be a bit tricky if you don’t know some specifics. First off, there are two main ways to make rounded corners, the rectangle tool, and the rounded rectangle tool.

tools

When using the rectangle tool, you can round the corners by using the ‘rectangle roundness’ slider on the properties panel. Yes, this creates pretty rounded corners, but a couple problems can arise when using this method.

slider

First off, the rectangle roundness is relative to the size of the rectangle. If you have two rectangles of different sizes, both at 50 rectangle roundness, they will not appear the same.

roundness-50

Someone using this method to try and match corners will end up being off by a couple pixels, which can be crucial when it comes to coding.

So this is where the rounded rectangle tool comes in handy. When you create a rounded rectangle, you can just use the yellow handles to resize the entire rectangle and to adjust the roundness, even specific corners. Even better, resizing the rectangle via the yellow handle will not affect the roundness (unless you make it super tiny).

handles

Sounds easy enough, right? Well yes, but there are unseen issues here. When designing a site, pixels matter. For this reason, I like to type in the width and height of my rounded rectangle in the properties panel. The problem with this is that if you type values for a rounded rectangle it stretches it. It does not matter which method you use, the rectangle will stretch, and your corners will stretch as well. Luckily, there is an excellent solution to this problem!

numeric

What you need to do is to convert your rectangle into a symbol. You can make as many states of a symbol as you want, and then all you need to do is change one symbol and they all will change accordingly. Let me walk you through it.

First off, make a rounded rectangle with the rounded rectangle tool. Doesn’t matter the size or color.

Next, select the rectangle, and hit F8. Name the symbol whatever you want, make the type a graphic, and check the box that says “Enable 9-slice scaling guides” and click OK. Congratulations, you have made a symbol.

symbol

Now you need to double click on your symbol to go inside of it and edit it. In the window that pops up, you can resize, recolor, change the roundness of your  rectangle, apply filters, whatever you want. Then what you need to do it set up the 9-slice scaling guides. These guides allow you to resize your rectangle (outside of the symbol editing window) without distorting the corners. Just align the guides so that the rounded edges are outside of the guides.

guides

Now you can exit the symbol editing window and resize your rounded rectangle with the transform tool or by typing in the values in the properties panel. The only thing you need to watch out for is making the rectangle too small. If you shrink it so the corners meet, then they will distort like before.

The great thing about using symbols for rounded rectangles is that you can duplicate them and then edit one symbol’s corners and all instances of that symbol will change, no matter what size they are. This is especially useful if you change your mind later in the design process. Using symbols is really easy once you get used to them, and can streamline the web development process.

symbol-sizes

Don’t take your own website photos

By Tim Priebe on January 9, 2009 at 6:30 am in Design, Development

CameraIf your business is like many other small businesses, you’re probably on a relatively tight budget, even when creating a website. You’ve signed a contract with a web design company, and they’re wanting your content for the website, including photographs. Money is tight, so you opt to take them yourself.

Big mistake.

Taking the photographs yourself will, 99% of the time, result in ruining the visual aspect of the website you’ve just paid big bucks for. It’s like paying for a commercial during the Superbowl, then trying to shoot it yourself with a $200 camcorder.

But I have a nice, expensive camera

“But Tim,” you might say, “I just paid big bucks for this fantastic camera. My photos are going to look great!”

While a fantastic camera along might work for family photos or vacation memories, it doesn’t mean your pictures are going to be good enough to pass muster for your website. After all, if better equipment was all that was needed, couldn’t anyone perform brain surgery?

Okay, okay, so that’s a pretty extreme example. Let’s look at something a little closer to home for the average small business. What about printing your own business cards with a nice new printer? After all, printers have come a long way from the old days. But let’s face facts. Business cards printed on your printer are still not going to look as good as a professional printer.

It’s the same exact thing with photography.

A picture’s just a picture

“You’re just making a mountain out of a mole hill,” you might respond. “My photos aren’t going to make that big of a difference.”

Really? Studies performed at the University of Aberdeen asked website visitors to rank the credibility of an article. The first group had a good photograph of a doctor, the second a poor photograph of a doctor, and the third had the article with no photograph at all. The highest ranked version in terms of credibility was the one with the good photograph, the second the one with no photograph, and coming in last place was the one with the poor photograph.

I’m under no illusions that this will convince all small business owners to pay a professional to take photographs for their website. But there are plenty of options better than doing it yourself. You can use stock photos, hire a student, or hire a hobbyist. There are plenty of inexpensive options available.

Website statistics that don’t matter

By Tim Priebe on December 30, 2008 at 6:30 am in Development

Guy on computer confused about website statisticsTracking website statistics is a good thing. After all, how can you determine if your website is successful unless you set a goal for it, then track some statistics to see if you are reaching that goal?

With that as a given, so much of the traditional view of the important statistics to track just isn’t true. I was one of several discussion leaders a few months back at an event put on by the Edmond Area Chamber of Commerce. The topic was “Technology — Marketing Your Company on the Web.” During the course of the discussion, the topic of tracking statistics came up. I made the point that the tracking of hits was overrated and not nearly important as most people made it out to be. After all, when you’re paying rent for your office or storefront, do they accept hits as payment? Of course not. Your website needs to make you money.

Well, two other web design companies were present and argued the point with me. Now, it’s possible we were arguing semantics. I was saying that hits are not the goal, but tracking them can be the means to an end. They may have very well been meaning the same thing but emphasizing the means. But the point is, the popular process is to track a lot of statistics that ultimately don’t mean anything.

Web Design for ROIThe book Web Design for ROI talks about several “metrics that don’t matter (as much).” I’m going to hijack their list here, and give my own commentary on each of the items.

Metrics that don’t matter (as much)

  • Traffic
    Here’s my simple, blunt comment on traffic: Who cares how many people are visiting your site if they aren’t buying anything?
  • Time on site and average page views
    Web Design for ROI gives an excellent example here. The general view is that the longer someone spends on your website, the better. However, if after a redesign, someone is able to make a purchase quicker, that’s not really a bad thing.
  • Hits
    Hits measure the total number of objects (files, images, pages, etc) downloaded from your website. This number can easily be inflated simply by adding a lot of pictures to your front page. Again, who cares how many hits you have if you don’t have money coming in from them?
  • Surveys
    We’re talking here about surveying customers, clients and/or website visitors about the website. Watching what someone does when they visit your site will give infinitely more accurate and useful information about your website than asking them about it will.
  • Focus groups
    Surveys and focus groups share some of the same problems. In addition, the feedback from individuals in the groups will be impacted by other individuals in their group.
  • Industry average conversion rates
    While you do understandably want better conversion rates (simply put, $$ per website visitor) than your competitors, there’s no real way to directly compare your conversion rates with theirs. You would have to have the same exact site with only slight differences to reasonably compare conversion rates.

Keep in mind as you look at any statistic that the ultimate goal of your website is (probably) to increase your revenue and provide a return on your investment. They are not the goal itself, but use them as a tool to move your company towards that goal.

Should links open in a new window?

By Tim Priebe on December 2, 2008 at 6:30 am in Development, html

No.

Let me elaborate.

Years ago, website were all about controling the user’s experience. Some sites went so far as to set up their site with a series of “Next Page” buttons instead of actual, usable navigation. Thanksfully, the web design industry has come a long way.

In more modern times, we have come to realize that the best way to keep a website visitor on your website is to let them navigate it however they want to. In fact, with all the freedom that’s out there now, people tend to get irritated when websites try to control the experience. With links to other sites specifically, you just need to provide good content and information on your website, and they’ll come back.

Although I’m probably not an average website user, I tend to leave sites that open links in new windows. I have heard the argument that most website visitors are less sophisiticated than myself. That may very well be true.

However, I’ve stood next to a client and watched as they followed a link from one website to another, then discovered they didn’t know how to get back to the previous site. (The back button in the browser is not universally understood, which shouldn’t be a surprise to web professionals.) However, as this person had doubtlessly encoutered this situation before, she simply closed that browser window, opened a new one and went back to the website.

So a lack of skill or web-savvy will not hinder anyone when links do not open in a new window. If they do any amount of web surfing at all, they’ve already learned to work around it.

Older Posts »