Mezzoblue
9th Jun 2008, 07:21 pm
Last night I launched a long-needed redesign of my business site, Bright Creative (http://brightcreative.com/). 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.
TypographyI 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 (http://mezzoblue.com/i/articles/2008/jun/bc.gif)? 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.
ReadabilityI put up a link (http://twitter.com/mezzoblue/statuses/825771558) 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 (http://brightcreative.com/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 (http://brightcreative.com/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 (http://mezzoblue.com/archives/2006/12/12/opacity_bugs/) 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 (http://snook.ca/technical/colour_contrast/colour.html) 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.)
ExpandabilityYou'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?
MarkupYeah, 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 (http://www.getfirebug.com/) 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 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 (http://meyerweb.com/) along the way, I think in conjunction with the A List Apart (http://alistapart.com/) redesign, though I'll be damned if I can find the post in question now.
ImagesI 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.
More... (http://mezzoblue.com/archives/2008/06/03/design_rants/)
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.
TypographyI 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 (http://mezzoblue.com/i/articles/2008/jun/bc.gif)? 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.
ReadabilityI put up a link (http://twitter.com/mezzoblue/statuses/825771558) 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 (http://brightcreative.com/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 (http://brightcreative.com/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 (http://mezzoblue.com/archives/2006/12/12/opacity_bugs/) 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 (http://snook.ca/technical/colour_contrast/colour.html) 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.)
ExpandabilityYou'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?
MarkupYeah, 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 (http://www.getfirebug.com/) 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 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 (http://meyerweb.com/) along the way, I think in conjunction with the A List Apart (http://alistapart.com/) redesign, though I'll be damned if I can find the post in question now.
ImagesI 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.
More... (http://mezzoblue.com/archives/2008/06/03/design_rants/)