WSwI New Look Sneak Peak
I know I’m calling this a sneak peak, but this mostly gives away what I’ve been doing the last couple weeks when I’ve had spare time on the weekends. The redesign is still incomplete (front page only) and is only available to you if you’re browsing with either Firefox or Safari.
To switch to the new look you can follow this link and to return back you can click on this link.
Please remember, only the front page is functioning, and most likely (like 99.9999%), I am fully aware of all the bugs you might find. My to do list
includes offering RSS feeds for the JavaScript prototypes and the Podcasts (which has been needing a separate one for a while). I need to write your personal settings to a cookie when changing around the drag and drop modules on the right hand side. I need a disable sound link for those who find the swooping to be annoying (because I will assume that some of you will, and others will think it’s totally kick ass). Last (but certainly not the end of my list) is that I need to come up with a better tour guide bee since I’ve stolen the bee from the Wasp website. If you click on the Take a tour
link by the search box, you’ll see what I mean. Other than that, have a fun peak.
Oh, and please don’t email me with screenshots and long descriptions of what’s quirky. Like I said, I probably already know about it.
July 24th, 2006 at 1:26 am
Hey, that’s pretty cool. Is there a story why you’ve moved away from a fixed width design to a fluid width?
I like the moveable blocks, but it would be more intuitive if there was a destination border to show were the block is going. I drag’n'dropped and wasn’t sure whether it had done it. The movement within the sidebars are interesting, not sure whether it’s useful, but you’re showcasing your JavaScript which is cool.
But then again, you say it’s a sneak peak, and I’m sure you’re adding this stuff!
July 24th, 2006 at 1:31 am
Heh, just seen the buzz-tour, and that’s pretty cool. (not got speakers here, so don’t hear the annoying swooping sound)
July 24th, 2006 at 1:35 am
I’m glad someone else mentioned the ’swooping sound’ - I thought my new Busta Rhymes CD was scratched!!
cool design dustin (now I know the sound effects are the website rather my my CD’s!)
July 24th, 2006 at 1:49 am
Why can’t I see the preview with Firefox (2.0b1)?
The Messages states: “Sorry, this preview is for Firefox and Safari Users only.”
July 24th, 2006 at 2:13 am
The only real issue I can see is that red and black are a problem for people suffering from a certain kind of colour blindness. And personally I like red text to be reserved for warnings.
July 24th, 2006 at 2:36 am
Very nice!
I prefer it heaps more than the existing site!
The dynamic functionality is sweet too! Nice work :D
I love the sounds too! It makes the site feel more interactive without going over the top.
The drag and drop outlines would be a good help as I too had the same problem as trovster with being unsure as to whether I had actually dropped the box properly.
July 24th, 2006 at 4:03 am
Oi, that ‘bee’ is a wasp! Go find your own guide before we whoop your arthropically confused ass! ;)
No, really.
July 24th, 2006 at 4:25 am
I would get rid of the full color white horizontal rules and seperation lines, they are too thin. It could work if they where about 15px-20px in one solid color.
The blackish background I would try to use something more vivid like more very dark blue-brown or something. The red colored text could then blend more with the background.
The icons could need some brushing up, make ‘m more distinct and more WSWI stylee.
The javascript features are ok but the drag and drop would be better if you would try an effect like this one (so the user knows better where it gets dropped). This could be a hint (not sure)
http://interface.eyecon.ro/alpha/indic.html
The layout is ok
July 24th, 2006 at 6:06 am
Dustin - great, still simple, design. :)
But tell me, why do you use „this link” archor text? :)
Doesn’t it look nicer? :P (Not to tell about that. *pokes* ;))
July 24th, 2006 at 6:06 am
Whoops, one „to” extra. Sorry :P
July 24th, 2006 at 8:34 am
I had to open up firefox to view this even though Camino is basically firefox and has all of the same js support! Don’t make browser specific code!!
Otherwise, not what I was expecting but I’m glad it wasn’t what I expected.
July 24th, 2006 at 9:05 am
@Trovster: One thing I wanted to move from was the border-model of targettable affordance. I thought I’d try the background hi-light instead. Then again, this is a prototype and your insight is valuable :)
@Ross: I’m going to hold it against you that you said the sounds were cool :). In the end I might find something a little less subtle as well. I like the idea of having sound, but not annoyingly terrible. Something that’s just a fraction of a second is what I’m looking for.
@Reen: I’m not exactly sure why that’s happened. I’m basically using poor man’s version of get_browser() and only checking for ‘FIREFOX’ or ‘SAFARI’. There indeed is no browser specific JavaScript…. it’s the CSS that I went nuts with (using :hover on pretty much all the controls in the modules). It’s also filled with PNG’s in a couple places. I thought I would try out what it would be like to get it fully functioning in my larger browser base, and add a complimentary
ie.csswhen I was finished.If you can’t see it now, all I can do is throw up my arms and say “it’s just a preview.”
@Ian: Woo. Someone likes. Yay! :)
@Drew: Didn’t you read what Mr. Buzzy said? Haha. I crack up myself everytime I watch that buzzy tour. I’m thinking about holding a “Design my Buzzy” contest and giving out a prize. Otherwise I will directly be ripping off buzzy (can I call him that?) ;)
@Johan: Oh dear, I went thru icon searching hell to get some of these. The fact is, I’m not really sure what “WSwI”y means, but thanks for the tips on the design.
For the drag ‘n drop, it’s more or less of a “Drag ‘n Drop ‘n Swap” - so you should know where you’re dropping it at all times.
@Riddle: I did that purposefully actually - and I am fully aware about that and have probably linked to that more than anyone else I know. I usually put stuff like
this linkorright herewhen I have no intentions of SEO or other clickibility factors. I think by now, people know what it means. In general though, it’s bad practice.@Peter: I mentioned this a bit farther up in this comment - that I’m using poor man’s browser sniffing for the preview. None of the JavaScript is browser specific whatsoever - it was indeed the CSS that I am more worried about since I depended on :hover like a mad man.
@All: Thanks for not sending emails!!! You guys rock :)
July 24th, 2006 at 10:59 am
Sweetness.
The scroll thing confused me for a second, because I was trying to use the mouse wheel and nothing was happening. Have you thought of adding some of that sliding to a scroll event?
I was surprised though, with all that javascript stuff, no fancy ajax search?
And what would make this even more sweet is if I could drag that line seperating the two main columns to get my own special size. :P
July 24th, 2006 at 11:29 am
I likey!
July 24th, 2006 at 12:47 pm
I agree with Chris. Your red-orange link color is a little too strong. There’s so much contrast between it and the text that it’s hard on the eyes. Maybe a lighter orange like #ff9900 would be better. Otherwise, I like it a lot. I assume the sidebar will be narrower on the inner-content pages?
July 24th, 2006 at 11:26 pm
What’s the reason you are restricting the page to FF a Safari? Don’t get me wrong, but to me that’s the same as IE only websites.
July 25th, 2006 at 12:15 am
Dustin - I sound the design was cool (not explicitly the sound effects) ;->
July 25th, 2006 at 8:30 am
@Elliot, I thought about that, but I didn’t want to go with a frameset of any sort just for the sake of managing it. That would however made it much easier to lay it out side by side.
@Erik: Yay!
@Jason: I tried the #f90, and that’s not bad :) I might end up going with that. The sidebar I still haven’t a clue. Most likely it will be the column on the left and the meta + comments on the right.
@Klevo: I can’t enforce it any more clearly by using words like “Prototype, Demo, Preview, Incomplete” and “I’m not done yet!”
Surely you’ve caught one of those. So like any blogger would probably say, “Please think twice before you say something stupid in your comments.”
@Ross: Ah. I gotcha. Then you are exactly the type of person I will be building the ‘disable sound’ feature for :)
July 25th, 2006 at 11:26 am
another small remark I want to add:
perhaps since the drag and drop is confined to the left col to be switched with the right col or viceversa, you might as well just add a click (arrow to left to make the switch left to right) and animate the switch by adding a blink effect when the switch is done.
July 25th, 2006 at 11:28 am
… I meant of course a sort of top-left-bottom-right icon (hovering you highlight the direction with the arrow)
July 25th, 2006 at 7:29 pm
Dustin, if you can find a workaround for the png crap in IE please post your findings on your blog. In the meantime… I tinker.
July 27th, 2006 at 2:52 pm
You might want to test your orange-on-black combo with a strong protan like Clagnut. Could be illegible for that group (though relative brightness might overcome that).
August 11th, 2006 at 8:32 am
It’s a very good looking theme you’ve made but I think it’s too serious. I like WSwI because it’s slightly wacky and something different; I feel that this theme is a step closer to the web design blog norm. I do like the YUI stuff though.
August 26th, 2006 at 6:44 pm
[…] I’m playing this redesign in old school fashion. By now you might have realized that the page you’re reading (if you’re not reading this through an rss reader) might look a bit like the preview you saw a few weeks back from the sneak peak preview which was available for Firefox and Safari users. At the moment I still have no clue what this looks like in Internet Explorer mainly because the only time I get to work on my website is at home - on my Mac Mini. If you’re still seeing the same ‘ol design and but would like to see the article pages, then grab the new cookie and come on back. I admit it’s still a bit raw, but hopefully it gives you (the readers) a bit of flexibility. […]