Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Design Notes

June 10, 2008

Time to dive back in to the Bright Creative redesign I wrote about last week, 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’s fabulous jQuery 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 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 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”.

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.

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 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: Low, Medium, and 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.


1
June 10, 14h

Thanks for the info on the Bright Creative work. I especially enjoyed your elaboration on the jQuery stuff since I’ve recently been playing with that myself.

P.S. Long time reader, first time poster. Originally discovered you long ago through CSS Zen Garden. Made me seriously evaluate my approach to web design. Many thanks.

2
June 10, 15h

I love the Stress-o-meter!

3
Anton says:
June 10, 15h

Very nice job and superb notes!
U make really amazing stuff!

4
June 10, 16h

I’ve been becoming a fan of jQuery in recent months too. I first started using it for form validation but since then have been finding more and more uses for it and now if I ever need a script to produce a particular effect that I’ve used in the past, I’ll try and find a jQuery plugin alternative.

5
Christine says:
June 10, 17h

Hey Dave,

Great work. Love the site. I’m most impressed with the copy. I think that it reads really well and people will get a feel for who you are. It’s also very inspiring… I’ve come to the conclusion this year, that I won’t be growing, so I should look at my own content.

See you around.

6
June 11, 00h

It’s interesting what you’re saying about the copywriting. I’ve made many design mockups (to be honest, I’m too lazy lately, especially because of the lack of tools in my location atm, to really work on any websites lately), I have to write about myself. Like you said, the change from the formal “we” to the informal “I” is a big change. To at the same time be professional but personal is a hard change to accomplish without sounding too arrogant.

The rest of it, interesting to read your approach, especially the part about code first, design later, which 37signals brought up a few days ago as well.

7
Dave S. says:
June 11, 11h

@Jesse Dijkstra – “To at the same time be professional but personal is a hard change to accomplish without sounding too arrogant.”

Definitely. I had that same problem; you want to say “look at all this cool stuff I’ve done” without making it sound like your ego has expanded to fill an entire city block. There’s a balance there, and it’s hard to find.

“code first, design later, which 37signals brought up a few days ago as well.”

Well, it’s fair to say we have different perspectives on that one. My own code-first was just working out the Javascript interaction, it wasn’t doing actual design work like the HTML/CSS approach they suggest. If you want my take on that whole conversation, I think Greg Storey sums it up as well as any: http://www.airbagindustries.com/archives/airbag/drucker.php

8
J A R says:
June 12, 18h

I just inadvertently sent you some spam. Perhaps some basic email address validation in the contact form wouldn’t go astray? I didn’t even put an @ in there.

Anyway, nice work, and I agree with most of your critiques/observations. I also have to agree that jQuery is particularly good for us CSSy types to jump into Javascript. I started messing with it more than a year ago now and haven’t looked back since.

9
J A R says:
June 12, 18h

Oh and I also meant to add my 2c about text resizing. I too always test my stuff for resizing, but since FF3, IE7 and Opera all support full page zooming now (and IE6 effectively able to locked down should you wish, by px sizing) I feel that it I can let it slide on occasion now-days without feeling to bad about it. I think an easy to read standard size/contrast and good semantics etc for screen readers is far more important. The small few people that I know with serious vision impairment all have there OS set to 640x480 with extra large font, and use a screen reader regardless.

Anyway, I can’t remember EVER coming across a non-geek client/friend/earthling who was even aware that their browser could re-size text. People still using IE6 are somehow even less aware of it, if that is possible.

P.S.
Being able to zoom FF3, Opera/IE7 style now is so great for couch-computer usage! Much better than the old text-only method.

10
June 12, 22h

I am excited you redesigned BC, I was wondering when that was going to happen. You know all those fans of yours out there, heh. I have been really into jQuery and find it’s easy for a css coder like myslef to pick it up. jQuery is really gaining momentum right now. I’m very pleased to know you have taken advantage of it. Bright creative is amazing and very inspiring. You took some of the best jquery and new css techniques to push web design up another notch. Excellent job. I’ll be interested in reading your write-up on the css rollover fades. I have been looking for way to avoid using img tags for that.

11
Stephanie says:
June 13, 16h

The stress-o-meter is brilliant!

12
June 17, 08h

For what it’s worth, the text-shadow property is also visible in Opera 9.5. I didn’t even know Opera supported text-shadow until I visited the BC redesign.

In any case, it looks great!

13
René A. Enguehard says:
June 17, 09h

Rudimentary user verification for your scripts might be in order. Nothing fancy, just something that will keep spiders from resetting your counter inadvertently. Maybe just have the script do nothing if you don’t call it with a particular set of arguments. Or something. Since it isn’t a critical system I wouldn’t waste too much time on it, but by Murphy’s law the spiders will find it. :)

14
June 19, 09h

That Stress-o-Meter is pretty cool.

15
June 20, 00h

jQuery is something i’ve come accross a fre imes in the past, it is hard to find a framework that ‘works’ in each browser, one example of this not working is mootools, this a lot of the time has that annoying ‘error on page’ in the bottom left hand corner ….

also to agree with dave holland CSS Zen Garden inspried me and im sure a lot of people to the real power of CSS.

16
Robert O'Rourke says:
June 22, 15h

Hi Dave,

I was thinking about your notes on the jquery slide effect and I’ve put together something you might find useful as part of a CSS technique I was experimenting with. It’s using the dimensions plugin which is now a part of the jquery core (v1.2+).

Take a look at the second example using floats on http://www.sanchothefat.com/dev/layouts/window-panes.html . All the code is inline.

17
June 25, 01h

Wow, you just proved that it’s possible to make modern webdesign work in IE6, without png. I can see that would have taken, well, pretty much forever.

But I can’t get your portfolio fade to work properly, I get the blind scrolling down like you described, and only get the fade-in when I click the same thumb over again. Which means most of the time I get the vertical-blind-down, since I’m more likely to not click the same preview consecutively.

Still, love the design.

I’ve got to throw in some CSS questions too.
I noticed you’re being very specific in your line-heights and font-sizes. Does browsers really accept 4 decimals specificy on ems? And what does the opacity: 0.99999 do? I have a hunch it’s got something to do with Firefox, but please elaborate.
Thanks.

18
Steve Dill says:
June 25, 08h

The Bright Creative site is simply beautiful. I love everything about it. The best thing about it in my opinion, is the logo and navigation on hover state. I’ve been trying to figure out how to do that for a long time now, and I fail every time! Hahaha.

Great work!

19
Dave S. says:
June 25, 08h

@Eystein Alnæs - “But I can’t get your portfolio fade to work properly”

Sounds like it does work for you, but only after the image loads. Which is pretty much how I described it. It’s not ideal, but I’m not a fan of lightbox-like spinning wheel graphics and the brief delay between when you click and when the image is displayed.


“Does browsers really accept 4 decimals specificy on ems?”

The values are derived from careful calculations of the font size. The main body font size is 62.5% which ends up being equivalent to 10px, so if I set font-size to 1.2em then I get 12px text (that remains scalable). Then to get, for example, 14px line-height I have to do a bit of math to find out what multiplier I need to apply; 14 / 12 = 1.16666666… so I (arbitrarily) round to 4 decimal places and get a line-height of 1.1667. Whether a browser applies that exact value or not doesn’t really matter, what’s important is that the proportions remain the same if the user scales up the text size.

“what does the opacity: 0.99999 do?”

Forces anti-aliasing to get around a bug in the browser’s font rendering. More here:

http://mezzoblue.com/archives/2006/12/12/opacity_bugs/

20
June 27, 11h

Dave, though it’s an expensive fix, CS3 (at least for Mac) no longer embeds gamma data in PNG’s when using save for web. I’ve dev’d probably ~30-50 sites and have yet to see any color shift in any browser/platform combo, including IE6 on Windows. Prior to CS3 I was running my PNG files through Gamma Slamma and the results were the same. Perhaps you already tried both of these things but I have yet to run into a discrepancy in color.

21
June 27, 11h

Whoops, link failed. Link for Gamma Slamma http://www.macupdate.com/info.php/id/23359

22
Magda says:
June 27, 13h

I love the Bright Creative design. It works even in IE6.

23
July 14, 08h

Great job with the redesign, a couple comments:

On the design: Love that you went with a grittier/worn look for such a professinal site. I’ve been toying with a photoshop file for my own redesign, and had been a little worried the ‘wicked worn’ style wasn’t professional enough. You’ve inspired me though, and I’m going forward with it now!

On the logo/menu effect: I’m at the edge of my seat waiting to see the write up on the fade effect. I’ve spent all morning looking for a way to implement something similar on my site, and can’t think of a better designer to learn it from.

24
Dave S. says:
July 14, 08h

@Christopher Scott - Thanks. Keep your eyes on A List Apart, it’s in the publishing queue for later this month or possibly early August.

25
July 15, 14h

I want a stress-o-meter! That’s cool!

26
Simon Robb says:
July 15, 18h

Your subtle jQuery effects are incredible - I really think these are what takes a nice design to an amazing webpage. Always inspired by your work Dave, you’re one very talented guy.

27
Jakob says:
July 22, 11h

Hi,
I just wanted to tell you, that brightcreative.com kind of halts my system. Opening as a tab in the backround is no problem, but once I display the tab I have to wait about a minute until it is displayed (and my OS reacts again). Everything works flawless then until I open an other page of your site: Same issue there.
I’m using Firefox 3 on Ubuntu 8.04.
I think I’ll fill a bug report if I have time.
Best regards, Jakob.

28
Suzanne says:
August 07, 10h

I love the Bright Creative design. It works even in IE6.

29
Ryan says:
August 27, 11h

what are your thoughts on using javascript?
Do you worry if your sites are viewable with javascript disabled in browsers? Seems to me that nobody has javascript disabled anyways; so is it really a big deal?

30
Rob Stathem says:
September 01, 05h

Great lookin’ site! I’d say it’s a great use of CSS!

On the topic of CSS, why do so many people make this program so complicated? Every time I try to learn a new CSS technique, I feel like I’m reading something out of a physics book. CSS is like this new language that is only spoken in certain countries….why can’t it be explained in a simple manner?

Ughhh…just my rant about CSS layout

31
Matt says:
September 16, 14h

You tried superpng then? Free replacement file format plugin for photoshop?Save with meta data unchecked.

M

32
September 19, 13h

Hi Dave. I’m wondering how you check if the browser viewing your site has javascript enabled or not.

33
Sam Logon says:
December 03, 01h

Excellent post, I really like your thoughts on jquery! I have to agree with you, they have taken the hardest parts out which offer a lot more flexibility to someone who isn’t a scripter.

34
Oliver Blake says:
February 25, 08h

An excellent post here. I’ve heard about jquery but never had a chance to look at it properly but I’ve seen a few sites that use it and they look really good. I can only write css and html but something like jquery would be ideal for me to make a fancy site with side scrolling pages without much knowledge of javascript.
I will have to download jquery and have a play with it to see what I can come up with.