The topic of responsive design has reached such a point of popularity that I almost feel dirty using the words. To me, they are beginning to sound like buzzwords. I do have a copy of Ethan Marcotte’s book Responsive Web Design but haven’t had a chance to open it up yet.

At work we just finished our fifth responsive web site, four of which are launched. I had a thought about this. We dove into responsive design without reading THE book. There are no rules, but it’s obvious from the buzz around the book that Ethan knows what he is talking about. So I thought I’d get some thoughts down about what I think about responsive design before I read his book and realize I’ve been doing it all wrong.

My first exposure to a responsive site was Hicksdesign, a beautifuly designed site. When I saw what happened when you resize the browser my mind was blown. Months later I came across the “1140 grid”:http://cssgrid.net/—a CSS grid template for fluid layouts. After poking around the 1140 CSS files and trying to wrap my head around it we just went for it. The result worked welll. It was a redesign for an existing client, so we had all the content to start—I was simply giving the existing structure a beautiful overhaul and creating a site that can be accessed from nearly any device. It was fun resizing the browser and adjusting CSS to make it work.

Now, for some clients we had been providing mobile specific stylesheets already, optimizing their site for certain devices. We also always test to make sure the site at least loads and looks proper on various devices and screen sizes. That is adaptive. Responsive is a fluid layout that responds to the device / screen.

In my limited experience with responsive design I’ve come to realize I need to give more considered thought to things like the flow of content on a page. I run into questions like “Which is more important, the content of the page, or the secondary navigation?” When dealing with a mobile phone do you really want users to scroll a few screen lengths to get past your navigation and some fancy slideshow? Probably not. Some content is best reserved for desktop experiences.

There are plenty of resources on-line, and lots of great thinkers on the subject. Here are a few of the articles and sites I’ve used to shape how I currently approach responsive design or just some good reading on the subject. I’m excited to see if my thinking changes after reading Responsive Web Design.

• Responsive Web Design: A List Apart : my first real introduction to the concept
• 1140 Grid : The only tool we used to tackle our first responsive site
• Content Choreography : An article I read just recently that captures the thought required for content in a responsive site
• HTML5 Boilerplate : Amazing work by Paul Irish et al and a solid foundation for a new web project
• 320 and up : Andy Clarke knows what he’s talking about

Please note, though I am writing about responsive design this site is by no means responsive. I built it over two years ago and have been itching for a re-design. I have learned and grown a great deal since then. So much so, that I feel embarrassed of this site. I now have twin infants at home and find myself with little time to spare for side projects. One of these days.

I doodled this little circle pattern the other day and thought I’d see what happens when I expand on it. It is far from finished, but why not document the progress?

Step 1: Original sketch and a scrap of paper.

Step 2: After a little time in illustrator I’ve gotten this far.

Step 3: An overlay of the digital and sketch. Some slight modifications from the original, but not much.

I’ve been chipping away at a funny book, The Art of Manliness. The book is more about the classical skills and manners of men and how to include those in a modern life; however, one section Modern Technology and the New Rules of Etiquette struck a chord with me and seemed relevant to our business and industry. The authors, Brett and Kate McKay go on to describe how to remain a gentleman in certain online interactions, such as blogs and forums, email and Facebook. I have taken some of this advice and included it here, where it can help your online presence be more sincere and gentleman-like.

Rules for Blogs and Forums

A great way to increase your web presence and credibility is to participate in online discussions dealing with your business or industry. You can begin to establish yourself as an expert and as someone passionate about the industry, ideal characteristics for any business person. The following are some guidelines to follow to ensure you aren’t seen in a negative light:

1. Never say something to a stranger on the internet that you wouldn’t say to a stranger in person. Never write something you would not be proud to have your name attached to. Before clicking submit ask yourself “Would I use these words if this person were standing in front of me?”
2. Don’t attack people personally. Blogs and forums are great venues for the exchange of ideas. If you don’t agree with someone don’t call them an idiot. Doing so will only prove that you have nothing insightful or intelligent to offer.
3. Don’t just tear things down. Cynicism is easy. Don’t just poke holes in other peoples theories, but engage in a conversation or offer constructive criticism. If you don’t have something substantial to add to the conversation it is best to not to say anything at all.
4. Don’t use excessive vulgarity. This is another indication that you have nothing meaningful to add and that you are immature. No value is added by using vulgarity.

Rules for Facebook

Many businesses are creating pages or groups on Facebook as a means to cache in on the whole social media buzz. Much of the following is true for any social media tool like Twitter or LinkedIn.

1. Keep photos of yourself to a minimum. Business may want to add photos from a recent event, which is great. They provide a sense of the personalities and the atmosphere in the office. Don’t; however, post photos of poor behaviour at a Christmas party or excessive photos of yourself. That will only prove your vanity.
2. Join Facebook groups with discretion. The groups you join say a lot about you, so join with discretion.
3. Respond to people’s Facebook wall post and messages. Try to respond to people within 24 hours, responsiveness is a good trait to establish for yourself and your business.

Though these aren’t hard set rules, they are general guidelines to ensure interactions and conversations you have online will present you and your business in a positive light.

One of the mantras in the web industry is “content is king.” Though it is true that keeping your content current is important, not only for your appearance in search results but also as a service to your users, it is not the end all and be all to create a successful web site. I came across an interesting report by the Nielson Norman Group (NNG) about another method to increase the currency of your website, by celebrating holidays and special events.

The NNG looked at 56 websites from the US, UK, and Israel covering Thanksgiving, Christmas, New Years, Valentine’s Day, President’s Day, Purim and St. Patrick’s Day. They looked at how many sites celebrated the holidays as well as the methods with which they celebrated. Since the report is free to download on the NNG website I won’t go delve into the details; however, some interesting statistics from the report are that 21% of the sites surveys displayed holiday materials during the seven holiday period. In the US and UK Christmas was celebrated by 47% and 42% respectively, while in Israel Purim was celebrated by 83% of sites surveyed.

This is something we have done in the past for ourselves and a few clients. Last Christmas Justin modified the Norex logo, we designed a custom Holiday banner for the Office of the Employer Advisor, for the Mount Saint Vincent Student Union we have created different animated headers for different seasons, and for Propeller Brewery the header image changes based on the time of day.

The argument for highlighting holidays and events is that it reassures users that your site is in fact up-to-date. What it really reflects is that the graphics are up-to-date, but the image that users get from this can affect their opinion on the rest of your site.

“This is probably an outdated website since it doesn’t show that it’s Hanukkah now.” — (Fourth grader from Israel, about an Israeli website for kids)

The above quote is from the NNG report which—though from a fourth grader—I believe is an indication of how users may actually think about your site. Before you go and put Olympic medals and rings all over your website to cache in on the current event there are some considerations you want to think about.

• You do not want the decorations to interfere with users’ tasks. If usability suffers due to your celebrations then you are doing a disservice to your users.
• Consider your audience or market. If you are mostly local you may want to play that up, such as highlighting the 2011 Canada Games in Halifax, or an athlete from your hometown winning a medal. If you’re an international organization then be mindful of religious holidays in those countries.
• Don’t celebrate too early and end holidays on time. Celebrating too early can alienate users, especially if your site is e-commerce, for example celebrating Christmas before Thanksgiving. Conversely if you do not remove your holiday decorations promptly you run the risk of appearing stale and out-of-date.

Keeping your site current by celebrating holidays and events is an easy way to remind your users that you know they are people and that you are in fact a person as well. It would take a relatively small investment to have a designer create custom graphics which could add a lot of goodwill to your site and brand.

Trying to do one of those “everyday” things, where I will try to draw or design something new everyday…we’ll see how long this lasts.

We finally have a new website up at Norex. This has been a long time coming and we were in desperate need of a fresh design. We can’t really sell ourselves as cutting edge web designers if our site is stale and looks like it was from 1999.

Justin designed it and he did a fantastic job as always. He incorporated @font-face which was tricky, it was built by our awesome developers and uses some pretty great features of the newest release of Dashboard, namely dynamic sprites. That’s getting a little technical, but anyway, it’s nice to have a website that you can be proud of and not embarrassed to send potential clients to.

Check out the new Norex website

SO, I was contacted by Mike at artschoolreviews.ca to write a review about my time at NSCAD. I was quite surprised that this guy found me and my website and also flattered that he thought I’d have something worth saying. I did my best at writing a fair and objective review. I think what these guys are trying to accomplish with this website is great—I would have loved a resource like this when I was considering art schools.

Check out my review of NSCAD over at www.artschoolreviews.ca

I did it. I joined twitter and so far it’s fun. I knew it would be, since I can follow people in my field that I respect, but my biggest reservation was that I don’t want to log into my account to write a few words when I think of it. Now more than ever I want a smart phone. Check out thealltimelowe on twitter, one of these days I may have something interesting to tweet about.

It has been forever since I sat down and drew. Saturday afternoon I read some of a great book—The Design of Everyday Things by Donald Norman — and I drew for a bit. I used a book on bonsai as reference and drew the above Japanese Black Pine. After completing the cross hatch version I wanted to experiment with simplifying and moved to a brush pen. I’ve got to force myself to draw more often.