With the return of the full-color, fixed-width design to this site over the weekend, Stopdesign received numerous messages and even a few comments regarding the switch back. Some of the messages and comments are in favor, heralding the welcome return. Others cry foul as their Bleach is stolen away.
“More power to the people!”
… the crowds shout from all around. And just like that, their wish was granted.
Here’s your chance to play Backseat Design Director for Stopdesign, and enforce your decisions. Prefer the stark whiteness and simplicity of Bleached? Want to demand that Liquid Bleach remain on the shelves? I want color! The type is too small! The type is too big! And on and on…
You can now play with configurations until your heart is content. And this little preferences page is your interface for orchestrating any changes you desire… within reason, of course. (Note: The preferences page is also accessible from that little prefs link at the top of the page next to contact, and from any of the About pages.) Choose between three site-wide styles, and/or set text to a base size of small (the default), medium, large, or extra large. Your preferences will hold throughout the entire site, until you change them again.
The preferences page uses a server-side style switcher utilizing a cookie, written in PHP, with very few lines of code. They key (and most of the work done before the release of Liquid Bleach) was separating out the style sheets so that additional color or liquid style sheets could be laid over top of (read: added after) the basic stripped-down version, overriding the stark-white fixed-width design of Bleached.
The text size change is a simple matter of altering the base font-size keyword of the body element with an extra style sheet, since that’s the only place I set font size with an absolute value. All other size changes happen throughout the rest of the style sheet via percentages of that base keyword size. A few adjustments in the background position of certain icons, and the large and extra large text size style sheets were good to go.
As noted at the bottom of the page, Comment Preview and Error pages will not pick up any preferences you change. Those pages are rendered by static Movable Type template code, thus they’ll remain Bleached for simplicity’s sake.
Select the version that makes you happiest. Change your mind tomorrow? Set it back. I’m still partial to Technicolor at the small text size. But on larger screens, Liquid Bleach with the text size bumped up to medium or large doesn’t look too bad either. You make the final call — it’s your experience.
Choose wisely.
51 comments (Comments closed)
Technicolor is my preference. Nice job on everything from the code to the designs.
Nice! Now we can finally choose. It’s a good thing you listened to your audience, and they now have nothing to nag about - though more to compliment you about. However, I still love the Technicolor, bleached doesn’t do it for me.
I am sticking with the bleach. Not sure if I will go liquid or static. Maybe I will try both for a while.
Great addition to the site Doug.
I like having these features, thanks for adding them Doug. Perhaps you could explore some other options… such as a liquid technicolor, and how about a version with colors specifically designed for laptop displays or LCD displays (i.e. more bold so it doesn’t wash out so much). Just a thought. Good job here.
This is one of the best reasons for standards-based designs. Try doing this with tables and suffer!
Really a nice way of presenting the style switcher. I always have trouble finding a place to put the damn thing, I find it’s always in the way.
I’ll stick with the Technicolor version, but nice job on the bleach version.
It’s great to be able to choose the styles - It’s plain and simple Bleached for me, but I’m sure I’ll be going back to colour soon.
The only problem I’ve noticed is that when I hit Submit after selecting a style, I just get presented with a blank page. It still works and going back to the homepage displays the site in the style I’ve selected, but it’s just annoying and confusing to be presented with a blank screen.
I’m on Firefox 0.9
Since you separate the structure and presentation in the CSS is there any chance of getting a liquid Technicolor? Or is the header image limiting that option?
CSS Rocks! And we still hear people asking why bother to standards…
By the way, a question out of my personal curiosity. Why did you choose a server side switcher instead of declaring alternate style sheets in your page templates? In capable browsers like Firefox we would be able to easily choose between all the style sheets.
Viva La Bleach Revolucion!
Chris (#7): Not sure what’s happening in your copy of Firefox. All the browsers I’m testing, including Firefox .9, work fine. Perhaps you’re blocking referers, and that’s somehow preventing the prefs page from reloading and confirming that your preferences are saved?
Nick (#4) and Vanderwal (#8): yes, the header graphic limits creating a Liquid Technicolor. Many of those images have no more data to either side, so I’d be forced to improvise something which I’m not confident would look as good.
Humberto (#9): Not many browsers support selecting alternate style sheets that way. And when they do, they aren’t persistent (they sometimes go back to the default style when you switch pages). I originally had the extra style sheets inserted as alternates (even with the server-side switcher), but Safari was having a cow and got confused over which ones to apply, so I removed them.
Great job. I’m glad you let the user decide what they like best. I think all three versions of your site have a certain charm to them. That said, I’m sticking with fixed-width bleached.
You are such a cool geek.
Wow, cool feature. I like the text a little bigger, but I definitely feel that technicolour makes things stand out better.
While the Bleach experiment was definately interesting, I do happen to enjoy the color. I think it’s a sharp design that is well put together. However, I think the choice is definately the best of both worlds at work.
Keep up the great work!
“Choose wisely” - is that a reference to Indiana Jones & The Last Crusade? I immediately saw the old knight saying “But choose wisely. For as the True Grail will bring you life-
the False Grail will take it from you.
What if I choose the wrong design!?!?
I have to agree with Humberto - I’d like to see the alternates appearing in my browser as alternate styles as well. I’m sure you know that it’s just a matter of putting links to the styles on top of your documents as alternates :).
~Grauw
Hey Doug,
Great work as always … I prefer the fixed Bleach myself … I love alotta whitespace! :) thanks for the options!
The white one was minimal perhaps and sensual, now has good election of trowel of colors, you could give to the users the possibility of changing it by about three games of different colors. Chilean greetings,
Jorge
Well, insert the alternative stylesheets and don’t in opera. Do it by using PHP or JavaScript or something. I know what your reponse is going to be like: “I don’t want to serve different versions to different browsers.”. But its not like this is taking away from anything. Even if you did it by JavaScript the styleswitcher would still work in JavaScript disabled browsers
My 2 cents. I guess my opinion is only worth 2 cents. Your opinion is probably worth like $1.00(How can 2 cents be worth a dollar? Oh well….)
Very nice job, sir. Just stand-out quality on all fronts. The only thing you don’t have is a book. Note: this is not considered a bad thing, merely an observation of the *only* thing I see that your contemporaries might have “over” you at the moment.
One of the variations on Bleached are my current faves. Thanks for retaining the choice. That’s *good* web development.
Gabriel, doing it with tables would be just as easy, if not easier than with divs. Tables can be styled and colored just the same way.
Tables are evil, but they do allow fallback so the site would render correctly in older browsers. It’s a trade-off.
Bleaching away as we speak. Very cool feature! I might do the same thing with mine someday…
BTW, works like a charm in Firefox 0.9.
Very cool Mr. Bowman!
at font pixel 12 set on my firefox, your site have always came across as having a smaller font sets and i have to do ctrl + else i won’t be able to read you sidebars.
now i can set a bigger font set just nice. you absolutely rock as a web designer!
That’s it??!
What about option D - Liquid Technicolor?
I thought that was were this was all leading…
step 1. Strip the design visually
step 2. Make liquid layout
step 3. Re-apply colour
What happened to step 3?
I’m going with Liquid Bleach, because it is a better layout in my eyes; though I already miss the colour :(
I can’t resist:
1. Strip design
2. Make Liquid
3. Apply colour
4. Profit!!!
:)
This design and Mezzoblue’s new design are designs that you could stare at all day and they would never get old.
Have you thought of moving to Movable Type 3.1? It has a new dynamic option so that you can render your comment preview and error pages (and any other pages, for that matter) from PHP rather than CGI. Your “prefs” settings would then work across the entire site.
I love the experiments you’ve done lately. You’ve certainly made us all think more about functionality.
This looks great.
Help! I can’t decide which one to choose.
How about a random one? ;-)
I like the change back. I know that some “experts” say that we all should be more consistent and not chnage our site designs that much, but I disagrre and embrace a bit of a mix up here and there.
I change the skin of my browser and my desktop almost every week just to stay fresh and new.
aaaaah… the beautiful, calm, eye-soothing colors are back. :}
Nice experiment. Thanks for sharing with all of us in the peanut gallery.
I like new design, because bleached is too “white”. Good job with preferences page.
With reguard to #7 and #11:
I have a session based server side style switcher on my site and had the exact same problem. I still use the switcher on my portfolio site ( http://portfolio.matthewwilcox.com ), i never did figure out why firefox suddenly stopped getting re-directed back to the page from which the switch was made.
An interesting problem i had yesterday was to do with the style switcher when modified for cookies. Worked fine and dandy except in a couple of people’s Internet Explorer, where, when they went to view my blog, all they saw was 404 errors. But not my custom 404, instead they saw generic 404 errors. Load the exact same URL in Firefox and it worked fine. You could even load certain blog enteries and get partial content. It made no sense, and i’ve ended up ripping the style switcher out for now.
I’m utterly baffled.
Good job with Bleached btw :)
*goes to see if there’s a fixed width bleached design*
PS - I get the same problem as Chris (#7)
Blank white page after choosing a style in firefox.
Nope, I havent changed any Firefox preferences to block referer sending (I wouldn’t know how). I do run Norton Internet Security though, and that’s been known to break a few websites. *frown*
It’s a great concept and the way you presented each part sequencially makes it all the more interesting. More people should be using the “cascading” part Cascading Style Sheets. =)
For the first time in years I changed my XP’s colour scheme from Silver to Olive Green. I also changed my Opera’s scheme from Crimson to Jungle. What a huge change (except the Quick Launch Icons are not sized right; small is too small and big is too big. Where’s medium?).
As much as I liked the Bleached the return to colour realy sets it apart from the myriad of minimal grey-on-white sites out there.
re CSS: I shudder when I think back to the days of table based layouts and single pixel gifs.
In reply to #35, I too run Norton Internet Security. I just tried changing the Preferences with it disabled and it worked without a problem. Mystery solved. :)
In reply to #39
Im getting very tired of Norton breaking web pages, to the point i’m thinking about just not using it. I made a small entry about a couple of problems Norton introduces to websites here:
http://mattwilcox.net/devblog/2/
The really annoying part is that people who have it installed and -don’t- know about it will just assume the pages they visit are broken, when in fact they are not.
I am currently trying a similar concept. I hate the term “skinning” for no reason other than I makes my thinks of reptiles… But I want offer three themes for the user to select from (or not bother at all, in which case the default theme remains) and just as you have done, allow them to select type size. A User Control Panel or something like that, simple style switchers, etc… we still have to come up with the designs! But, some people love control (um, designers? never!)
But this is excellent. And I love bleached. My dream site (total score=0 on the usability scale) is white on white, I kid you not. pure bliss… nothing.
In fact, before I see this on like 1000 sites, I am planning to add a “space” for mediation and reflection, a “Meditation page/space” with nothing to choice, decide, think about…a break in what if a now a life in fast fast motion.
Only choice is to enter or not and then when to exit and then whether to think I am a jerk; breaks every rule of design, Branding, site structure/ user orientation, everything! And it is not to be clever or “ironic” (translation: aren’t I clever?) but to give the user the choice to rest, reflect, maybe close her/his eyes.
I love the information empowerment age, but I need moments to center myself and sometimes I literally can’t pull myself away from this wonderful tool to do so. Hey, the code is free and downloadable (ha ha)… I need five minutes in my space.
bye, Love you guys!
Doug, aside from the simple fact that people can chose their favorite way to view your site you can also track and manage new design elements added to your sites. It’s not a new idea at all (my.yahoo.com does this limitedly), but breaking the style elements apart and allowing the users to determine the direction site creative is really interesting. And, creating a well formatted modular xml/xhtml/css site allows the creator to do this more efficiently…. basically - doing this would allow you to flush out designs faster.
Thank you for the ideas. That’s why I keep coming back.
Yup, good to see style switcher!
I like the technicolor-version the most, because it has beautiful colors and images.
I’d like to see this fluid as well…
Ops, return to the origin !!
When I can change the skin ?
Gabriel, doing it with tables would be just as easy, if not easier than with divs. Tables can be styled and colored just the same way.
Well, I’m not too sure that’s correct… there are some details to this that I do not believe would be reproducable with tables, which would also degrade nicely in older browsers
the liquid layout for instance would not be easier to do, since you would be actually changing the code on the page, not just a style sheet, if you wanted it to degrade properly.
While some may look at this, and see 6 rows, and 2 columns, there is much more to the design than 12 table cells…
I am so happy I found this site. It is very inspired.
I tried to change my settings though, an it goes to a page unavailable and the settings are not changed. I tried to write you on the contact page and it didnt take. My cookies are on.
Anyway, great site, great articles, great links, I visit here everyday now.
When are you going to speak in LA?
I am so happy I found this site. It is very inspired.
I tried to change my settings though, an it goes to a page unavailable and the settings are not changed. I tried to write you on the contact page and it didnt take. My cookies are on.
Anyway, great site, great articles, great links, I visit here everyday now.
When are you going to speak in LA?
This is so cool. Full-colour is my preference, so I’m glad it’s back.
Nice
Aaaaarrrgh too much choice!!!!
Just kidding, it’s quality work. Personally I reckon Technicolor’s colours are well thought out; I’ll be sticking with that for now!
Comments no longer open for this entry.