Last week's Patio Friday was another fantastic day. With the imminent threat of rain in the forecast, our good friend Karin suggested the covered rooftop patio of The Pilot in Yorkville. To our oh-so-pleasant surprise the sun shone brightly over our afternoon and we lingered from noon or so until after six o'clock with some new and familiar faces.

I've always known that Toronto is a hotbed of business, technology and artistic talent and have had that insight tuned sharply over the past few weeks as Patio Friday has seen a steady rotation of engaging and bright people join us at the table for good food, beverages and lively conversations on life, love, and the world-at-large. 

It's not all fun and games though. Productivity can be pretty high when people are relaxed and with other like-minded folks. Prime example: the past few Patio Fridays have given the crew from Say Yeah great opportunities to hammer out ideas on some awesome projects with World Wide Web Foundation, TO Events Calendar, I Need Sugar Launch Party and more covert ops I'm sure will see the light of day over the Summer months. Hey, if you've got to work on a Friday afternoon, why not do it in the sunshine?

Last week's conversations included the Iran election and the impact of social media on world politics, international import/ export of food products, urbanism and the impact of this shift on the economy, interpersonal dynamics, travel to Kenya, and new projects on the go including exciting stuff from @qasim, @shopcauses and @zoocasa. While the intent of Patio Friday is not to sell or promote any business, product or service, we can't help but share the cool things we're working on; we are, after all, a passionate community.

Those of you that aren't able to join in the fun and meet these awesome people should still have the opportunity to know who joins us and what's going on in the city. To this end we're going to introduce you to the awesome people that sit at the table each week and offer a brief review of the restaurant. Consider this an expanded #followfriday supplement. If you're not already following these fine people, check them out!

@SaulColt
Mayor of Twitter, Smartest Man in the World, Head of Magic (R) at Zoocasa and graduate of the Handsome Boy.
Saul's Blog.

@RJToronto
Displaced West Coast Buddhist hippie, advocating for refugees and human rights!

@MissVerna
Solutions Specialist at MSN TO. Sometimes I know what I'm doing. Sometimes I fake it. Happily married mom of 2!

@craigritchie
Web Strategist, Entrepreneur, Usability, Community and Social Media Builder. Generating and cultivating Big Ideas.
Craig's site.

@thekarin
Fun, energetic, traveling foodie arty ENFJ trendhunter ninja at Cyberplex; into Advertising, Social Media and Strategic Planning. Travel, joy, design and film.
Karin's blog.

@KevRichard
Recent Marketing Grad. Writer and analytical thinker. Interested in tech, social media and digital strategy.
Kevin's blog.

@Qasim
Canadian web producer, audio visualist/ new media experimenter, dj, amateur chef and well, the list could go on forever...
Qasim's site.

@CamDePutter
Consultant at Toronto PR agency. VP Marketing for local networking org CAWEE. Love great communications, cool business stuff, and food.

@Paul_Henman
Englishman living in Canada; scrum master / agile project manager; Linux geek; F1 fan; badminton player; photographer
Paul's site.  

@JeremyWright
Dude @ b5media.
Jeremy's site.

@hyfen
The guy behind @torontoist, CUSEC co-Chair (student software conf), Varsity online editor, UofT computer science student, Ruby developer, cyclist, photographer
Andrew's site.

@Merlene
One of the ElevenMoms, I'm a full-time Geekette and proud of it. One half of the TwestofTO team.
Merlene's site.

@RandyMatheson
Toronto based Social Media Strategist, Interactive Designer and New Media Know-it-all at Delvinia Interactive. One half of the TwestofTO braintrust.
Randy's site.

@Ali_Johnson

@MikeLevitt

And last, but not least, the patio review. The Pilot is a great spot! It's one of the few rooftop patios in the city - with the added benefit of retractable canopies for rainy days. The menu is chock full of tasty treats, the prices are reasonable and the staff is super friendly - even if slightly over-whelmed by a large group of people coming and going throughout an entire Friday afternoon. Check them out the next time you're in Yorkville looking for a sunny meal and nice people.

Since early May we've spent time on patios in Kensington Market, St. Lawrence Market, Yorkville, and King St. West. Feel free to let us know if there's a patio in the city you think we should check out or join you on. Ideal spots will be able to accommodate large groups and WiFi - western exposure for optimal Vitamin D is a big plus! Have laptops. Will travel.

Get in touch with us on twitter: @PatioFriday, @PaigeSaid or @Smack416

Article originally published on Paige Freeborn's Brands, Business, and Buzz Blog.

Photo courtesy of Kevin Richard.

Yesterday we published an article on designing websites in Illustrator. There was a link at the end of that article for a vector version of Safari 4 for use in mockups, portfolios, and any other safe and respectable use you can think of. Here's that link so you don't have to scroll through the on pixel discussion:

Download the vector version of Safari 4.

I personally don't understand why anyone would use a photo editing program to design a website, but I also recognize we're in the minority here. So here are some reasons why we use Illustrator when we're designing websites, along with some tips and assets to help you do the same.

As a designer, working with vector graphics over raster images gives you several distinct advantages. Specifically, you can move and swap groups of elements with ease, including adjusting their size, shape, colour, and layout almost instantaneously, without regard for diminishing resolution or sharpness issues when scaling, or colour issues when trying to replace colour or fill raster images.

These benefits are particularly useful for the web designer who may be working with changing page structures and user interface elements, such as button sizes, shapes, and colours, or shifting menus and submenus, including size, location and colour adjustments. 

As an added benefit, you can print out high quality preview images for review or for your portfolio. 

With all this in mind, here are some tips and assets to get you started using Illustrator as a web design tool.

For starters, you need to understand a pixel issue that can be solved with some careful planning. It's easy to starting placing elements off pixel in Illustrator which has the unfortunate result of making edges fuzzy. Website images are pixel specific, so if you have a 1 pixel line that is half on one pixel and have on another in Illustrator, it will end up being lighter or have fuzzy edges when you create your web image. To combat this there are two helpful Illustrator techniques, and the rest is up to you.

Step 1: Turn on Pixel Preview. 

Pixel Preview will help you spot soft edges that are the result of off pixel elements. You'll find pixel preview under your view menu, as follows:

Here's the difference between an image with Pixel Preview turned on, and one without Pixel Preview. 

Without Pixel Preview:

This highly zoomed in browser template looks perfectly smooth without Pixel Preview turned on, but that's deceptive when it's a screen resolution website you're designing.

With Pixel Preview:

With Pixel Preview turned on, zooming in shows you the actual pixels which make up your on screen image. This really helps spot off pixel lines which will appear blurry instead of crisp. Here's the exact same image, with elements sitting at .5 vertical and .5 horizontal coordinates instead of precisely on pixel.

You can see here that both horizontal and vertical single pixel crisp lines now appear disjointed or faded across two pixels. That's because they are. This means when you save these images for web, your clean lines become muddy pasty things that make your website look less than stellar.

So, what else can you do in Illustrator to prevent off pixel elements.

Step 2: Get friendly with Illustrator's Transform window. 

First and foremost, as shown below, ensure that the little black square on the grid of 9 squares in the Transform window is in the top left and not in the centre. Now that you've done this, you can easily see, when drawing lines or placing shapes, when an element is not precisely on pixel. 

Specifically, instead of the whole numbers shown above, you'll see decimal points. You don't want decimal points, particularly on your x and y axis, though rounded elements and text will often not be perfect. As much as possible, it's ideal to clean this stuff up. Here's an example of what you don't want to see:

If you are seeing this, the solution is to simply delete everything following the decimal points. If you do this, Illustrator will shift the element onto pixel.

So that's really all you need to know to make sure that your Illustrator elements are crisp and clear when you're designing for the web. Now, to augment your presentation and portfolio work, here's an on pixel Illustrator file of the Safari 4 browser window so you can top off all your web work with the latest browser, highlighting URLs and page titles, and making sure you never again forget to make a favicon. Enjoy!

We just participated in our 4th Patio Friday of 2009 this past Friday, June 5. What a treat. Rahaf was in from Geneva in support of her book launch, so we had the opportunity to get Craig, Dave, Rahaf and I together to talk World Wide Web Foundation and the future of the Web.

Matt and I also took our early arrival time as an opportunity to discuss next steps for the Toronto Events Calendar. Really, why would you sit in a stale air, bulb lit meeting room when you had the chance to enjoy some sun and air. Invigorating.

We're looking forward to continuing to be at Patio Fridays throughout the summer and would love to see you out, whether to discuss a project, idea, life in general, or just to enjoy the good company.

As Jevon said, "It looks like @patiofriday is going to be the thought commons in Toronto this summer. Get there and share." Let's make it happen. Fun in the sun, indeed!

Keep on top of the goings on with the Patio Friday Twitter account.

Patio Friday pics on Flickr.

Design is about communication. And effective design doesn't bewilder or misdirect. Symbols and images have the ability to clarify, but in the worst case they may completely obscure what you're trying to communicate.

Case in point, EA's current home page for The Sims: 

With this design they've managed to turn a a language selector into a debate about nation. Canadians and Mexicans are not represented but these flags. What do the Spanish speaking contingent of North, Central and South America click on? The flag of Spain? Customers in Quebec are to look for the flag of France? In the best case, this design is tedious. In the worst case, it's offensive. 

An incredibly poor design decision that would have been more inclusive, but still unclear, with the use of a globe, and solved completely with a language selector (barring any sales based regional requirements, which opens up a whole other issue of whether or not they support North American Spanish or French, etc). 

More here from Ben Lucier, who started this topic of discussion earlier today.

Update, Jun 4:

Just few days later, and I'm at the American Apparel online store. Now this is how you do it right with flags:

Update, Jun 22:

And here's yet another reason not to use flags as a landing page language selector: imagine if this was Apple's landing page.

It seems a lot of companies are interested in hearing what people have to say about their websites. I get that. We have a Feedback button to the left for just that reason. Whether it's to give constructive criticism, point out a feature we should have on our blog or the Toronto Events Calendar, letting us know if something's not working as you'd expect it to, or even to congratulate us for doing a good job. These are all great reasons to solicit feedback and I can say we really appreciate people taking the time to contact us with whatever's on their mind.

Now, the more interactive your site, and the more people you have using it, the more important a good feedback strategy is. And it's important to solicit not just general feedback, but contextual feedback as well. For example, we have our Say Yeah project within Get Satisfaction (see that Feedback button again) which is for this blog but, even though the Toronto Events Calendar is at the same domain as the blog, we've created a separate project because it's contextually different content and a different application. Mixing the two of them up would create a convoluted mess of feedback, issues, and feature requests between unrelated projects (the blog vs the calendar). This would be a mess for us and a mess for people trying to use the different sections of the site.

Getting beyond the reasons for surveying, let's look at the tactics. You've got the Feedback button (hey, it's still there on the left) and you've got third party survey sites that you can push people to, either through contacting them directly or showing them a survey request while they're browsing your site.

So, how's that work? You've got your user kicking around your site. Maybe they're even in a specific section of your site that you're looking for more info on. Are people enjoying the content there? Is there something missing from this area of the site? Whatever your reason, now that they're there, it's time to hit them up with a survey request so you can improve the user's experience.

What's so great about this is how interested Azure is in getting my feedback. Let's take a look at that intro paragraph: 

For the next minute we're all ears. Tell us about you by answering our mini-survey questions and help us make your visit to Azure online more fun, more informative and very worth your while. We're listening.

Well, I'm excited. This is a company that really cares. They want me to enjoy my time on their website. Fun and informative, they say. And, most importantly, they're listening. Unfortunately, I had no idea what was going to come 'Next' so I closed that window. But if Azure is still listening, here's what I have to say to you:

1. If you want my feedback about how great your site content is, and how fun and informative your site can be, how about not slamming a huge giant popup on top of the same site that I browsed to with the hope of finding some great content. Guess what you just did? You ruined my fun and prevented me from enjoying your content. You know what that does? It pisses me off. And you know what I did? I closed the box and left your site. And I haven't been back. And now I'm getting mad writing about your ridiculously foolish marketing behaviour.
2. But wait! There's more. Not only did this obnoxious box fill my screen while I was trying to browse your site, but it popped up within a minute of me landing on your homepage. I literally just got there. I have no idea what you have to offer because I haven't even clicked on one link. No chance to look around, much less do anything fun or informative and you're popping up a survey request that inevitably would ask me all sorts of questions about the experience I've been having on the site. Could this be more foolish? No. No it couldn't.

Now I know you didn't intend for your interest in me to lead to this, but when you're effectively blocking my entry to your retail store while asking me to talk about how great the store I haven't yet stepped into is, well, I'm going to walk away perplexed and probably spend the next week and a half telling everyone about the bizarre experience I just had. Wouldn't you?

Not to pick on Azure alone because about 95% of the survey requests I see are pretty much the same. Azure's just done a particularly impressive job of entirely covering their website, rather than the standard smaller, distracting popup. Something along the lines of this: 

Not too bad compared to Azure, covering a much smaller area of my screen, but it animated from the left all the way over the body of the article I was reading and stopped right in the middle of that article. How is that helpful ESPN? Well, at least they're interested in my opinion as well. Or are they? Their survey is for some kind of research project. Safecount? Act now? Wtf? What is this survey for, research, security, or the next Ed McMahon draw? How utterly confusing. CLOSE, indeed! Idiots.

Alright, so what's left? Kind of a simple idea here but, how about if you ask me to do a survey, are explicit about what it's for, and the request doesn't interrupt the content I'm trying to get to. Possible? Why, yes, yes it is:

Apple's survey request is clear ("...take part in a short survey to help us improve our Apple Support..."), it's contextual (about Apple Support and in the Apple Support section), it doesn't obscure any page content (they simply inserted it just below the menu, pushing down the regular page content a few dozen pixels, not covering it), and it showed up after I had a chance to actually browse their Support section and read some articles.

So, there you have it. Simple, clearly written, non-obtrusive survey invites are possible, even if you're trying to say more than what a nice Feedback button hanging out on the left side of your website says.

Stick Stick Bang Bang was created as an outlet for great artists to share their work in new and creative ways. Starting right now with templates for iPhones, iPods and Zunes, you have the chance to make your artwork available to your fans as skins for their most popular gadgets. What better way to share and promote your art than by allowing your fans to carry it with them wherever they go?

For artists, the great news is that you set the price for your work, per device, while Stick Stick Bang Bang handles the secure order processing, vinyl printing, and shipping. With a process second to none, you can rest assured that your fan will be ecstatic, from the great art they'll choose through to the speed and care to which the vinyl arrives to them, complete with easy to understand application instructions.

So if you're an artist who's looking for an outlet, or you know of someone who does great work, head on over to Stick Stick Bang Bang.

We're happy to announce the Toronto Events Calendar, a central location for all of Toronto's design, technology and cultural events.

There are already too many events sites, why should I use this one?

We created this calendar to group all of Toronto's events together. We're not trying to replace Facebook, Eventbrite or other event systems, we're just here to help you find relevant events from those sites. As such, this calendar gives a quick overview of each event that is listed, with a link out to the official event page where you can go to find out more and sign up. It'll also tell you what hashtag to follow on Twitter, so you can get in on the conversation.

And, yes, we're super thankful for the hard work that's been put into the Torcamp and TOGeekEvents calendars, but that's just the problem: one person managing a Toronto calendar is near impossible with all the events that come and go on a daily basis. We want to save the aggravation and wiki the heck out of this, so anyone can add or edit any events in this calendar.

How does it work?

Events that are posted on the calendar are public. Anyone who visits can view all the events on the calendar. If you'd like to post or edit an event, you just need to register with an email address, username and password. We never share your info with anyone, not even leprechauns.

This won't work without you, so please share your events and the ones you're attending with the rest of the community. We'll keep the data as open as possible and find ways to improve sharing as we continue to build out the calender and make all our lives easier.

What's next?

This is just the first step in creating a truly useful event calendar, and we're looking for your help. We've got lots of ideas on how to improve it, and I bet you do too, so let us know of your suggestions on how we can make this calendar more useful. You can use the comments, hit the feedback button on the left, or email us directly at events@yousayyeah.com.

Check out the calendar

You can access the calendar by clicking on the 'Events' link in our main menu. So check it out.

No matter what type of system you're building, be it a website, web app or desktop app, user testing is a vital tool that will allow you to identify problems in your system and help you build a better experience for your users.

It's not necessarily a costly and time consuming endeavor. In fact, a few friends and some food may be all you need to get some great insight on how to improve your system.

Here are some introductory tips to help you get started towards building a better experience for your users with the help of user testing. Note that I'm using the term 'website' to describe a project or system, but this process can be applied to any activity that requires user interaction.

Assembling a team of testers.

The first step in user testing is assembling a group of people to test your website. This may require some bribery in the form of food and/or beer (it's best to save the booze until after the testing). An easy way to assemble a test group is to invite friends, family or business associates. Whenever possible, try to assemble a group of people who are representative of your target market. This may involve going outside your social circle and may require some extra financial incentives for your participants. You should also avoid using people who have directly worked on the project (ie, developers) because their knowledge of the website may be too intimate to offer new insight.

Define tasks.

It's important to provide your testers with a selection of tasks you would like them to complete. The tasks should be as specific as possible without guiding the user. For example, you could ask the user to 'Comment on an article'. This may entail creating a user account, logging in, clicking on an article, reading it, then adding a comment, but you don't want to provide a step by step account of how to add a comment, the goal is to allow them to figure it out on their own, and watch for points of struggle or failure.

Go away.

Have you ever watched a movie, and then watched it again with someone who has never seen it, only to have them ask a hundred questions about the plot as it's unfolding? They're looking for answers rather than letting the plot unfold and explain itself. The same thing can happen if you're around to answer questions or concerns about your system while users are testing it.

You need to discourage questions from your users while they're actively working through assigned tasks. The goal of user testing isn't to ensure that your test groups understand how to expertly navigate your website. The goal (at least one of the goals) is to identify the problem areas so you know what to fix. If you walk your users through the system, you're only hurting your ability to find the problems that will affect your real world users when your website is launched.

The best way to discourage questions is to go away. If you leave your users alone, rather than watch over their shoulder, you won't be there to guide them. Setup a camera (webcam or otherwise) and candidly record the user as they work.

This can be a hard thing to do, and you might feel the urge to defend your website when you see a user struggling and swearing. Resist this urge! People using your website once it's released won't have the luxury of asking for your help, and neither should your test group.

Ignore what they think.

Asking a user what they think about feature XYZ will result in them telling you they'd prefer if the colour was blue instead of red. When it comes to interacting with your system, their opinion is less important than their actions. Your users are going to relate to your app based on previous experiences. Their success or failure in interacting with your system is going to depend a lot more on their subconscious recollection of similar interactions they've experienced than what they consciously think.

Rather than querying them on their thoughts about how things work, you need to watch their actions and expressions and draw appropriate conclusions. For example, confused and frustrated facial expressions and hand gestures are a good clue that something isn't making sense to the user. Aimlessly clicking around, browsing back in the web browser, and high usage of navigation elements are indications that your user is having trouble figuring out where to go or how to find what they're looking for.

It's helpful to encourage your testers to verbalize how they're interacting with the site as they're doing it. For example, you'll have a better idea of a users mindset if they say "I'm submitting my web form. Waiting? what's happening now? Is there an error? This is taking forever" as they click a 'Submit' button, than if they just sit there staring blankly.

With this additional information you'll be able to make an association between what users are doing, and what they consciously think they're doing.

Keep notes about any interaction you think the user enjoyed or is struggling with and ask them about it after they're done. You're not looking for their opinion on how to fix something they think is broken, rather how they felt about trying to achieve their goal. Feeling and emotion play a significant role in the experience people will take away from using your system. Don't expect users to be delighted with every interaction, it's possible that anything north of neutral emotion is a successful outcome.

Most users are going to have suggestions on how to fix some element of your website to fit their needs. It's important to listen carefully to their suggestions and then disregard most of them. While it's quite probable that you'll gain insight from feature suggestions, it's important not to get carried away trying to meet everyones needs. Keep your project goals in mind and avoid scope creep at all costs. Remember, attempting to build something that is ideal for everyone will render it useless to everyone.

Measuring success.

How you define a successful user test varies depending on your goals. If you're introducing a new, novel interaction, just having users understand what you're trying to achieve could be enough.

It's important to figure out what you want to get out of user testing, and what you plan to do with the information collected. User testing shouldn't be an activity just for the sake of checking it off a todo list. No matter how you define your success, the purpose of user testing should be to beat the hell out of your system in an effort to discover ways to enhance interactions that make your system more usable, and more enjoyable to use.

Technology is your friend.

Although there are many applications to help you with user testing, here are the two that I recommend. We'd love to hear you suggestions, so feel free to add more in the comments.

• Silverback (Mac) - http://silverbackapp.com
• Morae (Windows) - http://www.techsmith.com/morae.asp

We've previously talked about the b5media Ad Sales Brochure. What we want to share now is the companion slide deck. We have a lot of fun building slide decks because we're focused solely on supporting the speaker. This means we want to create a healthy backdrop for them to shine against and help guide the conversation that they'll be engaging in with their listeners.

We've all seen slide decks where you've got an abundance of illegible bullet points or tiny little charts. None of this helps the audience or the speaker relate their story effectively. It generally distracts from the conversation with the speaker pointing to things that no one can read and the audience focusing on the slide instead of the story. Engagement fail.

When we create a slide deck, we urge clarity. For b5media, they needed to be able to dive into the content shown in their brochure and even expand on this. Rather than pushing all of the info they'd be talking about onto the deck, we used the same theme of brochure, with alternating category colours depending on the topic of the conversation, and subtle informational bullets that would animate on screen during the conversation.

Take a look by clicking through the slide deck below. You'll see the presenter controls sectional transitions, while some areas, like categories, will run automatically while the presenter is talking.

Check out some of our other slide decks at Slideshare.net

Wow. There is some chaos going on when you shrink your browser window here http://beta.w3.org. The behaviour actual seems much more correct in Safari 4 Beta than Firefox 3 on the Mac. More on the motivation in this A List Apart article on Fluid grids.

More importantly, there are two odd design decisions which affect you when you're not goofing around with your browser size:

• The contextual left nav shows on the homepage, but disappears on all other landing pages, only to reappear when you click through from a landing page to other content within the section. I get that the landing page has pretty icons which point you to the sub nav sections, but that's no reason to force people to find the link they're looking for in the main body, particularly on subsequent visits. Inconsistent menu behaviour is simply frustrating as hell. Especially with the homepage defaulting to show the Standards sub nav, which is way out of context at that point. Just leave the left nav on the landing pages instead of jumping on and off the screen.
• Also, I'm getting used to the Talks, Events, News content sub-sub menu on each of the Standards section sub pages, but I was initially surprised at the lack of method to visually identify this content which shows further down on each sub page (showing in two columns, same text formatting, with Events buried under Talks). Never mind that there's a whole section of key info underneath the Talk, Events, News menu that isn't categorized. (So what's this stuff? Size and hierarchy says it's more important, but you've got to read through to the links after each of the descriptions to figure out what you're clicking on, particularly here: http://beta.w3.org/standards/xmlcore/. This section should be prominently labelled in the Talks, Events, News menu, no? Say, called Specifications.

Finally, is there really no line spacing support in mobile browsing, because the mobile view is illegible. One line of text is literally sitting on top of the next. Maybe line spacing is set on the mobile browser itself and, as a non-mobile browser, I should quit making assumptions about mobile line spacing. Either way, mobile browsing is clearly broken.