WSA Winner
Tuesday April 6th, 2004
It's easy to forget that a powerful design doesn't have to be chock full o' graphics. Twinsparc lives up to their own credo of "Smart Design for Print and Web" by taking full advantage of web standards, simplicity and extensive use of white space.
Worth noticing: the 800 pixel high center column forces a scrollbar to appear for all pages. This effectively stops the content from "jumping" horizontally and provides a "frames-like" experience where only the content appears to be refreshed when viewed in a browser that auto-hides the scrollbars. Smart.
If you ever submitted a site to WSA you'd know that our own technique of forcing a vertical scrollbar is slightly more radical. :)
Reviewed by Johan Edlund
#1
could you please explain the "Worth noticing" more, please. I was having a hard time following? What does "jumping" mean, i have probably seen it but don't call it that. Are there any links on it?
I think the links are hard to recognize at first, and the site does not punch me in the face that other sites on here have. I do like some of the designs they have done.
Posted by dcohen :: April 6th, 2004 at 07:45 AM
#2
What I mean with "jumping" here is that some browsers, like Firefox, hides the vertical scrollbar completely if not needed. This causes a centered layout to move roughly 15px either to the left or to the right. If you're using IE6 you will not see this happen, since IE only "greys out" the scrollbars thus keeping exactly the same width for the all pages (i.e. in the viewport).
If you have very fast loading content, like Twinsparc in this case, moving from one page to the next could cause the whole layout to jump 15px left or right.
Hope you know what I mean. I haven't seen anyone discuss this problem (or *minor annoyance*) before.
Posted by Johan Edlund :: April 6th, 2004 at 08:12 AM
#3
Just curious - since the browser that causes jumping (Firefox) is standards compliant, why not use a CSS rule like body { overflow: scroll; } ?
Posted by Matt Robinson :: April 6th, 2004 at 10:52 AM
#4
Matt, what you would like to write is:
body {underflow:scroll;}. :)
If anoyone has a better, valid suggestion I'd be all ears.
Posted by Johan Edlund :: April 6th, 2004 at 06:20 PM
#5
html {
height: 101%;
}
OR (but doensn't work on Firefox)
html {
height: 100%;
overflow-y: scroll;
}
Posted by Peter Briers :: April 7th, 2004 at 11:09 AM
#6
The scroll bar thing's a nice touch, it's the simple stuff that show a great designer.
Peter: nice one, used that :)
Well done Twinsparc.
Posted by Jamie :: April 9th, 2004 at 10:52 PM
Comments on: Twinsparc