Our CMS won an award!

By Tim Priebe on November 30, 2009 at 8:11 am in General

Wordpress LogoCMS Award '09 LogoOkay, okay, it’s not technically our content management system, per se. But Wordpress, the software that we install on 90% (or more) of our websites so clients can manage their own sites and blog if they so desire, recently won the 2009 Open Source CMS Award.

Wordpress started out as a blogging platform, and we at T&S installed it on dozens of clients sites. The software was constantly improved upon and updated over the months, and eventually developed into a full-fledged content management system. After extensive testing, we began using it for the majority of our clients.

Anyway, congratulations to the Wordpress team, and thanks for providing so many out there with a great CMS.

Tip for IE6 fixes in Dreamweaver

By Tim Priebe on November 27, 2009 at 5:03 pm in How-To, Technical, css

Dreamweaver and conditional IE6 CSSIf you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

<link href="../_css/reset.css" rel="stylesheet" type="text/css" />

Then, when you look at a file index.php one directory up, it looks like this:

<link href="_css/reset.css" rel="stylesheet" type="text/css" />

Or, in a file /misc/news/index.php, it looks like this:

<link href="../../_css/reset.css" rel="stylesheet" type="text/css" />

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

<!--[if lte IE 6]>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>\n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->\n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.

Diabetes Solutions’ new website

By Tim Priebe on November 23, 2009 at 10:18 pm in Client Plug

Diabetes Solutions thanks T&Sdsok.netAs you probably know, this year we’ve been giving away one website a month to non-profits here in Oklahoma. Diabetes Solutions was the winner in February, and we launched their site awhile back.

Well, we just received their newsletter in the mail the other day, and they were kind enough to include a thank you note to us in their newsletter.

Kim and Casey, you were great to work with, and we appreciate the opportunity to help you guys out. Enjoy the website!

Can you find the mistake? We obviously failed.

By Emily Spirek on November 20, 2009 at 1:57 pm in Business Identity, Design, General

Case in point. Web is better than print.picture-23

Okay, not all the time, but when you find a mistake 10 weeks down the road, website has been launched, and it’s been through the hands of at least half a dozen people, thousands of dollars aren’t poured into correcting the piddly error.

We might suffer a little embarrassment and swallow our pride until the inaccuracy is forgotten, but we don’t waste the time and money that goes into reprinting the project. We simply redesign and/or work our magic in the code and voilà, error fixed.

Of course, print products (business cards, brochures, etc.) can be necessary for a business, but we are a big fan of instant gratification in the web industry. Besides our other 99 reasons to buy a website, the idea of quick and easy fixes is one of our biggest.

I’m guessing you’ve found the mistake in the screenshot above by now, and if not, you make us feel a lot better about ourselves. Check out the new and improved JJH Media.

Which email address seems most professional?

By Tim Priebe on November 18, 2009 at 1:30 am in Email

Question?

I need your help! For years I’ve been advising people on the professionalism of various internet-related topics. On this one, I’d like some data to back up what has previously just been my opinion.

If you could answer the following question honestly, it would be greatly appreciated.

Which email address seems most professional?

  • info@xyzincorporated.com (93.0%, 54 Votes)
  • xyzincorporated@aol.com (3.0%, 2 Votes)
  • xyzincorporated@yahoo.com (2.0%, 1 Votes)
  • xyzincorporated@gmail.com (2.0%, 1 Votes)
  • xyzincorporated@cox.net (0.0%, 0 Votes)

Total Voters: 58

Loading ... Loading ...

Improve Content Absorption

By Elyssa Dolinger on November 12, 2009 at 1:18 pm in Design, How-To

Hey, I’m Elyssa Dolinger, a recent T&S designer hire (Yeah! Helping to even out our designer/programmer ratio.) and I believe strongly in the power of information design.

Print design theory can really help in classing up a web page. More importantly, print designers are used to working with a lot of content. A lot of times people want a lot of content on their web pages. We’ve learned a few things here and there to make content not only readable, but understandable.

Little tricks like the “rag” of a block of text and “leading” and “kerning” can take a page from unintelligible to just plain classy. It’s amazing what small changes to spacing can do for comprehension.

So, what are these amazing tricks, you ask?

Paragraph breaks: Yep. You heard me. Paragraph Breaks. If a reader sees a GIANT BLOCK OF TEXT, they will skip it every time. Give them hope that they can finish your content in the form of spacing between paragraphs.

Rag: The rag is the right hand side of a left-aligned block of text. (Or, conversely, the left hand side of a right-aligned block of text.) Confusing? Yeah. Here’s a picture.

Rag

The rag helps people keep track of where they are when they are reading. If a block of text is justified-aligned, there are no visual clues to help the reader. (Also it messes up your kearning.) The reader is more likely to loose track of where they are in your paragraph. Rather than start all over again, most will abandon the attempt.

Center-aligned or justified-aligned blocks of text are not advisable as far as large blocks of text go, but are okay as far as single lines are concerned.

Leading: Leading (rhymes with heading) is the vertical space between lines of text. It’s sometimes called line-spacing. The more leading you use, the easier a block of text is to read. Too much leading, though, and you’re wasting space.

Leading

See how this block of text (as opposed to the one about rag) seems somehow more approachable? This block of text has about 50% more leading than default.

Kerning: Kerning is the horizontal spacing between individual letters. It is sometimes referred to as tracking. This is most helpful in the case of headlines or specialty “decorative” fonts. (You know, the fonts used in logos and super cool web pages?) Most everyday use fonts or web safe fonts have the kerning ironed out already.

Kerning

Utilizing these 4 tricks, you too can make any content readable, understandable, and absorbable.