My Poker News Aggregator

My obsession with poker has returned. I had quit playing for about a year-and-a-half because I had gone on life tilt from the game. (If you don’t play poker, tilt is when something unbalances your game and makes you play poorly. Usually angrily.) I’m a smart guy and I thought I should be a winning player against the average small stakes player and I wasn’t. So I stopped.

Enough time passed that I had calmed down. Having a toddler will teach you a patience that playing a game never could. I was drawn back to the game. Initially playing only about an hour a week. Then two nights, then more. I was still a losing player but a trip to Vegas helped me sort that out (honest!).

But simply playing the game isn’t enough for me anymore. I’ve always wanted to combine my love of the game with my skills as a design technologist. As a result, I’ve begun to roll out my own poker news aggregator:

Chat's Poker: a Poker News Aggregator

Right now it’s a single page site inspired by Type Daily which, in turn, was inspired by POPURLS.

I rolled my own code to pull most of the feeds and add them to a local database for speed purposes and I set up a cron job to update the oldest feed every five minutes. This ensures fresh content and a quick page load. Over the coming weeks I’m going to explore better code options, like this one called “Building your own Alltop or PopURLs” from Delic. (I wish I had found that sooner…)

I’m also going to add more feeds, including hopefully more videos, some images, an Amazon bookstore, and maybe some other stuff. I’m going to build out a few other pages to break down feeds by news, instructional posts and pro blogs. And because I’m not an entirely altruistic person, I’m also going to add affiliate links to the various poker sites. I already have the top three on there: Full Tilt Poker, PokerStars and Absolute Poker.

If you want to play online poker, feel free to sign up through one of those links.

Edit: Oh, hey. It’d probably be cool if I linked to the poker news aggregator. I also linked to it upstream in the post.

The Times They Are a Changing

I think my time with Project 52 has come to an end. The idea was noble: get a bunch of people to commit to blogging at least once a week for an entire year. However, the project itself seems to have fallen down on the job.

Writing is a personal goal of mine and one that I will continue, but the artificial nature of the once a week construct has inhibited me. I structured the blog around the concept and the way I feature the current post dissuades me from posting shorter content that my time allows. At the other end of the spectrum there is some longer form content I’d like to write that simply can’t be completed in a week.

It’s also hampered the other goals I set out for myself at the beginning of the year and, I suspect, making progress toward those goals will provide plenty of things to talk about. At the end of the day I simply don’t have much time to devote to my personal projects so if I pick one it’s at the expense of the others. Between my job and my family I struggle the way most everybody else does, but sometimes it feels like I struggle a bit more.

Tips for Running an Online Contest

PhotoTuts recently ran an online contest. They had a cool prize and a cool community. They did a lot right and some wrong. It got me thinking about what goes into a good contest.

1. Give away an awesome prize.

Awesome doesn’t have to mean expensive. It just means something that is useful to your specific audience. In the case of the PhotoTuts contest, they gave away a camera. A really cool camera, the Canon EOS 550D / Rebel T2i. It was a prize designed to excite their audience and it succeeded. If your site is about poker you might give away a tournament entry instead.

2. Make the contest about something that builds community.

If your site offers photography tutorials, ask your readers to submit photos. If your site is about graphic design or web design, ask your readers to create a design that promotes your site. If your site is about bowling, have your readers submit video of crazy strikes or outrageous celebrations. Whatever you do, you want to get people engaging with your site and with each other because it creates a more passionate audience.

3. Don’t use the contest as a vehicle for spam.

This is really a corollary to the last point. With the Rise of Social Networks there has been a corresponding rise (and backlash) of social network spam contests. “Tweet about how much you love us every day for a chance to win!”

Look, it sounds great on paper. You get lots of free exposure. But at the end of the day, getting your audience to piss off their friends and family is not going to earn you a wider audience. It doesn’t earn you more passionate users. It doesn’t engage anything except a hatred of you or your company by people who had previously never heard of you. Don’t do it.

4. Be social.

Spamming social networks is not the same thing as promoting your contest on social networks. You should absolutely provide buttons for people to retweet or otherwise share the details of the contest with their network. Some of their friends likely share their interests and will want to enter your cool contest too.

5. State the rules clearly.

For the next few sections I’m going to pick on the PhotoTuts contest I mentioned earlier. Before I do that I want to point out that they had the first four steps of the contest down cold. Cool prize, building community, not spamming, and giving their members the tools to share the contest. They were the inspiration for this post both for the things they did right and the things they could have done better. That said…

Here are some of the guidelines from the PhotoTuts contest original contest page:

Photographs should be submitted at original, full resolution

While seemingly straightforward, I was left wondering whether or not photos could be cropped.

They received so many submissions they decided to break up the submissions across three posts. The first batch was posted on a Monday with a note that the following two sets would be posted “over the next two weeks.” The second batch ended up being posted on Thursday of the same week. The third batch was posted the following Monday. I’m not a mathematician, but that’s all three batches in eight days. That made it very easy for people to miss the second batch of photos completely.

The biggest confusion of the PhotoTuts contest centered around who would make it from the first round to the second. You had to read through the each of the batches from round one to find the relevant information and, worse, the relevant information changed each time.

All three batches from round one stated the following:

Voting will take place in three parts of around 50 images each, with the 10 highest rated photos of these three rounds going into a â€œfinalâ€.

Is that the 10 highest rated from each round or just 10 from across all three rounds? It could be read either way. Then, at the bottom of the third batch, was the following:

Stay tuned to the site, because weâ€™ll have the grand final coming up later this week. The top ten photos from each voting round will be put to a final poll to determine the winner!

Well, round 2 was labelled the “Grand Final” and it had only 10 photos total, instead of 10 photos from each voting round as stated. This meant that 2/3rds of the people who thought they qualified for the contest were summarily dismissed.

6. Be open.

If you make a mistake, own up to it. If someone asks a question about something ambiguous, answer it publicly so everyone can benefit from the answer. If you’re going to enforce a rule, make sure it is a rule and that you stated it at the beginning of the contest.

A friend of mine had an entry that made it into the first round of the PhotoTuts contest. It was a beautiful picture of a girl blowing bubbles:

Photographer: lainers

She promoted it to her social network asking for her friends to vote for her. Then she received an email from someone involved in the contest asking her to remove a post from a forum she’s on because it was ” a photography contest, not a popularity contest.”

Now, putting aside the fact that there is a long history of people asking for votes (See also: American Idol, Elections, Am I Hot Or Not) and even putting aside the fact that others had very clearly done the same thing, nowhere in the rules or in any of the subsequent contest pages did it state or even ask people not to promote themselves.

In fact, at the bottom of the original contest page it said “Excited about the contest? Let your people know.” Which is smart, becaues letting people know brings new people to your site, which should be one of the goals of the contest in the first place.

Sending ambiguous rules, takedown notices, and not doing what you said you would can turn an otherwise great contest into something that leaves a bad taste in the mouths of many of your contestants.

Got more tips? Leave a comment.

I’m Very Comfortable With Who I Am

The following conversation took place between Twitter, Facebook, email and in-person.

Me: The iPhone should be able to play random songs for ringtones. For confident people who aren’t afraid of ABBA’s Dancing Queen popping up.

Myshell: You are the dancing queen, young and sweet, only seventeen
Dancing queen, feel the beat from the tambourine
You can dance, you can jive, having the time of your life
See that girl, watch that scene, dig in the dancing queen

If I was still just on the other side of your cubicle I’d totally sing that to you!

Me (to Jake & Ashley): Because she cares…

Ashley: Um…. I never really knew her, but dancing queen? Please tell me that’s some inside joke?

Me: I like ABBA.

Jake: You know how I know you’re gay?

Me (to Elaine): Hey, did you see GLEE??

Me (to everybody): Dancing Queen used to be my ringtone and I can’t wait for So You Think You Can Dance to start back up on the 27th.

I’m like the Transformers: more than meets the eye. Oh yes.

Jake:

Image by niebuck

Nothing to see here… Today.

No post today other than this update that I won’t be posting.

A tweet from a friend that I disagreed with spurred me to create an infographic. I got it halfway done before I was sidetracked by yardwork, my wife, my son, a visit to my mom’s house, some deconstruction, and sleep.

The infographic in turn spurred me to want to create a post page that doesn’t have a sidebar so I can embed the graphic without having to shrink it down. Before I could do that though, I had to fix some of the rendering bugs the site has from when I launched the new theme without any browser testing. That in turn led to me drafting a post about some of the suck that is Opera 10.5.

Hey Opera, thanks for adding rounded corners and completely hosing form fields whenever I try to, you know, round them. (Protip: you can fix the bug by adding a border to the fields.)

I should have posts up this Wednesday and Friday.

Upcoming topics over the next month or two will include some infographics, me weighing in on the Adobe/Apple fight, a lesson on the stupidity of crippling browser functionality and images in order to “protect” them, samples of things I’m working on, a look at some WordPress plugins, and a few other topics. I’ll also undoubtedly weigh in on a few discussions as they’re taking place. Real-time web FTW.

Reader Question About Online Businesses

Okay, this isn’t actually a reader question. It’s a question from a friend of mine and I thought it would be worthwhile to share my reply:

Chat, do you know anyone who consults with small businesses on how to make their website make more money for them?

Sorry, I don’t. It sounds like they need at least two people:

A business consultant or business coach to help them figure out their business model and different monetization opportunities.
A web expert to wear several hats: content strategist, SEO guy, site optimization, etc. Ideally this person would be able to conduct A/B and multivariate tests on their landing pages to maximize conversion rates. I do this sort of thing but I work 60 hour work weeks and simply can’t take on any extracurricular projects.

Realistically they probably want to partner with a savvy web company. But, also realistically, said company will charge a lot up front and won’t be interested in revenue sharing or anything like that. So they should probably start with the business consultant. And in lieu of spending a bunch of cash on a web expert, I’d recommend starting off with a book like the Website Owner’s Manual:

http://boagworld.com/websiteownersmanual/

It covers the “secrets to a successful website”, evaluating objects, planning and measuring success, creating killer content, website promotion, techniques for engaging visitors, and more. It’s specifically written for people who own and operate websites rather than being written for people like me who help the people who own and operate websites.

This answer barely scratches the surface of such a broad topic, but hopefully it provides a place for people to start. I’ll write more about this in the future so if you have specific questions feel free to post them in the comments section.

Helping Passionate Users

The key to viral (or social) marketing is to make it easy for your users to help you. To do that, you need to give them the tools to help you. And to do that, you probably have to put a little bit of thought into what the best tools are.

Over at Spiceworks we have a user group called Spread Spiceworks. It’s grown organically over time and I thought I’d share some of the tools we’ve created to help our users evangelize us.

Spread Spiceworks Widget

Email an IT Pro

An email form to let people instantly tell their friends about us. You have to be careful about spammers trying to abuse things like this. To keep things simple the body of the email is actually hardcoded on the back-end. If they want to send a custom message, the same text can be copied to their clipboard.

Post a Button

This section has buttons and screenshots to post on their blogs, on forums, or pretty much anywhere that allows HTML. Clicking on a button or screenshot opens a modal box with the HTML code. (I added syntax highlighting because, well, I’m a nerd.) If a user is logged in the HTML code will include their referral ID. That way, if anybody clicks on one of their buttons and downloads the app, they get credit for it in the form of points. I’ll talk more about the points a bit later.

This section also has wallpapers for desktops, PDAs and mobiles. While those things don’t actively help people to “spread Spiceworks” they do help passively. And, more importantly, they help our passionate users to stay passionate.

Be Social

This links to our various social networks so users can stay up-to-date on what we’re doing. Elsewhere we incorporate buttons to let people share our content on their social networks.

Meet-Up

You want to know how to create a really passionate user? Get him or her together with other passionate users. Our meet-ups are user created and user run. We facilitate things by helping them organize the group, publicizing the events, and providing them with topic materials.

Speak

This goes hand-in-hand with the meet-ups. We’ve provided users with an “Introduce to Spiceworks” slide deck they can use to give presentations… if that’s their thing. In fact, we’ve provided almost 50 slide decks! And we’ve bundled them together with custom business cards that they can print. The cards use the same referral code that the buttons use.

Get Gear

This is where users can go to buy hats, t-shirts, messenger bags, onesies, wall clocks, etc., all adorned with the Spiceworks brand. They look stylish and we get free advertising wherever they are.

Points

I mentioned that the buttons and business cards have referral IDs attached to them. Actually, so do the emails and screenshots. Whenever someone downloads Spiceworks from a link that includes a referral code, the referrer gets credit and that credit takes the form of points in our community. The more points you have, the higher your “level” is in the community. Attaining higher levels is purely a point of pride amongst users and yet it’s a powerful motivational tool.

So these are some of the tools we use. What are you doing to help your passionate users?

Phototuts+ “Memories” Contest

Phototuts+ is running a contest this week called “The ‘Memories’ Photography Project,” and they’re giving away a Canon EOS 550D camera to the winner! You can read all of the contest details on their site but the short version is:

Upload up to three pictures that represent “memories” to you. Include 150-350 words describing each photo. Afterwards they’ll post the entries for people to vote on.

Here are my entries and the accompanying copy I wrote for each one. I don’t know how the photos will be presented so I had to write each description so that it could stand on its own. That means there is some redundant copy. Sorry about that.

Superhero Ash

This is my first and only son, Ashton, a few months after he turned two. Every photo of him represents a memory I cherish. This was the first day of summer. Not the official first day of summer, but the first day the pool was open, which everybody knows is the real first day of summer. He put his goggles on at home long before we went to the pool and refused to take them off.

This is superhero Ash.

I’m not a professional photographer. I’m not even an amateur photographer. I’m a neophyte. I don’t own a great camera. I own a cheap point-and-shoot. Having a real camera would mean a lot to me, not the least because it would help me capture more memories like this.

Note: I removed the bird poop from the submitted version.

This is my first and only son, Ashton, when he was about a year-and-a-half old. On a typical sunny afternoon at the park I was lucky enough to capture this shot of him and he was exploring a playscape. I love the inquisitive look in his eyes. That’s something he hasn’t lost with age.

Every photo of him represents a memory I cherish.

I’m not a professional photographer. I’m not even an amateur photographer. I’m a neophyte. I don’t own a great camera. I own a cheap point-and-shoot. Having a real camera would mean a lot to me, not the least because it would help me capture more memories like this.

Photographer: Ashton Clussman

Don’t dismiss this photo! Read this description first.

This is something that I think will be unique in the competition. When my wife and I bought a new point-and-shoot camera last year, we gave our old, 4MP digital camera to our son, Ashton.

He was two years old when he built and photographed this block of Legos completely on his own. He had already learned how to turn the camera on and off, zoom in and out, move close in or back away from his subject. He can switch the display on the camera to preview his pictures and he can even hook the camera up to the computer.

This picture represents a memory that he cherishes.

He has a natural talent and taking pictures is something he loves to do. I want to nurture that love. Winning this competition would mean the world to both of us.

I’ll post again when voting opens up!

Typography Flowchart

Need to choose the right font for your next project? Look no further.

Complex Flowchart

Simplified Flowchart

Simple Flowchart

This comes courtesy of a tweet from @cameronmoll. Cameron credited @swissmiss who credited @markboulton who credited both @nathansmith and @chrisbowler and on and on. I stopped there. Cameron was the only one to include the simplified chart so I think he deserves the lion’s share of the credit for this anyway.

Summer Reading

I have a lot of books I want to read.

I always have a lot of books I want to read. But I’m going to let you in on a dirty little secret: I tend to buy them and not read them. I want to. I just don’t. It’s for a variety of reasons: I have a toddler, I work at a startup, I have personal goals to achieve in those rare moments that I have time to myself, and the list goes on.

A side effect of this is that my summer reading list involves a lot of books that I already own, including: Boneshaker by Cherie Priest, Web ReDesign 2.0: Workflow that Works by Kelly Goto and Emily Cotler, Online Marketing Inside Out by Brandon Eley and Shayne Tilley, and The Principles of Project Management by Meri Williams.

In the category of books I don’t already have languishing on a bookshelf or nightstand: Make Love the Bruce Campbell Way by Bruce Campbell (I’m a fanboy), On Writing Well, 25th Anniversary: The Classic Guide to Writing Nonfiction by William Knowlton, Marvel Zombies vs. Army of Darkness by John Layman (okay, seriously, I’m a fanboy—don’t judge me), Website Owner’s Manual by Paul Boag, and Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug (yes, I know, it’s embarrassing that I never read this). I’m also considering Rework by the 37signal guys.

This post is my first Weekend Assignment. If you’re really interested in writing but the blank page is staring back at you menacingly, the Weekend Assignment might be just the thing you need. Ever weekend they put out a new topic for you to write about. Working within the constraints of their assignment makes that blank page much more manageable.

This week’s assignment comes with extra credit:

Extra Credit: Okay writers, get to work! Write me the opening paragraph, just (1) paragraph of a summer read you would like write yourself. Again, any genre works fine, have fun with it!

So here goes:

When John woke up he had a splitting headache. He had been drinking again the night before. So much for AA. His sponsor wouldn’t be very happy with him. It was the third time in as many months that he had fallen off the wagon. Where was he? A seedy hotel room somewhere. A pack of cigarettes was lying on the dilapidated nightstand next to him. He reached for the cigarettes and that’s when he noticed the girl’s body lying in a pool of blood. He was going to need another drink.

Infographic Inspiration

A good infographic can take large, complex data and present it in a way that’s easy to understand. Here are a few I’ve drawn inspiration from recently.

I just finished the Spiceworks Voice of IT® State of SMB IT report this week (that’s a mouthful!). It’s an industry report so you have to register to download it (PDF, 14 pages), but here are some of the 26 graphics I created for it.

State of SMB IT Infographics

Write Better Blog Posts with the All in One SEO Pack

I’ve been participating in Project 52 for several months now and I’ve mentioned it a couple of times now. It’s a personal challenge done in a public way. The challenge is to write, to blog, at least once a week in 2010. In doing so, I’ve relearned a few things. Particularly, writing is hard and it takes time.

In an effort to learn a modicum of the craft, I’ve started paying attention to a few prominent copywriters and copywriting websites. I recently came across one titled “Why You Should Always Write Your Headline Last” by James Chartrand and I thought “Great, I do write my titles last!” Validation! But I’ve also found myself rewriting posts or, because I often lack the luxury of time, publishing posts that aren’t very well written.

Then I noticed that the most coherent part of each post was the 160 character description I wrote for the All in One SEO Pack, a WordPress plugin that helps you optimize your posts for search engines. The SEO pack adds three fields to the WordPress edit post screen:

Title (recommends 60 characters or less)
Description (recommends 160 characters or less)
Keywords

The recommendations are more than just recommendations. The text actually points out that most search engines use a maximum of 60 characters for titles and 160 characters for description. You can go over that but you do so at your own risk.

As an experiment I decided to start new posts with a very small change, writing the title and SEO description first, then writing the actual post. So what was the result? More coherent, structured content. Content that actually addressed the point I wanted to address in the first place without veering off into six different directions. And those other directions? Well, I wrote those down for future blog posts.

Validation

In the end I still got it: “Why You Should Always Write Your Headline First” by Brian Clark.

Browser Prefixes are Good

I’ve seen some grumbling on Twitter recently about browser prefixes being bad. They’re not. Browser prefixes let browser manufacturers introduce CSS features that have been proposed but that are not yet part of an official specification. Considering how many years that can take, it’s not a bad solution.

The grumbling isn’t about the introduction of draft declarations though, it’s about the browser prefixes. Some peopleâ€”including some people at Opera and Microsoftâ€”seem to think it would be a good idea to get rid of those prefixes altogether. Apparently the risk of future compatibility can be sacrificed at the altar of saving two lines of code.

As it stands right now I can, for example, round the corners of a box with the follow code:

/* This example uses a non-semantic class name. Get over it. */ div.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

One day, after the spec has been finalized, I’ll be able to do the same thing with just:

/* Still not semantic. Oi vey! */ div.rounded { border-radius: 5px; }

Of course, to support those damn legacy browsers I’ll probably stick to the three line version, as egregious as that is. Here’s the thing, though. If the spec does change and is then finalized after said change, Mozilla and WebKit can simply implement the final version correctly using “border-radius” and their legacy browsers will ignore that and use the browser specific versions (-moz and -webkit respectively). Meanwhile Opera will have to change how their existing implementation of border-radius works.

While it’s very unlikely that border-radius will change, it’s not impossible. And other bleeding-edge features of CSS3 stand a greater chance of changing before being finalized. A few lines of saved code are just not worth even the relatively minor risk of having to hack around different implementations of the same feature and the headaches that would case.

Box model anyone?

Quick Tip: Importing Art from Illustrator to a Flash Library

Flash has the ability to import native Adobe Illustrator (AI) files but there are a few quirks to be aware of.

First, it imports every layer, including every sub-layer, as a separate symbol. That means every single component of your artwork will end up as a separate symbol. Completely unworkable. To get around this, anything that you want to be a single symbol in Flash needs to be converted into a symbol in your Illustrator file. Here’s the trick though: after converting it to a symbol, delete the original artwork and then drag your symbol to the artboard. That symbol will exist on one layer with no sub-layers.

Second, Flash will tell you that it can import native Adobe Illustrator files up to version 10 but it will happily try (and fail) to import your CS3 file. Do as it says and not as it does. Save your artwork to version 10 before importing.

You can’t import an Illustrator symbol library directly into Flash, at least not in CS3.

Steps

Create your artwork in Adobe Illustrator.
Select the elements you want grouped as a symbol in Flash.
Drag those elements to your Illustrator symbol library.
Repeat until you’ve created all your symbols.
Select all. Delete all. (Clear your artboard.)
Drag each symbol back to the artboard.
Save as an Illustrator 10 file.
In Flash, choose File => Import to Library.
Select your Illustrator file and you should be done.

A note about color: if you’re experiencing the classic Adobe color shift, open up your Illustrator artwork and manually assign it your monitor profile (Edit => Assign Profile…). Re-save your artwork and re-import it to your Flash library and the color shift should be gone.

Panel Notes: Is Canvas the End of Flash?

Greg Veen is explaining canvas. Showing several examples of both Flash and canvas animations.

Now showing Bespin, an online code editor that uses canvas. Very cool. I had forgotten about that project. Ben Galbraith used canvas instead of Flash for performance, font rendering and browser interaction.

Alon Salant is now showing a dashboard for a large scale storage cluster network that is written in Canvas. The dashboard graphs are rendered with a JQuery plugin called flot and canvas.

Veen asked Salant why he chose Canvas over Flash. Answer: the client was very anti-Flash. Had previously used Flash for charting and had a bad experience. So it wasn’t exactly a technical reason.

Chet Haase works on the Flex SDK. Thinks it might have been a huge waste of time and resources to code a new solution (flot). He’s giving the standard Adobe line about all the existing development work behind Flash and how people shouldn’t bother reinventing the wheel. Says people latched on to Flash because of the tools available for developing in it. He finds the Flot/Canvas API to be good, but it’s lacking tools.

My thought: the tools will come. And probably faster than Adobe would like.

Germick as a game developer agrees with Haase. No argument that existing tools for Flash are more robust and well developed. The problem is with Flash itself, not its tools.

Canvas doesn’t work in any version of Internet Explorer. Is that a show-stopper for using canvas? Everybody is providing different answers. Most agree with common sense: it is a show-stopper for consumer sites but not so much in smaller, niche uses.

Current slide is just a link: http://code.google.com/p/explorercanvas/. That’s a script that adds canvas functionality to Internet Explorer.

Canvas is a really small API. Consequently implementation across browsers that support it are extremely compatible.

Sites with Flash won’t work on iPhone/iPadd. Sites with canvas won’t work in IE, so no one solution will achieve ubiquity.

Germick, a Flash game developer, is excited about the next version of Flash and it’s ability to package up Flash files as native iPhone apps.

User Experience

Flash breaks browser experience. No back button, you can’t copy text and images, you can’t link to pages within the Flash, etc. These are extremely well-known complaints.

Haase says if it’s for a game the browser interoperability doesn’t matter very much because it’s about the experience. Salant called him out on that. It’s a very limited use case.

Overall I didn’t find this panel all that interesting but that may be because I’ve followed these arguments for a long time now.

Panel Notes: Effective Dashboard Design

Dashboards need to be visual. Scannable.

Highlighting exceptions allows people to quickly spot problem areas. Example slide was a bar chart full of gray bars with one very low bar that was red. Second example slide showed negative % change in red with other percentage values in black.

Key Performance Indicators (KPI)

Everything on your dashboard will be a performance indicator but not necessarily a key performance indicator. Example: Total sales: 9.1M â€” the value looks good. But if the percent change YoY (year over year) is -13.6% then the total sales value isn’t very good at all. Choose the right data to display.

Avoid a lot of interactivity on dashboards.
Use “word sized graphics” â€” very small charts shown inline with text data.
Use contrast effectively to make exceptions pop visually.
Your dashboard doesn’t have to look like a car or plane dashboard.
Gridlines aren’t necessarily necessary.

“Pie charts are a bad idea regardless…” Really? It’s a bad idea in his example slide with 50 different items listed out. “Round visuals aren’t an effective use of real estate.” A round visual may leave some whitespace on the table but the last time I checked that wasn’t necessarily a bad thing.

“Bar charts are fine but…” He’s showing a slide with too many bars. Lesson here is: be careful of the data set range you choose to include.

Shiny doesn’t work for data graphics and can actually cause confusion. Example slide shows a highlight on a pie chart causing one section of the pie chart to look like two sections.

It’s difficult to prototype a dashboard because you need to develop the data model to support the prototype. Suggestions for good prototyping: Focus your work on the static portions of the dashboard. Get the right layout, data, metrics, and visualizations. Vet your ideas with the programmers to ensure feasability.

There was a list of links presented at the end that I didn’t catch, but Scot Hacker did (scroll to bottom of post).

Panel Notes: Wired Digital Rebirth

Design Fidelity – the longer the publication timeframe the higher the design fidelity. Daily newspapers have a low fidelity. Monthly magazines have a high fidelity.

The better the design:

The easier the reading experience
The deeper the engagement
The more connected the consumer
The stronger the brand relationship

Wired commissions custom fonts for their magazine. Much of typography has been lost with the move to online. Fixing that is one of the goals of Wired.

Wired’s custom fonts have 10,000 kerning letter pairs! A typical font has 500.

Wired’s Tablet Project:

Combine the fidelity of print design with the flexibility of online design.

400 Designers and 1,100 Editors at Conde Naste, parent of Wired. They need a digital solution that can integrate into the existing design workflow. Conde Naste reaches over 60 million people a month.

Slide showing the flow of an article being built for Wired. Lots of steps in the process.

K4 is the database architecture that allows simultaneous distributed design and editing with remote tie-in.

What is the best way to navigate a digital publication? Influential factors: print magazines, iPhone, digital and web content, ergonomics of a tablet device, intuition and what they thought people would find easy to use the first time. Three design goals: allowing the content to shine, walk-up usability (instant, intuitive interface), and revolution through evolution, meaning not doing everything at once. The application will evolve over time.

Showing a slide diagraming the workflow to repurpose a print article for tablet devices.

Magazine browsing is a left-to-right linear process along a vertical axis (down). Tablet app uses the same flow.

Here it comes. The WIRED reader prototype is about to be shown with the current March issue on it.

iPad application will release first! Adobe worked with Wired to create this thing. Wondering if they used the new Flash-to-iPhone native app conversion to build iPad version? Demo is on a Dell. Ads are scrolled through just like in the print version. Advertising is still very important.

Showing some very cool interactive features. Image galleries in articles, 360 degree rotating 3D images, animated graphics, etc. These are the features that will make the tablet version of the magazine so compelling. Showing a second gallery implementation now–this one with thumbnails.

They’ve actually designed pages different for landscape and portrait orientation. On top of the magazine layout, that’s insane. Just showed a zoom in on an complex image. Ads with interactivity. They’ve built ways to layer interactivity on top of flat advertiser assets, like a photo explorer for hi-res photos, form interactions, 360 rotation for 3D images.

Showing built-in audio. Called Kevin Smith annoying.

Showing several different platforms, including several smartphones.

Audience Q&A

They won’t launch with usability features for sighted or otherwise handicapped users. They said they would add those features in the “years to come.” I’m willing to bet that will piss more than a few people off. Also doesn’t make Adobe look good since they’ve had longstanding usability issues with Flash.

They don’t yet know how the new tablet app will affect the website and what content ends up on the website. They want to reset the economics of print journalism.

They want to reach out and be wherever their readers are, including the iTunes store. This was a response to a question about giving away subscriber data to Apple. Good question. Surprised that they don’t seem to be very concerned about it at all though. I hadn’t even thought about this issue until the questioner raised it.

Panel Notes: The Art & Science of Seductive Interactions

Psychology Cards

10 minutes late to the start of the panel — Groupon breakfast ran long with cool conversations with cool people.

He’s talking about iLike.com where, instead of getting a form to enter artists he likes, he was presented with a grid of artists (picture + title) that he could select bands he likes. At the bottom of the page he could see more artists or he could go to the homepage. Very much like Netflix.

He clicked through 10 pages of artists. The visual nature of the list piqued his curiousity.

Recognition over Recall – select bands you know rather than bands you like.

More seductive interations on iLike: they gave him the iLike challenge where they played song snippets and rewarded points like a game depending on how fast you can identify the song name.

Increasing motivation = psychology.

What do we know about people? We’re curious. We seek out patterns. We don’t like to make choices but we like choice. Mine: We see patterns even where there are none. We seek the opinions of those we trust or we rely on the wisdom of crowds. People like to talk about themselves. People like free stuff.

His stuff: we’re lazy, self-centered, like to be the hero of the story, respond to our name when it is called out, we’re afraid of change.

If we know people are curious, how can we use that?

If you salt (seed) the tip jar people are more likely to add tips. It’s an example of the social proof (similar concept to the wisdom of crowds).

Good example of social proof: the let’s fix Outlook site that has a wave of user avatars in the background.

How to be Mysterious & Intriguing

The Hot Wheels section has tons of options but it also has a mystery car where you don’t know what you’re getting. That’s the one the speaker’s kids always want.

California Kitchen gives out a card prize but you can’t open it. You have to let them open it when you come back. It could be a free appetizer or $1,000. Great example of mystery.

LinkedIn will show you some of the people who have viewed your profile but you have to upgrade your account to see everybody who views it. It only shows you a teaser of who has looked at it though. A “leader in the design industry” for example.

Quantcast gives away website metrics for free then asks “Is this your site? Get Quantified to get more data.”

Playing Hard-to-Get

Private beta + social proof = a powerful combination, much like a nightclub where you have to be invited to get in.

Provide a limited interface. Twitter has a max of 140 characters. Rypple limits reviews to 200 characters.

Earning points to unlock features or spaces.

Sabre’s internal wiki:

60-70% of Sabre employees actively use the system each month.
60% of questions asked are answered within one hour of posting (90% in 24 hours).
Average of 30 page views per employee per visit.
Each post receives an average of nine answers.

Giving limited points to dish out to your own skillsets from a list forces you to limit your responses to what you’re really good at (great idea for a job applicant board!).

Lighten Up

Showing a “No Parking” sign. Now showing a Chili’s sign: Curbside pick-up only. All others will be crushed. Showing several other examples of humorous copy online.

Taking a Chance

You meet people at parties but you don’t really remember their names. Some sites throw in default data. Example: Brighter Planet encourages you to go green. It starts out by populating your profile with defaults and giving you a default rating. It asks for a lot of data but everything you enter affects your rating number. They only expose one form field at a time. You enter one and that form field goes away and it shows you the next one. This is both default data and a good feedback loop.

On Friskiness, Gifts & Pleasant Surprises

“Brains pay attention to what brains care about, not necessarily what the conscious mind cares about.”

What does the brain find interesting? Surprise, novelty, the unexpected, fun, playfulness.

Mailchimp has recommended sizes. If you make an email too wide it starts giving you warnings “ouch, stop it, too wide, etc.” If you make it too wide you tear the monkey’s arms off.

Will the real dopplr logo please stand up? Every visit the color bars change on the site. Very spartan site except for color. Color represents locations, cities around the world. But they don’t tell you that, which makes it a fun thing.

Why does this work?

Pattern recognition, playfulness, delightfulness.

Now What?

Sorry, no 9 tips or 5 lessons, but he is making a group of “mental notes” cards. The next time you’re sitting down with a group trying to solve a problem (ex: we need more registered users), you pull out a card and then brainstorm different ways to apply the principle of psychology that is on the card (ex: social proof). Cards will be available at the end of April. Preview packs of the first seven cards are being given away to attendees of the panel!

I missed a lot of stuff. I couldn’t keep up with the speaker. Good panel.

Panel Notes: CSS & Fonts: Fluid Web Typography

Flying cars, trips to Jupiter and web fonts: three things we were supposed to have by 2010. Cranford Teague is a funny guy, this should be good.

Speaker Info

Website: jasonspeaking.com
Twitter: @jasonspeaking

3 Things to Learn About Web Typography

How to use web fonts
How to find web fonts
How to choose the best web fonts for your design

Why does typography matter and what is web typography?

Web typography is not text in an image. (Duh. This panel might be a bit remedial.)

Sites using cool web typography:

Five font-stacks: sans-serif, serif, monospace, cursive, and fantasy.

He’s explaining what those are. This is definitely remedial. Probably a good session for neophytes. I’m hanging out with a friend so I’ll be staying for the duration.

List of pre-installed fonts on Windows and Mac: http://fluidwebtype.info/web-safe-fonts/
Another List: media.24ways.org/2007/17/fontmatrix.html

Running through the CSS syntax for webfonts now.

Hey, a good semantic idea:

Give your webfonts a custom name based on usage (Headline, BodyCopy, etc.) instead of using the actual font name, which requires you to change all the references in your stylesheet if you later decide to change fonts.

Discussing formats now, EOT and WOFF.

Sweet, he mentioned Font Squirrel’s @font-face Kit Generator. That’s what I used for the fonts on this site. Discussing font EULAs now.

All fonts on exljbris.com are available for use on the web.

Web font service bureaus

Subsetting
Local Use
Bandwidth Usage
Price Structure
Speed/Bandwidth

Limits of webfont service bureaus

Do not control font name
do not control font files
Price often a yearly license
Browser support

Webfont service bureaus

Typekit: 400 fonts
Kernest: 600+ fonts
Typotheque: 40+ fonts
Ascender: 200+ fonts
Fontdeck: 40+ fonts

How to choose webfonts

Choose for voice. Consider the phrase “I am going to kill you” rendered with different fonts.

Font-stack: webfont, web safe font, core web font, generic.

Choose for consistency. Select understudy fonts with similar widths and kerning to the primary font. This is something I’m struggling with my use of League Gothic for headlines.

Choose for style. Select fonts with bold, italic, and bold/italic versions. I’m less worried about that for headlines, but it’s important if you want to use custom fonts for body copy.

Choose for legibility. Select fonts with consisten weight and thickness with simple, low contrast strokes and serifs.

Choose for readability. Select fonts that are well balanced between letter spacing, counter width, letter width, and x-height.

My own thoughts

Free fonts can sometimes be a bit dodgy. There are good sources you can get your free fonts from though. Places like the League of Moveable Type and Font Squirrel. Once you download a font, you can inspect it and generate versions (OTF, TTF, etc.) with FontForge.

Flying by the seat of my pants

I really wanted to launch my new design before SXSW but life, job and sleep conspired against me. Now I’m at SXSW and I can’t get VMWare to recognize my local OSX web server. So… I’m just going to put the new design up there and debug it live. How exciting! If things look fucked up. This is why. Please bear with me.