A cautionary tale

The best way to learn something is usually the simplest: through pain. Like an infant’s first experience getting burned with fire, to a freshman’s first lesson on what happens after too many Jagger bombs, the best reinforcement is often one that comes from wanting to avoid feeling some serious hurt.

I recently had such a lesson that led me to see the value in blogging and “lifelong learning”, the stuff we covered in Intro to IMD, and decided it would be a nice tale to pass on for this week’s writing. I have always understood the value of tapping into the limitless and consistently updated source of information that the blogosphere provides. But up until now, this notion was a textbook idea – I had found no real life application or use for it besides making a good grade in the Intro class.

Every month at my 9-5, I am charged with putting together and sending out the company’s online newsletter. I had gotten so used to this routine that it was no longer much of a burden. There’s a standard newsletter template we always use, standard content we fill it with, and the same list of people that always get it. It’s a re-occurring project that usually doesn’t give me much of a headache any more.

But last week, something unexpected happened. I put together the newsletter as always, and sent it around the office for review. I soon received some pretty negative feedback:

“Ian, none of the article headings showed up in the e-mail”
“Hey, why is that box running across the page?”
“Why are there several sections that are all jacked up?”
“What’s the deal with being such a f*** up Ian?”

Obviously I was surprised to find something that has always been working not working. The newsletter did look all screwed up, with text not appearing as it should, backgrounds missing, positioning wrong, and on and on. What was happening?

The answer soon became clear. My entire office is in the process of updating their Microsoft Office Suite to the latest version, which lo and behold included a switch to Outlook 7. This had some serious consequences. After doing a search online describing the problems that were occurring, I found the answer on (gasp!) an e-mail marketing blog. Apparently Miscrosoft switched the HTML capability of Outlook to match that of Microsoft Word. For anyone who has encountered HTML templates built or read using Microsoft Word, the implications for high levels of suck are obvious. For those unfamiliar with it, Word really sucks when it comes to HTML. Trust me. Lots of suck.

The blog article informed that many elements I was using in the newsletter template were no longer supported in Outlook 7. No CSS background. No CSS positioning commands. There was suddenly a lot of work I had to do to make sure the newsletter went out on deadline without looking like junk. That’s where the painful part comes in.

Yes, I did get the newsletter out, but only after a few sweaty hours of stress. Even now I’m still very, very perplexed as to why Microsoft would regress the HTML capabilities in Outlook to match those in Word.

The experience did teach me something valuable though: the value of being hooked into the blogosphere. Had I been much more diligent about checking my content aggregator I probably would have caught this unfortunate update months ago when it was reported and not hours before an important deadline. Not something I am looking to repeat.

Hope it helps to have an example of why we need to pursuing the life long learning idea.

My 5 Sites – Online Portfolio Examples

Here’s my 5 websites I looked at for this week, all of them representations of the online portfolio site that I’m hoping to build for the final project of this class.

Abiyasa Online Portfolio

I think this first one is my favorite site, since it does a great job of mixing effective navigation with a personality that is a reflection of its designer. Despite being very colorful and somewhat cartoonish, the site still does an excellent job of presenting its content professionally.

Ralph Bartholomew – Visual Communications

This site has some nice balance and an efficient appeal to its choice of fonts and colors. It’s simplicity is appealing, but it does lose points for lacking a distinctive site flow.

Haruka Hayakawa

A portfolio site for a student that makes some good choices on color scheme and navigation design. In particular, I like the site’s use of white space to convey a clean and uncluttered layout. However, I think some of the content that is included doesn’t enhance her image as a designer (like her design sketches or “Links” section) and as such should not have been included in the site.

The Portfolio of Tanya Frank

Very elegant and sophisticated portfolio that instantly tells you its creator knows what she’s doing. The choices of color scheme, layout, font, and navigation flow are all expertly handled, and her portfolio work really shines through. Only complaint is that the text size is really itty-bitty, which I’m sure would cause problem for some viewers.

Trevor Smolinski’s Resume/Portfolio

A very bare bones and direct site that wins points for its simplicity and accessibility. While this makes everything straightforward for the user, it also misses the potential to convey the designer’s abilities as a creative and artistic force. A good example for beginners and for the target audience the designer is speaking to, but not what I would be aiming for with my site.

50 Links to Boggle Your Mind

For this week I hit the jackpot: a collection of over 50 articles meant to make you a better web designer. There’s a whole lot in there that we can use, though some of it is a bit old.

After browsing through the links, I picked two articles that I felt would be the most helpful to where we are right now in our studies. The first is entitled 6 Keys to Understanding Modern CSS-based Layouts. It’s a simple breakdown of the main things we should remember as we start using CSS more and more. We have yet to cover most of these point yet, but the first two (floated columns and box model) are particularly helpful references to what we’ve been picking up in class.

I highly suggest checking out the link “The Box Model” within the header dealing with that subject. It covers everything that was mentioned in class, and like the handouts it has a lot of diagrams that provide an excellent visual reference for all the things that we need to remember when figuring out the height and width for content.

The very bottom of the article deals with how compatible existing browsers are with the box model. This is of particular importance to me since I regularly encounter these issues at work and need to be aware of which browsers present problems. I have already had particular angst dealing with Internet Explorer 6 (c’mon people, I like using PNGs), so it is helpful to know how to work around some of these issues.

Going back to the main article, I also recommend the “Floatorial” article – it helped me to finish the homework for this week and gives some tips that will no doubt help as we get more used to floating.

For my second main reading I went with something less technical and chose an article entitled “12 Ways to Tap Into an Endless Well of Creativity”.

I find myself lacking creative inspiration these days due to my busy schedule, something that really irritates me. This reading gave me some new ideas to help combat this, the most important one being “Set Regular Habits”. I currently lack the consistent routine recommended here and can certainly vouch for it being an integral part of keeping a creative spark. I tend to put off simple creative exercises (like doodling, picture taking, or looking at design work) with the simple notion that “I’ll get to it when I have free time”. However, this appointment keeps getting pushed back, and even now I find my brand new Moleskin remains empty – a very depressing sight.

It’s very difficult to feel inspired when you’re consistently tired from school, work, and a terrible sleep regimen. I think the problem is that I’m approaching these creative exercises like one large task, much like any other school project or chore around the house. The trick is to make it a small, 15 minute daily routine like this article recommends, so that it is no longer an assignment but a habit. I’m definitely going to give it a try.

Semantic Stuff

The first writing for this week re-hashes some of the definitions we have covered in class concerning what semantic mark-up means. It adds to these meanings while also giving nice little summaries of why we should be working toward well-formed mark-up.

This is a nice little writing that is helping me understand the “why” of what we are doing. Though I clearly understand why developers are moving away from using tables and archaic methods of designing web templates, it’s still helpful to get a few more bullet points on the resulting benefits you get from learning to script in this manner.

I highly recommend that you also take a look at the comments posted for this blog entry, as they are even more interesting than the main article. One respondent asks the author why there is such great importance on well-formed mark-up when business clients and the general public just won’t care what the source document looks like. I found the answer really valuable, since it relates to a part of my job that I have already had significant experience with: search engine optimization.

Because the first article spiked my interest by mentioning the link between semantic mark-up and SEO, I searched a little more on the subject and found my second reading for the week.

The article helps to clear up some of my questions about the scripting-SEO relationship. I was already aware of some of the methods used by Google to crawl websites, but I didn’t know that it included the search engine making correlations between the title and header tags used in the document. Common sense already says that these two tags would be similar anyways, but I haven’t consciously been making an effort to ensure that they are always alike while adding pages to my company’s website. This also relates to making sure that the header tags are always used in relation to their subject’s relevance (h1, h2, h3, h4, h5, and so on…). Again this seems obvious, but only in retrospect after someone has told you about it

Design Articles

My first article is a brief summary of a helpful 5 step process for designing a website. It’s here.

I liked the article because it’s very concise guide that makes some great points without ranting on. In particular, you can tell it was written with a backbone of real world experience, as evident in its focus on client interactions and forming measurable goals for any design project.

 

The writing presents no wildly remarkable ideas. It offers something similar to the research-brainstorm-roughs-and-final approach we’ve already had a lot of exposure to, but there are a few hints which I think will be particularly useful in the future. Of these, I think the first paragraph was the most insightful. The advice to “reformulate the client goal in your own words, and present that to the client” in the very first step of the process makes complete sense, but seems like a step many designers (including myself) might overlook in their zeal to dive straight into brainstorming ideas; in other words, to get straight to the “fun stuff” without staying on track with the client’s notions of what needs to be done. This kind of simple but very relevant advice is what I took away from this excerpt.

 

The second article deals with the role of testing landing page alternatives until you reach an optimized and ideal design to drive visitors to register, buy, click, or whatever your hoping to make them do.

I think too often student designers focus too much on the purely aesthetic aspects of building a site (or in this article a landing page) without keeping a very basic premise in mind: test, test, test. I have had some exposure to this at my current job, where even now I make three to four alternatives for a prospective landing page and then choose a winner based on click-through results and registrations. It’s quite interesting to see this concept taken to a much higher level with the 1,000 possible design combinations used in this story.

 

It is revealing how this kind of thorough testing can dispel design “rules” that you often hear about. In fact, I have previously been told of the classic warning to avoid using flash on a landing page unless absolutely necessary, because it distracts a user’s eyeballs or makes things more complicated than needed. Pretty interesting to see that this is not entirely the case as seen in this writing.