Teach your clients about the mysteries of the web

As designers or web developers, we’ve all been there. We create an initial mock up based on the client’s request, they love it but ask for changes, we revise again, add more bells and whistles, they still love it, but now that they see it, they think it needs more of this or that want… next thing you know your design looks like crap.

If you don’t know what I mean, take a look at this comic from the Oatmeal. This is obviously an exaggerated scenario, but sooner or later, as a designer, you will be in the same situation.

So what can we do to avoid this?
One of the best way is to educate ourselves and our clients. Paddy Donnelly & Jack Osborne have gathered a great list of resources just for you. Make sure to bookmark it and then simply send your client to one of their topic pages for a quick intro on the subject. Hopefully that will provide them with the wee nudge that was needed.

International Women’s Day

Yesterday I was delighted to chat with Morten Rand-Hendriksen. With a background in philosophy and politics, Morten is a web developer in the WordPress community and interested in looking at gender inequality within the web development field.

Now, I have no idea what other conversations he had on the subject, but I think that Morten was surprised by some of my statements. I’ve been incredibly privileged to have worked in this field for so long and NOT have come across any discrimination. I don’t attend too many conferences and I work from home, so I’m not constantly meeting new people, but whenever I do, I do feel like women are welcomed and treated as equals.

Conferences like An Event Apart and Web Directions always have great women speakers and have always made me feel welcome.

WordCamps are also very well attended by women, and again, I’ve never felt shamed or ridiculed for being a woman.

Perhaps I’m kidding myself, I’m a little bit slow or I’ve just been incredibly lucky, I don’t know…

In addition to having been in this field for a while, I also do yoga on a regular basis. One of the teachings of yoga is to put out in the universe what you want to receive. As a result, I try to be honest, helpful and humble as much as I can and so I think that the universe has introduced me to male developers who are also kind, generous and don’t care about my gender.

To them, I say thank you.

Are mobile devices changing the way we read on the Web?

If you’re a hard core fan of Apple products, you’ve no doubt paid attention to yesterday’s announcement about the iPad 2. I must admit, I do own several Mac products, but I’ve never been first in line to get the new iToy. I did purchase an iPad when they first came out and I do enjoy it, but I won’t buy another until this one breaks. As far as I can tell, the iPad is great for playing games, reading e-Books and… that’s about it.

I still like the tactile feel of paper and so prefer my books the old fashion way, but the iPad has changed the way I read online blog posts and articles.

Instapaper makes this tasks wonderfully pleasing

Instapaper is an online tool, which once you’ve set up a Free account, allows you to save articles to read later. During the day, I’ll bookmark several of these using my Read Later bookmarklet and then in the evening will read them  on the iPad. Best of all, Instapaper, strips all of the design, clutter, advertising and displays the article in a large black font making it so much more enjoyable.

I enjoy reading articles this way so much, that I’ve also installed another bookmarklet called Read Now. This bookmarklet also strips all of the clutter and provides you with an easy to read article with large fonts but it displays it in front of you right away instead of saving the article in your account.

What does this mean for typography?

As a designer, you should be aware of the typography limitations on the web. Common browser fonts are still you’re best bet for body text, but much more leeway can be had now with headlines. The Google web fonts api and typekit offers loads of new fonts to play with. These are easy to use and have been tested thoroughly. Typekit’s blog is a great resource to see how others are using various typefaces.

Do keep in mind though, that you no longer have control of your audience. With just a simple click of a button, I can make all of your design disappear and make the fonts bigger. So before spending hundreds of hours researching the right font and debating with your client, do keep in mind that your hard work may not be appreciated.

What about mock-ups?

If you’re concerned about fonts in your mock-ups, Google’s web fonts api allows you to download the font with the added option of contributing a small amount to the font designer. Another great resource for finding web fonts for your mock-ups is at Font Squirrel. All of the fonts are safe to embed in websites.

Just as an aside, if you’re looking for image placeholders, take a look at placekitten. Who will say no to your design mock-ups now?

Hosting requirements for WordPress

The main advantage of using WordPress as a Content Management System (CMS) is the ability to make your own website edits. Gone are the days of finding a typo on your site and not being able to do anything about it. However a website powered by a CMS isn’t the same as a static website. In fact a site that is powered by a CMS is called dynamic, not static.

When making changes to a static site, you’re web developer modifies the code of each HTML page. Changes on a WordPress site are done by modifying the content which is stored in a database. The WordPress templates, coded using PHP, then pulls the content dynamically from the database and displays the webpage.

Thus when planning your WordPress, you’ll need to make sure that your hosting provider offers the following:

  • PHP version 4.3 or greater
  • MySQL version 5 or greater

Any server that runs PHP and MySQL will do, but an Apache server is the most robust and has the most features for running a WordPress site. Some hosting provider will tell you that Microsoft based servers are perfectly fine, but please don’t listen to them. The set up is quite difficult and no fun at all.

Having installed hundreds of WordPress sites, I am happy to recommend the following hosting providers.

These hosting providers all have very good WordPress support and great customer service.

Once you’ve set up your hosting, you’ll need to provide your web developer with the following:

  • Access to your hosting provider control panel – This is needed to set up the database
  • FTP access – This is needed to install the files on your server

Setting up a WordPress site is a bit more complicated than a static one, but with WordPress’s popularity, more and more hosting providers and making the necessary changes to offer full WordPress support.

Merry Christmas from Twitter

I get asked all the time, why I’m on twitter and what benefit I get from it. I’ve been using twitter actively for almost 2 years now and have made great connections and friends. But the main benefit of twitter is the amount of sharing that takes place.

Just in time for Christmas, Rafi from Graphic Fuel, has released a FREE Photoshop template for a blog design. You can read more about his design concept and download the PSD here. Based of a 960 grid, this PSD has everything you need to build your next blog design and is very well organized.

Is WordPress Killing Web Design?

During the 2010 SXSW Interactive Festival designers debated whether or not WordPress is killing web design. The idea is that WordPress and other CMS are constraining designers to think outside the box and turning them into lazy designers. I was quite pleased to hear that no one on the panel agreed with this statement. Brendan Dawes, one of the panel members pointed out that WordPress is simply a tool that manipulates data. Said in another way, Gina Bolton confirmed what I believe, which is that WordPress is highly customizable and can be made to do whatever you want.

One of my latest project consisted of converting a design provided by Mizu Creative into a WordPress site for Paul Sangha. The site included a photo gallery which required jQuery animation, a few different templates, random background images and flash on the home page. I’m very proud of this work, but more importantly, by the fact that it looks nothing like a WordPress site.

I’ve worked with many graphic designers in the past and when asked about constraints, my only suggestions is to keep the width of the canvas to 960px. This constraint is only there to ensure that the site will look good on most browsers, but even this is debatable and will depend on the target audience.

The Paul Sangha website is a great example which demonstrates that designers should not be constrained by the CMS.

Viral Marketing: Go Backstage for Free Music

If “Free is the future of business“, then the folks at Backstage have created an interesting marketing tool for all the Radiohead wanna-bes out there. They offer musicians a platform for sharing free music and gathering a database of interested listeners. For the rest of us, it means a few free tracks in exchange for our e-mail address and for recommending the page to a friend. You fill out a quick form, and the downloads are yours.

At first I was irked by the requirement to give a friend’s e-mail address in the form. But then I realized that’s the hook their model is hanging on. You probably have a friend who likes the same music as you, and since you’re recommending a freebie, and Backstage promises not to spam them, they’ll probably forgive you for sharing their address… Probably. There’s a bit of a leap of faith in that assumption. I think this requirement to share a friend’s address will affect their uptake on the offer somewhat but it also makes viral marketing more effective than it would be otherwise. So the net effect is probably a positive one for them.

What do you think?

Backstage Free Music Downloads

Collaborating with Graphic Designers is very Inspiring

I’ve never called myself a graphic designer. I’ve designed business cards in the past, but I don’t think that any of them would win awards and I only ever did these once the logo was supplied. I curse every time I open illustrator and I’m convinced that I only ever used 20% of the Photoshop features. I consider graphic designer, people who know their Pantone colours from their CMYK and care passionately about paper and print material.

Don’t get me wrong, I love printed material, but I wouldn’t know how one goes about selecting the right paper and ink. As a result of “lacking” this skill, I’ve been very opened to working with other graphic designers. Usually they will approach me in the middle of a project and say something like this:

“We’ve been working with company ABC and did a bunch of printed material for them and now they want a website. Can you help us?”

In the past few years, I’ve been working more and more on other people’s design and have learned a great deal. It’s simply staggering the number of different approaches to web design there are. I must be missing something about Illustrator’s capabilities, because it seems to be the favourite tool amongst graphic designers.

Walk BC icon designed by KubeI recently finished a project for the BCRPA’s Physical Activity Strategy (PAS) initiative. I had the pleasure of working with Dean Kujula from Kube. Dean created the icons for the PAS website and prepared a website design. Once approved, Dean asked me how I would like to receive the files and what version of Photoshop I was using. I was quite impressed with the result. The file contained multiple folders, each carefully labeled and ordered. I don’t think that I’ve ever worked with such well organized material.

I constantly meet newbie web designers who want to do it all; logos, branding, brochures, cms, web design…. I’ve come to the conclusion that working with experts and people who are more talented then you is a much better way to expand your knowledge.

Use 4 Design Principles to Gain Market Share

Jared Spool of UIE has written a little case study of how the company Pure Digital has captured 13% of the video camera market in just a few months. They designed the Flip Video camera with 4 principles that really made a difference:

  1. Think like a minimalist. The camera has just a few buttons to do what the vast majority of users want to do: record, play, delete, zoom, scroll through movies, and control volume during playback. Compared to multi-level menus in most cameras, this minimalism creates an ease-of-use that sets them apart.
  2. Remove your customer’s worries. Their different approach to batteries means the camera owner doesn’t have to think so much about the batteries and is more likely to use the camera as a result.
  3. Eliminate that which has no value. They loaded the software onto the camera instead of a disc, so there’s no need to install software on any computer you go to. The camera does it all seamlessly.
  4. Integrate the next step. Realizing that the next logical step after making a movie is to share it. so, they made it easy to email your video or share it on YouTube

I think these principles are great ones to keep in mind whether you’re designing a website, a physical product, or a service, and especially if you are designing an end-to-end customer experience that may include all of these things.

Read Jared’s full article here.

Karma yoga at Bluelime Media

ChakravibeOne of my New Year’s resolution this year was to deepen my yoga practice and integrate yoga philosophy in my daily activities. I was already practicing 5 times a week, so I’ve now increased to 6 and sometimes 7, I attend workshops whenever I can with visiting teachers and went to my first yoga retreat a few weeks ago. I feel better than ever, but I still haven’t found an way to involve yoga in my Web work.

Ideally my goal would be to develop and create sites dedicated to yoga. I’ve had the pleasure to work with Barbara from Bluecitrus for many years now. When I first met her, she had just launched Chakravibe, an e-commerce website selling yoga jewelery based on the chakra colours. Built using OS-Commerce platform, the website functioned very well, but was difficult to update and maintain and the code was a complete nightmare to decipher. When Barbara approached me earlier this year and asked me to help her move the static pages to WordPress, I decided that if I wanted to get involved in the yoga community, this was a great first move.

Om Power NecklaceJoseph and Ben took responsibility of the OS-Commerce component and moved everything to a sub-folder. I took care of re-creating the design using up-to-date HTML/CSS and removed all of the tables and set up the WordPress templates. I doubt that many people have noticed that the website has changed. Except for a few pixel adjustments here and there and the changes in url, the website is identical. We’ve also added a blog allowing Barbara and Teresa, to write posts and tell us what’s new. So far the results have been very positive. Barbara is very pleased that she can update the content and post new images and Teresa has been writing great posts.