SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Should we be styling our scrollbars?

    While looking through a gallery I came across this blog (http://blog.kimellefsen.com/) and noticed the stylized scrollbar. (If you can not view the scrollbar, there is a screenshot attached.)

    It's not necessarily recognizable as a scrollbar at first, but it does look nicer than the standard browser scrollbars.

    Should we be stylizing our scrollbars more, or should it should it be reserved for only a few projects where it really enhances the site? Or should we not be stylizing scrollbars at all?

    I don't know much about stylizing scrollbars, but it seems like a good idea to style them. Just as you always style a sites background (unless you want the background to be white for the design) we should be styling the scrollbars unless the default suits the design.

    Maybe this could create usability or other problems, but I don't really know, which is why I am starting this discussion.

    So let's hear what you think! Should we be styling our scrollbars?
    Attached Images Attached Images
    Last edited by mikebrady; Apr 22, 2010 at 21:00. Reason: Added a screenshot.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I can't see the stylized scrollbar. I see a regular browser default...in all my browsers, by the way.

    I really thought styling scrollbars was a relict of the 90s that no one would even think of bringing this over to the 21st Century...

    I'd stay away from it without exception. No use in it.

    Why do you think it seems like a good idea?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I'm using Chrome to see the stylized scrollbar. Can't see it in FireFox or IE. I'll have to post a screen shot of it.

    I think, when done right, it helps completes the site's design. On this site, the stylized scrollbar does not feel 90's or old in any way.

    It just fits in with the rest of the design and feels natural.

    But, I guess we already found one flaw in that it does not work in FireFox or IE. I don't have Safari, but I doubt it works there.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Maleika, I did not see it at first either. Then I viewed the css and noticed the webkit selectors. Then I viewed it in Chrome and sure enough it is there.

    I know IE always had the option of styling scrollbars and I never was a big fan of it. I think this may be helpful for those that have such a dislike for scrollbars, at least it would give them the option of slimming them down a little.

    I don't have Safari, but I doubt it works there.
    It should, Safari runs the webkit engine.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I just tried it in Safari and it doesn't work there either.

    I do see your point, mikebrady, but I guess it depends on how you view a browser. To my mind, the browser and all its functions are separated from a website. The scrollbar is part of the browser so I'd never expect it to be styled just like I'd not expect for my browser's toolbar or entire GUI to change based on the website I visit.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    To my mind, the browser and all its functions are separated from a website. The scrollbar is part of the browser so I'd never expect it to be styled just like I'd not expect for my browser's toolbar or entire GUI to change based on the website I visit.
    I never thought of it that way, and I agree with you. But then should browsers be styling their scrollbars to better match the browser's GUI?

    And since they aren't doing that now (except Safari), is styling the scrollbars on our sites a good solution to the browsers lack of good scrollbar design?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It works for me on win/safari-4

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I didn't word my post correctly. Scrollbars are part of the OS rather than the browser. Sorry!

    Not sure whether browsers should force a certain scrollbar style. If you use skins from Opera or Firefox, many of them modify the scrollbar to fit the theme, so it is undoubtedly possible.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It works for me on win/safari-4
    Interesting. It does not work on Safari 4 in OS X on the Mac.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hah, yea I was just thinking about that and realized the scrollbars are a part of the OS. But also, like you said, if you skin Opera or Firefox the scrollbar can change to fit the theme. So browsers do have the ability to change to the scrollbar style. So why don't they? Do they find it not worth it?

    I don't know, but I think they should. Right now I am using Chrome and with my current set up (not sure if it is the default or if I changed it) Chrome appears in a baby blueish color and then there is the gray scrollbar that I see in Firefox and IE. If the scrollbar did match the style of Chrome it might look more natural and give the browser more uniqueness, rather than having the default OS scrollbar.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Most people don't like it . Some find it confusing and out of the ordinary I guess.

    FOr those savy people who want more zazz in our browser, skins are available, but Mozilla just decided to keep it basic for most, and then have a sexy addon for those who want .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think it could actually enhance a sites design whenever the scrollbars are set on elements inside the page. After all that is when designers start complaining about scrollbars being to fat.

    Take This Page for example. That was just something I threw together a long time ago but I think those slim scrollbars would look nice there.

    As long as I don't have to start giving the viewers directions on how to find the scrollbars then it could enhance the looks of a little site like that.

  13. #13
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if you stylize the scrollbar tastefully, and not necessarily do it to add "more zazz", but to polish up the design? Say Chrome did not change anything about the default Windows scrollbar except give it a blueish tint to match the rest of GUI.

    I'm just saying that if you (as a browser developer) can change the scrollbar, then why stick with the default? The way I see it is that, being able to stylize it is one more opportunity to enhance your design. Of course it could be done poorly, and look awful, and annoy users, but if done right it could make the users experience even better.

  14. #14
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had I been browsing with Google-Chrome, and come across this site, I would have had an initial "where's the $%^%$ scrollbar" moment. I will put up with styled scrollbars within the page if they are readily recognized, but to mess with the main scrollers is an abomination. Everyone, and I do mean everyone, learns their own browser, and has certain expectations of just how to use it. Having to recognize some designer's idea of how the vertical scrollbar ought to look is not within the realm of those expectations.

    Before you alter the user interface, remember that greater than 99.9% of all users learned to browse somewhere other than your site. Exercise care.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  15. #15
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    I would have had an initial "where's the $%^%$ scrollbar" moment.
    I agree, but I think on this particular site, the way the scrollbar is stylized is what creates that reaction, not the fact that it is stylized. As with everything else with design, it can be done well and it can be done poorly.

    We are of course asking this question assuming it is done well and still serves its purpose of being a recognizable and usable scrollbar.

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I really thought styling scrollbars was a relict of the 90s that no one would even think of bringing this over to the 21st Century...
    Let's be fair - a LOT of malarkey from the 90's is rearing it's ugly head again... we go through this every few years. From "I HAVE to have this exact font everywhere" to autoplaying media to styling elements that you really have little business messing with... From framesets to javascript doing CSS' job - it's all there.

    Hell, even PX metric fonts are making a resurgence with the total steaming piles of failure that make up the current crop of forum skins (vbull 4, myBB, phpBB - though phpBB never left them).

    Just look at all the nimrods slapping up "best viewed in" garbage and the "don't use IE" games of the people jumping the gun on specifications not even out of draft.

    Quote Originally Posted by kohoutek View Post
    I'd stay away from it without exception. No use in it.
    Which goes with something I always tell aspiring designers and developers - and for the former it's often a bitter pill to swallow.

    People do not visit websites for the cutesy **** graphics you hang on your layout - they visit for the content. You spend too much time messing around with the appearance of every little stupid element, you are probably neglecting not just the amount and quality of the content, but interfering with the users experience of getting to it. In the case of a LOT of this 'gee ain't it neat' cutesy scripted trash, usually the net result is blowing 400k of images, 400k of javascript and 100k of markup/css on delivering a mere 3k of plaintext.

    Of course the REALLY sad part is that things like styled scrollbars usually rely on browser specific code or javascript - making it dead weight/wasted bandwidth for the people not on the right browser or with javascript blocked...

    The firefox noscript plugin and opera's in-built per site enable/disable of scripting being VERY popular for a reason.

    But let's look under the hood of that blog... 12k of HTML, 88k of javascript spanning 13 SEPARATE FILES, 24k of CSS in four files - all to deliver what appears to be 3.6k of text that barely has any layout or styling applied to it... and leaving one asking the question 88k of javascript FOR WHAT?!? 35 validation errors in a tranny doctype means it's not HTML, it's gibberish - the document outline shows broken heading orders, etc, etc...

    Sad part is a 8 bit .png screencap of the site would probably be smaller than the total combined page size... NO reason for that to be more than 8k of markup, MAYBE 12k of CSS - and I'm not seeing ANYTHING on that site that warrants the inclusion of javascript.

    Especially since it looks like 90% of it doesn't work on anything newer than IE6.
    Last edited by deathshadow60; Apr 22, 2010 at 22:01. Reason: added 'review' of blog.

  17. #17
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikebrady View Post
    It's not necessarily recognizable as a scrollbar at first, but it does look nicer than the standard browser scrollbars.
    I did the same thing for my own site, andrew-brundle.com, a few weeks ago.

    It only works in Chrome; in other modern browsers it just degrades. The only issue I'm aware of is that it creates a sort of 20px horizontal scroll in IE6. In other words, IE6 generates a horizontal scrollbar.

    The example you've referenced is, IMO, a bit too narrow. Not sure about those rounded corners, either.

    The CSS needed for this is fairly simple. On my site, I've left the code right at top of the external CSS file in order that I can delete it if any problems emerge further down the line.

    Give it a go if you're into this kind of thing -- but always make sure it's usable.

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There is proprietary CSS available to style scrollbars in IE and Opera but any sensible person will turn that off.

    Scrollbars are much easier to work with when all your scrollbars on your computer look the same.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Scrollbars are much easier to work with when all your scrollbars on your computer look the same.
    Just playing devil's advocate here, but links are still just as recognizable and easy to use when styled differently across different websites. As long as a styled scrollbar is instantly recognized as a scrollbar, than what makes it any less easy to use?

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikebrady View Post
    Just playing devil's advocate here, but links are still just as recognizable and easy to use when styled differently across different websites.
    Not always though - you always have the jokers who choose color only with no underlines - in colors you can barely tell apart from the normal text. Turns it into a hunt fest as to "what here is actually a link"

    Or when people use underlines and colors on non-link items for that matter.

    While certainly you can get away with it on small elements - menu buttons, an obvious navbar, something styled as a button - doing something like stripping underlines off links in the middle of flow text is much akin to restyling the page bar...

    Especially if you use a scripted scrollbar - More so with scripting that has no graceful degradation (like half the garbage people post on Dynamic Drive).

  21. #21
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikebrady View Post
    Just playing devil's advocate here, but links are still just as recognizable and easy to use when styled differently across different websites. As long as a styled scrollbar is instantly recognized as a scrollbar, than[sic] what makes it any less easy to use?
    Not necessarilly true. The link's man/machine interface must adhere to a certain set of long established conventions.
    1. The text of the link must be of a different color from the parent text.
    2. Non-link text must not be underlined.


    Observe a usability test to see people's reaction to web pages that break either of these conventions. Even if the link text is a different color, the initial reaction is that the user is not sure it's a link. Watch, too, people trying to click on underlined text that is not a link. Testing proves people have learned to see underlined, blue text as being a link. They can and will learn to use your particular interface if they care enough to hang around. You made life harder on your visitor. Way to go!

    As a graphic designer working on web projects, you absolutely must learn to apply affordance within established convention. There is leeway for working your artistic talent into the mix, but if you mess with the users' expectations of how things work, you are degrading the site.

    The web is interactive. There is a large discipline dealing with man/machine interfaces, and the graphic arts are a small part of the whole with only a small but very visible supporting role. The graphic designer for the web would be better served if he were studying engineering design or library science rather than graphic arts.

    //edit: @Jason, we seem to be reading from the same scripture.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It becomes a usability and accessibility issue when the author decides to fiddle with the appearance of the visitor's UA scrollbar which maybe outside of the document flow. It is not advisable; a typical user should have control as to whether they want hot pink scrollbar buttons on pink scrollbars, not be 'forced' to view them, etc.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    //edit: @Jason, we seem to be reading from the same scripture.
    It's called the WCAG.

  24. #24
    SitePoint Member
    Join Date
    Jun 2009
    Location
    NJ Shore
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys make good points. I think I may try it on a site or two and see how it works out though.

    But after reading your responses it does make sense that we shouldn't be styling the scrollbars.

    I still however want to bring up another question I asked earlier. Should browsers be styling the scrollbars or should scrollbars be uniform across a system's OS?

    When we open different programs we do not expect everything to be the same, so would it be reasonable for users to learn to not expect the scrollbar to be the same across different browsers?

    I feel like one of the first things you are gonna say is that a browser styling the scrollbar creates the same problems as when a website does it, but if the browser does it (and does it well) than you really only have to get used to the scrollbar the first time you use the browser. And when you use any new program there is always those first few moments when you look around and get used to/familiarize yourself with the interface.

    I also want to point out what I said before, about what if Chrome did nothing to the scrollbar except change the color from gray to a blueish tint that matched the rest of Chrome's look? In my opinion, it would still be just as usable and look just a little nicer.
    Last edited by mikebrady; Apr 23, 2010 at 09:39. Reason: grammar

  25. #25
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Should browsers be styling the scrollbars or should scrollbars be uniform across a system's OS?
    It should be dictated by the OS as it is now, that way everything uniform and therefore simpler from a usability/accessibility point of view.

    When we open different programs we do not expect everything to be the same, so would it be reasonable for users to learn to not expect the scrollbar to be the same across different browsers?
    No, a web browser is software that inherits generic styleing from the OS.

    Saying that I'm of the opinion that if you want to do something then just carry on and do it. If you want to change scrollbars on a site then that's your call.

    Personally speaking, for something like scrollbars, I consider that part of the software/OS and outside the remit of a web page "design". Styling such things is really just eye candy that the average man in the street couldn't care less about, so unless it adds any value to the document you're not really gaining anything.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •