Web Design

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

March 03rd, 2011

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

January 14th, 2011

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

December 09th, 2010

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?

April 15th, 2010

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

August 18th, 2008

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

June 24th, 2008

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.

I 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

May 14th, 2008

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:

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

April 10th, 2008

One 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 Necklace Joseph 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.

Putting Technology on the Map

February 06th, 2008

Back in the summer, we were asked by Rob at Techvibes to come up with a mini website with a Map of the Web 2.0 companies of Vancouver, aptly named Techcouver. Darren drew up the map mimicking the Transit Map and we went ahead and created this mini website over the course of a weekend. It was very well received, but hardly “Web 2.0″ material. The site consisted of a static image which was impossible to alter.

Following a meeting with Cameron, we discussed the idea of creating a map to which companies could be added easily. Cameron worked on a flash version of the site and came with with version 2.0 of the map. Although much improved, the map did have limitations and grew crowded very fast.

Techvibes has also been growing rapidly these past few months and in an effort to cover more cities and different technology, we knew that a better solution was needed. The idea of using Google maps had been mentioned from the very beginning but we never had the time to implement it – until now.

This week we launched version 3.0 of our map. The title “Techcouver” has been dropped and we’ve added different technologies. Techvibes goal is to provide visitors with the perfect tool for locating technology service providers across Canada and eventually the US.

If you’d like your company added to the map, fill out the request form and we’ll get you on there. If you have any feedback on the process, please report back and we’ll continue to make improvements.

Web Directions North is a Wrap

January 31st, 2008

There are many reasons why one should attend conferences. It’s a great way to meet new people, share ideas, learn from your peers and see what everyone else is doing. But more importantly, for me, the main reason is to convince myself that I’m not alone. Others have had the exact same problem and may have a solution that they can share. This year’s Web Direction North conference did just that.