Vdot Media » Blog

We’ve been busy, not dead

Verne — Thu, 11 Sep 2008 15:14:29 +0000

Somebody called me yesterday and asked me whether we were still in business as they had noticed that the last time we updated this blog was back in March. Well rest assured we’re alive and well! In fact, it’s been one of our busiest Summers to date. And fortunately, we’ve got a few things to show for it! Here are a few pieces of work we’ve released recently:

WooThemes

Back in June, we had the pleasure of working with the cool cats over at WooThemes - one of today’s leading experts and providers of premium WordPress themes. In their rebranding process, they came to us to hack-up and redevelop the purchase experience for the customers of its themes and its up-and-coming themes club. The trick was to integrate a secure 2Checkout payment system into their newly designed site and automate the creation of various types of user accounts once the payments were approved. Did I mention we did it all in WordPress? If you’re already a customer of WooThemes, I hope you’ve enjoyed their purchase experience. If you’re not one yet, go ahead and buy one of their wickedgood themes and sample the experience (I’m sure Adii won’t mind)!

LIVE Conference 2008

Back in its third and strongest year yet - LIVE Conference has always made a mark with its web presence that gave other leading undergraduate business conferences something to shoot for. LIVE Conference’s newly releaunch 2008 portal is no different. This year, we combined our WordPress hackery with the idea that the conference really needed a more robust and dynamic conference management system. The end product we delivered was a full featured WordPress-powered conference management platform that supported the scalable needs of a growing initiative and could support all its essential conference needs: registration, payment, scheduling, speaker profiles, and much, much more. Oh, and we think it looks pretty nice too!

What else is new?

A lot, actually. We’ve got a few secret side projects in the works, possibly including a newly formed super group of web 2.0 headbangers and internet rockstars. You’ll know it when you see it.

We’ve also made a few leaps and bounds with our WordPress work and are looking into releasing a few goodies back into the community. This may start with the public release of the conference management system, but that’s too far ahead to tell.

Sweetcron was also released recently and what can I say, we love it! If you don’t know what Sweetcron is, you’re out of the loop. It’s the WordPress of lifestreaming. Get on it! We’ve got an exciting new Sweetcron theme that we’re putting up for free download soon, but in the meantime, you can get a taste of it on Satish’s newly launched webfront: http://sati.sh.

It’s been a great Summer filled with many successes and we thank you for being patient with our absence here while we help our clients make an impact elsewhere. We’ve finally gotten around to updating our Portfolio as well, so give it a peak and see what else we’ve been up to.

9 best practices for email design

Verne — Sun, 02 Mar 2008 18:55:15 +0000

Designing for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.

Fortunately, there are bodies in place that are working on standardizing the way emails are being rendered. But something tells me that we shouldn’t hold our breath (after all, we haven’t even fully standardized the experience within browsers yet). So in the mean time, here are some basic best practices to follow when designing for emails that will ensure your work displays as intended.

1. Go old school with your HTML

Scrap everything you’ve learned in recent years about tableless CSS structures and revert back to the HTML that your grandma grew up with (a little exagerated but it seems that long since we’ve used tables). Forget about positioning divs with CSS and rely on trusty table cells to lay out your content as many email readers will not render positioning instructions properly or at all. Be safe, be old school.

2. Use inline style tags

Most major email readers, whether they’re online, like Gmail and Hotmail, or desktop applications, like Outlook and Thunderbird, will ignore everything between the tags, including your style definitions (whether you do it via or tags). This means you should style your HTML using inline styles. Be careful though - there are many CSS properties that will not render properly, like the aforementioned position property. A detailed report on how various major email readers performed against an Acid Test (which tests a handful of common CSS properties) can be found here.

3. Don’t rely on using background images

Using background images has become an essential tool on the designer’s belt. However, there is such an inconsistency between which browsers will actually display background images that it’s best to not rely on them. As an Outlook 2007 user, I know as a fact that no background images are displayed (this is true for Gmail as well). On the other hand, readers like AOL Webmail and Windows Live Mail (not Hotmail) will render background images correctly. Since it’s too difficult to predict what reader your audience is using, your use of background images should only be for enhancement and not as something your entire design depends on.

4. Consider your images blocked by default

For security purposes, many email readers will block images embedded in an email by default. The reader must opt-in on each email to display the images (though some may allow readers to set their preference). What this means is that you should rely on your images to communicate your message. Avoid replacing too much text with images and make sure your email design still gets the point across even when images are not displayed.

5. Use the ALT attribute for images

To avoid completely losing the message on an image when images are blocked, fill out the ALT attribute for each of your images. This ensures that the important content from the image (i.e. the text) is still passed along. This also helps in cases where the reader is using a text-only email client, as the image will be replaced by the ALT attribute.

6. Use absolute paths

This one’s a no-brainer but make sure to use absolute paths when referencing images. Relative paths (i.e. /images/my-image.jpg) will break as the email reader won’t know what the path is relative to. Your image paths should look like this instead: http://www.mywebsite.com/emails/images/my-image.jpg. This is so simple that it can often be accidentally overlooked so make sure to double check your image paths before you transition from draft to final.

7. Be considerate of file sizes

Loading up your email design with large images will slow down the download process on the reader’s end and may deter them from reading it all together. In some cases, exceptionally large emails may also be flagged for spam and viruses. To minimize these risks, optimize your images so that they have the smallest possible file size. This may require you to play around with JPG, GIF, and PNG formats to see which gives the highest image quality with the smallest file size. Where possible, use plain text to communicate your message.

8. Avoid rich media and forms

In a browser, using Flash, animated GIFs and forms add interactivity to the user experience. In an email, it bulks up the file size, raises security flags, or just doesn’t work. If there are interactive components attached to your email campaign, you are far better off linking the reader to a live site than to attempt to embed them into the email itself. It’s an extra step but at least you can be sure that your rich media and forms will work.

9. Design for smaller spaces

Just like designing for a web browser, you need to be considerate of screen resolutions and window sizes. In addition to this, email readers often have added sidebars and navigations on both sides of where your email content is displayed, further decreasing the amount of space you have to play with. Be safe and keep the width of your email design at least within 800px (we commonly use 750px).

If you’re running an email campaign and would like to learn more about best practices for email designs, speak to us. We’d love to help you.

8 Essential WordPress Plugins

Verne — Tue, 19 Feb 2008 05:00:02 +0000

The great thing about working with an open-source platform like WordPress is that it is well-supported by an enthusiastic, passionate, and forward-thinking community of developers, designers, and users. From this community spawns, among many things, a truck load of plugins that everyday users can download and install without breaking a sweat. These plugins help publishers make the most out of WordPress’ basic functions and optimize theirs and their visitors’ user experience.

Every new WP site we build begins with the activation of a number of key plugins. Many of these plugins would be really helpful to those of you running WP sites of your own, so I thought I would outline our list of essential WordPress plugins. Enjoy!

All-in-One SEO Pack - A great plugin to help you optimize your site titles, descriptions and keywords. A must-have for anybody who remotely cares about search engine optimization.

cforms II - This powerful AJAX-enabled plugin helps you build multiple custom forms for you to embed onto your pages. We use cforms to run the contact form on our Contact page.

Feed Count - If you’re tired of the FeedBurner chicklet and want to try your hand at customizing the look of your feed count, then this is the plugin for you.

Google XML Sitemaps - This plugin dynamically builds and updates your sitemaps to help search engines index your content more accurately.

Robots Meta - Another search engine friendly plugin that allows you to adjust your nofollow, noindex settings on a post-by-post and page-by-page basis.

Simple Tagging - Because WordPress’ native tagging function isn’t perfect yet. My biggest gripe against the native tagging function is that you can’t see a current list of tags that are already in-use. This plugin takes care of that in a very cool way.

Subscribe to Comments - Keep your commentors in the conversation by allowing them to subscribe to comment updates for any particular post.

WP-PageNavi - A great alternative to WordPress’ native pagination function that lets users browse content by page number.

Got more plugins that you consider essential? Tell me about them by leaving a comment.

Make your website printer-friendly

Verne — Thu, 14 Feb 2008 18:52:41 +0000

The accessibility of your website is an important consideration to make. It could be as simple as determining what screen resolution your website is compatible with. The ongoing cross-browser compatibility struggle can also be seen as an accessibility issue, as can the extent that your website complies with screen reader standards for the blind. Essentially, the accessibility of your website is measured by the number of methods, mediums, and audiences that your site’s content can be easily transferred to.

Accessibility also includes, among many other things, the extent to which your site is printer-friendly. In other words, the ability for your audience to print your content and take it with them so that they may have access to it while away from the computer. As with all aspects of accessibility, making your site printer-friendly is ideal, but not manditory. Sometimes it’s just not necessary - like an artist’s online portfolio. Other times, like with real estate listings on an agent’s website, it just makes sense.

When we were working on the recently-launched MichelleLuDo.com website, we thought about the nature of the audience that Michelle, a friendly and driven real estate sales agent, would be interacting with through her new website. What we discovered was that her clients were more traditional individuals and were likely to prefer print over web when it came to digesting information. Moreover, when you consider the steps an individual on a real estate agent’s website intuitively takes - browse a listing, find something interesting, copy the information down, visit the location - ensuring the website’s content was printer-friendly became a priority.

How to make a website printer-friendly

Making a website printer-friendly is actually quite simple. All it takes is two stylesheets - one to tell the browser how to display your website on the screen, and one to tell the printer how to print it out. You define which is which using the media attribute in the tag that resides in your . For example, here’s how MichelleLuDo.com’s stylesheet links generally look:

As you can see, we loaded 2 stylesheets and defined one as media="screen" and the other as media="print".

Once you’ve got the two stylesheets setup, it’s time to format them to your liking. Your print stylesheet should start by being identitcal to your screen stylesheet. Then begin hiding all the elements that you don’t want to show up in your print out using either display: none; or position: absolute; left: -9999px;. In most cases it’s best to use the latter method to hide elements as screen readers sometimes ignore display: none;. However, in this case, it shouldn’t make a difference.

Best practices for printer-friendly websites

Here are 5 best practices to follow when deciding how the print version of your website should appear:

Strip all or most images.
Remove background colors.
Minimize and adjust text colors - use colors that will be easy to read on paper.
Remove unecessary or irrelevant elements (such as links).
Add necessary information such as the webpage’s URL or contact information.

Tip: Trading Places

Here’s a simple tip that will help you swap web content that is irrelevant or unfriendly for print with useful and printer friendlier content.

For example, here is the header image on MichelleLuDo.com:

In the printed version of the site we wanted to make sure that her name was still visible and that branding stayed in tact. However, printing this image would not be too friendly on the printer’s ink or on the overall aesthetics of the print out (since all other background colors will have been stripped). What we want to do is replace the header image above with this printer friendly header image in the printed version of the website:

So here’s how we do it:

HTML

Screen Stylesheet

#header-image { padding-top: 40px; float: left; display: block; width: 530px; height: 41px; } #header-image .normal { } #header-image .pf { display: none; }

Note that the that wraps our printer-friendly header image (id_pf.jpg) is hidden using display: none;, while the that wraps our web-ready header image is displayed.

Print Stylesheet

#header-image { padding-top: 40px; float: left; display: block; width: 530px; height: 41px; } #header-image .normal { display: none; } #header-image .pf { }

Notice now that .normal and .pf have traded properties and now the ‘normal’ web-ready header image is hidden while the printer-friendly header image is displayed for the printer. Just like that, our printer-friendly image has traded places with the web-friendly image. You can use this hepful tip with any content on the page.

The final product

Here’s a live page from MichelleLuDo.com:

And here’s how the page prints out:

And there you have it, an accessible printer-friendly website.

3 ways to clean up your Google search results

Verne — Sat, 09 Feb 2008 21:37:25 +0000

It’s not quite Spring yet, but we’ve been spending time doing some cleaning. If you’ve owned a server for several years, you’ll know that over time things can get messy. In fact, if you do a quick Google site search (site:www.yourdomain.com), what you end up seeing is a long, and sometimes ugly, history of every page and file you’ve ever publically offered.

A big part of our recent new site launch was cleaning up our old links to ensure that our audience was finding the most relevant content in major search engines like Google. Our server currently hosts thousands of pages and files - some we publish for the public, some we like to keep private. Targeted campaign pages, internal or upcoming project sites, and client work are examples of areas of our server that we’d rather not have someone find while doing a search query.

Knowing this, we’ve implemented a few tools to help keep our search results clean and tidy. Below you’ll find 3 simple steps to follow that will help you do the same.

1. META Tags

Here’s the first place you want to start. You can add a simple META tag to the top of every live page you have (between the and tags) and configure it to your liking. Here’s how the META tag should look:

noindex signifies that site crawlers should not index the page. Alternatively, writing index would tell crawlers to index the page.

nofollow signifies that links on this page should not be tracked or given credit for (alternatively, follow would track links). nofollow is also used commonly for individual links with the rel="nofollow" attribute when web publishers don’t want to get punished for linking to suspicious sites.

By default, every page is tagged as “index, follow”, but changing this attribute can help you configure your pages in a few different ways (4 to be exact).

WordPress Meta Robots Plugin

For WordPress users, you can install the Meta Robots plugin. This will allow you to configure each and every post and page from the editor, as well as configure the global settings of your site.

2. Robots.txt

Tagging each and every one of your pages with META tags can be tedious. Sometimes, it makes sense to simply block an entire directory from being crawled. To do this, create a file, name it robots.txt, and upload it into the root of your server (i.e. it should reside at www.yourdomain.com/robots.txt).

The contents of your robots.txt file should look something like this:

User-agent: * Disallow: /private/ Disallow: /internal/

User-agent refers to the specific site crawler bots that you would like to block from accessing your directories. For example, you may want to only block Google’s bots but allow all others. In this case, you would write User-agent: Google (the name of each bot varies and will require some additional research to find it). A * means that you are targeting all bots.

Beneath user-agent, you can list out each directory you would like to have blocked. When a directory is blocked, so are all of its subdirectories, so be careful!

Note that a robots.txt file can also block individual pages and files, so it can be used as a substitute to using META tags.

3. Google Webmaster Tools

Thus far I’ve only shown you ways to avoid having new pages or directories picked up by search engines. If your pages have already been indexed then you’ll need to take one extra step to have it removed. That’s where Google Webmaster Tools comes into play.

Google Webmaster Tools is a great place for site owners to manage how their site is being indexed by Google. There are a multitude of different features to this site, but I’ll only be covering one particular one - the Remove URLs feature. However, if you are a site owner, I strongly encourage you to sign up to this free service and browse around.

Once you’ve registered/signed-in and verified that you are the actual site owner, click Tools and then Remove URLs on the left navigation.

You’ll notice at the top of the page, there are one of three things you must do before being able to submit a Removal Request. For a directory/page/file to be removed from Google’s index, you must do one of the following:

Make sure the content is no longer live on the web. Requests for the page or image you want to remove must return an HTTP 404 (not found) or 410 status code.
Block the content using a meta noindex tag.
Block the content using a robots.txt file.

In other words, you must either delete the directory/page/file from your server, or do one of the 2 things I’ve already discussed.

Once this has been done, go ahead and click the New Removal Request button. You’ll find that Google gives you 4 options to choose from:

Choose an option and submit your request. Your request will be added to a Pending list of requests, and approximately 24 hours later, if all goes well and all requirements have been satisfied, you’ll find that your requests will have been fulfilled and your directory/page/file will have been removed from Google’s index.

Closing Notes

This tutorial is focused on only cleaning up your search results on Google. While it is the leading search engine today, there are a number of other major engines to also share your attention with.

In any case, cleaning up your search results is an important maintenance task for all site owners as it helps you ensure that your audience will only find content that’s current and relevant. Performing the 3 simple tasks in this tutorial on a regular basis will greatly help you take control over what people are finding on your site and help clean up your search results.

Vertically center content with CSS

Verne — Thu, 31 Jan 2008 19:58:24 +0000

A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative. There have been a number of ways to approach this feat, but in this tutorial, I will lay out the technique we use to vertically center content using CSS.

The HTML

Three divs are required in order to pull this one off. Here’s an example of how we setup the divs.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.

The #container div is used as the main reference point for centering the content. In other words, the content will be vertically centered against the height of the #container div.

The #position div is used to, naturally, position the content.

Finally, the #content div is used to encase the actual content that we are trying to center. This div is also used to correct the positioning of the content for Internet Explorer users (as you’ll see later).

The CSS

Here’s the CSS we apply to make it all come together:

We’ve defined the height of #container to be the full height (100%) of the page. We could have just as easily given it a fixed height such as 500px. We’ve also added display: table and display: table-cell to #container and #position, respectively, which will tell it to mimic the properties of

and

You’ll notice that we haven’t applied any style to the #content div. This is because browsers like Firefox and Safari are able to use the uber handy vertical-align: middle property, making it almost just as easy as using tables. Using only the code we’ve shown thus far, our content should be nicely vertically centered on the page in all browsers except Internet Explorer, which doesn’t understand vertical-align: middle.

To correct this problem and ensure that our content is still vertically centered for IE users, we’ll apply the following conditional statements and extra bits of CSS.