Archive for the ‘Web Design’ Category
Protected: design
Wednesday, December 23rd, 2009Yes, it’s pretty but it’s not a great web presence
Sunday, October 4th, 2009There are a few things you will never get if I work on your website. I promise that you will not have a flash-only website that forces the browser to be the same size as the screen (if I wanted it that big I would have made the browser that big, thanks) and play loud music you can’t turn off with canned sound effects when you move your mouse. No hidden navigation that users have to “discover”. No flash-only “I didn’t want search engines to be able to index my site anyway” crap.
Yes, some of those sites are pretty. Very well executed, very artistic. Props to the artists involved. But a web presence it is NOT. Users should be able to tell at a second’s notice what they’re supposed to do on the site, how to get where they want to go and most importantly, what you do. Search engines need text, TEXT, for their spiders to index or you can kiss any kind of placement in search results goodbye. And finally, stop ticking your users off! If I want sound, give me a button that says “turn sound on”, don’t start playing it immediately. Stop resizing my browser. Stop playing movies and flash immediately on page load. Give me a button that says “Play Movie”.
This is not rocket science. Don’t screw with your user; don’t lock out every search engine on the planet.
Calling all valid CSS “browser hacks!”
Monday, September 21st, 2009I don’t like to use css hacks. I do use them. In point of fact, I maintain a small list of css hacks so I can easily reference them. But I don’t like them. Except for the last one on that list, which I think I’ve used twice total, all those “hacks” are actually valid css that simply hook into Explorer’s irregular DOM and different levels of selector support to target cases that only exist in one browser or another.
Enter IE8 several months ago. Setting aside the fact that I can’t even get the damn thing to run without going through an initial “start -> erase all preferences -> close -> start -> close the ‘you need to customize!’ window by clicking the X not the ok or it blows up -> open a new tab -> close the first tab” route (yes, I’ve done a clean install and tried trashing my prefs), once I finally get to it for testing, I find that its “Compatibility” and “IE7″ rendering is occasionally off of IE7, and the IE8 rendering is different from IE6, IE7 or Firefox…
And so far, all I’m seeing for css hacks is invalid css code. Anyone out there yet found a css hack that targets only ie8 that’s valid css? Any way to target its modes in a way that would distinguish IE7 from IE8 Compatibility or IE8’s version of IE7?
Sad but true.
Monday, August 31st, 2009Interesting fact: Even fifteen some odd years later, Metallica’s Black album is still some of the best music for me to design to. Strange, perhaps, considering the other tops of that list are Bruce Springsteen, VnV Nation, Young Dubliners and BT, but true.
For confirmation of this, look up at the h2.h_graphic at the top of the index page…
Concept to final product – system message icons
Thursday, June 18th, 2009Two things that all transactional sites have: success messages and error messages. Ideally, these messages will be at the top of the page and be set off in some way through color or other visual cues. Using green and red respectively is the obvious choice, but this poses a problem: people who are color blind will not be able to tell the difference.
Icons are one solution to this problem. If you preface your system messages with distinctive icons, this can serve as a quick visual cue to experienced users as well as distinguishing between types of message for people who are color blind or who use screenreaders (the reader will read off the alt text of the icon, so you can use this to convey a message to screenreaders only).
Icons can be tricky. They have to be small enough not to get in the way but large enough to be recognizable. Making graphics at that size requires pixel perfection and any iconmaker’s path is littered with failed icons. My favorite, lost to the annals of server upgrades, was one particular trash can I was trying to make that when saved at the right side turned into… Cthulhu!
The demands of making your icons small but recognizable mean you have to go into them with a clear concept. I like to pull out my colored pens and brainstorm around the basic shapes that symbolize whatever you’re trying to make an icon for. Picking a symbol can be the most difficult part of the process. For an error, what do you use? The yellow “caution” triangle? An exclamation point? The red “prohibited” bar and circle?
For my current project, I chose a combination of the exclamation point and the caution triangle. A green checkmark was my immediate first choice for the success message. Out come the pens. It’s important not to censor what you’re drawing, just to let the shapes suggest themselves to you the way they want to be drawn. I usually have about five or six different iterations before I sit back and pick a style and form.
My final, chosen drawings ended up like this:
From here, I usually move into Photoshop. Some people use Illustrator, but I find Photoshop a lot more intuitive. The key to making your icon recognizable is starting big and going bold. Any line that you want to be visible in the smaller icon has to be several pixels thick in the large version, or it will scale to less than a pixel and disappear. You can get an immediate preview of your work by reducing the magnification until the icon is close to its final size. After a bit of consideration for how to get the borders on the triangle and circle, these were my “full size” icons:
Note the thicker border on the symbols themselves. This will help them stand out from the background, especially after they’ve been shrunk to:
Well, got the upgrade to IE8.
Wednesday, June 10th, 2009…and as I expected, half the web is broken now. Good thing for me, I only use IE for testing my sites. I mostly use Firefox for my own browsing, like most web designers.
Microsoft was really in a no-win situation (granted, of their own making) with IE8’s rendering engine, so I’m not going to curse at them too much (no promises on whether or not I’ll curse at the browser itself). I’m working on finding the necessary css hacks and javascript changes for making things work again. My own sites mostly just seem to have positioning problems for a few elements, luckily, but I’ll include whatever I find that is still valid css in my css hacks reference section. As always, that’s mostly for my own reference but you’re welcome to use anything you find there.
One shining light: there might actually finally be a way to test your pages in IE6, IE7 and IE8 without having to resort to registry hacks or incomplete rendering engines. Microsoft Expression Web SuperPreview claims to let you view in IE6 and whatever version of IE you have installed (since IE8 includes an IE7 viewing mode, both IE7 and IE8 are available).
I just downloaded it. I’ll post my impressions after I try it out.