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 )

Dear Scrabulous-

I’m a big Scrabble fan, and I know I’m way behind by just having hooked up with you this weekend. I also know there are people fighting over you (not such a bad problem to have) and I hope you hang around. I like your user interface mostly fine, but I’m wondering if you could tidy up a few small things.

Continue reading "Dear Scrabulous, I Like U, and I Like UI"

Leave a comment ( 5 )

For many, designing and coding for emails can become a frustrating task. With so many different types of email clients that each seem to follow distinct standards, many hours can be spent just to figure out what works. Luckily, there are great resources available for reference.

The following list contains both css and html tips to ensure your HTML emails look great when delivered!

• Great general overview for HTML emails. LINK
• Campaign Monitor offers an excellent guide to email CSS support that covers both web- and desktop-based email apps. LINK
• Premailer is a good tool for checking inline CSS in your email template. LINK
• The Email Standards Project works to improve web standards support and accessibility in email. They have also put together the Email Standards Project Acid Test. LINK
• A great Flickr group with people showing just how frustrating creating HTML emails for Gmail can be. LINK

Additional resources:

• Canspam act
• CSS Support In Email
• CSS and Email, Kissing in a Tree

Leave a comment ( 7 )

If you’ve ever attempted to style a button inside IE, you know that it can be a huge pain. On most of our projects, we’ve now started using the button element in place of traditional input buttons due to the ease of styling and consistency across browsers. One of the first things you might notice when you bring your nicely styled buttons up in IE is that, for reasons unknown to me, IE decides to stack the padding depending on the width of the content inside the element.

After spending some time adding a lot of extraneous CSS to the IE specific style sheets, I realized that two simple lines of code fixes the problem.

button {
  width: auto;
  overflow: visible;
}

Those two lines of code will save you countless hours. Go give your button elements some extra love.

Leave a comment ( 20 )

Viget works with a wide variety of clients with varying depths of web knowledge. Some simply have a business plan based on a strong idea, while others have designed, built, or maintained sites themselves. Regardless of this level of understanding, there’s one thing we all “opinionate” and iterate on — the look of the site. Aesthetic is typically unique in that all of the stakeholders in the project can and want to have input. After all, if we can see, we tend to have preferences for colors, layout, photo selection, font styles, etc. So the visual design of sites is typically an iterative dance between the subjective opinions of those involved, the established goals of the site, and the more objective “rules” of good web design.

Hopefully, the client is involved in or aware of all of the planning (sitemapping, wireframing, defining of audiences and actions) before the look is ever approached. Occasionally, even when they are involved in the planning, clients lean toward an unproductive and over-iterative focus on aesthetic. Many times, this is simply because we as designers allow the client to see visual decisions as a separate “phase” of the project, and they unconsciously become detached from the rest of the site goals for a short time.

So, a simple suggestion to keep a healthy, balanced perspective toward aesthetic — at the beginning of any visual evaluation (competitor site reviews, mood boards, comps), simply take two minutes to clarify with the client that visual design is much more than preferences/decisions on color, photos, and layout. Remind her that visual direction must always be evaluated in the light of:

Users/Actions

How will intended users perceive this design? Are the actions they’re meant to take apparent?

Aesthetic

How does it look? What feeling does it evoke? Are colors/fonts used appropriately? How is the brand being used/reflected?

Content/Data

What information are we offering through this design? What are we collecting? Are the content areas being given proper design attention and priority?

Functionality

Is the content/data/technology that we have available being leveraged to create appropriate and interesting features?

Usability

How easy or hard is it to use the page/site? Is the content visually prioritized, is it easy to find, and is the user effortlessly able to take intended actions? Is usability suffering because of other poor decisions?

These simple ground rules for evaluating the look of a site tend to get everyone more healthily engaged in making design decisions. Decrease subjectivity and iterations, increase objectivity and communication, and maintain focus on the larger site goals.

Leave a comment ( 5 )