Viget Inspire

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 )

What is it about designers? Who are we and why are we the way we are? Answers to these questions might come in many different forms. Like people in general, no two designers are alike. That being said, my guess is that just about anyone reading this will have an answer in some shape or form that describes someone they know who calls him or herself a designer. I’m not a psychologist nor do I claim to be an expert on defining designers but I can draw upon what I know about myself and offer my thoughts about other designers that I have met over the years.

Continue reading "Defining the Designer"

Leave a comment ( 8 )

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 )

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 )

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.

JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

Continue reading "Pulling Your Flickr Feed with jQuery"

Leave a comment ( 30 )

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!

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 )