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 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!

Leave a comment ( 6 )

Erik Olson, ON THE TOPIC OF Flash

Adobe made a surprisingly big but long speculated announcement about a new project called the Open Screen Project for Flash. This announcement is fairly significant and hopes to ensure the future of Flash and its new AIR apps.

What is this project all about?

Flash, right now, does not maintain a consistent runtime environment deployed across all devices. This means the Flash experience can vary across different devices or ‘screens’.  In other words, it may not look and act the same on your mobile device, TV, or PC (PC being the most consistently high-quality experience). Through the project, however, Adobe hopes to achieve a more consistent experience across all screens.

To do this, Adobe has taken a few major steps:

Continue reading "Flash Goes Open Screen"

Leave a comment ( 4 )

Samantha Warren, ON THE TOPIC OF Trends

There is social media popping up everywhere and sucking data out of our heads (and hearts) propelling it into the vast wonderment of The Internets.  We’re bombarded with locations, opinions, emotions, hometowns, and photographs, and even our deepest darkest secrets ... all of which is massively being compiled and sorted.

The web is an immense and wonderful resource that can be tapped for so many purposes; the trick to leveraging it will be establishing interesting and useful ways to navigate it. At one point, I was certain it would be the future of the web.  I have blogged about interactive information design and social media before. It is something that holds a place deep in my heart; however—contrary to my previous blog post—I am beginning to wonder where its place on the web will be.

Visualizations, which are a fantastic marriage of design thinking and badass technology on the web today, can enrich the user experience by creating an environment in which the user physically interacts with data. Invigorating my infatuation with this concept is http://twistori.com, a site that extracts adjectives in Twitter‘s tweets, displays them by color, and allows the user to view tweets grouped by similar feelings. Twistori led me to revisit and rethink Jonathan Harris’  "We Feel Fine," one of the most spectacular blends of social media and interactive information design on the web. 

Continue reading "Data Visualization: Is it the Future of the Internet?"

Leave a comment ( 5 )

Doug Avery, ON THE TOPIC OF Development and Tips and Tricks

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 )