For instance, one of the houses had walls that had either twine or burlap for the wallpaper. Another one had black rooms. The floor was black. The walls were black. The ceiling was black. I’m am sorry if you may have something similar in your own house, and I am not meaning to offend you if you like it, but it looks bad.

This brings me to my point. Just because something is creative, doesn’t always make it good. The same thing can be applied with your website. All of the rainbow gradients, blinking text, and flashing lights of the 90’s are over. Sadly, I’ll admit I had a website at Geocities back when all of that was popular, and it looked awful, but I thought it looked good. Since then, I have learned quite a bit about design, and I’ll share a few tips with you.

Less is More
Just because someone owns Photoshop, doesn’t mean they know how to use Photoshop. Once a beginner learns about the layer effects, some very interesting designs come out. Subtle gradients and shadows are nice. They make a site pop, but using the Photoshop default on everything (especially borders and drop shadows) screams bad design. What looks good to you may not actually look good. Keep it subtle. Keep it simple.

Target Audience Connection
This is commonplace for “creative” design. Who is your target audience? Does your design connect with them? Of course, you will not connect with everyone, but if your company is in a technical field, then don’t have a website that looks like you run a daycare. It needs to look professional, but must also match your personal style. Balance everything, find your edge, and make it look professional.

Good Page load time
Does the page load relatively quick? Most visitors will stay on a page for four seconds while waiting before they leave. If a site takes too long to load, you will lose your visitors (unless they are related to you) before you’ve even had the chance to make an impression. On second thought, I’ll correct myself. Your site already made an impression and it’s not a good one.

SEO Friendly
Finally, is the site SEO friendly? I know many people who want a flash site with music because they think it’s cool and creative. Flash is only semi-SEO-friendly, meaning if you want anyone to find you in the search engines, I’d recommend against it. Also, this have nothing to do with SEO, but the music is annoying when it auto starts, so stay away from that too.

The key is balance. When a site is balanced so it’s pleasing to the eye, matches your business, loads fast, and is SEO-friendly, then your site is a winner. When shows extreme creativity, it just may not fit for this time an age. If you feel your current site may be a little too creative and need some help, contact Trademark Productions to have a creative, yet quality, website built for you.

“We all still use email, of course,” says, Wall Street Journal Staff Reporter, Jessica E. Vascellaro. “But email was better suited to the way we used to use the Internet—logging off and on, checking our messages in bursts. Now, we are always connected, whether we are sitting at a desk or on a mobile phone. The always-on connection, in turn, has created a host of new ways to communicate that are much faster than email, and more fun.”

If it wasn’t for email, users would not be able to be a part of websites like Twitter or Facebook.  Each requires a valid email address to register, gain access, and receive email updates to and from their website.  Just recently, second most popular social networking website (as of September 2009), MySpace, launched their own email service.  While the daily visits to these websites may be more frequent than checking what is in your Inbox, social networking sites obviously still understand the importance of email.

Almost everyone on the Internet has an email address.  Unlike email, social networking websites is not universal.  Some have no interest in joining social networking websites for multiple reasons – privacy, security, reputation, etcetera.  Many employees or interns receive an exclusive company-based email address as soon as they begin working, as it may be the only way to electronically communicate with others while in the workplace because many companies are banning access to social networking websites.

Whether or not the idea of communication and its messages can be done in less than 140 characters, a Wall posting, or a rather wordy email, it is all about preference.  But, no matter how many users Twitter or Facebook may receive within the next week, email will never die.

Follow Trademark Productions on Twitter – @TheTMOffice.

Many Facebook and Twitter users rely on these social networking websites to maintain contact with friends, both old and new, former classmates, and people who share similar interests.  But, online advertising network, Chitika, found that traffic and the links shared on Twitter and Facebook goes much deeper than a high school crush or second cousin, twice removed.  Because of its ability to get information out quickly to users in mass numbers and in short (given its 140 character limit), but sweet “Tweets,” Chitika found that Twitter leads the way in linked news stories over Facebook by ten percent.

Through these Twitter posted links, users were given access to the first pictures of the Turkish Airline plane crash, and breaking news reports of US Airline Flight 1549 landing in the Hudson River.  Facebook, while much more established than Twitter, is primarily linked to technology-related websites, which makes up 33% of their referrals and traffic.  Despite Facebookhttp://tmprod.tmtesting.com/blog/2009/twitter-share-news-in-less-than-140-characters/’s status as being one of the top, most well-known social networking websites, users value Twitter’s speed over Facebook’s reputation to get their news.

Regardless of what Twitterers or Facebookers use the social networking sites for, receiving an update on the insanity surrounding a celebrity’s death easily trumps an update of your friend digging for money under the couch.

If your company does not currently participate in social networking, but is looking to use it as another outlet, Trademark Productions will help get the ball rolling.

Follow us on Twitter – @TheTMOffice.

But, for now, Smashing Magazine, which is a pretty good blog that a couple of us read has a great post this morning worthy of a backlink.  Check it out and if you have any questions or need further explanation, feel free to ask us.

So without further ado, check out Web Design Industry Jargon, Glossary and Resources.

I follow a great blog, Six Revisions, and they did a post recently that explains ways to make IE6 debugging with JavaScript a little less painless. So I am re-posting their recommendations for those that wish to “make work” in IE6.

Microsoft’s Internet Explorer 6 is almost universally hated by web developers. It’s hard to work with and support, but with a few solid techniques, you can make the process less painful. What “just works” in the majority of browsers will almost always require hours of tweaks and workarounds to get it working in IE6. With more and more users switching over to newer alternatives such as IE8, Safari and Firefox hopefully support for IE6 can be dropped sooner rather than later. In the mean time though many of us have to make sure our sites work in this awful browser.

To make things worse, IE6 is extremely bad at helping developers diagnose problems. When a JavaScript error occurs, IE6’s default behaviour is to display a small error icon in the status bar. Extremely easy to miss!

Double clicking on this icon will display a popup, and if you then click the “Show Details” button you’ll get the actual details of the JavaScript error. Unfortunately the detailed error message can be quite cryptic, and probably not too much help in diagnosing the actual problem. Your best bet is to make a note of the line and column number of the problem and then look that up in the source code. Fortunately, with the help of Visual Studio and by changing a few IE settings, we can make it much easier on ourselves.

Setting things up

To enable JavaScript debugging in IE we need to change some default settings, which can be accessed from the Tools> Internet Options menu, and then the Advanced tab. The image below shows the default IE6 settings, with the three settings we’re interested in highlighted.

Script debugging in IE needs be enabled, which requires us to disable the first option out of the three. If you also want to debug scripts in other contexts (such as Outlook) then disable the second option. Enable the third option if you’d like the JavaScript error dialog to pop up automatically instead of being displayed as a small icon in the status bar.

After changing those settings and restarting IE, we’re ready to start debugging. All of the following examples show Visual Studio 2005, but the same applied to 2008. You can also use the free Web Developer Express Edition if you don’t own a full copy of Visual Studio. Instead of IE prompting you to open the debugger, as it does in the examples below, you’ll first need to create a project and then start the debugger yourself. From that point on everything is the same.

Basic debugging

Let’s start with a simple example. The code below tries to call a function that doesn’t exist:

<script type="text/JavaScript">
	functionDoesNotExist();
</script>

Now when we load that up into the browser instead of the tiny icon in the status bar IE will prompt us to open a debugger.

Selecting Visual Studio and clicking the yes button will open Visual Studio and highlight the code that is the cause of the problem.

For relatively simple errors, such as the one in the example above, just seeing the actual cause of the error highlighted is probably enough for us to work out what has gone wrong, and how to fix it. In more complex cases, however, we’ll need more information. This where the Visual Studio debugging features come in really handy.

In the code below we have a function, performAction, which takes a function as an argument and calls that function once it’s done. You’ll commonly see this sort of thing in JavaScript with asynchronous functions such as setTimeout and jQuery’s Get. There is a problem with the code below though: We’re accidentally passing in a string to performAction rather than a function.

<script type="text/JavaScript">
  /**
   * Perform an imaginary action, and then
   * call the callback function once we're done
   */
  function performAction(callback) {
  // Perform an action here
  // ...
  // We're done, call the callback
     callback();
}
  // Call performAction with an anonymous
  // callback function which contains an error
  var myFunc = "this is a string, not a function!";
  performAction(myFunc);
</script>

If we load up the code in IE and then debug it in Visual Studio as we have before we’ll see that the code “callback();” is highlighted, and is therefore the cause of problem. It won’t be obvious why this line is causing the problem though, not unless we know what the value of callback is. If callback was actually a function then there wouldn’t be a problem at all. The problem has only arisen because we accidentally passed in a string. This is where the “locals” window comes in handy. It lists all local variables along with their value and type. To display this window go to the Debug menu, then Windows, and then select Locals.

With the locals window displayed it’s clear that the problem is that callback is a string, rather than a function. The locals window doesn’t just support basic types such as integers and strings. If you’ve got a local object you can look at all of its properties and see the value and type of each of them, as we’ll see in the next example.

The ‘debugger’ keyword

The ‘debugger’ keyword, also supported by the Firefox JavaScript debugger Firebug, can really help us to track down problems. Below is a slightly modified version of the previous example, where this time the callback function is passed an object that should include a status and message property. The message property has been misspelled though:

<script type="text/JavaScript">
  /**
   * Perform an imaginary action, and then
   * call the callback function once we're done
   */
  function performAction(callback) {
    // Perform an action here
    // ...

    // We're done, call the callback
    callback({success: true, mesage: 'The action was performed!'});
  }

  // Call performAction with an anonymous
  // callback function which contains an error
  performAction(function(response) {
    alert(response.message);
  });
</script>

Because ‘message’ has been misspelt as ‘mesage’ in the performAction function when we run this code in IE we’ll see a popup alert with the message “undefined”, rather than the actual message we were hoping to see.

In a large project it can be difficult to track down why a property we expect to exist is undefined. Instead of trawling through lots of code we can simply add the line “debugger;” above the alert statement. IE will then automatically prompt us to debug the code in Visual Studio when it hits that line. From the locals window we can see that the ‘message’ property has been misspelt.

Using the call stack window, which can be accessed in the same way we accessed the locals window, shown at the bottom right of the above screenshot we can work out exactly where this problem occurred. If we double click on the ‘performAction’ line, the previous statement in the call stack, we’ll see the source of the error.

While debugger statements can be a useful tool in helping you track down problems you should be careful not to leave them in your production code!

More advanced debugging

So far we’ve covered some basic examples, such as calling non-existent functions and undefined properties. Using the locals and call stack windows it was relatively straight forward to track these issues down. There are times when the techniques we’ve discussed so far can’t help though. We can’t see what global variables exist or what value they have with the locals window, for example, and the call stack doesn’t always handle remotely loaded or dynamically executed code very well.

For these situations we must turn to the immediate window. It is by far the most powerful debugging tool that Visual Studio has to offer, allowing us to evaluate JavaScript expressions on the fly.

The immediate window can be accessed in the same way that we accessed the other windows. Clicking inside the window will give it focus. We can then type JavaScript statements directly into the window and see the result. For example, type “window” followed by enter and you’ll get a print out of everything in the global scope.

When combined with the JavaScript arguments variable we can look in detail at all the current function arguments and the calling function. While the code in the next example isn’t something you’re likely to see in a real project, it does help to demonstrate techniques that can be extremely useful.

<script type="text/JavaScript">
  /**
   * This function takes a variable number of arguments.
   */
  function performAction() {
    // We're just interested in the immediate
    // window, start the debugger
    debugger;
  }

  // Call performAction with 4 different arguments, each of a different type
  performAction('argument 1', 2, {argument: 3}, function() { return 4; });
</script>

We’ll load this up into IE and then go straight to the immediate window once we’ve opened up the debugger. If we type “arguments” followed by enter we’ll see the following information displayed:

arguments
{...}
    [0]: "argument 1"
    [1]: 2
    [2]: {...}
    caller: null
    length: 4

The “{…}” tells us that arguments is an object. We also see this next to [2], so we know that the third argument (in array position 2) is an object. We can see what properties this object has by simply typing its name into the window:

arguments[2]
{...}
    argument: 3

The fourth argument wasn’t listed in the original output because it’s a function. We know it exists though because the length property tells us that there are 4 arguments. We can also confirm it is there using typeof:

typeof arguments[3]
"function"

Unfortunately the immediate window isn’t quite so helpful with functions as it is objects, and if we type in the name of the function we just see “{…}” rather than any details of the function itself. Fortunately there is a handy workaround. If we type “alert(arguments[3]);” then the function code will be displayed in an alert dialog:

Hopefully these examples have conveyed just how powerful the immediate window is.

Summary

With the help of Visual Studio it is possible to transform IE6 from obscure error messages into an effective debugger. By using the local and call stack windows we can quickly and easily track down the majority of problems. The debugger statement allows us to automatically jump into the debugger at any point in our code. Should we come up again a more complex where the other tools can’t help us then we can always turn to the immediate window, which allows us to execute arbitrary JavaScript to inspect the current environment.

Even for the “technically challenged,” implementing SEO on your website is much easier than one would think.  Most larger e-commerce sites are produced from a surprisingly small collection of templates that are often populated on the fly with requested information from a database.  Typically, this information includes product name, image, description, price, etc.  This information is simply inserted into the proper place in the template, and a nicely laid out page is produced.  An example:

<div id="ProductDetails">
<h1>ProdName</h1>
<p class="prices">$fullprice</p>
<p>styleDesc</p>
</div>


This little bit of code is part of a larger template.  Outside of the variable, you can see the HTML that determines the layout of the page.  The product name in this case will be wrapped with an H1 tag.  If there were not an H1 tag there, you can see how easily an H tag could be added into the template.

The H1 tag is the primary example here because there is often an immediate question about the fact that H1 tags make the text large and unsightly.  While that is true, with a little bit of CSS, we can fix that problem quite easily.

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000;
}


You can see readily how this all works.  In this example, we’ve specified the size, font, weight, and color of the text in the H1 tag.  You can do this inline (right in the HTML of the page) or external (in a CSS file).

Don’t have proper ALT tags on your product images?  The page has already called the product and category data to be used as titles and in the breadcrumb navigation.  Why not use it in the ALT tag as well?  alt=”ProdName.”  See how easy that is?

Understanding the way these variables work will allow you to communicate with your web developers much more intelligently.  Speaking the same language as your developers will reduce friction and help you speed through your projects in a fraction of the time that it used to require.

Sitemap can mean a couple of things. Larger sites like ecommerce and retail sites have visual site maps that can be utilized for quick navigation. Smaller sites have a sitemap that is simple and possibly just outline main category pages in the site.

Some other benefits to having a sitemap include:

If you have non html links (static text links) on your site like flash menus and JavaScript menus,  search engines won’t be able to follow the links and find every page. Google has made advances recently with Flash are are starting to become more friendly to read what is inside of the file, but it is not near perfect.

Sitemaps will let search engines know what pages on the site are more important.

Sitemaps will let the search engines know what pages are updated more often. This helps them to pay more attention to the pages that are updated frequently.

Sitemaps will help let the search engines know when content has been added or updated on your site.

How is a sitemap made? They are made by software tools that generate it from reading the site’s content. You can search the Internet for sitemap generators, sitemapdocs, or XML Sitemaps.

The other kind of sitemap is developed for search engines to index your site. These kinds of sitemaps can take many forms. Google and Yahoo! accept XML feeds of your website. There are free programs that create a XML sitemap of your website that you can provide to them. They offer this as a way to have your site be recognized “easily” by Google and Yahoo! So why not take their suggestion?

Once you have the sitemap you should:

Put the sitemap file in the root directory on your server with the primary index file.

Let the search engines know you have a sitemap. Create a Google webmaster account and submit your new site map there.

Put a reference to the sitemap file in your robots.txt file. Many search engines will be able to find your site map even if you have not submitted it to them specifically.

Maintain it. Whenever a page is added to your site you should add it on the sitemap. Every time something is updated on your sire, change the “lastmod” setting in the sitemap.

So in playing with my new Twitter account I started looking for desktop apps to quickly update my twitter.  The problem that I faced is that I already have at least four different programs open at all times to keep track of both my personal and professional life.  I really didn’t want another one.

I tried a few Firefox plugins for Twitter since I always have Firefox open anyway, but wasn’t satisfied with the results.  And then….I found Digsby!

Not only does Digsby handle my twitter account, it handles all of my IM clients (Yahoo, AIM, etc), my Gmail and Yahoo Mail, my POP3 corporate mail, my MySpace and my Facebook account, all in one spot and with one program.

I’ve always used pidgin for my instant messenger program.  I still love pidgin.  BUT, Digsby is just as effective and handles more in the same small space.

What does this mean to me and to anyone else in the “attached to my computer, getting things done, more, faster world”?  It means that instead of needing my Outlook open for my email, Pidgin for my Instant Messenger, and either having multiple tabs open in Firefox for my personal stuff (Gmail, Yahoo, MySpace, Facebook) or checking them incessantly throughout the day….I now have everything, plus Twitter, all in one spot and in one program.  It checks all my accounts for me regularly and allows me to just hover over the service in my little IM window to see what’s crackin!

Oh, and when a new something happens like an IM, you get a cute little pop up in the corner of your screen that notifies you and let’s you quickly respond to a message without having to open another window.  Just one of many cool features…

It’s not often that I promote other software or services, so there’s probably something to it.  You can check it out and download it at digsby.com. Check it out and let me know what you think.

While the (x)HTML of your site deals with the actual content and structure of your website, one CSS file has have power over the fonts, colors, positioning, styling of the data for the entire website.  Doing this helps avoid code bloat in your pages, makes them load faster, render across different media types, and the benefits go on and on….

There are many benefits to using CSS, and they are listed below.

-    Web pages load easier and they use less bandwidth: many web developers like to use CSS style sheets because they don’t use as much bandwidth as table layouts do.  The sheets are downloaded once and stored in cache memory so pages will load quicker.
-    CSS goes well with HTML: when HTML is added to CSS they make well-built, technical sites.
-    CSS will let you position components anywhere on the page: developers really like CSS because they can put elements anywhere they feel like.  It is easier for them to make changes on sites they are working on.  CSS decreases the risks that deal with website maintenance.
-    CSS is compatible with every web browser: it is mixed with HTML or XHTML to produce web applications because it is compatible with all kind of web browsers.
-    CSS may be used to produce print friendly web pages: web developers also like to use CSS because they can produce print friendly pages.  This means the items like images or colors which used to be difficult to print are now printed up simply.
-    CSS lest users customize web pages: lots of current websites let users change the layout or theme of the site without changing the content.  Because CSS sheets are stowed externally, the users can make changes on their own.  Items like the style of font are now able to be changed.
-    Your website will be highlighted in the search engines easier: developers like CSS because they can put components anywhere on the page.  This positioning assists in launching the key contents first so the spiders can find them.  The HTML code of CSS is simpler and it will make the spider’s job easier by getting them to the real content quicker.
-    CSS lets the web pages stay consistent: every expression and text will have characteristics from the external style sheets.  Developers don’t need to fret about the characteristic changes in the elements because they have the ability to be changed at any time with the CSS.
-    CSS makes content moveable: with CSS there can be many style sheets for various media.  This lets you have some give when displaying the content.  You can also change the characteristics of the components in the site to fit your situation.

The point of CSS is to make things easier on your website and let you have control over many components on the site.  You can use these advantages to have more user-friendly pages that search engines also embrace well.

If you need help understanding CSS more, or would like to have your site evalueated pleae contact us at 248-582-9210, online or comment to this post.

So I had to take the time to explain, you get what you pay for. Like Dean said in a previous post long ago, “Pretty costs extra, Lady”. It’s true, sure I could have went to Costco and got a great TV for 600 bucks, but A. it would have most likely had terrible quality parts in it, no warranty, the picture would have been not much greater than my 27″ tube TV, and it would have broken down 56 minutes after the warranty expired. So I busted the bank, and got something of high quality.

So why am I blabbering about my new TV? Cuz I like it, that’s why! But really, the same applies to the business we’re in. There are plenty of people out there (both locally and in far far away lands) that will do the “same work” we do for a fraction of the cost. But…you get what you pay for. I encourage you to go find somebody that will build you an eCommerce site for $800. Once you give them their final payment, and your site breaks 10 minutes later and they’re out buying a Costco TV and can’t be bothered to answer your calls, or fix your site, then you’ll call us.

Why? Because we’re good at what we do. We’re quality. We’re trademark. We’re the Cadillac of Web Development, Online marketing, and all the other things that we do a fantastic job at.

No, really, we are. Recently a small Mom & Pop company with a big online business came to us because they were unhappy with their current web development company. Why did they decide to go with this other company in the first place? Because they were cheap. Why did they decide to leave them? Because their work reflected their price. Why did they decide to come to TM? Because we do what we do, and we are what we are. We answered numerous phone calls at 11pm and beyond on a Friday night, working until the wee hours of the morning, to get everything with their site situated so that they can begin to improve their business with our help.

So, I’ll ask you, do you want a no-name Costco TV, or do you want a Sharp Aquos? If you want the Sharp Aquos, click here and ask why Trademark is better than most