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.

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.

Facebook’s latest feature

By Tim Priebe on September 22, 2009 at 6:53 am in How-To, Social Networking, Video

Facebook just added a new feature where you can link to other people in comments. See how this works, and where it doesn’t work.

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.

Send large files easily

By Tim Priebe on May 22, 2009 at 11:09 am in Email, How-To

Often we have clients who have problems sending large files or a lot of files in one email, because of limitations their internet provider (not T&S) has put on how big attachments can be. To those clients we recommend YouSendIt. Although we don’t really use it ourselves, we’ve had clients use it and love it.

What you do is actually upload your files to a holding page on their website. Once you’ve done that, they send an email to your recipient, telling them where to go to download the files.

Their website talks about paid accounts, but you can use it for free. Check out their plan comparisons for more information.

YouSendIt

yousendit

Getting LinkedIn recommendations

By Tim Priebe on March 7, 2009 at 3:25 pm in How-To, Social Networking

LinkedIn logoAre you wanting to get more (or any) recommendations on your LinkedIn account? Here’s how…

  1. Add contacts for the places you’ve worked at in the past. As many as you can find who would even remotely recognize your name.
  2. Once they’ve approved, go through that list of contacts and recommend everyone you feel comfortable recommending.
  3. Before sending your individual recommendations, Click on edit in the the [view / edit] links just above the Send button.
  4. Add a message thanking them for their hard work, and that you’d love a recommendation as well.

That’s it! Be honest and complimentary, and many of the people you recommend will recommend you right back.

It works! I have more recommendations than the average LinkedIn user. Check my public profile.

Labels in OSX Make Life Easier

By Dave Roach on February 12, 2009 at 2:33 pm in General, How-To, Mac

When dealing with hundreds of different clients who have different websites, designs, logos, documents, pictures, worksheets, etc. things must be organized. I have found that an excellent way to organize files via Finder is to use the colorful labels. Yes the labels are pretty and colorful, but they can be used to organize things beyond just their color.

First off the labels can be, well, labeled. If you go up to your Finder preferences, you can click on ‘Labels’ which will allow you to name your labels whatever you want. This comes in handy when you are in need of categorizing different items that may be in the same genre, but differ in name. Since I’m a designer, I use my labels for different types of design material.

Label Names

As you can see, ‘other print material’ could fall under a broad category, but I know that anything orange is print, but not a business card, because business cards are green. If you forget what you named your labels, you can easily find out when you go to label something! If you right click a file/folder and hover over a color, the name of that label will appear below it, so there is no confusion as to what color goes with what label.

Pick Color Label

I took the color labels a bit further and named a folder that contained the described items. For instance, I would make a folder named Postcards, which would be labeled orange, and everything pertaining to the design of that postcard would be contained inside of that Postcard folder. This is much easier than trying to label individual files themselves, although in some cases I’m sure that would be necessary as well.

One last trick with labels. Lets say I have a root directory that somewhere nested in it has 52 folders that are labeled orange for ‘other print material’. If the names of the folders were all the same, I could just search in spotlight the name of the folder and be shown a list of all of them. But, since ‘other print material’ could have folders named letterhead, postcard, envelope and more, I have to index these files by their color label. This is done by typing into spotlight label:1, where 1 specifies a color (gray in this case). The numbers are out of order, so here is a list for reference:

label:1 Gray

label:2 Green

label:3 Purple

label:4 Blue

label:5 Yellow

label:6 Red

label:7 Orange

By typing in one of these commands, you will index only the files and/or folders that have that color label associated with it.Spotlight Label Sorting

When used correctly, labels can be a great help for organization of files, and can help prevent files from getting lost. Having files organzed well can help you become more efficient at your work by helping you find things faster, and also just looks good!

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

Linking to your Facebook profile

By Tim Priebe on December 12, 2008 at 6:30 am in How-To, Video

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.