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.

HTML Email Specifications and Best Practices - a year later

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

So it has been a little over a year since my last post about email standards. It's about time for an update. In my latest look at the Email Standards Project there have been some improvements by some of the email clients. The majority are now getting excellent ratings, but some of the older clients are still not getting it right. In the case of Outlook 2007, which is still used by the majority of users with older Windows systems, they are still receiving a poor rating. Frankly, we can't expect Microsoft to change this email client anytime soon. Their latest email client, Windows Mail, has received an excellent rating. This fact, I would suggest, may point to the coming demise of support for Outlook.

Like Outlook 2007, Google Gmail also / still has a poor rating. This is slightly surprising considering how dominant Google has become in the internet world. It is hoped that Gmail will soon be on board with these standards soon. Even Windows Hotmail is getting a better rating than Gmail with an "average". Apple Mail, AOL Webmail, Eudora, Entourage, and Mozilla Thunderbird are now full supporters with Excellent ratings.

For those of you who need to develop email templates for clients who use mass-emailing services like Emediatemail (our own email campaign application), Constant Contact, MailChimp, etc. These standards are what you need to keep in mind while coding your templates. The Email Standards Acid Test is the expected functionality / display HTML and CSS standards that we want all mail clients to achieve. As I mentioned in my previous post about this subject last year, the HTML and CSS that can be used for email clients is far more limited than you would find in a standard web browser. The acid test on which the standards are being tested are for proper implementation of many of the basic CSS elements that have been covered in web design for years. These standards, if followed, will allow for more flexibility in email design if not functionality.

Some of the basic design capabilities we take for granted in standard web design are just not available in HTML email development. While this may seem frustrating, remember that it is an email that is being sent. It isn't a web page or web site. It doesn't have to do all of the things that a web site does, and it shouldn't. The templates that we build for these mass email tools are meant to provide a nice display for what is essentially an email message.

In terms of dimensions for the display of HTML emails, not much has changed. We still need to aim for that really limited internal display area of most email clients. 600px wide is the number we're still after. While opening an individual email into its own window would allow for a wider display, we need to keep in mind that most people view their emails in the client email preview window. The position of this preview window can vary from program to program and can even be repositioned in some email clients. Therefore, it is important to keep a specific standard width to accommodate the most email client browsers.

To long to read? Try this summary:

  • Aim for a 600px wide design template
  • HTML tables still used for layout
  • No overlapping blocks of content due to HTML table limitations
  • Avoid javascript programming - email clients aren't web browsers
  • No transparency or transparent graphics
  • To achieve beautiful layering effects you need to rely on a complete rendered graphic
  • CSS 2 & 3 standards are only slightly supported so should be avoided

So, with generally better email client support we should be seeing more consistency among displays. But that completely depends on designs that are put together with these standards in mind.

Winnipeg Comedy Festival gets a Facelift with Responsive Design

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

Visual Lizard loves The Winnipeg Comedy Festival! We have been proud supporters for the past 6 years and 2012 was no exception. After the 2011 festival ended, we met with the fine folks that make it all happen and put together the wish list for next year. The list included an alumni area, a better mobile experience and faster speed. We loved the list and made it all happen.

The first step was to upgrade their aging Catalyst CMS to our latest version. The upgrade went smooth as silk and the data transfer completed without a hitch. There are several advantages to be gained from the upgrade.

First, many of the functionality changes between the old version and the new version allow the administrators more robust control over their content. Since some the folks at the Comedy Festival are also administrators of another website that uses Catalyst version 4, they would automatically be familiar with the new interface.

Second, the new version of the system also allowed us to implement some of the latest coding features for HTML and CSS. For people using standards compliant browsers some of the new CSS3 display features would become apparent, but for those who don't, the design gracefully degrades to the CSS2 standards.

Working with guppy design, we wanted to employ the use a Responsive Web Design to the 2012 site. Guppy's overall design was flexible enough for us to make some simplifications to the primary design in order to allow them to work with the smaller screens on most moble devices.

One of the things we learned with this Responsive Design functionality was the interesting difference between your standard computer interface and the touch-screen interface. For years we have been using the pseudo-class :hover to visually indicate that something in the display is a live link. This doesn't work with a touch-screen. The physical interaction of a finger or stylus with the touch-screen makes the hover functionality impractical as the screen needs the physical interaction to know where your finger is. Without some sort of proximity technology, the hover state never gets seen on the touch-screen devices.

That's not to say we do not use hovers in our design implementations, but we have to consider alternatives to that functionality when we are coding for touch-screen devices. For instance, sub-menus that drop-down or fly-out based on a hover will not work. We had to build a second piece of navigational functionality that was based on touching to open rather than a hover state.

The more we work with Responsive Design, we are finding we have to rethink interface functionality, and help our design partners recognize the interface issues that come with these limitations. For instance our initial version of the menu you see in the screen shot to the right did not have a close button as part of the menu. During development with the client it was brought to our attention that they didn't know how to close the menu to see what was underneath. We felt shame for not catching this but quickly corrected it by implementing a close menu option for the mobile version(s).

The solution is simple as you can see in the open menu screen shot, but when you are not in a touch interface headspace during development, you have to make sure to remember this.

Thanks to the introduction of Media Queries in CSS3, we no longer have to build a completely separate set of styles for these mobile devices. This makes our CSS coding more efficient without having to add programming to our HTML in order to sniff out devices, and browser dimensions. It just uses the internal browser specifications to recognize the browser dimensions and use the appropriate set of styles based on the queries.

We are enthusiastically looking forward to using more responsive design in our future work. Oh, and did we mention we love the Comedy Festival? This year was one of the best yet. We cannot wait for 2013 ... if the world doesn't end.

I bid farewell

Business
Meaghan Gorchynski
Meaghan Gorchynski RRC Practicum Student
Visual Lizard
work
1 () -
fax
1 () -
toll-free
1 () -
url
http://meaghangorchynski.com
Meaghan Gorchynski Web Neophite

As of today, my three-week work placement at Visual Lizard is complete. It has been an amazing experience. I’m sad to say goodbye, but I’m leaving with a ton of knowledge about the industry, work experience and lots of great memories.

During my time at Visual Lizard I have had the opportunity to see how a professional, hard-working and quality driven team works. The nice twist about Visual Lizard is that everyone makes time to be social, and have a good time.

I really enjoyed all of the projects I worked on. I had the chance to do some CSS styling, work on an awesome 8 Bit project (which I cant wait to see animated), I made a design for a really neat App that the team has been considering building, and I made a design for one of Visual Lizard's promotional webpages.

I also had the chance to have some fun with the team. We had lunch at the Kings Head, went for dinner at the Peasant Cookery and had a fun night at the Comedy Festival.

I want to thank everyone at Visual Lizard for all your help, time and for giving me this opportunity. You guys have made this an awesome experience for me.

Cheers

Style It Share It Win It

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

St Vital Centre's Spring Share contest was so popular last year that they asked Fusion Advertising and us to put together another one for this year. We've worked feverishly over the last couple weeks, looking over what we built in 2011 and putting together an even better version. The contest offically went live earlier this week on the St Vital Centre site and it's Facebook page.

The contest hooks together with Open Graph functionality, allowing us to log participants in through Facebook and, given permission, personalize their contest entries with their names and profile picture. This also allowed us to build the contest as a small Facebook application, allowing St Vital Centre to add the contest as a distinct tab on their page.

This year's contest is proving as popular as last year, with over two hundred people already participating and building their own Spring Style boards. Give it a try while you can!

First week awesomeness

Business
Meaghan Gorchynski
Meaghan Gorchynski RRC Practicum Student
Visual Lizard
work
1 () -
fax
1 () -
toll-free
1 () -
url
http://meaghangorchynski.com
Meaghan Gorchynski Web Neophite

I have just completed my first week of a work placement at Visual Lizard, and i am delighted that I get to work with such a great team of web developers. During my Digital Media Design program at Red River I walked by their new Princess Street studio all the time and watched as it came together, never expecting I would have the opportunity to go inside.

In my short time at Visual Lizard I have had the opportunity to learn about web standards, a lot about sweet sweet 8 bit style art, web usability, and I’ve even had the chance to spend some time styling with CSS. I am really enjoying learning about their personal Content Management System called Catalyst 4. It has been created so that it can be customized to every clients wants and needs (pretty awesome). The team has also been really helpful by giving me an ongoing supply of useful information for my future in this industry.

Last week I got the chance to get to know the team when we went for lunch where I was introduced to Scotch eggs (a mind blowing experience for those who are wondering). 

Tonight, I have been invited to join the Visual Lizard team at the Winnipeg Comedy Festival. I am so pumped for some good laughs and good times. The Comedy Festival is one of the many organizations that Visual Lizard sponsors along with the Winnipeg Art Gallery, Ronald McDonald House, Aboriginal Music and Manitoba Music. I also can't wait to be involved with a possible new app design this week as well. I am excited for my second week at Visual Lizard. Bring on week two. I am ready!

A Book Apart: Design Is a Job

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

"Design Is A Job" is yet another fantastic book in the easy to read A Book Apart series. Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, this brief book is packed with knowledge you can’t afford not to know.