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.

Holiday Memories Results

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

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!

Beards! Glorious Beards!

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

One of our intrepid web developers went on a well-deserved vacation a couple weeks ago. As the days went by, we looked upon his empty workspace and started to fret. How would we get along without his assistance, without his wisdom, without his magnificent beard?

Panic gripped us, madness started to set in. But with a flurry of scissors and construction paper, we finally came across a temporary solution...

Beards... Glorious beards, everywhere!

When our vacationing co-worker returned, he was mightily impressed with our emergency-beards... so much so that he partook of one himself.

Immediately, he felt his charisma and charm increase exponentially!

Emergency beard!

Naturally, with such results, the rest of us had to experience the magiks of these glorious beards!

What handsome fellows we all became! What dapper gentlemen!

Emergency cookie duster!

Emergency birds best!

Emergency hobo!

Emergency soup strainer!

Emergency chin moss!

Emergency hemingway!

Manitoba Lotteries gets a Revamp

Design
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

Manitoba Lotteries has turned to local companies to give an updated look to their branding and web presence. A slick design using some of the latest technology that web standards has to offer. A design by Winnipeg branding company ClarkHuot / Cocoon and website programming by Visual Lizard Inc. has given this Provincial organization a brand new and modern look without having to look outside their own backyard to find the talent to make their site a reality.

The site has been built using standards in HTML5 and CSS3. The advantage to this are some very nice displays for standards compliant browsers while maintaining all of the functionality still needed for those few non-standards hold-outs like Internet Explorer 8 and earlier.

Several of the design elements take advantage of some of the latest styling standards found in CSS3. For instance the hover elements of the navigation have a transition effect associated to them. No cumbersome javascript! The browser itself handles the process rather than relying on javascript to do it which makes the animations far smoother. Use of transparency for design elements is also more prevalent both as CSS transparency and transparent or translucent graphics.

Part of our job is to bring the designs for the client to an interface reality. This is a good example of bringing functionality to the pretty.

Sneaking In SVG

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

Several of us in the office have an iPhone 4 or 4S. I own an iPad 3. Our first retina display Macbook Pro has arrived in the office. So unsurprisingly, a number of us are really noticing the lack of higher resolution graphics on the internet. Any 72 DPI image at its normal dimensions looks fuzzy and blurry next to the browser's crisply rendered text.

One solution I've been exploring lately is using scalable vector graphic (SVG) for some image elements. The advantage of using SVG is that it is an XML markup that gets rendered as vector graphics, so it looks sharp no matter what resolution you are at, no matter how much you zoom in. Most major web browsers have some support for handling SVG markup natively, with only Internet Explorer lagging behind... and even then, IE9 is doing a good job of it. So as long as we're not doing anything terribly complicated with it (such as animations, manipulations with javascript, etc.), it should be an option, right?

As an experiment, we decided to update our branded site lockout page. It is a simple HTML document that gets put onto a live production domain while we build the project out on our development servers. There's nothing too complicated about it, being mostly a polite text message and a link for more information. Our lizard logo, however, looked disappointedly blurry on retina display screens. We wanted to replace it with an SVG image instead.

I first installed Inkscape, a vector graphics editor with full support for the SVG 1.1 standard. It is released under the GNU General Public License, so its free for anyone to use. It is also cross-platform, so I could run it on my Mac under X11. If you've updated to OS X 10.8 Mountain Lion or higher, you'll discover that you don't have X11 available. No worries, you can instead download XQuartz, a free open-source project instead.

Inkscape can import Adobe Illustrator (AI) and Encapsulated Postscript (EPS), so I was able to pull in a vector graphic of our lizard logo. Since it's a vector graphics program, anyone experienced with Illustrator or CorelDRAW or the like will be able to work their way around the toolset fairly quickly. I changed the document size to the pixel width and height of the lockout page's graphic, adjusted the colours (200px tall and 200px wide, in this example), and saved it as a plain SVG document.

I knew using the SVG file as an image would work in most browsers, but I wanted a fallback for older browsers that did not support the vector format. A quick google search turned up a blog article by Peter Gasston, in which he describes a way to do exactly what I wanted using multiple background images in CSS.

div.class {
background-image: url('image.png');
background-image: none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

The long and the short of it is that the browser will use the normal image file (a PNG in the example above) in all browsers, including our older Internet Explorers. Then, in more modern browsers that support multiple backgrounds in CSS, it will try to override that, using our new SVG graphic, then falling back to the PNG file again.

Multiple backgrounds in CSS are supported in Firefox 3.6 and up, Safari 1.3 and up, Chrome 10 and up, and Internet Explorer 9 and up. So in essence, if the browser supports multiple backgrounds in CSS, it'll support rendering SVG natively as well.

As Peter notes, there are a couple of issues to keep in mind. If the SVG graphic has a transparent background, you'll be able to see the PNG background behind it. For our lockout page, this wasn't a big deal, though. I just set the background of the SVG graphic to the same hexadecimal colour code as the HTML body element. Since the browser renders the SVG natively, it will render both colours exactly the same, blending the two seamlessly and covering up the PNG completely.

Best of all, the final result looks perfectly crisp on retina displays. Check it out, either on your high resolution screen or just use the browser's zoom-in feature. Fantastic :)

This example worked best because the graphic we made as an SVG file was not complicated. A couple of easy paths and solid colours. No gradients, no animations, nothing complicated. Over the next couple of weeks, we will be converting portions of our Visual Lizard site with the same technique, providing SVG files for as many of the background-image graphics as we can manage.

Doing our part to make the internet pretty for all you retina display users ;)

Eight Bit Biographies

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

When we originally added the "Who We Are" tab to our Facebook page, we pulled over the content from our site's About page. By laying it out with a slightly different stylesheet, we could update both our website and our Facebook page from the same admin editors.

For a couple weeks, we were lucky enough to have Meaghan Gorchynski in the office for a work placement. We presented her with a challenge: update the "Who We Are" tab, keeping the same basic information, but giving it a fun make-over. Something that reflected our pop-culture roots and something that encouraged a bit more exploration.

Inspired by old-school video games and the Eightbit.Me avatar creator, our new "Who We Are" page has both purpose and personality. The "flip-card" portraits on our site have been replaced with a Nintendo-esque environment with our digital characters standing at our actual desk locations; if you come visit us in the Exchange, you'll recognize us immediately! Also, hovering over any of our characters will pop up our smiling faces, job titles, and links to the social media we participate in.

We're super-happy with how this turned out… and we have one or two other small designs by Meaghan that we're bolting together. If you enjoy our "Who We Are" page, be sure to let her know :)

Economic Development Winnipeg gets a new coat of paint

Design
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

Economic Development Winnipeg has just relaunched their site with a minor redesign and a major change to how they present the plethora of documents they provide. The changes to the design were both aesthetic and presentational.

Aesthetically speaking there was some honing to the colour palette and a sharpening to the fonts by our friends over at Doowah Design. The largest of the display change appeared on the home page of the site where there was a change to how the promotional elements were displayed. These are now smaller banners which can be swapped out and run over set periods of time. The former version of this promotion functionality was more prominent in the display, taking up the majority of the home page. The new design has changed the focus from those large promotions to the core behind EDW. EDW provides statistics and information about business in Winnipeg, the home page now provides more immediate access to the latest business and economic development news. It also presents instant access to the latest EDW publications for the visitor who is interested in the economic outlook of this city.

One of the features from the old version which has now been expanded is the feature drop menus. A visually appealing piece of functionality which the visitor can use to find the information they want within the site. Short concise titles of internal pages allow the visitor quick access to the information in which they are most interested.

The presentation of information has changed slightly as well. Each page of the site will now display documents associated to the topic of that page. Also, the addition of a right side column to the presentation of the internal pages provides corresponding contact information for the people at EDW most appropriate to discuss the information presented on the page that the visitor is viewing. Instead of having to go to a long list of people and description of their job titles in order to find the individual that a visitor would want to contact, the new presentation makes that information available right there.

From a functionality standpoint, there have been a couple of big changes. Firstly, in discussions with EDW, it was decided that administratively it was in the best interest of the site's development to include a central place for the management of all of the documents that are presented on the site. There is now a central place to do this, and once a document is uploaded, it is assigned to any and all categories to which it may belong, and then the administrators can assign the document to any page or as many pages in the site they wish. There is no longer a need to upload a document many times in order for it to appear in many places.

Secondly, we were asked to create an Associated Contacts piece of functionality. As described above, this piece allows the administrators to assign contacts to pages throughout the site based on the individual's expertise.

All of the development work done for the latest design and functionality was built on the Catalyst administration CMS while the site was still live and was able to draw on current data so there was no reason to worry about keeping data synchronized. This specific situation allowed for a seamless transfer from old to new. This isn't always the case, but it's nice when it happens this way.

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
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
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.

Some Visual Lizard iPad Wallpapers

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

I recently upgraded to a third generation 16GB wifi iPad, which sports an amazing high definition screen. Everything looks absolutely amazing and crisp on it. Everything except all the 1024 pixel by 1024 pixel wallpapers I had downloaded previously. WIth the new iPad's retina display having double the pixels onscreen, they looked scaled up and blurry.

So I figured, if I had to replace my iPad lock screen wallpaper anyway, I may as well create my own. A vector-based EPS file of our lizard mascot and some work in Pixelmator, I made the following...

Click on any of the thumbnails above to download a 2048 pixel by 2048 pixel PNG file perfect for use as lock screens on normal or retina display enabled iPads. I haven't bothered to optimize the images though, so they are each around 4Mb; make sure you're connected through wifi if you're downloading them onto your iOS device.

Enjoy! :D

Background Image Bug in Internet Explorer 8

Design
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

I am working on specific styling for a site in Internet Explorer 7 and 8. Our designer has provided a list of styling adjustments that need to be addressed specifically for these browsers. One of the issues we ran across is that the background image tile for the body was glitchy rendering where the background for the body would only appear if we were to resize the window or if we were to hover on the odd item.

I went looking to see if there was a bug or issue specifically for IE8, and sure enough I found several examples described throughout my search. The following CSS code works in WebKit browsers, Mozilla browsers, and Internet Explorer 7:

body {
    background: #b7b3a4 url("../../img/bg_generic.png") repeat-y center top;
}

Sadly, IE8 has a bug that requires the parent element be specific to HTML and not the BODY of the document. Normally we keep to a general rule that the HTML element does not contain any styling. We usually consider it just the container for the rest of the document.

However, in this particular case the fix for the disappearing background tile on the body is to apply that background to the HTML element instead.

html {
    background: #b7b3a4 url("../../img/bg_generic.png") repeat-y center top;
}

It's not a nice fix as the browser should be able to handle this css. However, we apply this particular fix into an ie8hacks stylesheet so that it only applies when the HTML code recognizes the browser. Just a friendly little reminder that you still have to hack a bit for Internet Explorer. 

TheForks.com Launches Version 4

Design
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

If you live in Winnipeg, you know about The Forks, where the Red and Assiniboine rivers merge on their way to Hudson Bay. Without question, The Forks is one of those jewels of Winnipeg that visitors remember long after they have left. From the waterfront dining, to the walk ways, the buzz of activity to the Market, The Forks has something for everyone.

The Versions Before

Before we jump into a technical post about what improvements we have made to theforks.com, we need to look a little at the evolution of the site. Usually by the second or third iteration of a site, most clients have a good idea of what their visitors are looking for. The Forks North Portage Partnership (theforks.com parent company) understands their visitors, but also has the unique challenge of having to represent:

  • The Forks Calendar of Events - because there is always something going on
  • Information about The Forks, such as merchants, dining, locations for parking and the history
  • Information about their other properties, such as Imax, The Forks Foundation and the Forks North Portage Partnership

Focus on the Content

With version 4, our design partners at Fusion put the focus on the two things that people want to see, relevant content and beautiful imagery. At Visual Lizard, we are big fans of keeping things simple. This version of theforks.com does just that. Pages are easy to scan at a glance, images are prominent, but hidden away until you want to focus on them, and the navigation is simple.

Calendar of Events

The Forks understood very early on that the Calendar of Events at theforks.com was one of the primary information points for over half of their visitors. It needed to be upfront and easy to scan at a glance. Mission accomplished!

Merchants and Dining

People visiting theforks.com are also interested in dining there when they arrive. With this version of the site, we have made the Shopping and Dining sections very easy to scan. The administration team has full control over what is displayed for each merchant, they can link to merchant websites and also provide photos.

Better Organization

All web sites need some sort of Information Architecture in order to exist. With this version of theforks.com, the site navigation is presented in two, clear navigation blocks at the top of the interface. The primary navigation now focuses exclusively on the content associated with The Forks. Colours have been carried over from the previous design and are used to provide visual cues for the visitor. All of the additional navigation can be found at the top of the header or in the footer. Nice and clean.

The Experience Layer

With version 4 of theforks.com, we finally got to say good-bye Internet Explorer 6. This allowed us to use some nice little CSS3 transformations in the corners and shadows. We also added several elements that are using jQuery to enhance their presentation, such as the image animations on the homepage and the photo galleries. For visitors in Internet Explorer 7 and 8, they still see the site and all the content, but they loose some of the CSS3 touches. This is acceptable degradation of the site.

Content Management System

Theforks.com has been running on our Catalyst CMS for several versions now. With this version of the site we have done the following:

  • upgraded all systems to our latest Catalyst 4 system
  • built some new tools for managing the calendar of events, dining, shopping and the bibliography
  • attached a Content Delivery Network (CDN) to the site for serving up all the static media elements, such as the background imagery. One of the primary advantages to using a CDN is that it allows your visitors to pull content from servers that are geographically as close as possible to their location. Another side benefit is that your browser gains additional connections above the default 2.
  • have multiple URLs managed through Catalyst for their admin team.
  • some awesome caching techniques to store views, models and modules, as well as clearing them when changes are made within the CMS.
  • perhaps a small, front end easter egg. This one is just for us, but good luck finding it if you go hunting

Happy to Help

Visual Lizard has been working with The Forks on their web site for almost a decade. When we were asked to help with version 4 of their site, we were ecstatic. We think version 4 is the best one yet!

Content Management and Design: Compromise

Design
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

Any design element where the content being designed is under the control of the content management administrator requires simplicity in relation to the design. Specifically we are referring to the styling of copy within a website. Since the copy generally has to be fully editable to the content administrator for on the fly updates, having complex styling in the copy is not preferred. Due to the fact that the average person making copy edits to the content isn't skilled in HTML or CSS, a complex set of styles for paragraphs or headings is prohibitive to content management software.

Some Examples

In the following we see a design element which is slightly complex when considering the simple editing functionality of the CMS. The design would like to have several colours displayed to the visitor.

As you can see the content administrator has a single field to enter the copy for the heading. Assuming that the user doesn't know any HTML or CSS, how could he or she implement the design style indicated above? There are a few options here, however we should be clear that each of these options are based on very specific circumstances.

Option One: Redesign

Since the content administrator does not have the requisite programming skills or knowledge, the designer could redesign the look for a single colour of formatting for the heading. While the look is likely not as pleasing, it certainly simplifies the amount of programming we would have to do in order to allow a basic content editor to manage colours in sentences. The graphic below illustrates  a single colour for the headline.

Option Two: Programming

If it is necessary to have the specific look to the heading we are seeing, a set of generalized rules needs to be agreed upon in order for us to be able to programmatically apply the specified look to all headings in the same fashion. This is actually a decent option as it provides a consistent look to headings throughout the site. As long as it applies to all cases it is a relatively straight-forward rule to implement.

In the example below the last word would always be green while the rest of the title is red. This could also be adjusted so that the programming recognizes that the first word following a colon is green. The more complex the rules, the more programming is required to make the design work. If it gets to the point where the rules are too complex, it might be best to look into options 3 and 4.

Option Three: No Editors

This option is not ideal as it takes away the ability of the content administrator to edit the specific copy that they would like to be able to edit. However, this allows the programmer to apply the code and styles exactly as set forth in the design.

Option Four: Modified Editors

This option is not much of an option. Seriously. Don't ever pick this one, but in theory, we could build this. However the content administrator would likely look at the editors and say "You've got to be kidding". If the editors are modified to allow the administrator to build out the heading to be as complex as a word at a time, this would allow the content administrator to have complete control of the headings on a word by word basis. This option requires a significant effort on the part of the programmers to allow for the word by word functionality, and if actually used by the administrator, a significant amount of work building out the headings.

The example below also has some limitations, such as every second field would be coloured black and the other fields would follow a sequence of colours based on the design. This option could be extended further by adding a field per word where the admin could select from a series of set colours, but at that point it really is no longer a CMS and more of a customized HTML page and Option 3 would be a more appropriate choice.

So What Is My Best Option In Order To Build The Design My Client Wants?

When it comes down to it, option two is the one generally approved by designer, client, and programmer alike. As long as the programmers spell out the options for the designer and client ahead of time, all three groups won't waste time and money trying to do something that either takes away the content editing functionality from the client, causes a redesign from the designer, or requires coding complex editors than don't end up being used.

When planning and designing for your clients, our philosophy of "keep it simple" really applies when content control is being handed over.

HTML Email Specifications and Best Practices

Business
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

Email browsers currently do not have any hard set standards associated to the display of HTML coded email. It is important to remember this as the HTML engine of email browsers, in some cases, is approximately ten years behind that of Web browsers. This means that much of the user experience related functionality that you see on web pages is not available in an HTML email. For example rollover buttons, javascript transitions, css transitions and effects, video, and audio are not reliably available in most email browsers.

The following items should be taken into consideration when developing a design for an email template.

  • Designs for email templates should be limited to 600 pixels wide at most.
  • Graphics must be sliceable on straight vertical or horizontal lines.
  • Multiple columns are available.
  • Text will not wrap around anything.
  • Transparency does not work. Any transparency effects should be done within the graphics and rendered as finished images.
  • Fonts to be used in the template as live text must be standard fonts available on all computers.
  • Safe font choices for sans-serif generally include the following: Arial, Helvetica, Verdana, Tahoma.
  • Safe font choices for serif generally include the following: Times New Roman, Georgia, Garamond.
  • Viewing images in emails is a setting on each person’s individual email browser. Assume that images may not be visible in the email. It is best to have all of your copy live text.
  • Video and audio cannot be embedded reliably into email templates.
  • A permanent video or audio file can be embedded into the template ahead of time as long as the file is hosted elsewhere on the internet. Best practice is that videos are linked to their actual web site.
  • Rollovers for links and navigation are limited to CSS hovers for links. These will only work in email browsers that support the CSS standard, otherwise they will only appear as standard links.

For more information on standards in email, please take a moment to visit the Email Standards Project. Visual Lizard has implemented its own targeted email system for which we develop email templates that follow the current limited standards found in the Email Standards Project. It is our ambition within all areas of web development to promote standards. We invite our design partners to join in that effort.

Visual Lizard helps the Winnipeg Art Gallery win a 2010 Signature Award for Best Website

Business
Doug Ross
Doug Ross CFO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:112
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Doug Ross Master of Space and Time

..

Visual Lizard is proud to announce that one of our design partners, Velocity Branding, has won the 2010 Signature Award for best website as well as a people's choice award.

The team here at Visual Lizard put an incredible amount of time and keystrokes into developing the site. We enjoyed participating in the realization of the design and vision that Velocity, the WAG, and Visual Lizard brought to the site. We are also proud to be recognized for our programming ability.

The site runs on our Catalyst Content Management System, which makes editing the site extremely easy and allows staff at the Winnipeg Art Gallery complete control over the content in the site. For WAG.ca, we developed a sophisticated template system that provides a degree of layout choices, which would normally be reserved for hand coded pages.

We look forward to working with Velocity Design on future projects and we sincerely hope you enjoy using the WAG.ca site as much as we do.

Using the One True Layout

Design
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

The issue that we run across when trying to apply the One True Layout concept in design is that the browser compatibility isn’t quite at the same level of development. When I say browser compatibility I usually mean Internet Explorer. With Microsoft now into its 8th iteration of Internet Explorer, the compatibility is almost completely there. However with the majority of people making their way around the web, Internet Explorer 7 is still their primary browser, and it still has its quirks.

The One True Layout, which is one of the primary tenets of web development to completely separate content from design, looks at rendering the content before any other element in the code. The Internet, being a content driven media, is concerned with supplying content to the user first. To that end the content in the code should be rendered first. This enhances a site’s Search Engine placement and accessibility by rendering relevant information first rather than the other elements of the site.

So the rendering of the code to do the One True Layout would be roughly like this.

  1. Content renders first
  2. Header display renders
  3. Navigation renders
  4. Footer renders

Normally when building web pages we render elements in the order we want to see them appear in the browser. By using CSS and taking advantage of modern browsers we can shift the elements to where we need them to display while behind the scenes the order can be focused on providing the content first. This works perfectly with compliant browsers like Firefox, Safari and Internet Explorer 8. The difficulty comes when we try to use Internet Explorer 7. One of the quirks of IE and rendering absolutely positioned block items is they seem to disappear. For instance the header renders after the content in the code, but the header needs to appear first. In IE 7 the header disappears using the standards compliant css.

To fix this, with some experimentation, I set the header style to display inline. This caused the header to reappear. Then by setting the absolute positioning of the header to top: 0; positioned the header at the top. Setting the left positioning to 0 brought the header to the correct spot aligning the header with the content area.

These adjustments work for a fixed width layout. I still have to do some experimentation with a flexible width layout, but generally the One True Layout works very well and allows for greater flexibility to site design while maintaining the focus on content.

These adjustments unfortunately do not cover IE 6, however as IE 6 is now a ten year old browser, the stylesheets that we are starting to provide for this browser are reflecting its obsolescence.

SCU Launches its new online presence

Design
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

Steinbach Credit Union has relaunched its website with a new look. In preparation for a change in its online banking software and after four years with its previous layout, SCU was looking for a fresh look. The latest version of the SCU site has provided SCU with our new and improved Catalyst 4.0 Content Management System.

The new CMS provides them with substantial flexibility in placing their content throughout the site. The content administration is very straight forward and keeps the content separate from the design and layout which allows the site to have a cohesive look during the maintenance and updating of their content.

The design presented us with some specific coding and stylistic challenges.

The home page displaying the three section options had to display horizontally centred dependent on how tall the browser window was set, and if the user changed the size of the window, the positioning would adjust to compensate. Using some specific javascript and css rules we were able to accomplish this. Once we had it working in highly standards compliant browsers we moved on to making it work on those browsers that have not yet worked out all of their standards issues.

/

On the three landing pages we were asked to provide some customization functionality in order to personalize the user’s experience on the site. We built and provided a few widgets for this personalization. For those people who registered to customize their landing pages, they can choose from up to three little widgets at this point.

/

There is a Stock Watch, Weather and Currency Conversion widget to choose from.

/

/

Additional touches to the site included some javascript functionality to slide content left and right so as not to have the page scroll. With some creative css and javascript coding we were able to achieve a site that while some pages require scrolling, the navigation and footer do not move or disappear allowing the user to have constant access to their navigation.

/

In a number of cases the design which we had to apply to the site was somewhat counter-intuitive to what is standard practice in web development, however with a lot of work we were able to provide SCU with the design they wanted working the way they wanted. It must be remembered at all times in the service industry that the client’s perception is always correct.

This Is Why I Love Whiteboards

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

Yesterday, what I thought was going to be a quick thirty minute task turned into a six hour interface rebuild. Sometimes, you just need to step back from the screen and rethink the whole thing... preferably with smelly markers and lots of drawing space!

Easily one of my favourite additions to the Visual Lizard offices is the wall of whiteboards directly behind our workspace. More than once, I’ve needed to bounce an idea of one of the others, and having a giant drawing surface within reach makes everything easier.

The to-do item I was tasked with started out simple enough, but quickly became very convoluted, with concepts and variables conflicting all over the place... and it seemed every solution only twisted something else out of shape! Inevitably, I was forced to step away from it for bit to clear my head (and have lunch). When I got back, Dwayne and I approached the problem on the whiteboard, trying to wrap our head around what we were trying to accomplish without any code getting in the way.

Toggle/Reveal UI

In the end, we were able to quickly turn my growing problem-task into a series of coherent requirements, and a couple hours later, I was not only finished, but had managed to add some functional and aesthetic improvements. :)

"On Screen Manitoba" Launches

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

Working with Visual Lizard and Guppy Design, On Screen Manitoba has revamped and relaunched it’s website!

Click to visit On Screen Manitoba

The new website features all the information it’s visitors and On Screen Manitoba members have come to rely on, but now sports a number of new additions. Keep track on important upcoming dates or events, look over past events in the photo galleries, enjoy trailers and promo reels in the video gallery, and members can update their directory profiles by logging in behind-the-scenes!

Click to visit On Screen Manitoba

On Screen Manitoba is an innovative membership-driven association that leads, builds and represents the Manitoba motion picture industry. Their membership represents the full spectrum of individuals and organizations (production companies, labour groups, distributors, broadcasters, suppliers and supporting organizations) that make up the motion picture industry in Manitoba.

"Culture On Every Corner" launches

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

Tuesday afternoon, Visual Lizard went down to the CanWest building’s courtyard for the official launch of the Culture On Every Corner website, an exciting new initiative to promote Winnipeg’s vibrant arts and culture scene.

Culture On Every Corner downtown launch

Culture on Every Corner is a consortium of eight non-profit Winnipeg arts organizations proudly supported by Destination Winnipeg, Travel Manitoba and Manitoba Homecoming. We are proud to have worked with McKim Cringan George, Avenue 4/Inergy and Frantic Films in building this new website dedicated to bringing Winnipeg’s vibrant arts and culture experience to visitors locally and worldwide.

CultureOnEveryCorner.ca screenshot

Click here to visit the new Culture On Every Corner site, and come discover why Winnipeg is Canada’s Culture Capital.

The first sneak peek at Visual Lizard's new branding and identity

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

New stationary and business cards!