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.

Standards for HTML Email

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

Previously I talked about how archaic the standards for HTML emails have been. Well, while things have improved a bit, they still aren't great. We are still looking at late 90s, early 00s for our HTML when creating email templates. Now we add to that the technology of smart phones and tablets. Our HTML emails now have to be responsive to a variety of screen sizes on top of working in multiple email clients.

Here are the general rules that any developer should be following to get their HTML email layouts to work for the vast majority of email client options. Since the email rendering engines vary depending on the email client being used, for example later versions of MS Outlook are using MS Word as their email rendering engine. MS Word does not do HTML well at all.

  • <table> instead of <div>,
  • Hex value colours should be complete (#FFFFFF) instead of abbreviated (#FFF),
  • padding instead of margin,
  • CSS2 instead of CSS3,
  • HTML4 instead of HTML5,
  • background-color instead of background,
  • HTML attributes instead of CSS,
  • inline CSS instead of style sheets or <style> blocks.

Source: Smashing Magazine

Since all email clients handle HTML slightly differently trying to have a consistent look to your email layouts is extraordinarily difficult, so for best results the K.I.S.S. ( Keep It Simple Stupid! ) protocol will give you the best results. The Smashing Magazine article goes into much deeper detail and has many suggestions to help with the construction of standards compliant emails.

When creating email templates, a good tool to use to see what the results will be for a variety of email clients is Litmus. If you send a substantial amount of HTML email, this service will be worth the subscription fees. At the very least try the 7-Day free trial to see what to look for when creating your templates. It can give you a set of steps to follow during your development process.

When it comes to a client who wants a super complicated and beautiful HTML Email design, it is important to supply the client with your knowledge by explaining these issues. We want our clients to be satisfied, but they need to understand that when it comes to email, functionality needs to come before design. If they insist, then sending the email as an image becomes an option, but other functionality will be lost. As long as you communicate this to the client, you've done your due diligence. Remember, you're the expert. Your client has hired you for that expertise. If they decide to ignore that expertise, at least you tried.

Gord Downie has Passed Away

General
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

[image from https://www.vice.com/en_ca/article/vdqndd/on-gord-downie-my-dad-and-taking-people-for-granted]

Gord Downie passed away yesterday, October 17, 2017. He succumbed to his battle with brain cancer. While we all knew it was coming, death is always a shock with the finality of it. Gord will be greatly missed by a nation that he and his bandmates nearly perfectly encapsulated in their music as the Tragically Hip.

As a teenager growing up and living on the Canadian Prairies, right next to the 100th meridian, Gord's lyrics about butterscotch rivers and fields of wheat, vaccination scars, open skies, water meeting the shore, strangely coloured highschool walls, the group of seven, pine trees, and canoes painted vivid images of all the parts of my life and that of many of my friends.

Gord's lyrics were always underscored by the bands rhythm and guitars that often started like a slow canadian season, then quickly jumped right to mid-summer, and faded out like the last leaves giving up their grip in a late fall wind.

My first connection and understanding of how important the Hip would become came at Sunfest, in Gimli Manitoba in the summer of '91. This was the year we had graduated from highschool. Most of us figured it was the last time the high school gang would be together before we all went off into the world to try out being adults. It was also the summer weekend I met up with my future wife.

Their show at Sunfest was something else. The crowd at the previous year's festival was a few thousand people. However, this year the festival had the Hip and Saturday's crowd grew steadily over the course of the day reaching a peak nearing 15,000 people around 8pm in preparation. The Tragically Hip hit the stage around 9pm and they blew the sunset out of the western sky as they seared their way through tracks from Up to Here and Road Apples.

Shortly into the show, someone needed medical attention near the stage. The band stopped playing and helped organize the crowd so that an ambulance could be driven through the field. The band remained calm and Gord spoke directly to the audience, telling them what was happening. Everyone at the festival helped as they could, being Canadians and all, and the band didn't get back to the set until the ambulance was out of the crowd and headed for the hospital. Then they proceeded to rip raw energy out of the cosmos and played for another 2 hours, in perfect summer weather, to a very appreciative crowd. Not a person I knew there wasn't converted into life long fans of Gord and the Hip.

Later on, in 1999 I caught the Hip again at Woodstock in NY. They played an early Saturday show to a sea of Canadian flags, which where rapidly hidden away when their set finished. While the crowd was largely Canadians that had come down for the festival, the Americans in attendance that I spoke to couldn't believe they had never heard or seen these guys. It was then, at the peak of their success in Canada, that we all knew their brand of wisely crafted lyrics and carefully consutructed music was our secret. A tiny Canadian voice reaching around the world and being picked up by only a few who cared to listen.

As life moved along from the 90s to now, through weddings, funerals, births and a global world that seems increasingly in need of intelligent observers, the Tragically Hip and Gord's poetry have always been a constant. They encapsulated what it means and feels like to be Canadian better than most Canadians can describe for themselves. From long drives across the country, down gravel roads to the cottage, at parties, on decks, working, relaxing, paddling, sitting on the dock in the summer or getting ready in the dressing room before hockey, the Hip have always been there.

I'm going to miss knowing that there is nothing new on the horizon from Gord, but I'm also so grateful for all that he gave. Having taken the last exit, may you rest in peace Gord.

The statement from his family does a far better job than I can of bringing some closure to Gord's life.

Website Development using Google Chrome

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 one of the latest updates to the Google Chrome browser, a security feature was added as part of web standards moving toward proper secure websites using SSL certificates under the HTTPS protocol. What we discovered however, is that websites that are still under development that have form elements for passwords or credit card numbers are being flagged (and rightly so) as part of an insecure website. The notice of this isn't the problem. A second effect of this new feature is that the Google Chrome browser takes it upon itself to completely disable the form. Again, on an active website this is a nice security feature. It doesn't give the user the opportunity to enter data that could possibly be sent over an insecure site.

From a developer's standpoint, it becomes difficult to do any light programming tests or styling because the forms don't display. In searching for any mention of this issue, before we were aware of this specific change, we found nothing about how to disable this feature so that tests could be run. We were fairly certain that it would be part of the Google Developer Tools for Google Chrome, but there don't appear to be any easily accessible rules that describe this issue.

We did a thorough review of all of the tabs in the Google Developer Tools. We wanted to see if there were any settings that may have needed adjustments to allow for the forms to render even though our development sites are under standard HTTP protocol. There was nothing specific to our issue, however we did come across the browsers caching settings. This was about the only thing we could find that looked like it might help. By disabling the caching in the browser, it forces the page to reload from scratch. It retrieves all of the information from the server as if it were the first time. This bypasses the security protocol in the browser that prevents the offending insecure form from rendering. It is recommended that if you use the Google Chrome Browser on a daily basis that you do not disable this caching as this new feature is quite helpful in helping prevent users from accidentally sharing personal information on insecured websites.

For the developers however, the following is a quick step by step on finding and disabling the caching in the Chrome browser so that you can develop your styles and do your light functional tests. (The following steps are for a Mac. PCs should have a similar, if not the same set of steps)

  • Step 1: Open the developer tools. View -> Developer -> Developer Tools
  • Step 2: Select the Application tab;
  • Step 3: In the left navigation bar under Application, select Clear storage;
  • Step 4: In the settings to the right of the navigation bar;
  • Step 5: Scroll to Cache and uncheck Cache storage and Application cache;
  • Step 6: Close the developer tools, and refresh the page on which your form is located.

Your browser's cache is a useful tool that helps webpages to load quickly. The storage of frequently used webpage assets makes for a fast and efficient user experience. It's just a bit of a pain when it comes to development.