Contributed by Wil Alambre and Julian Moffatt over the course of December 18th…
Unfolding the Box Model
Chris Ruppel does a good job describing and demonstrating how CSS transform work by using CSS transforms.
Apple's Latest Holiday Ad
It is a good one.
- Creative Clash
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!
Contributed by Max Chiriac and Wil Alambre over the course of December 17th…
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.
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.
Contributed by Wil Alambre and Max Chiriac over the course of December 16th…
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.
CSS Variables in Firefox Nightly
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.
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!
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!
Julian, Doug, Ross, Wil, Max, Dwayne and Lauren
Contributed by Julian Moffatt, Wil Alambre, and Lauren Zacharias over the course of December 12th…
Newly discovered greenhouse gas "7,000 times more powerful than CO2"
Animating Vectors with SVG
24Ways, the advent calendar for nerds, is back. Neat article on animating with vectors.
- Fallout, Fallout 2, and Fallout Tactics... for FREE
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.
Contributed by Julian Moffatt over the course of December 11th…
Contributed by Wil Alambre over the course of December 10th…
- Gordon Ramsay vs the Muppet's Swedish Chef
- Godzilla, teaser trailer
- Lord Of The Crumbs
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
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.
Contributed by Wil Alambre, Julian Moffatt, and Max Chiriac over the course of December 9th…
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.
Contributed by Wil Alambre and Max Chiriac over the course of December 6th…
How much of that mobile page youre looking at is actually of use to you, as opposed to analytics, metrics, advertising, etc?
- Moulettes - Uca' s Dance
Disney Takes Over Rights to Indiana Jones Franchise
Our slow parade to all media being owned by Disney...
Contributed by Julian Moffatt, Wil Alambre, and Max Chiriac over the course of December 4th…
Humans are becoming more carnivorous
Not really a surprise. We better get on growing meat without needing real-estate. Hello scientists and lab meat soon!
Henry Smith gives us a look at the goals and accomplishments behind the Spaceteam iOS app. Its a good behind-the-scenes look at what a developer intended and how it resulted.
PowerUp 3.0 - Smartphone Controlled Paper Airplane
Childhood mode ON
Contributed by Julian Moffatt and Wil Alambre over the course of December 3rd…
iPad Painting of Morgan Freeman
This Situation Is Unworkable
A judge has ruled that the city of Detroit is eligible to file for bankruptcy.
Google has launched a cloud platform, allowing people to run large-scale workloads on virtual machines hosted on Google's own infrastructure.
FileMaker Pro 13
Features include enhanced tools for iOS, new design options, and improved security.
Contributed by Julian Moffatt and Wil Alambre over the course of December 2nd…
Amazon Floats the Notion of Delivery Drones
In the race to get same day delivery to become a reality, Amazon is looking into building their own fleet of delivery bots. Nice!
Members of Parliament websites
The non-profit Samara took a look at ran a survey on how are MP websites working to improve Canadians' perceptions of Members of Parliament.
Creative Commons 4.0
Creative Commons released new versions of their sharing-friendly licenses.
The Value of Content
Andy Beaumont reminds us that conversions and analytics will never beat out good content and satisfied audiences.