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

Bulletstorm

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

Bulletstorm is an Epic game for the Xbox 360 that looks to ignore the trend of serious-minded cover-based shooters of recent years for a more run-and-gun all-out-fun type of gameplay. There's a demo coming out Jan 25th that I gave a run through.

Unfortunately, since posting this, we discovered that the co-operative portion of the game was cancelled. This pretty much moved this game from the "must-buy" portion of my list to a "rent some weekend". The demo was amusing and it's a very pretty game, but I don't play online very much, so sans-co-op, I'll probably give it a pass.

Secret Handshake Meetup 11

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

If you work in Winnipeg in graphic design or web development, creative medium or freelancing, you might get the impression there isn't a lot of people in your field. You would be very wrong. At over two hundred members strong, the Secret Handshake group is a Meetup group for Winnipeg's freelance creative type people. Our aim is to just get out of our shells and meet once a month.To share ideas, collaborate, drink a beer, then return home to continue tweeting at each other as per usual. This will be the eleventh monthly meetup they have, and despite growing in popularity, it remains a fun and casual way to meet up with like-minded individuals.

Marvel vs Capcom 3: Fate Of Two Worlds

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

It's been ten years since the last Marvel Vs Capcom game came out, and the now the waiting is over. Easily the best fun in all of Capcom's fighting series, I have always enjoyed it's over-the-top action; seriously, some of the special moves and attacks look fantastically ludicrous at times :P Also, this series has allowed us to play as some Marvel characters we would otherwise never get to control in a video game... like Super Skrull, Taskmaster, and MODOK! I will definitely be watching out for the Xbox 360 version!

Preventing Comment Spam

Technology
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

Comment spam is something we have all come to hate. How do you keep it out of your blog? Here are a few of the methods that Visual Lizard uses in our projects.

Akismet.com

If you have ever used WordPress, then you are familiar with Akismet. It is a brilliant, behind-the-scenes, web service that you can feed your comments through. Installing Akismet is a snap if you use WordPress, as there is a dedicated plugin ready to roll. All you need to do is sign up for an account and plugin your details.

If you are using our Catalyst CMS, it is just about that easy as well. We have written a plugin that hooks your site into your Akismet account. We then pass comments, form submissions and the like through the Akismet API and it takes care of the rest. 

One of the major advantages to Akismet is that it happens behind the scenes. There is no extra field to fill in on your form in order for a visitor to submit it. This is good for your visitors and good for the health of the web. Since we hooked up Akismet, we have seen spam reduced to almost zero. Regular form submissions come in without issue and we no longer have to weed out spam every morning.

 reCaptcha.org

reCaptcha started out as an independent project to digitize books, prior to being acquired by Google. Whenever someone fills in reCaptcha on a website, the data is fed back to their systems. By taking a known word and an unknown word, the data that comes back is gathered and then analyzed to figure out what the unknown word actually is. The words are then returned to the texts that they came from, hence the digitizing.

reCaptcha was our go to method for ages. They deliver a service through their API. We are then able to style, re-align and adjust their forms as we need to in order to get them to fit into any web project. In addition, reCaptcha offers an audio version of their service if your visitors are visually impaired. Thus making their form element completely accessible. 

If you can't or don't want to pay for Akismet, then reCaptcha is the way to go. With all the sites we have that use reCaptcha, we see very little comment spam.

 Comment Via Twitter

On our current site, we are using Akismet on the contact form at the bottom. However, on our blog, you will notice that we have hooked into Twitter's API for comments via oAuth. We did this for a few reasons. We wanted people to own the comments they leave behind. While anonymous comments are sometimes insightful, they have been few and far between in the past. By attaching the comments to Twitter, in order to leave a comment, you have to be brief and attach it to a valid twitter account.

Secondly, with the authentication step, oAuth effectively adds a barrier that spam bots are not able to navigate. Eventually they will figure this out, but for now we are a step ahead.

Human Test Questions

A simple question that would be hard for a computer to answer, such as "is fire hot or cold?" or "what is 4 plus 3?". The idea behind a human test question is that you ask and get an answer that someone would have to interpret. We have tried using a few different human test questions in the past and they have worked in preventing robotic comment spam.

While human test questions can eventually be solved by comment bots, if you put a little extra work into your human tests by adding a database of a half dozen questions or so, then you will be able to thwart most of the bots for the near future. If you update your questions every so often, then you should be able to say well ahead of them.

If you don't want to use Akismet or don't like the way reCaptcha looks, then human tests are the best choice.

Naked Forms

Obviously these are the not a good choice anymore. Given the volume of robot spam out there, any naked form will get hit at least once a day if your site has any amount of inbound links. The more inbound links, the more likely you are going to get pulverized by spam. 

If, for some reason, you have to go with a naked form, make sure you that you can turn on comment moderation within your CMS or that you have a pretty robust spam filter on your inbox. That is the best advice we can give you.

If you have any other favourites, be sure to leave a comment via Twitter and we will update the post once we have explored them. Happy building!

E-mail campaigns win out over Social Media

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

A recent report from ForeSee studying consumer trends has given a report based on 10,000 shoppers surveyed. The shoppers were asked a full range of of questions and opinions regarding why they would make a purchase. The study not only looked at the quantity of visitors driven to a site but the quality of the potential visitor to purchase something.

The study showed that most people will more likely choose you because they are familiar with your brand (38%) followed by e-mail promotion ( 19%). Social Media came in at only 5%.

 

Marketing results

Other highlights from the report include: 

  • Traditional marketing techniques like promotional emails influence not only more traffic; they deliver better-quality traffic. Some of the most satisfied site visitors arrived at the site because of previous familiarity with a brand, promotional emails, word-of-mouth, and product review websites. 
  • Most people want to engage with retailers, but but prefer to do so via email or on retail websites, rather than on social sites.  In fact, only 8% of online shoppers said that’s social media was their preferred way to interact with a retailer. 
  • People are more satisfied with retailers’ presence on Facebook than they are with Facebook itself.

 

How can Visual Lizard help with e-mail marketing and promotion?

Visual Lizard offers a product called E-Mediate Mail which companies can use to target consumers that want to know about ongoing and upcoming promotions by harnessing the power of opt-in emails. 

To help you get the most out of your promotions, we have recently started offering A/B testing. This is a great tool to aid in getting your message out successfully to the people on your list. How it works is that you can have two ads created and when you send out your e-mail blast, a small portion or people on your list will get "e-mail A" and the others will get "e-mail B". Our system will look at who opened and clicked on which e-mail. Once the data is tabulated, we then send the winning e-mail ( the one most clicked ) to the remaining people on your list.

Contact us to discuss how we can set up e-mail promotion for your company.

Twitter Avatar Image Sizes

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 we relaunched our site, we put some extra work in our blog. One of the ideas we added was cribbed from the brilliant folks at Happy Cog... using twitter posts as article comments.

While working on our own implementation, we had to look into Twitter's avatars. After a user uploads an image, what are some of the image sizes the Twitter system produces? Naturally this would affect how our comments looked. Though I searched the Twitter API documentation, I couldn't find any details on the subject (though I admit maybe I just didn't see it).

After some digging and experimentation, I found the following four image avatar files available for most every Twitter profile...

  • There's the full-sized image, the one originally uploaded to Twitter. This can be almost any size and does not necessarily have to be square. All the avatars that twitter creates are based on this image, and those it creates will be square.
  • There is a big version curiously labelled "_reasonably_small" that is cropped to 128x128 pixels. This is the one used in top left of a Twitter profile, by the name, location, and brief bio. The catch is that this image size may not exist if the original image is smaller than 128 pixels... instead this image will return the next size down.
  • There is a medium sized version called "_bigger" that is used in the new twitter layout, specifically in the slide-out pane when you zoom into a conversation. It is 73x73 pixels square.
  • There is a normal sized version called "_normal" that is used as the main avatar in most every twitter list on the official site. It is 48x48 pixels square.
  • Finally, there is a "_mini" sized avatar that is 24x24 pixels square. It is used in the top-right of the new twitter layout, where users access a pulldown of settings and options.

Now, this may not be all of them. And in fact, these might have changed since I originally went poking around. Does anyone have any further information?

Bad Email Subscription Forms

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

In response to the recent CRCT UBB issue, I filled out the OpenMedia petition like many Canadians, in an effort to tell our government representatives that we were unhappy with what was happening to our internet access. Yesterday, I got a response email back from Michael Ignatieff, as did many Winnipeg-ers. It looked like a mass-reply form email. I don't really have a problem that because it would be unrealistic for him to personally send out letters everyone. I would prefer that he put all the email addresses he had in a newsletter system's mailing list and sent out a well-thought-out response efficiently so he can get on with the work of government-ing, rather than waste pointless hours of copy-pasting.

Having said that, I was not interested in being on the Liberal Party of Canada's mailing list. In compliance with the CAN-SPAM laws, the footer supplied a link to unsubscribe to the mailing list.

Liberal Email Footer

Clicking on the provided link took me to the email preferences form on the Liberty Party of Canada website. Unfortunately, this is where what should have been a simple process suddenly became confusing. It looked like this...

Liberal Subscription Form

This is a perfect example on how not to set up an unsubscribe option for your email list. What I don't understand is how anyone can look at that single "to unsubscribe completely" sentence and believe that the form beside it would actually accomplish anything of the sort. If I want to unsubscribe, I need to click a button labelled "subscribe"? That makes no sense. 

I know what I'm supposed to do. I'm supposed to uncheck all the boxes to indicate I do not want to receive any sort of emails and update my preferences. But why don't the instructions on the left actually say that? There's more than enough room there. Why doesn't the button say something like "update my subscription"? That would at least indicate that the form can do both. Or better yet, where is the single link or button that simply says "click here to completely unsubscribe"?

Instead, I get a generic thank you message that doesn't exactly convince me that I've made any sort of change whatsoever. Worse, if I click that email's footer link, I get the same form with the same fields filled and options checked... as if my previous attempt did absolutely nothing. Have I successfully unsubscribed? I have no idea.

This is not a knock against Mr. Ignatieff, the Liberal Party of Canada, or even newsletter campaigns in general. This is me being frustrated at a single, very badly put together web form. Whenever a designer or developer doesn't put enough thought into user interface, or worse puts too much thought into it, we get nonsense like this. It's like so much went into the code, into the layout, into the individual elements that the actual point, a simple "Would you like to unsubscribe?" process, was completely lost.

I started writing this article after receiving Michael Ignatieff's email. I took the above screenshots, posted them to Flickr, and put some initial thoughts down. Also, Mr. Ignatieff's Twitter account started following me shortly after I got that email. Not surprising, as several Winnipeg-ers were discussing the mass-reply and it would have been easy enough to see the resulting hashtags. In fact, it's a smart idea.

Saving my article in draft mode to finish later, I took the opportunity to tweet to Mr. Ignatieff to tell him about my disappointment about the unsubscribe form. I suspect I wasn't the only one to say so, and I suspect Mr. Ignatieff wasn't the only one to hear about it. But when I came back to writing and started playing with the form to reconfirm some facts, I see it's changed a bit...

Liberal Subscription Form, Updated

Well, that's better, though that instructional message could still be worked on a bit. But there's the unsubscribe button that I was expecting to find. Clicking did what I thought it would. Huzzah! Did someone update the form since the afternoon? Hm, no, I don't think so...

Clicking on the original email's footer link again, I got the form as it originally looked. I'm guessing this is what the form looks like to add my profile and preferences to the mailing list? And the other form is what it looks like when I'm already in the system and therefore have to option to be removed? The new "unsubscribe" button's resulting URL does imply that I have been removed.

Though I still believe the form is just too complicated and certainly makes the situation worse, I now think the real culprit here is the overly-generic instructions. If clear copy had been written for adding your profile to the system and then different copy had been written for updating/unsubscribing, it would have gone a long way to clarifying what I was looking at. And saved me a long, ranting blog post :P

TL;DR - Got a form email (aka spam). Clicked unsubscribe. Got confused by a useless form. Hate bad user interfaces, so I wrote about how to make it better. They listened. Hurray internet.

Me First And The Gimme Gimmes Go Down Under

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

The Me First And The Gimme Gimmes are not the greatest band in the world. But they might be the greatest cover band in the world. Formed in 1995, they have put out seven albums so far, with Go Down Under being their eighth. As with most of their discs, this one also has a theme, specifically covers of songs by Australian artists. I expect it to be in heavy rotation on the Visual Lizard office stereo when it comes out.