Mezzoblue
11th Jun 2008, 08:42 am
Time to dive back in to the Bright Creative (http://brightcreative.com/) redesign I wrote about last week (http://mezzoblue.com/archives/2008/06/03/design_rants/), and focus on some of the good stuff that came out of it.
Most people got it; but for anyone who misinterpreted my laundry list of rants from last time, that was just some healthy critiquing of my own work. It's a good idea to step back every now and then and judge what you do with a critical eye. The truth is I'm very pleased with the way this redesign came off. Here's why.
jQuery I'd like to thank the star of our show, John Resig (http://ejohn.org/)'s fabulous jQuery (http://jquery.com/) library. No doubt you noticed the portfolio page effects, with sliding and zooming and fading and the like. Yep, that's Javascript. No Flash here. I've only been playing with jQuery for a few months now, but it's already one of those "how did I live without it?" tools.
To me it's the difference between avoiding Javascript as much as possible, and embracing it whole-heartedly. jQuery abstracts away the hard stuff like DOM incompatibilities, leaving me free to write fairly basic script to accomplish what I need. And the CSS-like selector syntax is absolutely wonderful. I've already learned that so it's building on what I know. I'm still not convinced I'm much of a scripter, but writing with jQuery makes me feel like I'm actually somewhat in control when it comes to Javascript. And the joy of seeing my script work as expected first time 'round across the board when testing in various browsers? Undefinable.
With this design I wanted to see what kind of useful user interaction effects I could pull off with some jQuery magic. I had a vague idea in mind to use sliding portfolio pages, echoing something I did with the previous design's thumbnails. But I also wanted to treat the slideable area as real content with enlarged previews and live text. I looked at a few canned scripts that seemed to do what I wanted, including some jQuery plugins like Coda Slider (http://www.ndoherty.com/demos/coda-slider/1.1.1/) and various lightboxes, but ended up needing a bit more flexibility. So I rolled my own.
There's nothing particularly new or clever about my implementation, but it came together nicely. I have a bunch of divs in the page source that are assigned the class item, and in my CSS file that class is treated as a non-scripted element by default. I'd hoped for graceful degradation when Javascript is disabled, and the default rendering without script is actually somewhat usable. It's not great, but it works.
Then on page load, the script does a bit of work to change that default and get the page ready for interaction, things like adding new classes and then re-positioning the divs based on those classes. The resulting style of the elements updated by the script is still handled in the CSS file as a new set of classes, triggered by that scripted changing of the class. That's the ideal, but I did need to script some of the positions, so there are a few spots where hard-coded pixel values ended up in Javascript. I'm sure there's a way to make it more elegant, but that's as far as I got.
The actual slide effect happens by giving each individual item in the portfolio a sequential position within a horizontal series of items, and then updating the left value of each based on which item the user is currently viewing. The current frame has a left value of 0, the next is 750, the one after that is 1500, and so on. Frames prior to current are negative values, ie. -750, -1500 and so on. And then by declaring overflow: hidden on the parent frame I'm hiding the inactive items and only showing the active item so you never see more than one at a time. This allow lets me slide things in and out of the frame without more tedious clipping calculations, something I'd far rather let the browser handle.
That was the quick easy way to do it, but it also led to the expandability problem I wrote about in the previous post; I can't use overflow: auto in the portfolio area to allow for a scrollbar when the user resizes the text, because the divs intended to be hidden by the overflow end up forcing scrollbars and making a mess of the page. The unscripted version allows this, but the scripted version doesn't. Oh, sweet irony.
The larger previews triggered on click are also added with script; in an unscripted state these are simple links to images that open in the same window, a fairly clumsy way of doing it, but at least the unscripted state is functional. Again by manipulating the classes in script, I change those links into positioned target areas that have an onclick event which pulls in the target image of the link as the contents of the pop-up area. There's a nice jQuery fade effect too, though the first image load usually takes longer than the fade so the effect looks more like a vertical slide-down than a fade. But once that baby is cached after that first click, watch out. Fades for everyone.
Something a little more subtle than the portfolio effects is the logo and primary nav hover glowing animation. This is a trick I demoed at An Event Apart last month, and I'm about 2/3rds of the way through formally writing it up. I'm using jQuery to take your basic CSS Sprites (http://www.alistapart.com/articles/sprites) setup and add animation effects to produce a smoother transition between off and on states. It's a tiny bit more involved than that, as you'll see if you dig into the source. But keep your eyes peeled for the article, there will likely be a pre-built function that abstracts anything remotely difficult about it. Oh, and yes, it gracefully degrades to plain old CSS Sprites.
Copywriting Updating the copy was a big reason for redesigning the site. The previous version was built at a time when I didn't have a clear idea of what the business would be in one, two, or five years. Since that time I've figured out what it is I want to do and how I do it, but the site didn't reflect that. I'd been handing out an intro PDF to new clients for a while to fill that gap, but it's the sort of information that really needed to be directly on the site.
I ended up scrapping almost everything that existed before, and changing the voice from an impersonal royal "we" to a much more direct "I". This didn't come easily; it was hard to adjust to talking about myself in the informal first person on an ostensibly professional site. But I often get email starting out with "I'm looking to contact Dave Shea", or "do you guys offer such and such a service?", so I realized it was time to kill the ambiguity.
There were two items I felt a bit conflicted about putting out there. In my previously private PDF I had included details about pricing and process that would be helpful for prospective clients, but it's the kind of information that people in our industry don't generally publish on public-facing sites. I have some theories why this is, and they're not all to do with competition, but the result is the same in any case. I decided to go ahead anyway, a decision which I don't know will prove to be a good or bad idea long term; we'll know for sure if it ends up going away one day.
Design The visual design was actually one of the least important things I needed to accomplish this time around. When I began planning this redesign, I tackled the scripting and copywriting first, and only opened Photoshop after I had a pretty clear idea of what the content was going to be. You know, the same sort of expectations you'd have of a client; I believe the phrase we're looking for here is "eating your own dog food (http://en.wikipedia.org/wiki/Eat_one's_own_dog_food)".
Somehow I ended up building a colour scheme derived from primaries, though the red, yellow and blue are not exactly full saturation, and the brown of the content area serves as more of a neutral in this case. Previously I'd been using brighter shades of red and yellow, so there's some consistency with the past, but the blue was a new addition this time for the sake of more interesting colour contrast. The overall tone is a lot darker than last time, but that feels like a good change.
This visual design isn't a huge departure either; the previous one had a bit of a gritty, non-pristine feel to it that I wanted to continue using. I went for broke on the texture and detail work, but that ended up causing some fun layering challenges. After the Photoshop work was done, I spent some time looking at the design wondering how in the world I'd build it out into something that would work in a browser. In the last post I mentioned that transparent PNGs would have spared me some headaches, but I don't feel like I can yet thanks to IE6. So I went with GIF images instead, which caused a lot of tedious matching of foreground and background images. Saving a transparent GIF to sit on top of a solid colour is easy; saving one with texture that must precisely align with a second background texture while fading out into transparent areas is... not so much.
For example, the portfolio's white stage area sits on top of the page's background texture. Its drop shadow and frilly decorative bits have varying levels of opacity, something GIF obviously can't do. To simulate this I had to save the background texture into the image itself, which forced precise alignment of the foreground and background images. I could have gotten away with simply flattening my Photoshop file and saving out the background with the image as a big non-transparent rectangle, but that would have made the site's already-large image profile even larger. So I dropped what background I could by first hiding the background in Photoshop and saving a preliminary transparent 1-bit GIF to basically create an outline of the foreground area, then loading that GIF back into Photoshop and using it to create a mask for the background, then saving the combined foreground + background combo out together into the final GIF. It looks like this (http://brightcreative.com/i/ui/portfolio-showcase.gif).
There are also some extra little details I added to try and elevate the HTML-based text to something a bit more interesting. I applied text-shadow to the various headers and links for Safari's benefit. Primary h2s on the site have a very faint PNG absolutely positioned over top that fades in the background texture a little, resulting in a semi-transparent almost gradient-like look. Getting the PNG gamma to display consistently was a challenge; my first attempt worked well in Safari, while the overlay was too obvious in other browsers. So I had to tinker with various colour output settings and finally got something that seems like a good enough compromise. The PNG is still somewhat visible in all browsers, but faint enough that I can live with it. (and I did a lot of Googling for workarounds; what you're thinking of suggesting? I tried it.)
Contact Form Finally, one of my favourite bits from the site, the contact form's (http://brightcreative.com/contact/) Stress-o-meter. This was a fun little idea I had in mind from the beginning, but it was the last thing I built because I wasn't quite sure how to make it go. Design-wise, there are three levels: <a href="http://brightcreative.com/contact/?stresslevel=low">Low, Medium (http://brightcreative.com/contact/?stresslevel=med), and High (http://brightcreative.com/contact/?stresslevel=high). The higher it gets, the more distressed the meter looks.
Luckily it ended up being easier to build than I expected. There's a simple text file sitting on the server with a date in it. Every time the contact form is viewed, I have a PHP script that opens that file and reads the date. If today's date is within a certain number of days from the previous date it will display Low, and if it's above that range it shows Medium. There's a second range it checks that will show High. I'm still working on precise values, right now Medium is 5 days and High is 10.
That's it for the viewing part, the updating part was pretty basic too. I've created a cron job on the server to run a second script every couple of days. That script sends me an email asking me whether I want to update the meter, which is just a link to a third script that replaces the contents of the text file with today's date. If I don't hit the link, nothing changes, and the previous range checking script will compensate. That's it. Simple. I'm still wondering if various spiders are going to find the update script or not, but a permanent Low status on the meter would be the only real side effect so I'm not terribly worried.
More... (http://mezzoblue.com/archives/2008/06/10/design_notes/)
Most people got it; but for anyone who misinterpreted my laundry list of rants from last time, that was just some healthy critiquing of my own work. It's a good idea to step back every now and then and judge what you do with a critical eye. The truth is I'm very pleased with the way this redesign came off. Here's why.
jQuery I'd like to thank the star of our show, John Resig (http://ejohn.org/)'s fabulous jQuery (http://jquery.com/) library. No doubt you noticed the portfolio page effects, with sliding and zooming and fading and the like. Yep, that's Javascript. No Flash here. I've only been playing with jQuery for a few months now, but it's already one of those "how did I live without it?" tools.
To me it's the difference between avoiding Javascript as much as possible, and embracing it whole-heartedly. jQuery abstracts away the hard stuff like DOM incompatibilities, leaving me free to write fairly basic script to accomplish what I need. And the CSS-like selector syntax is absolutely wonderful. I've already learned that so it's building on what I know. I'm still not convinced I'm much of a scripter, but writing with jQuery makes me feel like I'm actually somewhat in control when it comes to Javascript. And the joy of seeing my script work as expected first time 'round across the board when testing in various browsers? Undefinable.
With this design I wanted to see what kind of useful user interaction effects I could pull off with some jQuery magic. I had a vague idea in mind to use sliding portfolio pages, echoing something I did with the previous design's thumbnails. But I also wanted to treat the slideable area as real content with enlarged previews and live text. I looked at a few canned scripts that seemed to do what I wanted, including some jQuery plugins like Coda Slider (http://www.ndoherty.com/demos/coda-slider/1.1.1/) and various lightboxes, but ended up needing a bit more flexibility. So I rolled my own.
There's nothing particularly new or clever about my implementation, but it came together nicely. I have a bunch of divs in the page source that are assigned the class item, and in my CSS file that class is treated as a non-scripted element by default. I'd hoped for graceful degradation when Javascript is disabled, and the default rendering without script is actually somewhat usable. It's not great, but it works.
Then on page load, the script does a bit of work to change that default and get the page ready for interaction, things like adding new classes and then re-positioning the divs based on those classes. The resulting style of the elements updated by the script is still handled in the CSS file as a new set of classes, triggered by that scripted changing of the class. That's the ideal, but I did need to script some of the positions, so there are a few spots where hard-coded pixel values ended up in Javascript. I'm sure there's a way to make it more elegant, but that's as far as I got.
The actual slide effect happens by giving each individual item in the portfolio a sequential position within a horizontal series of items, and then updating the left value of each based on which item the user is currently viewing. The current frame has a left value of 0, the next is 750, the one after that is 1500, and so on. Frames prior to current are negative values, ie. -750, -1500 and so on. And then by declaring overflow: hidden on the parent frame I'm hiding the inactive items and only showing the active item so you never see more than one at a time. This allow lets me slide things in and out of the frame without more tedious clipping calculations, something I'd far rather let the browser handle.
That was the quick easy way to do it, but it also led to the expandability problem I wrote about in the previous post; I can't use overflow: auto in the portfolio area to allow for a scrollbar when the user resizes the text, because the divs intended to be hidden by the overflow end up forcing scrollbars and making a mess of the page. The unscripted version allows this, but the scripted version doesn't. Oh, sweet irony.
The larger previews triggered on click are also added with script; in an unscripted state these are simple links to images that open in the same window, a fairly clumsy way of doing it, but at least the unscripted state is functional. Again by manipulating the classes in script, I change those links into positioned target areas that have an onclick event which pulls in the target image of the link as the contents of the pop-up area. There's a nice jQuery fade effect too, though the first image load usually takes longer than the fade so the effect looks more like a vertical slide-down than a fade. But once that baby is cached after that first click, watch out. Fades for everyone.
Something a little more subtle than the portfolio effects is the logo and primary nav hover glowing animation. This is a trick I demoed at An Event Apart last month, and I'm about 2/3rds of the way through formally writing it up. I'm using jQuery to take your basic CSS Sprites (http://www.alistapart.com/articles/sprites) setup and add animation effects to produce a smoother transition between off and on states. It's a tiny bit more involved than that, as you'll see if you dig into the source. But keep your eyes peeled for the article, there will likely be a pre-built function that abstracts anything remotely difficult about it. Oh, and yes, it gracefully degrades to plain old CSS Sprites.
Copywriting Updating the copy was a big reason for redesigning the site. The previous version was built at a time when I didn't have a clear idea of what the business would be in one, two, or five years. Since that time I've figured out what it is I want to do and how I do it, but the site didn't reflect that. I'd been handing out an intro PDF to new clients for a while to fill that gap, but it's the sort of information that really needed to be directly on the site.
I ended up scrapping almost everything that existed before, and changing the voice from an impersonal royal "we" to a much more direct "I". This didn't come easily; it was hard to adjust to talking about myself in the informal first person on an ostensibly professional site. But I often get email starting out with "I'm looking to contact Dave Shea", or "do you guys offer such and such a service?", so I realized it was time to kill the ambiguity.
There were two items I felt a bit conflicted about putting out there. In my previously private PDF I had included details about pricing and process that would be helpful for prospective clients, but it's the kind of information that people in our industry don't generally publish on public-facing sites. I have some theories why this is, and they're not all to do with competition, but the result is the same in any case. I decided to go ahead anyway, a decision which I don't know will prove to be a good or bad idea long term; we'll know for sure if it ends up going away one day.
Design The visual design was actually one of the least important things I needed to accomplish this time around. When I began planning this redesign, I tackled the scripting and copywriting first, and only opened Photoshop after I had a pretty clear idea of what the content was going to be. You know, the same sort of expectations you'd have of a client; I believe the phrase we're looking for here is "eating your own dog food (http://en.wikipedia.org/wiki/Eat_one's_own_dog_food)".
Somehow I ended up building a colour scheme derived from primaries, though the red, yellow and blue are not exactly full saturation, and the brown of the content area serves as more of a neutral in this case. Previously I'd been using brighter shades of red and yellow, so there's some consistency with the past, but the blue was a new addition this time for the sake of more interesting colour contrast. The overall tone is a lot darker than last time, but that feels like a good change.
This visual design isn't a huge departure either; the previous one had a bit of a gritty, non-pristine feel to it that I wanted to continue using. I went for broke on the texture and detail work, but that ended up causing some fun layering challenges. After the Photoshop work was done, I spent some time looking at the design wondering how in the world I'd build it out into something that would work in a browser. In the last post I mentioned that transparent PNGs would have spared me some headaches, but I don't feel like I can yet thanks to IE6. So I went with GIF images instead, which caused a lot of tedious matching of foreground and background images. Saving a transparent GIF to sit on top of a solid colour is easy; saving one with texture that must precisely align with a second background texture while fading out into transparent areas is... not so much.
For example, the portfolio's white stage area sits on top of the page's background texture. Its drop shadow and frilly decorative bits have varying levels of opacity, something GIF obviously can't do. To simulate this I had to save the background texture into the image itself, which forced precise alignment of the foreground and background images. I could have gotten away with simply flattening my Photoshop file and saving out the background with the image as a big non-transparent rectangle, but that would have made the site's already-large image profile even larger. So I dropped what background I could by first hiding the background in Photoshop and saving a preliminary transparent 1-bit GIF to basically create an outline of the foreground area, then loading that GIF back into Photoshop and using it to create a mask for the background, then saving the combined foreground + background combo out together into the final GIF. It looks like this (http://brightcreative.com/i/ui/portfolio-showcase.gif).
There are also some extra little details I added to try and elevate the HTML-based text to something a bit more interesting. I applied text-shadow to the various headers and links for Safari's benefit. Primary h2s on the site have a very faint PNG absolutely positioned over top that fades in the background texture a little, resulting in a semi-transparent almost gradient-like look. Getting the PNG gamma to display consistently was a challenge; my first attempt worked well in Safari, while the overlay was too obvious in other browsers. So I had to tinker with various colour output settings and finally got something that seems like a good enough compromise. The PNG is still somewhat visible in all browsers, but faint enough that I can live with it. (and I did a lot of Googling for workarounds; what you're thinking of suggesting? I tried it.)
Contact Form Finally, one of my favourite bits from the site, the contact form's (http://brightcreative.com/contact/) Stress-o-meter. This was a fun little idea I had in mind from the beginning, but it was the last thing I built because I wasn't quite sure how to make it go. Design-wise, there are three levels: <a href="http://brightcreative.com/contact/?stresslevel=low">Low, Medium (http://brightcreative.com/contact/?stresslevel=med), and High (http://brightcreative.com/contact/?stresslevel=high). The higher it gets, the more distressed the meter looks.
Luckily it ended up being easier to build than I expected. There's a simple text file sitting on the server with a date in it. Every time the contact form is viewed, I have a PHP script that opens that file and reads the date. If today's date is within a certain number of days from the previous date it will display Low, and if it's above that range it shows Medium. There's a second range it checks that will show High. I'm still working on precise values, right now Medium is 5 days and High is 10.
That's it for the viewing part, the updating part was pretty basic too. I've created a cron job on the server to run a second script every couple of days. That script sends me an email asking me whether I want to update the meter, which is just a link to a third script that replaces the contents of the text file with today's date. If I don't hit the link, nothing changes, and the previous range checking script will compensate. That's it. Simple. I'm still wondering if various spiders are going to find the update script or not, but a permanent Low status on the meter would be the only real side effect so I'm not terribly worried.
More... (http://mezzoblue.com/archives/2008/06/10/design_notes/)