You might be thinking ‘Does SugarBank look different today?’ or ‘Does having herpes make Paris Hilton less attractive or is a sexually transmitted virus actually the most interesting thing about her?’ The answer is yes. I am in the middle of a record attempt for ‘Most re-designs within any one twelve month period’ and this is SugarBank 4.0. What the hell am I doing?
I’m learning.
Part of what makes talking to me valuable (aside from the bottomless wisdom and welcoming charm) is that I obsess over how things work and how they might be improved. I like to think that if this blog was a car it would be a Porsche 911 circa 1966 - already great but still ready to undergo 40 years of continual improvement. On the other hand it might just have been commissioned by a Nazi and have a reputation for killing Dentists.
This rev’ includes the addition of globally recognized avatars, gravatars - the little pictures you see beside people’s comments, improved searching and most importantly an easier to read layout. It’s less brutally functional than 3.0 but less visually cluttered to look at. I hope you like it. If you don’t… would you like a cookie?
I always get questions after making changes so here are some answers:
- There are no rounded-corners because they’re a cliché. You can date most technological things because as soon as something can be done, it’s overdone. See any music video, translucent iMac or action movie for proof. I don’t need rounded corners. WHY DON’T YOU LEAVE ME ALONE. I WISH YOU WEREN’T MY PARENTS. I HATE YOU!
- Yeah I know Impact’s verboten in fontography circles. That’s how I roll.
- The text’s actually dark grey.
- Most famous? About a year ago and let’s just say she was in the best movie of 2004, the worst of 2005 and made her debut when she was still jail-pedo-bait. We’re friends now.
- It’s my tagline - I do what I like with it.
- Yes Podnography’s coming back.
- By hit and miss I have developed a method where I can precipitate a soluble tartrate from morphine granules in the form of kaolin morphine purchased at sundry pharmicists.
- Yes PSP Porn will be updated again soon.
- It’s a hard question but I’d have to say ‘Snakes on a Plane’ - I’m really looking forward to that movie.
(SugarPit and SugarJoy have also changed today - check them out they’re… full of stars!)
What kind of cookie?
Sam,
Don’t drop the “SOAP”!
I look forward to seeing where it will appear in every post now. It’s um, operatic. yeah.
Snakes on a plane forever, baby.
BA - I feel as if I have a duty to… Actually don’t worry. With your comment SOAP-on-a-post has officially jumped the shark. I will just have to start the ‘SOAP porn’ watch here…
SNAKES ON A PLANE!!!!
I’ve wanted to do that all day.
Very sexy.
And the new design is too.
Mia - feels good doesn’t it? Girl- you too.
I wasn’t going to see Snakes on a Plane, I saw the trailer and thought, “WTF?” But now I will. Have you brainwashed me?
Imconvinced - me? Brainwashed you! Don’t be crazy. Just sleep. Get some nice quiet sleep…
zzz…zzz…s…o…a…p…zzz…zzz…
Just testing the gravatar thing-a-ma-jig.
Nice Tagline.
You change this place more often that I change my name on Myspace. Eh, works for the both of us
Imconvinced - you’re back in the room, feeling fine - enjoy the rest of the show.
Bah, half my screen is still wasted white space when I come here. Narrow fixed-width templates, we hates them, Precious, yes we does!
Bacchus - I did consider making it narrower still. What makes me think you’re not using a 30″ flatpanel…
On a serious note I’m fascinated about how you read sites. Do you look at one website at a time fullscreen? I guess I’ve never really seen that. I tend to assume everyone’s using multiple windows/tabs and programs simultaneously. I hate having to ‘guess’ the right size for a layout and fluid layouts normally only work over a limited range before degenerating into fugly. I also value being able to have a narrow site open and the rest of my screen free for other stuff.
I’m totally open to being wrong though. I know the arguments over fixed vs. fluid but I don’t know the fluid mindset. If you are willing to share how you use the web I’m all ears. It’s funny to see different working styles. To many my desktop would be a mess of programs which seem never to shut. My father prints out stuff he finds online and reads the printouts in the living-room. Who’s to say he’s the crazy one?
He is probably the comfortable, relaxed one.
I use mutiple tabs à la Firefox. My monitor is small though. 17 inch at 1024×768.
Multiple tabs in FireFox on a 15″ powerbook, with the bookmark side tab open and the window covering most of the screen. Lot’s of apps open in the background. These days, I’m running 2 or 3 different browsers in tabs to keep separate projects, well, separate. Also mail.app, and rss reader, etc. I just toggle between as needed.
I like sites about 800-1200 px wide. fluid layouts. that’s just me.
Multiple Firefox tabs and windows open fullscreen (usually, depends on what I’m working on), one or two Opera tabs, and a bunch of apps open in the background. 17″ monitor, 1024×768 unless I’m on my laptop or auxillary GeezerBox.
I love fluid layouts when they’re practical.
Sam, I haven’t migrated to tabbed browsing yet, but I’m an inveterate “right click to open in new window” man. I wind up with eight or nine active windows, but they are all minimized to the taskbar. As I read, I open one; but I can’t stand reading in a cramped window. So each window gets maximized to full screen when I get to it. I navigate between open windows by clicking on the pertinent task bar item.
Fully fluid layouts that work at any width can be very hard to do, but semi-fluid ones (that work at all sizes above a reasonable minimum) aren’t so hard as all that. If you want whitespace around your text, just specify 10% margins or whatever; on a narrow screen where generous whitespace is impossible, that won’t hurt too bad, and it still lets widescreen users use the bulk of their real estate. But when you lock your content at 640pixels like you seem to have, it preserves that “too cramped to read in here” feeling that makes me maximize windows when I read.
My objection to fixed-width layouts (where it’s the margins that expand and contract with screensize, like yours, while the content is not allowed to fluctuate in width) is primarily one of philosophy. You’re locking your readers in your little box, when they ought to have a choice. If they don’t like fluid-width text that’s too wide on their huge monitor, they can simply reduce the window size in a few moments; but if you’ve locked your content into a fixed-width content window, they don’t have any way to widen it.
Don’t worry too much about this — ultimately it’s an artistic and philosophical decision that nobody can make for you, and I don’t expect to “win” this argument. But I am convinced that you are taking choice away from your readers for no good reason.
Bacchus - thanks for the detailed feedback. Since your comment I’ve revisited my thinking on this and almost moved to a fluid layout. I’ll tell you why.
You’re right, reader choice is paramount and every reader has a different way of working. If you impose a size it’s going to be too big for some and too small for others. It’s not very democratic.
Windows users tend to use the ‘enlarge’ button a lot. On Macs the button works a bit ’smarter’. Rather than enlarge the window to fill the screen, it enlarges to encompass the content. Therefore is a page doesn’t require the entire screen it doesn’t enlarge that far. For that reason Mac users enlarge less often and, as they’re a vastly disproportionate chunk of people designing websites, they tend to favor fixed-width layouts.
Realizing this I was about to make the move. Unfortunately under testing two things become apparent.
Firstly as line-lengths increase readability goes down. That harms usability - exactly what I’m not trying to do.
Second, there’s a practical limit to how wide a layout with images can go. Things only collapse vertically until they hit a fixed-height element. That means for a picture heavy site like this - past a certain point, not much wider than the 640px this site is currently, any width increase has no effect on layout at all.
To that I also factored in the other way to increase the site of this blog. The enlarge keys. All the text here will scale so you can make SugarBank easier to read if the text size is a problem (I could make the whole thing scale as it’s enlarged - maybe next rev…)
The other thing that’s holding me back from a fluid layout (aside from the loss of control over presentation which can be a huge problem -sometimes you want things positioned carefully and fluidity can kill that) is that I believe we’re about to enter a new era of small screens. This design has content that fits perfectly into the 480px width of a PSP, iPod (the unreleased one) or high-end mobile phone.
The ‘prefect’ answer (apart from better CSS to work with) would be an elastic layout here, that stretched within limits. That said those limits would be so tight (probably a 50% increase max) that I’m not sure it’s worth it.
Tons of sites are having this debate. The key usability guys all pound on about being fluid (with their fugly sites) and yet almost every commercial site is running a fixed width setup.
Thanks for the food for thought. I’m continuing to mull…
Hey, Sam. You’ve given my perspective fair consideration, which is more than I usually hope for. A few tennis balls back over the net:
Thanks for explaining why all the “hip” websites have “fugly” narrow fixed-width designs. They were designed on, and look good on, Macs. Who knew? Certainly not me.
Your point about the readability of long lines is true, but once again you’re putting your designer preferences ahead of the users’. I’m willing to sacrifice a bit of readability for the convenience of not having to scroll endlessly while I read large blocks of text — it saves me having to continually wipe the Cheeto dust off my mouse fingers. In my view, minor improvements in readability are *not* a sufficient reason to ignore user preference.
Your point about small devices is very well taken, and is something I’ve wrestled with myself. I believe the answer there is very clever CSS, or perhaps one-click theme-switching. I don’t think it makes sense to try to design a single template that works smoothly on everything from a cell phone to a 34″ plasma monitor.
I agree with you that the worst useability zealots often have fugly sites that break horribly when you view them outside their preferred parameters. Nothing’s worse than those fluid “all-CSS” layouts that dump the link bar to the bottom as soon as the window starts getting narrow. Unfortunately, and in all honesty, trying to view your 640 pixel site jammed all the way left in my 1024 pixel window is every bit as “fugly” as those broken fluid layouts. It’s an aesthetic *nightmare*, which is why I keep hounding you about it. Even centering your puny 640 pixels in the middle of the screen would help a lot.
Looking forward to SugarBank 5.0, I know the redesigns will never stop!
Bacchaus - I’m not centred! You must be on IE 6. Seriously that POS is the greatest threat to good design online. Stuff just doesn’t work. This design is centred but not in a way IE recognizes (becuase it ignores standards)
IE 7 will be a vast improvement and a lot of windows users will suddenly see sites the way their designers imagined them to be.
You’re right about the constant evolution. You’ve given me a lot of food for thought too and the next iteration of the SugarBlogs will reflect a little new thinking. My problem is I’m a data guy. I’ll take well done research over ‘instinct’ every time.
Fixed vs. fluid? Times are a changin’ and the answer is blowing in the wind.
I’m getting in on this debate a little late, and maybe I have nothing new to say. But that never stopped me from putting in my $.02 before.
I’m a Windows user on 1024×768 resolution. At work I have two 19″ monitors, at home, only one. I use tabbed browsing and always have my focus on one maximized window. Your site looks just fine with my resolution and browsing practices. And I’m sure you check your stats just like I do. Mine show that the vast majority of my visitors are on the same resolution and my uneducated guess would be that the average users browse sites with the window maximized because the average user doesn’t run as many programs at once as us geeky, enterprising, ADD types. However, as I learned in my web usability classes, there are no “average” users. That one lesson is what makes me favor a fluid design. (At this point, a few of you will give my site a quick check and notice that I have a fixed width design. What can I say, I’m lazy and haven’t taken the time to make adjustments to that pre-fabricated template I downloaded from God-knows-where.)
Wasted screen space seems to be a pet peeve of the vast majority of users I’ve spoken with that use anything above good old 1024×768. While I know it’s hard for us to let go of some of the control of our “baby” that a fluid design requires, I think there are ways to achieve the happy medium. Sure, give the users more control over how they view your site. Give them a % width and let them adjust their windows however they please. However, keep in mind that many users aren’t used to adjusting their browser window to fit their content, and are stuck in Maximized-mode. For those users, you have a responsibility to keep your content readable. I don’t like the suggestion that you let your site get as wide as the user pleases, throwing caution, and line-length conventions, to the wind. On a blog site, your words are your bread and butter. You have to make sure that the main focus stays - literally - in focus. This is why I have been researching some of the max-width/min-width stuff. This seems to be something that’s available to us through CSS (and a little javascript in the case of big bad standards-ignoring IE 6). I think if you fool around enough with max-width and min-width, your “fluid” layout can find a happy medium in usability and style.
Of course, all of this is just theory that I haven’t even begun to put into practice. It’s just the ramblings of a mediocre web designer (Yes, they pay me to do this stuff, but they don’t pay me enough to do it well).
Dude, you so totally are *not* centered, not for 73% of your readers. Or not, at least, for 73% of mine.
Of course I’m using IE6, because according to my stats (and you say you’re a data guy, have you checked yours?) 73% of my users are on IE6. I have to know what my sites look like to my readers.
Sure, it’s a sucky browser. So? It’s what people are using. Saying to your readers “My design would work if you changed your software, meanwhile, enjoy the ugliness” just makes no sense to me. It would be like broadcasting your TV commercials in 3D and expecting the viewers to put on those funky colored glasses. Instead, they’ll think your commercials are terminally blurry, and they won’t buy.
Standards are great, but I don’t think it makes sense to follow the standards if you leave your audience behind. And that’s what you’ve done, if you knowingly used a centering tecnique that doesn’t work for a majority of your readers.
What’s the value of good design if nobody can see it?
Bacchaus - I didn’t choose to use a technique that wouldn’t work universally out of spite. Given the choice between writing bad code that breaks in correctly functioning browsers, and good code that is benignly imperfect in IE I choose the later.
I could fill my code with ‘hacks’ but that’s ugly and I don’t like ugly when it costs time and introduces problems of its own.
In a few months IE 7 is going to work as it should and many sites coded to cater to IE 6 are going to break. Mine (and others like mine in principle) won’t.
People who will only browse via MS product will soon have one that works and that’s just dandy. Until then - I’m fine with a compromised experience on their part. It’s not mission critical here.
(Do you really only use IE? You never use FF or Opera just to see how things look when better rendered? I’d recommend it - it’s an eye opener)
Sam, I didn’t mean to suggest spite — just that you were discounting the huge majority of your users. It sounded like you didn’t even know that your intended presentation wasn’t visible to 70 percent of your users — apologies if I misunderstood that.
I confess I’m baffled to learn that you knew your template was broken in the preferred browser of the majority, and decided that was OK. I understand the elegant logic of standards compliance and am close to being seduced, but to me it feels like throwing the baby out with the bath, if it amounts to dismissing widespread poor user experience. Mission critical or not, to me it’s all about customer experience.
And no, I use Firefox every chance I get. I just can’t use it as my default browser, because I feel I need to see what my users see. In two years or so — when most current IE6 users are finally migrated to IE7 — I’ll probably be able to make the switch to standards compliant browsers.
Bacchus, I’m with you. I hope it’s quicker than 2 years for the transition though. Given how old IE 6 is an upgrade should be leapt on.
I’m trying to walk a line where I can cater to IE without undue compromise. I’ve had some ideas and the fruits of my labors will be visible in time (you didn’t think this layout would last more than a month or two right? This is SugarBank we’re talking about).
Unfortunately I’ve learned CSS without ever knowing tables and standards without knowing hacks. I am picking up some useful hacks though.
My aim is the simplest functional design with maximum flexibility. My concern for mobile devices and small screens is taking me down an interesting path and I’m excited about 5.0 already…