Daily Links
How To Train Your Dragon 2, trailer
Careful though. The internet is reporting that there's a pretty major spoiler blurted out right in this trailer...
Daily Links
Unfolding the Box Model
Chris Ruppel does a good job describing and demonstrating how CSS transform work… by using CSS transforms.Adaptive Backgrounds.js
A javascript plugin for extracting the dominant color from images and applying the color to their parent. Handy.Apple's Latest Holiday Ad
It is a good one.Holiday Memories Results
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!
Daily Links
SwatchMate Color Capturing Cube
Not sure how accurate it is, but it is neat!Myth - CSS the way it was imagined.
Myth is a postprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval.
It's like a CSS polyfill.
Email Templates: Making it Work for Outlook
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
- Implementation of Flash - to be avoided at all costs [ http://www.campaignmonitor.com/resources/will-it-work/flash/ ]
- Audio - very extreme limitations, only really available for email browsers that support HTML5 which is only supported fully by Apple and iOS Mail [ http://www.campaignmonitor.com/blog/post/3890/adding-audio-to-email-newsletters ]
- Video - to be avoided [ http://www.campaignmonitor.com/resources/will-it-work/video/ ]. As an alternative, apply an image with a link to the video at YouTube or another web video service.
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.
Daily Links
OS X Mavericks v10.9.1 Update
Mostly focusing on Mail.app and Gmail misbehaving.
Canada Post 2013 Holiday Shipping Deadlines
Still need to get that special something to that special someone these holidays? Access Winnipeg reminds us about the post offices' cut-off dates for getting them there on time.
Chrome's solution to 300ms click delay on mobile browsers
Unfortunately every touch-based mobile browser, across platforms, has an artificial ~300ms delay between you tapping a thing on the screen and the browser considering it a "click". When people think of the web as being sluggish compared to native apps on mobile, this is this one of the main contributors. However, as of Chrome 32 for Android, which is currently in beta, this delay is gone for mobile-optimised sites, without removing pinch-zooming!
5 .htaccess Snippets to Borrow from HTML5 Boilerplate
A few snippets selected form HTML5BP by DavidWalsh for easy digesting.Happy Holidays and So Long 2013
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
Daily Links
Animating Vectors with SVG
24Ways, the advent calendar for nerds, is back. Neat article on animating with vectors.Winnipeg Transit Fares Rising
$2.55, up from $2.50.
Lifetime Gag Order
"At a time when some parliamentarians are moving to create a more open and transparent Parliament, the [House of Commons'] Board of Internal Economy is putting measures in place to ensure parliamentary staff can't be whistleblowers on their employers."
Elder Scrolls Online, release date
For all you Skyrim fans, the Elder Scrolls MMO will be available for Mac and PC on April 4th.
Scrabble Typography 2nd Edition
A new, beautiful version of a classic game.
Manitoba Gets A New Slogan
"Manitoba: Canada's Heart Beats"
Gmail to Cache Email Images
Designed to protect recipients, but could have implications for email marketing and analytics.
Daily Links
The Trouble with Snooze Buttons
Read it and destroy all temptation to hit snooze.The Walk
Made by the makers of my favourite iOS game, Zombies, Run! comes The Walk. It’s a game where you have to move in order to stay alive. Works best with iPhone 5. Guess it is time for me to upgrade!Daily Links
Guardian open-sources website code
The Guardian newspaper has not only debuted a new responsive design, but have made their front-end code available at Github under an open-source license.
Draw Your Own Video Game
Can't believe I missed this when they were Kickstarting it, but I'm glad they were successfully funded because I'm looking forward to trying it out! :D
Daily Links
UX Critique
A tumblr log pointing out many of the usability issues with the iOS7 operating system design.How Big Is My Browser
Handy when testing mobile stylesheets.Adobe Introduces Napoleon
Nice little tool coming from Adobe. Hopefully there will be an API so that you can pick up tools and use them in other apps if you don't want to be tied to Creative Cloud. Pretty cool regardless.
Data Export For Gmail and Google Calendar
Google provides a much easier way for users to download their data in MBOX and iCalendar formats.Type Rendering Mix
Supposedly solves type rendering difference across multiple platforms and browsers. Linking for future reference.slabText - a jQuery plugin for producing big, bold and responsive headlines
slabText allows auto justifying text by intelligently adjusting font-size, line-hight, word-spacing and letter-spacing, etc.