Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

Holiday Memories Results

Design
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Wil Alambre Whiteboard Ninja

Hello everyone!

Our holiday themed contest is over and we've randomly drawn a lucky entry from the hundred and twenty submissions. A big congratulations to Shannon W., winner of the News Year's Eve Winnipeg Jets tickets. Shannon, don't worry, we'll be in contact with you to get you your prize!

It looks like our little game was pretty popular with everyone who reads our newsletter and follows us on social media. And it kept many of you busy, too! In the seven days the contest ran, visitors flipped seventeen thousand three hundred total cards, making over twenty-five hundred matches… and over six thousand mismatches. Hey, forty percent isn't bad, right? :)

It took visitors an average of ten minutes to win the game, with an average of one hundred and fifteen flips per game. Two people managed to tie for the quickest game, matching all the cards in a stunning one minute and twenty seconds! Wow, guys… I still can't beat two minutes thirty! I obviously need more practice.

Speaking of which, we're going to leave the game up for anyone to play. The contest is wrapped up, so you won't be able to submit an entry upon completion, but we did add a new feature. Now, the game will remember how long it took you to complete a round and compare it to your personal best time. Think of it as a New Year's goal for the holiday ;)

From all of us at Visual Lizard, congratulations to Shannon and a big thank you to everyone who played!

Email Templates: Making it Work for Outlook

Functionality
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

In the past few years we've written a few articles about Email Templates and Email HTML standards. The reason we wrote these articles was because we have been doing a number of these email templates using various services like our emediatemail.com, MailChimp and others. In recent weeks we received a template design which should have been relatively straight-forward...

This particular design used background images in a few locations to enhance the look of the template. Normally we can display background images and then fallback to solid colours when the email client does not support them. In this case however it was extremely important to the client to have the background graphics appear in Outlook.

Outlook does not fully accommodate web or email standards. It will normally just fall back to a simpler version without background graphics. However, in order to solve this issue we are re-evaluating how we tackle these HTML email templates.

We decided to go back to the drawing table... literally. We went way back to how we used to layout HTML pages in the late 90s... tables and nested tables. Some googling for insight was also required.

Here are some of the things we learned:

Padding and margins - depending on which version of Outlook, css padding and margin may only be partially or not supported for block elements. We had to fallback to using the cellpadding attribute for Outlook. Unfortunately, this only works if you want a consistent padding around the content in the cells of a table. If you need some additional spacing or padding it's back to nested tables and cells containing the good old spacer graphic (transparent gif or png).

Because padding and margin on block level elements like paragraphs and headings aren't likely to work the way you intend them, the use of spacer graphics becomes important. The problem there is if spacers are applied around elements in these editable templates that are considered optional. For instance, the article in the template has an optional image between the heading and the first paragraph. The design has significant spacing between the heading, the image, and the paragraph that follows. Because we need the spacer graphics to help in the image positioning those spacers are always there. If the new version of the email newsletter our send-out doesn't require that image we are still left with the spacers which leaves a substantial space between the heading and the paragraph. Because of the lack of standards and Outlook's quirky interpretation of HTML we are stuck with some display oddities which we could not fully solve. Luckily they were acceptable to the client.

CSS float - again depending on which version of Outlook the email is being viewed in the level of support varies so it is best to find alternatives to floating elements. The best way to handle these layout issues is nested tables. If you need graphical elements to line up and be spaced properly then it's best to slice up the design graphic and set the table cells that contain those graphics to have no cellpadding or cellspacing. Sadly the old vspace and hspace attributes don't work. Older versions of Outlook might support them, but Outlook 2010 and 2013 don't.

Background images - the general practice out there to design your html email with background images that can't be left out of the display. Outlook will likely ignore them. We hate having to tell client's that we can't or couldn't achieve something. So if they want a background image in their HTML emails, we should do our best to accommodate. Unfortunately due to the still (it is 2014 Microsoft) non-standard HTML rendering in email clients, certain things like background images become really iffy to implement reliably.

For most email client browsers this isn't really an issue anymore as many of these are beginning to adopt some HTML standards. MS Outlook is not one of them. Microsoft has instead promoted the use of proprietary code in order to implement background images. The use of VML to implement backgrounds is their answer to the background image issue. This however is only the first part of their implementation. My colleague and I had to do some digging to find out why our VML implementation was still partially broken. Apparently any images that are to be implemented using this VML coding must be 96 dpi, not the default 72 dpi which most people know to use for web related imagery. The dimensions themselves don't change, but VML requires the 96 dpi. To be on the safe side it is best to make all images for the email template at that 96 dpi, even the ones that are not meant for backgrounds.

It should also be noted that this VML solution is not complete until the table inside the associated v:shape element is set with some negative margin to compensate for the VML inset. We couldn't find anywhere in our research for nullifying that inset, so our only solution was to include some MSO specific comments in our HTML which would allow us to reposition the element with CSS. Obviously this isn't ideal as mentioned above CSS isn't reliable in Outlook.

Other notes about email

Conclusion

When implementing an email template, always build for Outlook first. Once the hard stuff is done, minor tweaks to the CSS for web standard compliant browsers should be relatively straight-forward... maybe. As a note to designers, HTML email templates are a cool way to help with client marketing, we just would like you to keep in mind that there are some real limitations to what email client browsers can render. We as programmers don't like saying no because it would be awesome if we could do all of the things that your concepts entail. We just need to remind you that the technology hasn't necessarily caught up with that awesomeness.

Happy Holidays and So Long 2013

Business
Julian Moffatt
Julian Moffatt CEO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:1
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Julian Moffatt Purveyor of Good Times

Hey there Everyone,

Can you believe that 2013 is just 2.5 weeks from over as of this writing? Time has become this unstoppable river of events blending from one to the next. The saying "The days are long, but the years are short" by Gretchin Rubin in her Happiness Project book, was clearly written by someone that doesn't work on the internet for a living. We work, and live, at the speed of light. With that being said, we really appreciate the holidays and our downtime.

Music for Your Holiday Get-Togethers

In case you are not on our very infrequent mailing list, we put together our favourite tunes to help get us into that holiday spirit. Point your trusy web-navigational-device at http://www.visuallizard.com/christmas/ and turn up your speakers!

Hint: you can sign up below by sending us a quick comment and checking the box to receive emails once in awhile. We sometimes do really fun things in those emails!

We Built You a Little Game To Play

In keeping with our love of building things for the internet and computers, we put together a little Holiday themed memory match game. Until Dec.17, you can enter once per day for a chance at some New Year's Eve Jets tickets. After that you can keep on playing as much as you like. Try and beat your best time!

Holiday Hours

Visual Lizard will be closed from December 20th through to January 5th. We will return to normal business hours on January 6th, refreshed, recharged and ready to tackle 2014. During that time if you need emergency assistance, please call 204-957-5520 and follow our auto-attendant's instructions.

A Big Thank You

Over the course of 2013, we have worked with some terrific people all across Canada. To everyone that believes in us and lets us solve problems for a living, we raise our glass to you and say thanks! We hope you have a terrific holiday, with wonderful memories, warm moments and lots of fun. 

Happy Holidays Everyone!

Sincerely, 

Julian, Doug, Ross, Wil, Max, Dwayne and Lauren