Topic: Tips and Tricks
Organizing Your Stylesheet Using CSS Edit
One of the most daunting things about building and maintaining a design can be wading through huge, disorganized style sheets. Nothing is worse than opening up a style sheet someone else has worked on and thinking, "What the heck happened here?" On occasion I've opened up some of my old style sheets and shed a single tear. Styles were strewn throughout the page like I blindly copied and pasted code as if it was still 1999. Needless to say, I've learned the hard way why keeping styles organized is beneficial.
Through the years, I've waffled between various methods of organizing, but never found one that I could really subscribe to. Then I came across CSS Edit; a powerful CSS editor built exclusively for the mac. I immediately fell in love with its clean, simple, and functional interface. One of the best and most powerful features, in my opinion, is its ability to group styles into a folder structure.
Continue reading "Organizing Your Stylesheet Using CSS Edit"
Adding Microformats to Viget.com
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:
- 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.
- 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.
- 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:
Hotmail Image Problems in HTML Emails
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!
UPDATE: This problem only seems to happens in Hotmail when using Firefox (although I feel like I saw it in IE before...). Another good tip, from a reader named Jurre-Jan Smit, was that you can just put the code in the <style> element in the <head> (for Live Hotmail) and <body> (for old school Hotmail) so that you don't need to put it inside every image. I just tend to use inline styles in emails because they're more specific. I've found Campaign Monitor's guide on CSS support in emails very useful for answering compatibility questions. Keep the useful tips coming!
Building Viget.com In EE (Part 1)
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.
The Mysterious “Save For Web” Color Shift
Warning, the following information is hotly contested. Read the comments for more info.
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"
Fun With jQuery’s Animate() Function
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.
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);
});
(Click a link!)
$('#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;
});
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:
Dear Scrabulous, I Like U, and I Like UI
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.
Recent Comments
@Samantha, I’m not aware of a “find/replace font” function. That essentially would be exactly what we need, which is a type styles feature/palette. It’s indeed unfortunate, and is one...
- Peyton Crump on 'Photoshop Type Time Savers'.
- kaske on 'Photoshop Type Time Savers'.
- kaske on 'Photoshop Type Time Savers'.
Subscribe to Comments RSS