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.

Content Strategy For Mobile

Event
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

A Book Apart releases its eighth book in its must-read series! 

Karen McGrane of Bond Art + Science writes down her advice on getting your content onto mobile devices. With smartphones, tablets, and mobile devices in general quickly being adopted worldwide, being able to deliver content in a flexible manner is going to be a must-have skill!

Though this release looks targeted to copy-writers, we recommend everyone who works in the web industry give this (and the entire series, really) a flip through. Condensed and practical.

Scalable Vector Graphics In St. Vital Centre

Functionality
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 it came time for Fusion and Visual Lizard to relaunch the St. Vital Centre website, one of our goals was to modernize it as much as possible. This meant using up-to-date web standards, creating a responsive layout, and replacing Flash-based elements with CSS and JS alternatives. Doing so would ensure the site worked smoothly on current web browsers as well as mobile devices. The biggest challenge ahead of us was going to be the directory map.

The original directory map was built using Flash. Though it operated smoothly, it couldn't be seen on iOS devices, which currently account for nearly a quarter of the website's traffic. However, St. Vital Centre wanted to maintain the general functionality: being able to zoom in/out, panning in four directions, as well as clicking and highlighting individual stores. A static image wasn't going to cut it.

After some research and experimentation, we decided to build the new directory map with scaleable vector graphics (SVG).

The big gains using SVG is that it loads fast, looks great on high-density displays like the new Retina iOS devices and Macbook's, allows for direct manipulation through CSS and JS, and it works on modern mobile browsers like iPhone's Mobile Safari. Two main problems are that it has spotty support in many browsers, and that it has zero support in older browsers like IE8 and IE7. Not ideal.

Luckily, we didn't have to do anything too fancy with SVG for our directory map. Basic support was all that was needed, with some sort of fallback for those browsers that couldn't handle it. We accomplished this by using SVGWeb, a javascript library designed to provide support to as many browsers as possible and allow for a Flash-based fallback for everything else.

Fusion created the directory map as a vector graphic, to be used in printed material as well as the website. We were able to convert that vector graphic into SVG markup by importing it into Inkscape. Inkscape automatically groups paths and assigns ID attributes, but you can use its provided tools to do some general manipulation. For instance, we made sure the amenities on the map (washrooms, telephones, etc), were assigned ID attributes with similar prefixes so we could target them specifically.

SVGWeb documentation recommends keeping the SVG markup as a separate file and calling it in using an object tag. This would allow browsers to cache the file and speed up page load. We decided to include the SVG markup instead, as this allowed us to style it with CSS and assign JS events with jQuery.

Adding zoom and pan tools to the map was relatively simple using jQuery. There are multiple tutorials and libraries you can find through a google search. We also used jQuery to assign hover and click events to the map, making each store a link to the individual tenant's information.

The good thing about building it this way is that SVGWeb applies the full SVG markup and the assigned JS events into the Flash fallback. The panning, zooming, hovering, and clicking all works in the Flash version without having to code a completely separate solution.

One of the accepted tenants of using modern techniques like these are acceptable fallbacks. In older browsers, we see Flash instead of SVG. In some browsers, the popup labels get positioned at the mouse pointer's location rather than above each store. In some browsers, the popup labels don't get the little arrow "tail" on them. Not everyone is going to get the same experience, but not everyone is losing anything important. Everyone is supported in some way, but visitors who have been diligently updating their browsers will get a fuller experience.

Though only partially supported, we expect SVG to start appearing in more and more projects in the near future. With native Flash support being abandoned by mobile operating systems and high-density screens being adopted by device manufacturers, there is a growing place for vector graphics on the web.

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.

XCOM Enemy Unknown

Event
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

There are video game fans worldwide with fond memories of the original 1993 XCOM game, myself included. Its turn-based ground combat system, research resource management, and simple customization captured imaginations. I spent plenty of nights naming new recruits after friends only to send them out into the field against the alien threat.

The XCOM series floundered badly since then, but it looks like Firaxis Games (makers of Civilization IV and V) seem to be getting it back on track. Though it'll be also released for the PS3 and the Xbox 360, this might be one that I'll have to pick up for the PC... for old times sake :)