NateCreates.com

I was recently referred to useit.com. My first impression aside - I started to dig deeper, when I realized - hey, this is the guy that hates Flash. Yes, Jakob Nielsen, protheletizing web usuabilty guru.

This brought me back to a something that’s been bugging me lately - web usability and web standards. I’m tired of these terms thumped with self-satisfaction whenever someone chooses to ignore them.

I understand the reasons for web usability and standards. I’m just not convinced that they should dictate the web. In fact I’m pretty comfortable trusting that the web will develop in both usable and unsuable forms and the two will happily co-exist.

Back to Jakob. He feels Web 2.0 is neglecting good design. In reading more I see a bit where he’s coming from. From a Web 1.0 perspective, where the experience truly was, “get in, get it, get out”, customization, and community tools must seem silly. However Web 2.0 isn’t about “get-in-it-out”, but “existing”. Users are engaged with a web site, much as we engage with software, a video game, or even a good book. Web 2.0 usability is less about how easy things are than what can I do that I really enjoy doing. Just because something isn’t valid or complaint or accessible doesn’t make it bad, unworthy of pursuit.

No long waits in line

This weekened I decided to try on-line grocery shopping for the first time. In the past it’s always seemed too expensive, but after going most of this year avoiding the awful chore of shopping down dreary isles, and instead eating out, I figured, in the end, it’s probably cheaper. No impulsive purchases. No long waits. And when you start running your own business and caculating those unbilled hours spent…well you get the picture.

Click, Order, and Forget

So on Saturday I logged on to NewSeasonsMarket.com, a locally owned grocer, and in about 15 minues I’d spent $50 (which includes the $10 to have the groceries delivered to my door). I just wanted to test it out and I realize that the delivery fee would be much cheaper per pound of grocery if I’d ordered more.

What the rich forget

Around 6:00 that night, a delivery arrives on my doorstep - three bags of groceries and a thank-you, plus a free quart of organic strawberry ice cream. And it wasn’t until I took two steps back with my groceries and closed the door that I realized I’d experienced something that the rich must feel - to never have to go to a grocery store again.

This summer I enrolled in a graphic novel course to force myself to finish one of my long-time goals - to create a graphic novel. Unfortunately I’m finding I may not be as geared toward that sort of thing as I thought. However, I am enjoying the idea of producing a much shorter, serialized comic. I thought I’d share my first attempt, Monkey in the Machine [PDF 569K]..

It’s only 2 pages - which I’m finding is ideal - and it’s drawn entirely within Illustrator, which I’m hoping designers/illustrators can recognize, as that’s sort of the point.

No matter how many critiques I’ve experienced they never get easier. In fact, I think the primary objective of design school is to put you through as many critiques as possible before you go out and try to succeed on your own. Here’s a list that I find helpful when trying to recover from an especially brutal critique.

• Look for the truth beneath the clutter. Just as it’s hard to take criticism, it’s hard to give effectively, especially in a professional setting. This means words that are meant to mean one thing, likely mean something else. Get clarification.
• Have pride. If someone offers a criticism that seems off-base, or you feel stems from personal taste, stand up for your work. Not to be an egoist, but if you can’t defend a design decision with valid points, maybe there is merit to the comment. On the flip side, if you let a single comment trigger a complete rework of an otherwise valid design, then you’re hurting the client and your team.
• Go into a critique seeking harsh feedback. The truth is - it should come, especially if this is a first review. If it doesn’t and all you hear is “ah, that’s great!” or worse, silence, then you know you’re in trouble. The next review you show only a slight modification of what “everyone liked” and they’ll come back with a huge list of changes. Remember, as soon as you left the last design review, they all expressed what they really felt. Elicit feedback. If someone doesn’t give it, take the dangerous step and start critiquing it yourself.
• Give yourself a false deadline so that you’re never showing what you just designed. The design needs at least a day. What you see after letting it rest for a day will be what the client sees.
• Never get defensive. This is hard, especially when you feel the criticism is off-base. Responding with a valid argument is not defensive. Saying “It’s because that’s how I think it should be. And you can take it or leave it. What are you, a designer?” is defensive.
• And of course you can always resort to a few minutes of theraputic Photoshop on pictures of the client*.

This is only a short list. There’s probably a ton of tips out there on how to survive a critique. And as insane as it may seem, I think all designers look forward to critiques or reviews. It’s the only time you ever get to really hear what people think about your work. And it usually means you’ll create something better.

* P.S. If you happened to visit this post within the first 15 minutes, you would have seen my photoshop work on a group of stock pic biz people - hypotethical clients. I found it disturbing on my home page, so I’ve since removed. But I’m sure you all know what I mean.

Because the integration of Photoshop CS3 and Dreamweaver is here.

Now that you can directly place Photoshop CS3 files into Dreamweaver and optimize through Dreamweaver, there’s no need to optimize in Photoshop. Once the graphic has been imported into Dreamweaver, if it is edited in Photoshop at a later date, all you need to do is right click on the image in Dreamweaver and select, “optimize” (this little step took me a while to figure out) and the latest version of the image is updated.

So “Save for Web” is gone. ImageReady CS2 (much to the dismay of some) is gone.

I only have two observations thus far. First, I’m not sure why anyone would purchase Adobe CS3 for Web, except perhaps it’s support for legacy Contribute and Fireworks. And second, I wish that the update in Dreamweaver of Photoshop files was more automated. Perhaps it is, but I’m just not finding any one-click button or link palette.

Ok, I’ve always been under the impression that Apple had their act together - at least a bit more than that other OS company up in Redmond.

I went into Safari with little idea of what to expect. I didn’t read any other reviews. I had as open a mind as possible for a web designer who has many opinions. You see, this is pretty exciting stuff - if you’re a PC guy - getting to run Apple software on a PC box.

Downloaded and installed without a hitch. And then I opened it for the first time.

Not impressed.

Besides looking like just a different configuration of iTunes, I also noticed that heavy text looked very heavy to the point of smudging on screen. Having gotten used to ClearType and the nice rendering of IE7 (which is even superior to FireFox in my book) it was a bit startling. My vision felt blurry and I my enthusiasm started to fade…when I also noticed Safari doesn’t render with transparent edges on Vista…strange. Ok, ok that’s a bit picky.

Then I tried to find my previous tab.

Anyway, I can get used to those little issues if Safari delivers a superior experience. So I start to type in the address bar, www…what??? Is my wife trying to tell me something?

Now offering suggestions for what I might be searching for is ok to an extent, but pushing URLs of sites I’ve never visited into my address bar is never ok. I thought Apple was suppose to be above integrating poorly designed trial software and advertising into their products, and all the other things that can bog down a user experience. I guess not.

This leaves me with having to relegate Safari to just one more browser to test for (not happy) - and keep using my trusty IE7 and FireFox 2.0 (more happy).

PS. If anyone can offer a reason Apple would insert a bunch of URLs (as above) I’d love to know. Otherwise “Apple, please let me choose the URLs I want to type.

This list is for all those out there who’ve faced developing HTML email for Lotus Notes. It can be very frustratring to find workable solutions. The list I’ve assembled comes from tips I’ve come across and tried, and from my own experimenting based on what seems to work and what doesn’t for Lotus Notes. These are not perfect solutions, however they should provide some guidance for the novice and experienced alike, when tackling this troublesome email client.

1. Develop a design that breaks apart gracefully. This takes time and is largely the responsibility of the designer.
2. Do not rely on CSS styling for page layout. Older versions of Lotus Notes (v4.5 or older) do not recognize CSS for layout. For example the bordercolor property is ignored and will result in an ugly large black border around your table. You can either embrace this fact - and make your design based on black, or avoid the border property by setting table border=”0″.
3. Use a container table to enclose all sub-tables, with one table, one tr, and one td.
4. Because you’re going to be developing a lot of tables, carefully plan and comment your layout. This will make it easier to update and tweak if you need to fix anything later.
5. Do not use td width=”x”. Instead, use a plain td, and then use a spacer.gif image to establish the width of the table data cell. This seems to avoid Lotus Notes tendancy to rewrite tables into its own width specifications. This can be a bit of extra work for those who try to take the HTML Adobe ImageReady serves up, but it’s well worth it in the long run. By the way, avoid slicing up your designs in ImageReady or other Direct-to-Web solution. Instead work piece by piece, table by table (see next key).
6. Have a strong design and plan before going into the table layout phase - and work the design in small, managable sections, thinking of each section in terms of how it works as a table. You should be thinking, two column layout - two tables.
7. Do use the width and height properties of the table tag, especially for your sub-tables.
8. Keep all CSS styling to fonts only - and use in-line styles. You should still be able to avoid the font tag, but the improvement with CSS is not much better. It’s still a lot of styling to track.
9. Probably most important of all (especially if those approving the email will be viewing the test in Lotus Notes) is to prepare them for the fact that what they see at the design stage will not be what they can expect to see in Lotus Notes. Manage expectations. In fact it’s helpful to actually show how the email will break apart and how you’ve allowed for this through your design. Think crumple zones in auto design. By designing weak areas of the design to absorb the impact of Lotus Notes, your overall message (the bones) remains intact. Design is about the message and not how to make things look pretty. Also, have marketing view the email in more than one email client. Having a gmail account or similar is great and seems to make everyone happier.
10. Remember never skip number 9.

If you found this helpful, let me know. I’m interested in developing some tutorials based around these 10 keys, particularly if they would be of assistance to designers out there who also get saddled with learning to hack through HTML, and may not have come from the days of designing pre-CSS. Also, if anyone feels I’ve missed something, please add - as I know you will. All the help the better.