Experiment with position:fixed
UPDATE: I've added some javascript to adjust the position onscroll.
Note: This article was originally posted under the Long Way Down theme.
I've had this idea in my head for awhile and haven't had the time to implement it exactly how I wanted to. However, I did want to ask for some feedback on this idea that I had. For those of you reading this via your newsreader, come take a visit to the site.
For everybody but those using IE, you should notice that the comment box is located in the right hand column and uses position:fixed to force it to stay in place as the user scrolls the page. The reason why I like this idea is I've often found myself responding to an article or to another comment and having to scroll back and forth to formulate my response. By having the comment box available in this fashion, I'm hoping that I've made it easier for people to post comments on the site.
My initial concern is for users with lower browser resolutions as the content could appear off page with no way of accessing it. The other dilemma is that I had to find a location for the navigation that appeared in the right column. For now, I've simply moved it to the bottom of the page.
My preferred solution to this was actually to use JavaScript. Had I done so I could have:
- only set the position to fixed once the page has been scrolled past a certain point, locking the div to the top of the page. This would also help minimize off-canvas issues with lower resolutions.
- detected if the layer is appearing off-canvas so that the comment area could reside in its normal location underneath the content.
- added support for IE.
What do you think of the concept? Does it help or harm the usability of the site?
Conversation
I love it. For me it helps the usability of the site. For longer articles it will be particularly useful. I can think of a few places I would love to implement it were I allowed. Love the color change with cursor focus as well.
Interesting idea (although I do confess that, after reading a post all about the new position of the comments box, I then automatically looked for it underneath the existing comments! - it's going to be quite a leap to unlearn that interface standard).
I would definitely do it with Javascript.
Great idea. I love it! When commenting on a specific statement in an article, you'll have the concerning text paragraph beside. It increases overview and therefore usability as well.
But there's a little problem in Firefox with 1024x768 and multiple tabs open. I can't get down to the send-button, it's out of the field of view. I must zoom out to see the options and send-button. I'll send you a screenshot, just send me a mail, if you need one.
Wow, neat stuff. My Fx scrolls with a lag, but that might just be my (for now) crappy Windows box :P
Anyway, really inventive. You seem to be the first to do this, so kudos to that.
I love it! Makes much more sense than that crappy phpbb-stuff with a small iframe or something where you can scroll through the previous posts.
Could be great, but as Bj?rn already mentionned, I can't see the entire form with the default font-sizing. If I decrease the font-size, or make my window "full-screen" with F11, then I see it. I'm using Firefox with Windows 98 in 1024*768.
Apart from this technical concern, I have also a visual concern, because I didn't notice the form at first, and only when you pointed it out I saw it. I think this is a case of "navigation blindness", I was concentrating on the main content, and didn't look at the sidebar. You should maybe try to make it clear, also for newcomers who don't look at the sidebar because it's rather irrelevant in blogs. Maybe a strong color whould work, I dont' know.
As I type I see a third problem: it's so small, I like having longer lines... but maybe that's just me.
There are small glitches, but I think it would be very effective.
It looks fine and works well with Safari on Mac OS X. Great idea. Why I haven't seen this before on any other weblog? Not a love on first sight, but on first scroll ;)
I initially had Safari's window set to about 515px high, which cut off the bottom of the comment window. The problem is, the border underneath the "Comments" form makes it look like that's the end of the form, and I was looking around for the "Post" button before I figured out there was more underneath.
If the border enclosed everything ? comments, options, and preview/post buttons ? it would maybe be clearer that there was more information below.
I diggit.
Like a few other posters though, I have to laugh at myself: as soon as I was done reading the article, and the comments, my brain blanked for a fraction of a second while I looked around for the comment box. Weird huh.
May I use this opportunity to plug my photo blog, whose nav relies on position:fixed as well as alpha-transparent PNGs (read: it looks like sh!t in IE, but great in Firefox and Safari). Comments on the wisdom of this design are welcome.
Using Opera 8, I have not enough vertical space so "submit" buttons remain hidden.
Apart from that, great idea :).
Ingenious and well-done. I think it makes perfect sense and it's also elegant. Really one of the best comment form implementations I've seen. Now if you just combine it with live previewing as you type, you'd leave every other comment form on the Web far behind.
Like it a lot, really elegant. One problem is some funky things going with the cursor in Firefox on a mac, makes editing a post really tricky.
I have to agree with mark on this one: the my cursor isabout 15 pixels to the left of the actual letters... I'm using the ubuntu build of firefox 1.01
This is a fabulous implementation.
For me though, in Firefox/XP the cursor fo the text appears about 5 characters to the left of where I am actually typing.
Are you going to release this code under CC at all?
well done. very nice implementation of a tired old stand by.
post some data down to the road and let us know if this has increased your comment totals or not. I would imagine yes, but you never know.
perhaps, if you are so inclined, track the number of repetitive posts that appear under topics. I can see that being the only draw back with this implementation. People not reading and repeating already asked/answered comments more frequently than the regular group of non-readers who habitually skip the comments and ask anyway.
again, very well done. :)
Wow, why I didn't think of that before?
Very, Very nice. However, horizontal scrolling moves the comment box out of its 'frame' :)
Novel idea for the comment form. You can refer back to other comments or the actual post while posting a comment.
Too bad I didn't think of it first. I'll have to borrow this one for my next redesign perhaps.
k
Very nice - but why didn't you fix the search and main nav as well?
Rich: I didn't fix the main nav (the one on the left) because it would have interfered with the comments and I didn't fix the nav on the right because I felt it was secondary content and didn't need any additional prominence by keeping it fixed while scrolling.
I had thought about keeping the search fixed but now that I have Live Search enabled, the search results had the potential to interfere with the secondary navigation. As a result, it's stuck where it is.
It works in IE6
You win, man. One of the best ideas I've seen in a long time.
great!
Great form!
here's a crazy idea... highlight the comment the arrow beneath the form is pointing at and then do nested replies based on what the comment form is pointing at!
NEED TO STOLE THIS CODE!!!!!
GREAT WORK!
Humm, Im impressed bout the form, so kewl!
Es solo una prueba a ver que
fgdfgdfgdfgdfg
Probando esta maravilla
Very nice work.
Really great & clever idea. Works fine.
Well this certainly is pretty nifty!
Incredible. Perfect placement and perfect integration and usability. Good job.
Extremely cool. Can't wait to use this on my own site, if time allows a redesign.
It's really easier to respond to other comments. Next to its usefullness, it also has a nice side-effect. It draws the users attention to the comment-box. While other blogs just offer the possibilty to comment somewhere deep down the page, this box clearly says: Hello, here I am. Use me to comment on the text.
I've noticed Nicolas concerns about navigation blindness, but for me a fixed box is hard to overlook. If you feel the urge to scroll, that is.
ggggggggggggg
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
Nice idea, but It's slooooooooooooow on Mac + Firefox. After pressing the Page Down key, it takes well over one second (closer to two) before anything happens. Feels like torture. And yes, I have a double processor mac.
All position:fixed stuff slows down the scrolling radically. That's probably one reason why it isn't used that much (apart from the fact that IE doesn't support the feature).
Pues te quedo muy bien.
It's powerfull! I love it
Is anybody here i do not see anyone
ИнтереÑно напиÑано, но мне кажетьÑÑ Ñ ÑƒÐ¶Ðµ Ñто где то видел...)))
Awesome post. Do you mind if I ask what your source is for this information?
Hi there, I found your blog via Google while searching for first aid for a heart attack and your post looks very interesting for me.