Daily Links
Evil is Back
How many work hours will be lost during the last two weeks of May? Answer: most of them.HTML Email Specifications and Best Practices - a year later
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.
Daily Links
Klouchebag
Tom got annoyed with the fuss around Klout, the horrible social-game that assigns you a score based on how "influential" you are online. This is the result.Daily Links
Bees' Decline Linked to Pesticides, Studies Find
Wiki link for Neonicotinoids. Perhaps we should, um, maybe allow scientists to study stuff before we deploy it globally? Radical idea, I know.Avaaz.org is trying to petition for the smarter study of these before we run out of pollinators. Help in the action.
Google Drive Terms vs Dropbox
Not much to think about when reading the TOS side by side. Hopefully Google changes this, since I certainly don't want any my vacation videos, kids photos, and such being used without my consent.World's Longest Invoice
A ever-growing lists of costs, billed from freelancers nationwide to deadbeat clients.Daily Links
Google Drive Terms of Services
Before you consider using Google Drive, read carefully their terms and conditions. In short Google Drive's terms of service allows you to still own your own files, but grants the company a license to do 'as it wants' with your uploaded content.The design of a signage typeface
This might be my single favourite blog article, web page, post, etc… over the past year. Lovely design. Talk about typography. Comparison charts. Did I mention typography? Enough of my geeking out already. Go read it. Enjoy!Winnipeg Comedy Festival gets a Facelift with Responsive Design
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.
Daily Links
Figure
Got three minutes and want to make some music? Shape your own music with Figure.Light Table - a new IDE concept
Light Table is based on a very simple idea: we need a real work surface to code on, not just an editor and a project explorer. We need to be able to move things around, keep clutter down, and bring information to the foreground in the places we need it most.USB Typewriters
Loud, impractical, and reeks of being "hipster", but I would still want one :)Pixel perfect vector nudging in Photoshop
Holy moly! This makes total sense now that I read it. Thanks Marc. You should bookmark the Bjango blog. Some super fantastic information being shared over there.Daily Links
CodeKit - steroids for web developers
CodeKit is a Mac app designed to increase productivity of web developers. For the price of $20 it offers some interesting features. Follow the link to see some screenshots and videos. Do not forget to check the FAQ, it is quite amusing.Zoomooz
Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.Adobe Creative Cloud
Subscription to Adobe's creative suite set at US$75 a month or US$600 a year.Yet Another Adaptive Images Script
This time with @font-face. Weird and extremely hacky, yet somehow less frightening than other versions I've seen.The State Of HTML5 Video
Regularly updated state of HTML5 Video supportI bid farewell
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