When Viget.com relaunched in EE, we were excited about the ability to easily add flexible microformats to the site (made easier with EE's custom fields). A quick refresher: Microformats use semantic class names in your existing HTML to give it more machine-readable value. They give browsers, search engines, and mobile devices the ability to quickly find, save, and sort common data like contact or event info.

With IE8 and FF3 just around the corner, there's never been a better time to get into working with formats like hcard and hcalendar. Why use them? A few reasons:

1. They're valuable today - Some users are using plugins to quickly find contact info and directions, and clever bookmarklets to scrape formatted hcalendar events right into their calendar systems. LouderVoice is finding and aggregating hreviews from across the web, and Technorati has a special search for parsing three microformat types in blogs.
2. They'll be more valuable tomorrow - while most users aren't taking advantage of microformats now, the next wave of browsers will give them much easier access to your microformatty goodness, letting them call/add/schedule directly from in-browser tools. And the more microformats there are, the closer we get to an age of microformat mashups, where users and apps are doing awesome stuff with your data to your benefit.
3. They're ridiculously easy to apply.

For the Viget.com launch, we wanted to get team and business-related info hCarded up in five places:

Continue reading "Adding Microformats to Viget.com"

Leave a comment

Working with HTML emails can be tough with all the various email clients out there. Just ask Jim Basio, who wrote a great post on our blog with some really useful resources. Recently I was working on an HTML email that had a lot of images, and for some reason Hotmail displayed the images with weird spacing. Let's pretend the picture below is actually three separate images in an email viewed in Hotmail:

As you can see, there is a gap between the images. We can fix this with one simple addition to the image style with CSS:

<img src="image.jpg" alt="Viget Logo" style="display: block;" />

And that's it. Just put "display: block" on any image in your HTML. I put it inline because there are still issues with email clients reading the <style> element (for example, Hotmail). Your images should now be in the right place:

The good news is that it doesn't affect the way images are displayed in other email clients. If you have other useful tips for HTML emails let us know!

Leave a comment ( 6 )

When we decided on the new strategy for Viget.com, a few technology options were considered for the relaunch. We needed a platform that:

• Could accommodate the types of content (five blogs, five blogrolls, Flickr feeds, team member pages, work pages, careers) we wanted to add to the site
• A designer could build without in-depth programming knowledge
• Allowed us to manage the structure of the four sub-blogs

ExpressionEngine was the clear choice, with powerful customization options and a great community behind the scenes. Still, with EE's depth of possibilities, we had to figure out a few tricks along the way in order to get what we wanted out of it. In this post, I'll talk about creating multiple blogs with common structures through variables, losing the nefarious /comments URL, and setting up a preview option so your bloggers can see how their posts look before publishing them.

Continue reading "Building Viget.com In EE (Part 1)"

Leave a comment ( 9 )

While working on the Odeo relaunch, we kept running into a frustrating problem: When we saved out the slices, the awesome Odeo pink flattened to a dreary "light coral". I'd seen the problem before, but never so pronounced: The color, through no fault of its own, was obviously changing, and we were at a loss for a way to prevent this.

Fig. 1 : Dastardly!

The usual suspects get knocked out pretty quickly in this issue: It isn't a Mac/PC thing, it isn't a monitor thing, it isn't because the color profile is somehow set "wrong". Fellow designers: Somewhere between PSD and JPG, Photoshop is draining our colors of their life, like some horrible, RGB-stealing vampire.

There's a lot of confusion on the web over why this is, and a lot of solutions being offered. Everything I found fails the acid test, though:

Testing for Perfect Color Translation

If I "Save For Web" an image from Photoshop, open that image up in a browser side-by-side with the original, I should see identical colors. I can then take a screenshot, open the screenshot in Photoshop, and test the color accuracy with our friend the color eyedropper, to show that nothing has shifted even slightly from the original image.

Fig. 2 : Checking for color shifts.

I've attached a JPG with some more indepth instructions at the end of the post. The testing process is a little painful, but the end result is worth it:

The ability to see, perfectly, how the colors in Photoshop are going to appear in your browser.

A Warning

What we're doing here won't make your colors look the same on all monitors or machines. Macs will display lighter (by default, at least), and monitors themselves will experience crazy color shifts based on age and settings. Reassure yourself: This is not your fault. The key is to calibrate your monitor as close to the center as possible, use Proof Colors (we'll get to that) to make sure details aren't getting blown out on other platforms, and be prepared to gently explain to clients why your green looks like aqua on their friend's 1992 Trinitron.

Okay, here we go: Three Steps to Color Perfection.

Continue reading "The Mysterious “Save For Web” Color Shift"

Leave a comment ( 126 )

I'm a huge jQuery fan; there's no hiding that. For me, a designer, there is no easier JavaScript library to use and learn. I've been leaning on jQuery to do my heavy lifting for a while now, and it continues to blow me away almost every time. With each passing release, the library just gets better.

In jQuery's 1.2 release, we saw a big update to animate() function. Previous to 1.2, you could only animate absolutely positioned elements, but now the function supports most anything you could need. This includes padding, margin, font-size, relatively positioned elements, width, height, and borders. Since 1.2, I've been tinkering with numerous different examples. Below are three of my most recent. I hope you find them informative and/or helpful.

• A Tab!
• Awesome Tab 2
• Tabulicious Tab 3

+ See Code

var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#nav1 li').hover(function() {
          $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
      });

• You need a mac
• Do it
• I really like football and the redskins

+ See Code

$('#nav_move').css({ 
        width: $('#nav2 li:first a').width()+20, 
        height: $('#nav2 li:first a').height()+20 
      });
      $('#nav2 li:first a').addClass('cur');
      
      $('#nav2 a').click(function() {
        var offset = $(this).offset();
        var offsetBody = $('#content').offset(); //find the offset of the wrapping div    
        $('#nav_move').animate(
          { 
            width: $(this).width()+20, 
            height: $(this).height()+20, 
            left: (offset.left - offsetBody.left) 
          }, 
          { duration: 350, easing: 'easeInOutCirc' }
        );
        $('.cur').removeClass('cur');
        $(this).addClass('cur');
        return false;
      });

• Some info
• Go buy a mac
• You won't regret it

+ See Code

var fadeDuration = 150; //time in milliseconds
      
      $('#list1 li a').hover(function() {
        $(this).animate({ paddingLeft: '30px' }, fadeDuration);
        $(this).children('span').show().animate({ left: -5 }, fadeDuration);
      }, function() {
        $(this).animate({ paddingLeft: '15px' }, fadeDuration);
        $(this).children('span').animate({ left: -35 }, fadeDuration).fadeOut(fadeDuration);          
      });

For any further reading on jQuery, check out:

• Learning jQuery
• jQuery Crash Course
• jQuery for Designers
• jQuery Tutorials for Designers

Leave a comment ( 13 )