T&S Web Design

Sometimes I find the best way to concentrate on my work and get a lot done is to just put on some headphones and work in my own little world. This (hopefully) will decrease outside distractions and allow me to not only get work done, but get it done well. I find that music is is one of (if not the best) way to get some creative juices flowing. These are the main reasons I have decided to buy some new headphones!

All this being said, I first wanted to find some headphones that were comfy. If I’m going to be wearing them all day, I don’t want my ears to hurt. Also, I want them to be easily removable in case I need to take them off and put them back on a lot. For these reasons, I decided that over the ear headphones would be best. Currently, I have a pair of Sony MDR-V150 which are decent, but after a couple hours they kind of hurt because they are a tight fit. In looking for a new pair, I know Bose makes nice headphones, so that’s where I started. I actually listened to a pair of Bose around-ear headphones at Target, and they sounded awesome, but after some research, I found out that Sennheiser makes some of the best headphones out there.

After some more reasearch on Amazon.com and Headphone.com (which by the way has excellent reviews) I decided to go with a pair of Sennheiser HD 280 Pro headphones. I have to say that these are the best headphones I have ever used. They sound even better than the Bose around-ear headphones and are extremely comfortable. I got these $200 headphones off Amazon.com for about $75.

If you are in the market for some headphones of any type, I would recommend starting your search at Headphone.com, they know their stuff. I actually used this article that recommended the best headphones to use with an iPod, which is how I ultimately made my decision.

Happy new year, everyone! Making any new year’s resolutions? Wondering if your business could benefit from a resolution for you to start blogging? Here’s a few questions to ask yourself.

Can I write once a week?

If you can’t blog at least once a week, don’t bother. One thing worse than no blog at all is a blog that hasn’t been updated in months. After all, if the last blog entry someone sees is six months old, how do they even know your business is still around?

Keep in mind that you can write several blog entries at once, then schedule them to be published once a week, or more often even.

Do I have something interesting to say?

You can write every day for a whole year, but if you aren’t interesting to your current and potential customers, there’s not much point. The ultimate point is to keep current customers and/or get new ones. So if they aren’t interested, don’t bother.

Can I stick with it with no encouragement whatsoever?

So you’re writing once a week and have some interesting things to say. But you’re getting no feedback. No one is posting comments, no one is emailing you to tell you they loved your latest blog post.

Cry me a river.

The general rule of thumb is that 1% of visitors to a website will be an active participant in some way. So you may have 99 readers, but no one is commenting. You may have 99 readers, but no one is telling you that they loved your great blog post. Just because you’re not getting many comments does not mean you should stop posting.

And when you do get that first comment or first email, celebrate! That means there are probably 99 other people thouroughly enjoying your blog posts that just haven’t bothered to tell you so.

So if you can write something interesting at least once a week and stick with it, you should be blogging for your business! It will allow your website visitors to feel like they know you, making them that much more likely to do business with you.

Tracking 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.

The 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.

Merry Christmas, all!

For those of us who are not officially designers, but still like to create, it can be hard to come up with a color scheme. I had a few websites I liked to use for inspiration back when I wore all the hats here at T&S (scary, I know), and some other neat ones have come to my attention since then. So whether you’re designing a website, a brochure or just a business card, here’s some websites that can help you come up with a color scheme.

Color Palette Generator

ColorSchemer

Color Scheme Generator 2

ColourPost.com

ColorSchemer Gallery

ColourLovers.com

Free. Something everyone wants and something designers thrive on. Smashing Magazine is constantly giving away inspiration to designers, which we’ll always accept with open arms. Here is a link to some desktop calendars that will spark some design creativity, and you can alternate monthly! These were created by designers around the world, and Smashing Magazine is always looking for fresh designs. I am constantly amazed with the quality of their website; their information is insightful, they always have freebies, and they’re innovative. Check out the website with the calendars and download one for your desktop; don’t hesitate to browse the rest of the site!

http://www.smashingmagazine.com/2008/10/31/desktop-wallpaper-calendar-november-2008/

Looks like a nasty security hole has been discovered in Internet Explorer. And this one is big. It’s present in every version of Internet Explorer in use today, from IE5 released in June 98, to the beta of IE8 that’s currently out.

This is just another reason to switch away from your pre-installed Internet Explorer to another web browser. For those of you who aren’t familiar with all the options, here’s a few popular alternatives to Internet Exploder Explorer.

Firefox

Google Chrome

Flock

Opera

Epiphany

Safari

Konqueror

One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);

This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (’divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.

<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <!-- Footer Content goes here -->
</div>

It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:

• IE6
• IE7
• Firefox
• Opera
• Safari

EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
  <!-- Footer Content goes here -->
</div>
</body>
</html>

A zip file of the above sample code with the background images can be downloaded here.

Although I’ve already written a non-video blog entry on the topic, I thought this topic would be a good one to try out a video blog entry.

View and subscribe to our YouTube channel here.

No, I’m not trying to put my designers out of a job. I just know that many people starting a business have time to set up a website themselves, but not all the skills. Here are a few websites you can use to get free designs. Warning: You will still need to modify some code to fit these to your specific needs.

Open Source Web Design

Open Design Community

Open Web Design

Open Source Design

Usually, a designer strives to think outside of the box. While this is what we (should) do best, when it comes to the web, sticking to standards will make it easier on the user. Magazines have a table of contents near the front, and page numbers in the corners. Newspapers are divided into sections, headlines span across entire articles, and the largest headline is the most important.

Similarly, web sites have certain elements people look for, and designers can use this fact to their advantage. When a user navigates to a site for the first time, they expect certain standards. They expect the navigation to be confined to a section of the page, some sort of header on the top, and a logo or company name on the top right. When a site meets these expectations, the user can easily navigate, and know where they are at any given moment, without having to search around for the button that will take them to the contact page. Ebay is an example of following this set of standards:

Designers can find this standardization limiting on their part, but they still can create unique and beautiful sites within these guidelines (thinking outside the box?). These standards are not rules set in stone, they will change through time, but for now, if you want maximum usability on your site, you should consider following these guidelines.

Finally, thinking outside of the box is never a bad thing, as long as your ideas work. More specifically, depending on the purpose of the site and target audience, you may want to try something new. So long as the learning curve for the user is worth the visual interest or purpose of the site then go for it. Ideally, your design will require no learning curve at all. A site I came across recently, JLern Design, is an excellent example of a new form of navigation that is not difficult to grasp (although its downfall is slow loading time, which is another issue).