Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Design Rants

June 03, 2008

Last night I launched a long-needed redesign of my business site, Bright Creative. The site had been languishing for years, but fact is, it is a business and I do keep my contract work at arm’s length from what goes on over on this here site, so I decided to keep it rolling along instead of folding it all into one.

Of course then I got ambitious, so it’s been in the works for months while I’ve tweaked. Designing for yourself is never easy, is it? I feel like I could spend the better part of a month continually tweaking and making improvements, but I finally hit the point where it was “done enough” to launch.

While this is design work I’m quite pleased with, I still see things I think could have been done better. It might be more interesting to write up my notes on those first, so I’m going to do this in two parts: first the rants below, then I’ll follow up with another post on the parts I’m happy with.

Typography

I had this grand goal of keeping all my text in HTML and avoiding image-bound text or sIFR entirely, while avoiding looking like HTML text if I could help it. I looked for effects and typefaces that might accomplish that, and landed on Microsoft’s ClearType set. The headers were going to all be Candara, and the body text all Calibri, and that looked pretty nice in Photoshop.

But oh, the pain when trying to get a browser to duplicate it. Firefox OS X does not render Calibri well at all. Seriously, what is this? The kerning is all over the place, and look at that crazy overlapping of the link on the right; there’s no fancy letter-spacing happening in my CSS that could explain that, it’s just what 13px Calibri does in Firefox.

So I found a CSS hack that would allow me to keep the Calibri in Safari, and step down to Lucida in Firefox… except that the x-height of Lucida is quite a bit larger, so the type size contrast in the two versions was not equal. Since those without the most recent versions of Office or Windows don’t have Candara/Calibri anyway, my fallbacks weren’t going to work well either.

I ended up scrapping Calibri and running with Lucida for the body text. The headers are still Candara, or Georgia if it’s not installed; I did save some Candara into an image for the top navigation despite it all, but the headers throughout are styled HTML text (more on that in the follow-up).

And after all this ordeal it felt like the finely-grained type control I had carefully planned got away from me; I have three different type sizes for body copy in various spots, when I only intended to have one or two at most. It’s all still functional, and looks okay at a glance, but I still see areas where it should be a lot tighter.

Readability

I put up a link on Twitter last night, and one of the most frequent pieces of feedback I’ve had since was that text contrast was too low, the brown-on-brown is hard to read. Yep, guilty.

Embarrassingly enough, I spent most of my design time on the portfolio and home pages, neither of which have excessive text on the brown textured background. And then when I started working on content pages like Services, I realized there was a problem.

Since then I’ve gone back in and smoothed out the background behind the main text area on content pages, so there’s less distracting texture. It still suffers from a text contrast issue, but short of brightening up the entire background texture, that’s probably as far as I’ll go.

One thing further compounding the matter is the anti-aliasing method used to render the text. With sub-pixel rendering everything appeared a bit darker and thicker, and that really helped the contrast. However, the fades and animation effects I’ve used in parts of the site caused flickering between sub-pixel and regular anti-aliasing, a known issue where the best fix is to manually force regular non sub-pixel anti-aliasing by setting the opacity of the parent element to 0.9999. As soon as I kicked this in, the readability took a big hit.

I’m not sure if/when I’ll come back to this issue; it’s not something I’m totally happy with, but it’s also something I may end up just having to live with. (Automated contrast checkers tell me the brightness contrast is okay, though I think you and I both know just by looking at it that it could be better.)

Expandability

You’ll notice in some parts of the site, resizing text in your browser causes it to expand gracefully, but it falls down on the home page and the portfolio pages. I always try to design for text expandability, but those two pages had to be the exception this time.

There were a few factors at play here. For one, my image sizes are already large (see below), and creating even more for expanding text areas was starting to feel a little silly. And absolute positioning on the home page in order to overlap textures seamlessly caused me to force hard pixel values for text area heights. I did think of trying an overflow: auto kludge to force a scrollbar in the portfolio, but the script for the sliding pages just doesn’t allow that. Interestingly, turning off script allows overflow: auto just fine, so the expandability issue goes away when Javascript is disabled. That’s a lovely bit of irony.

I don’t really have a good fix for this one. I ran out of ideas, so no text expandability. But I feel really bad about that, so the guilt makes up for it, right? Right?

Markup

Yeah, so, viewing source is going to get you a whole mess of extra wrapper divs and such. I had a lot of images to layer, it had to happen. Did you know that you can nest your divs so deep that Firebug stops working properly? I do now.

The real shame of it is how unnecessary most of them are. With multiple background images ala CSS3, I could get away with far, far fewer. But alas, I live in a world where supporting IE6 is still necessary, so I’ll just keep my dreaming to myself while I propagate the useless divs throughout my markup.

Also, you may notice a bunch of empty <i></i> pairs here and there. These are as semantically neutral as reusable empty divs or spans, only with less characters. That’s a trick I picked up from Eric Meyer along the way, I think in conjunction with the A List Apart redesign, though I’ll be damned if I can find the post in question now.

Images

I still have this philosophy about using the PNG format — it’s great for throw-away images that I can effectively hide from IE6, but for core site UI elements, it’s still GIF all the way. The alpha hacks and colour profile issues just aren’t worth it. So I had to find fun and creative ways of overlapping compex faded imagery with 1-bit transparency. The amazing thing about doing it this way? IE6 testing was actually fairly painless this time around. I did not expect that.

The upshot, however, is that I’ve got 556k in images for the primary UI elements alone, not to mention the 6MB of project-related images. I’m not saying all that would go away with PNG transparency, but I bet I could shave off a few bytes. This is the sort of site where heavy imagery isn’t a huge ordeal, but still. A half meg of images rubs over a decade of image optimization practice the wrong way.

I think that about covers the ranting. Next up: the fun scripted bits, the design notes, the copywriting, and more.


Reader Comments

Skip to Form

1
VinĂ­cius Fragoso says:
June 03, 12h

Really nice redesign, really like the soft bright effects on your logo and header navigation menu.
Also a great job with the background textures, header textures and the div.wrapper borders.
I guess the well structured texts also help with readability.
Icons disposition on Services is great. And also loved the entire Portfolio section of the site.
Really nice job!

2
June 03, 13h

Very nice - sincerely. But of course, one niggle that has little to do with you and more to do with the nature of web design: I know that portfolio sites are never elastic, but I sure wish they were. As my eyes have gotten worse, I’ve been setting the minimum font size in Firefox up and up, which makes things start to run out of their frame at times. It sucks that beauty and precision are so often the enemies of flexibility.

3
June 03, 13h

very nice design, very nice indeed. One little bug though - the ‘portfolio . services . about’ menu doesn’t display correctly on hover in FF3 RC1. The hover states are offset horizontally by about 20px from where they ought to be.

Love the graceful degredation too (had to remember to allow no-script for the googleapi url as well as your own domain)

4
Greg Henderson says:
June 03, 13h

I feel your pain David. I have been designing for 7 years and it seems like I go through this every time.

It always feels like quick sand because the more you start changing the more you find and the worse your markup gets. I am working on a large site right now that started off very clean, the css was thought through well on my part, the color pallet was simple and complimentary. Then I started getting feedback from upper management and as they have moved something one place then moved another, then moved back the first thing it is turning into a mess.

At the end of the day though you have done as you always do and you have created a good website.

5
June 03, 13h

PS - the bug with the main menu hover state is only viewable with JS disabled. Works fine with JS enabled.

6
Dave S. says:
June 03, 13h

@Jemaleddin - “I know that portfolio sites are never elastic, but I sure wish they were…. It sucks that beauty and precision are so often the enemies of flexibility.”

No kidding. I wish we had the ability to size imagery relatively to text size, that might make more elastic precision design practical.


@Matt Wilcox - “menu doesn’t display correctly on hover in FF3 RC1. The hover states are offset horizontally by about 20px from where they ought to be.”

Okay, that makes two reports of this. Hmm. I’m still running 2 for now so I haven’t seen it in action. Every browser I have access to treats the nav identically, so I’m left wondering what changed in 3.

7
Dave S. says:
June 03, 13h

@Matt Wilcox - Aha, that makes more sense, and I can replicate it. Okay, my error after all. Thanks for digging into it, should be fixed.

8
rob says:
June 03, 13h

I’m curious which pages are so deeply nested as to break firebug. At first pass the site looks nowhere near as bad as some sites I’ve seen(including a drupal generated site I had the misfortune of working on that had the worst case of div-itis I’ve ever seen) and nowhere does firebug choke.

9
Andrew says:
June 03, 13h

I spent some time wandering through the site initially enjoying the rich decoration that betrays a great love of detail and care but the lasting thought I’ll have is your written content is superb. Engaging, informative, clarity. As a potential client I’d be armed with all the facts. Time well spent there I think - and a lesson learnt here.

10
Greg says:
June 03, 14h

I like the new layout much better than the last one. The shiny hover-effects are great. It’s a bit dark, but I like it. Well done.

11
Joshua says:
June 03, 14h

Well done! I found the structure and design of your portfolio section one of the best I have seen. The expanding images that fill the viewer work very well, as do the other details such as Events maps. You have done a very good job taking content and displaying it in a way that is unique yet usable.

My first reaction was actually, “Bright Creative? But it’s not very bright…” Yet even though some of the text is difficult to read, it still gives off a professional feel. Kudos, thanks for the great examples!

12
Bob Monsour says:
June 03, 14h

I could not help but note the timeliness of your post juxtaposed with a post by one of the guys at 37Signals today. See http://tinyurl.com/6fl5ot

It’s all about why they skip the photoshop step in design and highlights some of the things you ran into.

13
June 03, 15h

Looks incredible Dave. It has a very rich quality to it, and I love the subtle effects like the navigation hover. I sometimes use jQuery for similar things, since it only takes a couple lines and really gives projects that “wow” factor without being too gaudy.

When I do image layering my standard operating procedure is to just roll with PNG, and then I create a second set of GIF images for IE6 that I override in a conditionally commented stylesheet. I put in effort to make sure it still looks good, but I don’t mind if it doesn’t look identical to the original design in IE6. Carefully setting the matte color on each image is often enough to look ok, although sometimes you have to lose a bit of glow or drop shadow on some images. For me the sacrifice in pixel perfection is acceptable if it lets me avoid those crazy PNG hacks.

14
June 03, 16h

Superb work, a labour of love no doubt about it. As always, the content is a joy to read and almost lyrical at times. I laughed, I cried, I laughed again… Thanks Dave.

15
Courtney Miles says:
June 03, 18h

I don’t know why, but Opera (9.27) isn’t applying the Windows ClearType effect to the font in your page. All those pixels are scratching my eyes! It’s only Opera that seems to suffer from this.

16
Stv. says:
June 03, 20h

Great work, Dave!

I’m always amazed that given how ‘clean/modern’ a lot of your client work seems to be, that your personal work is so flourished…

Hopefully none of the above adjectives will be interpreted as being bad, as they’re not meant to be in any way. I’m just commenting on what seems to me to be a pretty vast distance between the two…

17
Pete B says:
June 04, 01h

IMO It’s excellent design with great detail and excecution, but I have to say the text is too hard to read when it’s not on a white background.

18
Tom says:
June 04, 02h

Very good redesign, I like it. I’ve noticed the same issue you mentioned about text contrast, but the final result is good.

19
June 04, 10h

The site looks great. Sure there are a couple of areas which aren’t as fine-tuned as you would like in a perfect world, but it happens. A project I’m working on right now is going to be just as bad, if not worse. There’s unfortunately nothing I can do about it.

And, I think the post you are talking about from Eric is either http://meyerweb.com/eric/thoughts/2004/08/23/markup-missive/ or http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/.

20
Ian says:
June 04, 16h

Hi

I was directed to this blog from Andy Rutlege’s site. From what I have seen briefly, I like it, there seems to be plenty of good information to explore.

To today’s topic, unlike most of your commenters, I don’t like your new site design. My first impression of the home page was one of twitchiness. The background texture is far to busy. You say you’ve already increased the text contrast? Wow.

I DO like the banner area. That rocks.

In terms of your article, I believe you’ve committed some sins that you wouln’t allow a client to get away with. Heck, it’s your own site, on your own budget and you can do what you like, but it’s also very good experience to eat your own dog food.

Repeatedly tweaking a design can stuff things up, as perspective and deliberate relationships to other elements become lost and it becomes a pile of neat, but unrelated elements.

On Typography.
It’s my belief that too much importance is being paid to SIFR and the circuitous approach to typography that it provides. I have no direct experience with it, but you describe the same cross-browser issues that have been torturing us all for years. It’s great if your client has the budget for this indulgence, but I continue to recommend against it, and live with the limited typography available. After all, the typography is not what the site is about, it’s the information.

On Priorities.
ALL of my work comes from government and medium sized business clients. I spend a LOT of time trying to get them to focus on what is important in the site. Especially the government clients.

Of course, the important element in government and business site is INFORMATION. It’s the reason people come to your site. You can have a site with information but without design, but the converse does not hold; you can’t have a site with a great design but no information. Given this knowledge, the design MUST complement the information and never overpower it.

It’s the designer’s skill to present the information in a tasteful and consumable manner. I don’t particularly want site visitors to go “oooooh pretty!”; I want my site visitors to be more subdued in their reaction to the colours and themes. I want them to nod and go “uh huh”, and then nod again…. and then come back another time.

This site, Mezzoblue does that really well, although I’m not so sure Bright Creative does.
the same.

Thanks for indulging my rant. I really like your site, I fully plan to include this site in my morning blog reads.

21
Dave S. says:
June 04, 17h

@Ian – it sounds very much to me like you’re critiquing the site against a generalized set of rules, without considering context.

It’s a portfolio site. The information is the design. The design is the information.

When you say my goal with Bright Creative is to have people come back time and again, that’s wrong. That’s not my goal at all. When you say it’s not a good goal to cause visitors to say “ooh, pretty”, that may be true in a general sense, but that’s wrong for a portfolio site.

My goal was to go for broke on the design. If you judge against that criteria, it serves my purpose very well.

22
Ian says:
June 04, 19h

I don’t think so. I was judging the site against my initial reaction. The rest is clearly just (barely) related rant.

I partially agree, in that for a portfolio site the information is in the design. Primarily, though, the information is who you are, what you do, the presentation gallery of designs for other clients and perhaps some testimonials. I doubt that people would choose your services based upon a single visit to your site.

I agree that for a design portfolio site, it is more likely they do need to say “Oooh pretty” than for other sites, although this was not my reaction to BC.

Nonetheless, your client is happy. That is worth far more than the distant ramblings of self proclaimed experts; a category in which I am not alone.

Cheers
Ian

23
June 04, 22h

Agree with Courtney Miles about the text looking scratchy and unattractive in Opera.

Also, on the subject of GIF v PNG; wouldn’t you save yourself some bytes if you saved all your GIFs as 8-bit PNGs (you can use alpha or index transparency on 8-bith PNGs) and then used a PNG compression utility like http://psydk.org/PngOptimizer afterwards? That’s the process I follow and the PNGs always come out smaller in file size than their equivalent GIFs.

24
Bjarni says:
June 05, 20h

I really like what you have done, congratulations on putting together a really nice site. When you do the soft eye focus test the text does get a bit lost but that is really only on the homepage. Thanks for your post too, enjoyed it.

25
Kyle says:
June 06, 07h

I really like what you’ve done with the site Dave. I love all the texture and graphics. I was especially impressed with your use of jquery in the portfolio, it really puts it over the top in my opinion. Awesome job.

26
June 07, 20h

Dave - your new Bright Creative site is beautiful! Amazing work!!!

27
June 08, 22h

Nice work with the re-design, Dave. Congratulations! I look forward to reading future posts on the site’s design process. I hope you’ll write about your decision behind the site’s grunge style, does grunge really describe your personal style, or is it simply a nod to the popular trend?

A couple notes: I do like that you applied a lightener background behind the content, but it looks too rough being so close to the edge of the text, I think a bit of breathing room on either sides of the text would look better.

I really like how your organized your portfolio pieces, but do wish to see more of your recent works, otherwise it looks like you haven’t designed any new sites in 2008 ;-)

28
seth says:
June 09, 07h

looks great dave. i see you’ve made a lot of the changes you’ve already noted and others that your readership have mentioned.

inspirationbit brings up a good point. grunge has made a come-back. i remember when the aged/grunged/distressed look was a current trend, and it seemed to have faded a way (no pun intended). glad to see the prominent folks in the business are bringing it back. you, bryan v., as well as many others have done a good job of not just totally destroying this trend and actually making it a usable design element.

29
Neal says:
June 09, 13h

Dave, I see you used a gradient over your page titles. That is a really great way to make text “not appear like html text” which is what I recently did on a clients site.

I totally feel you on the useless wrapper divs. I just redesigned my site ( http://www.nealgrosskopf.com/ )and had to opt for a bunch of wrapper divs to accomplish the design I wanted. I’m still waiting for CSS3 support for multiple backgrounds as well.

My only complaint of the new site is it has a large footprint of 524 KB. I’ve been trying to determine a good way to handle dialup users on large sites. The best I could come up with is allowing them to choose a separate stylesheet without many of the images and just background colors.

A question for you as well, do you serve your xhtml site up as xml or as text?

30
June 09, 16h

I think the redesign is great. I find your method of enlarging portfolio images to be good and a touch different to what I’m used to (but not different in a bad way), although it seems like your enlarged image’s dimensions are restricted – which could only pose an issue to you really.
On a side note, I noticed some ugly markup visible in the Rosenfeld screenshot of topics. It’s located in the “News” section at the end of the only news item’s copy snippet.
I still like this site’s design more!

31
Ralf says:
June 10, 02h

You spare no effort, and the result is really great.
Your philosophy about typography ( keeping all my text in HTML and avoiding image-bound text ) and about images is the right way for the future i think and i hope everything works in IE8.

32
June 10, 06h

I’ve followed your work for years Dave and have always liked what you produce. So I’m a bit disappointed to see you create what amounts to an inaccessible site due to a poor colour scheme.

The layout and styling is really good, the portfolio looks great, but the colour scheme on the home and about pages is awful. You clearly put a lot of thought and effort into the overall style and detailing, but this was lost on me as I switched it all off so I could read the content!

It seems you’ve made choices about the readability of text based on the assumption people have Cleartype or other anti-aliasing. Many people don’t. I don’t, and the body text looks like a very dark brown on a medium brown; it’s very hard to read. (FireFox2, 1280x1024 Philips LCD, default colour settings, no anti-aliasing).

I know you’ve commented on the contrast issue and suggested that you won’t tweak it again, but I urge you to reconsider. I really think you should brighten up the background and remove some of the distracting texturing; I think it would massively improve the readability of the site.

33
P says:
June 10, 09h

Once again beautiful design.

The site looks great.

one issue in ie6 the .png images show that oh so wonderful bluish greenish texture…

34
Jason says:
June 10, 09h

Very clean design. Coming out with any free Wordpress themes any time soon? I wouldn’t mind using something like this, it would be a great contribution, and would blow away most of the themes out there right now.

35
June 10, 11h

you’re RSS feed has been failing to load for me lately (maybe a week or two now)

36
June 11, 14h

Great design, Dave. The site degrades nicely in IE6 too! I would also like to see some new WordPress themes. =) I’m new to WordPress, but I love it so far. Keep up the good work.

37
June 19, 00h

I must admit, it is pretty annoying the way PCs display fonts. As i work on a Mac, all the fonts look fantastic. I haven’t yet figured out how to be able to use fonts in a website. Which is on thing i need. I a lil fed up of using Arial, Trebuchet, Verdana, Georgia etc.

But then again, like you say, if you pick a nice font, will it actually look good on a PC?

When there are so many nice fonts out there, why not use them all.

38
June 23, 02h

Really nice redesign dave, very nice images, it’s hard to use GIFs all the time i find, one day IE6 will fizzle away and we won’t have to worry about it (that day can’t come too soon).

you and your work has always been an influence to me so keep it up.

p.s. there’s nothing like a bit of calvin & hobbes still eh ;-)

39
Ash Haque says:
June 25, 18h

Looks amazing! Great job Dave

40
Tom says:
June 30, 16h

Dude! The text rendering looks awful here, specifically the anti-aliasing.

Firefox 3 (final), Windows XP with Cleartype turned on, on an Intel MacBook.

It’s just fine in IE7.

Mail me and i’ll get you a screenshot.

41
Sean says:
July 02, 06h

Fantastic work on the portfolio site Dave - is it just static HTML or have you built it on EE or WP or something? (I couldn’t see any wp-content references)

FYI there are a couple of XHTML validation issues with missing closing DIVs on the Services and About pages.

Someone above mentioned the use of 8-bit PNG files. There’s a great article on SitePoint that alerted me to their use and how they degrade in older browsers. As far as I know Fireworks is the only program that can export PNG8 files with more than one alpha channel (I believe you can get a Photoshop add-on to do it). I love Fireworks for designing and page layout of websites - fancy graphic work still gets done in Photoshop however. Check out the article - http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

Only useful in low colour depth images however (even less colours available than a GIF due to how many are used for the alpha channels).

42
Gerri says:
July 10, 06h

Great job on the new site Dave. I think that it turned out pretty well.

I would have to agree with you on the whole firefox/safari thing-every time that I get a chance to mess around with CSS and publish a site, I find that it takes me 3 times as long because I have to tweak things to work properly in the different browsers. I finally got fed up and downloaded several different browsers as portable apps on my flash drive and just tested them from there. It saved some time, but still, the tweaking can be horrendous. And don’t get me started on the font thing…::grumbles::

Anyway, despite all the “fun” with tweaking, I think that it turned out great. Good job!

43
July 31, 06h

Hello,

Great design. :)

A note on PNG colour issues: I use PNG for most of my images, both PNG-24 (if I need alpha transparency or for gradients) and PNG-8. Then some JPEGs when I need to.
I avoid colour issues altogether thanks to PNGCrush. I created a context-menu command (in Nautilus, on Linux) that enables me to PNGCrush all PNG images in a directory, or a single PNG image. It removes all gamma correction (I never use it though), and all embedded colour profiles. Works like a charm.

And I get smaller images that way, too. I work with The GIMP (great for pixel-precise cutting of design elements), which generates lightweight PNG images, but I still get a 5-20% file size reduction.

44
Rob says:
September 01, 04h

About typography on the web…

Is there a way to make sure that type on the web can be seen by every computer browser?

Do you suggest choosing alternate CSS based fonts in case the browser doesn’t display the specific font?

45
lauren says:
October 01, 13h

very cool - i like the internal pages more b/c the ratio of whitespace is greater than that of the homepage.

On your portfolio page, is that Ajax used to scroll through projects? I assume thats what you use for the top right nav as well? (contact, about, portfolio)?

46
October 13, 17h

Very nice - Great job on the new site. Love the color scheme and layout - the whole thing renders fine here across all browsers on the mac, but I am on Safari 3 and FF 3, so no surprise there then!

PS: Did you use your own JQuery Plugin for the navigation on the portfolio pages? or was it a download? If so which one ;-)

47
Sam says:
December 04, 01h

I had that same problem with Calibri! I had to end up ditching it as well! oh the frustration! I really like the way the site looks, you did a really good job! I think you made the right decision just to go with Lucida instead of a hack anyway.

48
Jake says:
May 19, 17h

This is a very clean design. It has been a while, so I am assuming it is the same design we are talking about that is up there currently. The text could be more visible somehow, possibly with a different background but the rustic feel of the current background is pretty cool. It may be better to use a bolder text, it would show up more.


Comment on This Article:

HTML is disabled, but URLs will be auto-linked. Your e–mail address won’t be published. Comments will be deleted if commenters leave a keyword instead of a name in the name field, if sites linked in the URL field are commercial in nature and not related to the design/tech industries, or if the comment simply doesn’t add substance to the discussion. No free ride on the PageRank train. (Read about commenter avatars.)