Samantha Warren, ON THE TOPIC OF Tips and Tricks

Unlike print, the web is interactive; establishing a visual hierarchy through typography is essential in guiding the user to the information they are seeking online. Visual Hierarchy is the arrangement of elements in a gradual series in order of importance, enticing users to interact with a web site through visual cues. Typography online is less an element and more an interface, where characteristics such as size, weight, style, color, and location help the user to navigate the site through emphasis.

Continue reading "Typography Tuesday: Hierarchy"

Leave a comment ( 5 )

Samantha Warren, ON THE TOPIC OF Tips and Tricks

What is Typography Tuesday?

It is no secret that I love Typography. Typography is the cornerstone of design. In situations that don’t afforded the luxury of other graphical elements such as photography or illustration, typography can carry the design. Strip away all the bells and whistles of the web and you are left with type; make that type look fantastic under aggressive circumstances and THAT is bad-ass.

Back in February, I had the pleasure of speaking about web typography at DC Design Talks. I learned a lot of great things while developing the presentation, and I’ve tried to simplify some of those ideas to share with you each Tuesday until I run out.  (Which could, theoretically, be never.)

Continue reading "Typography Tuesday: Legibility"

Leave a comment ( 7 )

Doug Avery, ON THE TOPIC OF Tips and Tricks

A few of you have been asking, so here it is: An overview of how we put the Viget Inspire background together. The driving philosophy behind real-texture stuff like this is to fake as little as possible. No matter how many brushes you have or how good you are in Illustrator, there's a quality of unpredictability in real photographs and real, physical elements that adds great subtle qualities to any design.

After coming up with the concept of the sunrise/hikers, the next step was to find two real images to craft it from. We needed a real skyline with a row of trees, and a real bed of watercolor effects with the kind of subtle variations watercolors do best. The two lucky candidates were found on iStock.

The first step was to divide that beautiful photo up into three distinct, flat blocks that we can manipulate further. The sky was easy (just chop around the mountains), but the trees a little more difficulty. Fortunately, with a collage like this, being hyper-detailed isn't too important...a rough cut-out of the trees on the left side and some guesswork on the right were good enough.

Continue reading "How To: Make the Viget Inspire Background"

Leave a comment ( 25 )

Erik Olson, ON THE TOPIC OF Flash and Javascript and Tips and Tricks

Bi-directional Actionscript/Javascript communication is something that has been out for a while, but some Flash designers/developers still are saying, "I didn’t know you could do that."

Well you can! And with just a little bit of code.

Continue reading "Bi-Directional Actionscript/Javascript Communication in AS3"

Leave a comment ( 7 )

Rob Soule, ON THE TOPIC OF CSS and Tips and Tricks

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"

Leave a comment ( 27 )

Doug Avery, ON THE TOPIC OF Tips and Tricks

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

Keith Muth, ON THE TOPIC OF CSS and Favorites and Tips and Tricks

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!

Leave a comment ( 13 )