Blog . Adam Bard

Litmus (http://www.litmusapp.com/) is a browser-testing web app for designers.  It’s one of many applications whose sole purpose is to take screenshots of a given web address in various web browsers, for the purposes of testing your layout to make sure it doesn’t break.

The free version of Litmus, which is all I use (and all I need) covers IE7 and Firefox 2 - the two most popular browsers right now.  This works out great for me personally, since I run Linux for design and development and therefore lack access to IE7, and since I do most design work on FF3 it’s good to have a fallback.  Crossover Office has IE6 support, which I use to get that right.

There are 23 browsers total supported by the paid version, including Opera and Safari on various OSes.  The paid version costs $25 for a day pass, $49 per month for an individual user, or $199 for a team of up to 10.

Sounds Pricey.

Yes it does.  But what really makes Litmus stand out is its great UI and ease of use.  You can plug in an address, wait a few moments while it processes, and then check your results.  You can check off those browsers that do work fine, and retest only those that don’t.  You also have a record of what you’ve tested before, so you don’t have to keep entering the same url - just click the button and you’re there.

The day pass is probably the best option for most people who would be reading this; just bill the $25 as a testing expense and you can make sure your page works on everything before you deliver it.

Everyone should be using some sort of browser-testing software to make sure you don’t get weird issues, and I recommend that everyone give Litmus a shot.  There’s nothing to lose from the free version, and you can experience the convenience of this nice little app firsthand.

Last year, I reviewed the Aptana Studio software.  Aptana Studio is an IDE, built on eclipse, designed for web designers and developers.  Since then, Aptana has made some updates, and I’ve noticed some significant changes.

You can already tell the review is going to skew positive because I’m still using Aptana, and have been since I tried it last year.  In the meantime, Aptana has hit its arbitrary “1.0″ stage, introduced several other paid product tie-ins to the IDE, and improved many of its features.

FTP Sync

I really like this feature, most of the time.  However, as of a recent update I’ve been getting 500 errors when I browse to files I’ve uploaded via Aptana, which turned out to be a permissions snafu.  Apparently it doesn’t preserve file permissions, which caused me some irritation until I figured out that you could set the default permissions for uploaded files manually.

Since last year, the FTP Syncronization feature has gotten its own little UI, which auto-tests the files in the project and performs uploads/downloads automatically, and lets you choose which files to include or exclude.  The interface is underdeveloped; I’ve never found a way to perma-ignore certain files, so I keep having to uncheck boxes or else give up and sync useless configuration files.  For smaller changes I prefer to simply upload what I know has changed.  But it’s a nice feature to have around, for sure.  I used to just use Filezilla for smaller projects, but now I practically always set up an FTP connection within Aptana so I can quickly make changes.

Addon Support

I’ve confirmed the fact that Aptana will play nice with Eclipse addons by installing pydev for some django work.  Very handy, since Eclipse has such a wealth of third-party additions for free.

PHP

Aptana has made leaps and bounds in its PHP interface.  The autocomplete is no longer ignorant to objects, and will autocomplete the part after $this-> now, which fixes a major complaint I had about the old one.  It has a much bigger library of functions than it did before, and best of all, it comes with much better HTML, CSS, and JS editing.

Cloud and Jaxer

Aptana has gotten a bit annoying about pushing their Cloud service, and Jaxer, their AJAX webserver.  I have no desire to learn about or use either of these, thank you very much Aptana, especially the latter.  I’m sure Jaxer is great for people that know Javascript and only Javascript, and care only to learn more Javascript, but to me it seems silly.  Maybe I’m just to used to the old way of doing things though.  I’m sure there’s a way to turn the splash screen off, but I’ve not bothered to look.

Still Worth Using

The only thing that stops me from recommending Aptana to everyone is that, as one might expect, it is very programmer-centric.  I think if you just do CSS and HTML, you probably won’t enjoy it as much and there are probably products that do a better job.  But, if like me you like to have a taste of all the pies, Aptana is for us.

That’s not just the joke I steal from Mitch Hedberg every time the grocery store clerk asks me if I want a bag for more than two items.  It’s also a poignant summary of my ability to multitask.

Right now I’m in school taking Electrical Engineering, which includes 5 classes and a design project to presented in April (more on that later).  I’m working for myself, and have no less than 4 projects on the go right now.  I’m also trying to find a real job come May, and attempting to maintain an assortment of interpersonal relationships through all this.  It ain’t easy.

I have no advice for dealing with this, except to recommended it to people who are bored.  I can’t remember the last time I was sitting at home with absolutely nothing to do.  If I didn’t enjoy all this, I could just take out a student loan and that would be that.  But there’s only one way to learn.

I’ve always wanted to be able to juggle.

For the last little while, I’ve been selling - or attempting to sell - website templates on Themeforest.  I’m definitely not doing it for profit; in the last week, I’ve made a whopping $7.50.  That’s barely even worth it if I was just using old designs.  No, what I’m doing on Themeforest is attempting to improve my design skills.

You see, Themeforest isn’t just a regular consignment service.  Well, it is, but their quality control is pretty good.  The first template I submitted was rejected, and a third was returned for refinement.  I spent a lot more time on the second before getting it in.  They’re not shy about telling you, either.  And I think all this has helped my ability by teaching me a few things:

• It pays to make a complete Photoshop mockup first
• It pays to have some default stylesheets lying around for typography, resets, ie bugs, and that sort of thing
• It really pays to sleep on a design and refine it in the morning.  You see things you didn’t before after a day.

Don’t get me wrong, clients are a great filter too.  But your clients (probably) don’t look at your work from a design point of view.  They read the content, check the margins, maybe make suggestions, but (if you’re lucky) assume that the design decisions you’ve made are the right ones and leave it at that.

Besides helping my sense of design aesthetics, I’ve also produced a few nice-looking pieces to add to my portfolio, which is always good. It’s also a nice way to get some exposure.

I’m not saying you should use Themeforest as a cheap source of reviews.  After all, getting one through feels good, and sites on Themeforest do tend to sell at least a few copies.  Try your darndest to get something really nice together, and then see what the moderators have to say.

Aesthetics, and Conversions

If you want to skip to the meat: Before and After website makeovers!

Most web designers are mostly graphic designers.  That is to say, many web designers value aesthetics very highly, and consider this their reason for being.  However, their clients often have a different perspective: the only reason someone is going to pay you money is because they consider your services an investment, and believe that you are going to make them more money.

Unfortunately, money-making and beauty don’t necessarily go hand-in-hand, not in the real world.  Money comes from sales, sales come from visitors.  More visitors, more sales.  Now the designer has to learn something new to provide the money-making his client wants: Search Engine Optimization.

SEO is not popular among designers.  Whenever possible, it’s outsourced, and when it isn’t, it’s an afterthought and a chore (made easier by my handy SEO checklist, I might add). Often, designers ignore SEO entirely. But, if there’s anything a graphic/web designer hates more than SEO, it’s designing for conversions.

The conversion rate is the number of site visitors that actually complete whatever the site is attempting to accomplish. If the site is hoping you’ll sign up for their mailing list, a conversion is when someone fills out the form and clicks the submit button.  If a site hopes to sell custom waffle-irons, when someone buys one it’s a conversion.

More conversions = more money.  But if SEO has nothing to do with design and aesthetics, conversion-jockeying seems positively antithetical to it.

Design vs. Conversions

I’ve spent the day reading the back posts of the blog of a man named Eric Graham, also known as the “Conversion Doctor.”  Eric Graham does not care for pretty websites in particular, and it shows as you move down the page. In fact, his attitude towards designers can be fairly vitriolic at times.  His posts are something I would only recommend for brave designers. Some of them are very thought-provoking, some eyebrow-raising, and some downright terrifying to the designer’s eye.

Most of these techniques fly in the face of any notion of beauty and/or usability.  These stomach-churning observations are made all the worse by the lingering suspicion that he’s probably right.

Most users don’t have the discerning eye of a designer, and are willing to tolerate a little ugly. Craigslist and Plenty of Fish count on it.  And when it comes to conversions, sometimes, ugly sites just work.  It’s a lot like negative political campaign ads: nobody likes them, but somehow they work anyway.

The good news is that conversion-engineered sites need not be ugly - at least not in theory.

The Science of Aesthetics

In a paper entitled “Assessing dimensions of perceived visual aesthetics of web sites,” Talia Lavia and Noam Tractinsky attempt to parametrize the concepts of aesthetics in order to gain a meaningful measure.  In this attempt, they split the concept of “aesthetics” into two: “classical” aesthetics and “expressive” aesthetics.

Classical aesthetics are those which have been followed, in general, since the ancient Greeks.  Things like typography, white space, overall layout, overall clearness and cleanliness, all fall under this category.  Expressive aesthetic elements include artistic elements, special effects, originality, and other such items.

As the study goes, classical aesthetics turn out to be more correlated with usability, as well as an impression of professionalism.  The paper has a lot of other interesting insights, but this is the point I wanted to make for today.

Aesthetics + Conversions

Mr. Graham posits here that the three primary factors affecting conversion rates are:

• Usability
• Persuasion
• Trust

The good news for designers is that of these factors, two exhibit strong correlation with “classical” design principles: usability and trust (leave the persuasion to copy writers).

Usability is something every designer should have as a main focus anyhow, and it goes hand in hand with classical aesthetics. Are your buttons easy to see?  Is the navigation logical?  How fast can a user find what he/she is looking for?

Trust includes such things as privacy policies and hacker-safe logos (ugh!), but it also is impacted by the professionalism and organization of the design, both of which had a strong correlation with the classical aesthetics factor in the aforementioned study.

A Contrived Demonstration

Besides demonstrating that I don’t really know what “contrived” means, I hope this will demonstrate my postulation that design and conversions are not mortal enemies.  And to get good and appropriate copy, I will steal the content for this demonstration from Mr. Graham himself and rework his page in a way that will be more pleasing; and, I hope, at least equally effective.  If Mr. Graham takes issue with this, he can just leave a comment or send me an email or something and I will of course take it down.

Before: This is a fairly faithful recreation of Mr. Graham’s home page, as it exists.

After: This is the exact same html, with re-organized css to make it look nicer.

Both pages have similar visual weights on similar parts of the page.  Both pages have that dreadful submit button, too.  But, and I hope you will agree, one of these pages projects a more professional, more honest facade than the other.

If Eric were to read this, he would probably point out that I can only prove such postulations through a regime of testing.  I’d love to do so, and I happily invite him to, or to provide some testing ground; as it is, I’ve not got access to anything with enough traffic to show many results.

The Bottom Line

The bottom line is that most of a freelancers’ clients’ concern is with the bottom line. If you make fantastic art, you might make beautiful pages, but they may not be effective.

Do make an effort to improve the bottom-line performance of your clients’ pages, as well as making them pretty, and you will be rewarded.

A week or two back I wrote about the advantages of preparing before you put anything in code.  Now, I’m going to give you a few ideas for things you can do — and charge for — before you have to sit down and ruin your eyes and give yourself carpal tunnel syndrome.

First, I must again pimp the Bullet Space Pen, which is a truly marvelous invention.  Sure, the advantages of writing upside-down are overstated, but the fact that it’s smaller than 8/10 of my fingers counts for a lot.  Carry it everywhere so you never lose a throught.

Anyways, here’s a few things I do with my pen and paper to be productive.

Outline a Blog Post

I’m not sure why I keep posting here.  Not many people read it, and none of those people will click on that advert at right or have even noticed the small donation button at the bottom of each post, so I know it’s not for the money.  But I’m getting better at writing for it, and that’s worth it in itself.

That’s probably a good reason why someone who’s reading this, perhaps even you, might find it valuable to blog, and by extension to write down ideas for posts and jot a few point-form outlines off.  Just list off pros and cons of something, it comes easily.

Alright fine, it doesn’t have to be a blog post.  You can outline anything you want or need to write if you like.

Make To-Do Lists

You probably shouldn’t charge for this, unless you’re writing an itinerary for a project.  Putting down what you need to do in writing is an excellent way to get the big picture of what needs doing, and most of the time you’ll find that things aren’t as bad as you thought.  Good for stress levels.

Sketch Layouts

It’s really useful to have a general idea of what I’m creating before going into Photoshop (GIMP) and mocking it up.  Details aren’t important, but figuring out key design elements such as headers, thematic graphics, and navigation can be done without having to make it too pretty.

Create Interface Designs

This sounds a lot like the last one, but this one’s talking more about apps.  Application interfaces generally have fewer design elements, but more views.  I find it really useful to sketch out all the views of an interface I’m designing, side by side, and look for overlap, spots for linkage, opportunities to consolidate or re-organize, etc.  If you keep it around, it’s also a great way to know where to put that new feature you’re working on.

Draw Application Diagrams

Now I’m talking about the back-end.  You know, the database and code stuff.  Figure out a process that your application could be doing, and sketch out how you’re going to implement it by listing the models involved and their key parameters, and then filling the page with crazy arrows.

I remember there’s a name or acronym for this, but damned if I remember.  Nevertheless, a great way to keep your program organized in your head and create a handy reference.

Logo Design

If you’re like me, and I bet you are, you have several projects on the go, each of which might benefit from a nice logo.  I freely admit that I’m not the best at this, although I’m still kind of proud of the one I made for Folk Art Creative.

But, anyone can make a logo if they try (Experts can do it on cue is all).  Just stick to black and white and try to capture the name or spirit of your subject in a wee image.

Doodle

Don’t charge for this either, but sometimes you just need to get away from the computer and create something more interesting.  Who knows, you might be able to turn it into a design.  Just let the pen run wild; the ink refills are cheap, so don’t worry.  Bonus points for doing it in accounting class.

Continuing a recent theme of design process-based articles, we arrive at Seach Engine Optimization.

Most non-technical people, which is about 90% of the populous and probably 99% of the people who pay you, consider the Internet to be basically Google.  It means a lot to them when they can find their site in search engines.  I’ve seen people get very excited over it.  Therefore, it’s worth making sure that their sites will attain a decent ranking.

SEO is something that every web designer or developer has to (or should) deal with at some point, often to their dismay.  There are many resources on this, ranging from the this handy SEO cheat sheet to this comprehensive article on Google Search Ranking Factors, both of which are from the extremely smart people at SEOmoz. You may also like Google’s official SEO Starter Guide. However, I find it very useful indeed to have a concise checklist of the minimal SEO tasks that I like to complete on every site I send out.

You can download a copy of my SEO checklist (pdf), featuring the following and more in printable form. It goes something like this:

Before Upload

• Title Tags
  • On every page
  • Unique and descriptive
  • Contain site name & key words for that page
  • Less than 70 characters
• Meta Tags
  • Description: Unique and accurate
  • Charset
  • Author
  • Keywords
• Body Content
  • Each page has a keyworded, relevant H1 tag
  • Each page has useful outgoing links
  • Key words are put in strong tags, where applicable
• Check for repeat content (Especially on CMS-based sites). This is a big no-no for Google
• View the site in Lynx to get a real picture of what Google will see, and correct any major errors.

After Upload

• Add the site to Google Webmaster Tools
• Upload an XML Sitemap to GWT
• Submit the site to DMOZ
• Get the site in Google by linking to it from my portfolio and/or from Twitter

Having a process at the ready for doing basic SEO tasks will make the process as painless as it’s going to get. Ensuring that your clients’ sites get index will go a long way towards generating goodwill and enhancing your reputation (hopefully your wallet, too).

Starting a project for a client without a spec sheet is the easiest way to burn yourself, as a freelancer. A spec sheet will give both you, and the client, a clear and complete idea of what you need to do in fulfillment of the contract.  It will also increase the chances of you getting paid substantially.

The formatting is up to you.  You can keep it electronic and modify it per-client, or you can make a generic copy with room for writing and fill in details on the spot. But whatever you do, I recommend you have the following key fields covered:

Objectives

You need to have a clear idea of what the client is hoping to gain from you.  In most cases, this is simply a presence on the internet, increased visibility, and other benefits.  Don’t promise things you can’t deliver.

Target Market

This is a handy reference for your work, and should play a big role in your design.  If your clients’ clients are elderly, consider large type and simple navigation; if your target is more youthful, you can feel free to take the easy road and use grunge.

Scope of Work

State, in no uncertain terms, exactly what you are going to do.  It might also be a good idea to substitute instead deliverables, which will be more specific.  Remember, be detailed.

Estimated Cost

State, item-by-item, the costs for design (web and graphic), development, copy writing, photography, installation, and SEO.  I prefer to present this as a checklist, so that a) I remember everything, and b) the client can see all the options.

If you charge by the hour/word/photo, you may make the cost estimated instead of final. I prefer to have a column for a time estimate, and a final amount charged based on this, for reasons I’ve detailed in the past.

Project Schedule

A due date is all well and good, but it’s even better if you can provide specific, realistic milestones for certain aspects of project completion.  You’ll be able to pace yourself better, and your clients will have a very specific idea of how long things will take, and if it would be reasonable to contact you now with changes to the copy.

Payment Schedule

You do collect payment up front, right?  It will be much easier to ask with an official-looking contract, believe me. Include an area with room for several payment milestones, even if you only intend on half up-front and half on delivery.  Who knows, your client might feel more comfortable paying in bite-sized installments as the project is completed.

Terms and Conditions

You may include this as part of a spec sheet, or as part of a separate contract, but definitely have it. It probably won’t come up, but you should definitely, definitely (definitely) have it.  A lawyer-reviewed version is best, but if your friends aren’t done law school yet you might look on the interwebs for some terms.

In my spec sheet/contract, I include a summary of each section of my terms and conditions in bold as the first sentence.  It saves time in reviewing them.

Examples

My own spec sheet is a modification of the excellent template provided by Shane & Peter here, which also contains more insight on this stuff.  If you are looking to create your own, it’s a really good place to start.

I’ve tried Internet TV.  That is to say, I signed up for the Joost Beta, back in the day. Slick interface, cool idea,  but I was never impressed by the content available; the scant network programming they were able to get didn’t appeal to me, and the rest wasn’t any better.  But, that wasn’t their big shortcoming.

The problem with most models of Internet TV, Joost included, is that they try to recreate the sensation of watching actual TV.  This viewpoint suffers from the flawed assumption that TV is ideal the way it is.

TV is TV because of its roots.  TV started out as radio with pictures.  You broadcast your transmission, and if you want more than one broadcast, you broadcast on a different channel.

Subsequent upgrades to TV have tried to maintain its format.  You choose your channel and you get shows in a constant stream.  There’s not much you can do if there’s nothing good on. If you’re just turning on the TV at some random time, you’ll probably end up settling for something you didn’t really want to watch.

Enter the Internet

Some believe that the fundamental problem with current modes of TV is that it’s too costly to get a show on the air.  “Everything is run by big networks,” they say, “who care more about lining their pockets than producing quality entertainment.  Remove the cost barrier, and you get enlightening, entertaining and interesting shows produced by people who really care.”

As you may have guessed, these nutcases point to the internet as their saving grace.

Miro, formerly democracy.tv, certainly seems to believe this.  When you download and install their software, you’ll find a number of channels conveniently installed by default, produced by regular people like yourself.  Unfortunately, the primary and immediate effect of this is to dispelling the notion that TV made by just anyone will be good.

There are certainly exceptions — I myself am fairly partial to LoadingReadyRun*, which is certainly not network programming — but for the most part, unfunded internet TV is sort of crap. If we relate making videos to writing, and assume that the ratio of good amateur TV to bad is about equivalent to the ratio of good blogs to rubbish ones, we can guess about 99% of all these videos are not worth watching. The cost barrier sets a low standard, but apparently that’s still better than no standards.

A Temporary Solution

Of course, the solution to this is Bittorrent and pirated TV shows, which would be a perfect business proposition were it not for the fact that it’s illegal.  Although I am an upstanding citizen who would never think to steal intellectual property, many of my peers are undeterred by this.  Downloading things is extremely easy and rewarding and carries practically no probability of prosecution, but unfortunately it’s also a bit involved for someone who just wants to watch a bit of TV.

Re-enter Miro.  Although the default programming is pretty bad, they don’t really advertise the fact that Miro will happily, and automatically, download torrents for you given a feed of torrent files. You can get these from tvRSS. Just pick a show and filter by one of VTV or EZTV, then right-click on the “Feed from Search” link and copy the URL.  Then, create a new Miro channel and paste the link in.  Voila!

The future of Internet TV

Miro will automatically download new additions to the feed, so you can watch the shows at your leisure, provided you leave it on.  It’s really cool.

I predict the successful incarnation of Internet TV will be the one that comes close to mimicing this; letting you subscribe to content, automatically downloading new episodes, and letting you watch what you want, when you want it.  Much better than that stodgy old regular TV.

What about Apple TV?

If all this is starting to sound a lot like Apple TV, that’s not surprising.  They pay smarter people than I to come up with these things.

But so far as I’m aware, the Apple TV won’t automatically download shows. You have to do it yourself.  If you just got home from a hard day at work and want to watch the latest episode of the Sopranos, it’s a bit of a drag to wait for it to download.

Also, the content on iTunes, while impressive, is not really complete.  Lacking such a staple as the Simpsons surely puts a dent in its viability. iTunes also focuses on single downloads, not subscriptions. Finally, while iTunes has proven that it can be extremely profitable, it’s just too restrictive to be ubiquitus.

A few more predictions:

The internet TV tipping point will be initiated by someone big, because it ain’t cheap to get proper network programming rights.  Microsoft seems likely, what with the head start of owning MSNBC and all, and of course Apple already has their fingers in the pie.  The rapid development and adoption of it will probably be fuelled by competition between Microsoft’s offering and Apple TV.  I’d love to see it be Google, though.

There will be ads. Don’t think you could escape ads.  I predict that the shows that you watch on future TV will still have ads at the 10 and 20 minute marks.  This is where the money for TV has always come from, and without it you’ve got nothing.

There will be fewer ads. More of the cost of producing and broadcasting will be paid by subscription fees, since Internet distribution will be

You will choose shows, not channels. There will still be channels which pay for the shows’ production, but they’ll be mostly in the background.  You will have the options of watching the latest episode in any of the series for which you are subscribed.

The cost-for-entry barrier will be lowered anyway.  With less risk of channel oversaturation, and the potential for small-time networks to get shows downloadable on the providers’ box, it will be easier to get on TV, which will hopefully mean better shows, in the end.

The future of internet TV will be shaped by Apple TV’s competition. When Apple is forced to confront its shortcomings, we’ll all be better off.

Of course, why wait for the future - or pay for Apple TV - when you can have something better today.  Try Miro plus torrent feeds, and let me know how you like it.

* In the interest of full disclosure, I should mention that the folks at LoadingReadyRun are actually from my hometown.  In fact, I went to the same high school as most of them, although I didn’t know them personally.  I even caught the same bus to UVic as that Graham guy, at the same stop, but we never talked.  But, I do know people who are not from around here, who watch them without my having prompted them.  I encourage you to check them out.  Oh yeah, and they’re also already on Miro.

If I had six hours to chop down a tree, I’d spend the first four hours sharpening the axe.

That well-said piece of wisdom comes from Abe Lincoln himself.  I can’t recall anything that Lincoln did which illustrates this particularly well; he doesn’t come up in history class much here in Canada.  But, that doesn’t mean this isn’t very good advice.

When you plan out your projects, you will write fewer bugs when you know what you’re doing and how you’re doing it.  Your pages will be tighter.  Your prose will be better, and your ideas more concise.  Plus, you won’t be tearing your hair out tracking down those bugs and extra words. Although for page layouts, it might have been better of Abe had ended his quotation with the words, “Also, fuck IE6.”

By the same token, you will work less in the long run, if you always make sure you know what you’re doing before you do it.

How To Plan

Be Productive Away from a Computer

This is a big one for me; I don’t spend a lot of time in one place, since I go to university full-time and work between classes. So, I make sure to always carry around a Moleskine notebook and a Bullet Space Pen, both of which are extremely worthwhile investments.  That link is the best deal on Amazon for it, by the way; I checked.

When I’m waiting for a class to start, or for a bus, or anywhere else where it’s inconvenient to pull out my laptop (yes, that includes the can), I can spend a few moments scribbling pseudocode or sketching out database arrangements or page designs or notes for blog posts or whatever.

Define a Process

To define a process means to step back and look at how you usually do what you do.  If you’re looking to design a process for complete web project, you should look at the steps you take.  Meeting a client?  Set the initial meeting location, which contract or forms to bring and have signed (you have a contract, right?), etc.  Standardize your server setup process.  Figure out what part you want to do first.  Photoshop mockups?

Decide on the order and manner of going about things in a very specific way, and your time expenditure will drop dramatically.  I just hope you’re charging by the project.