This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Webmaster forum > January 2007 > Is a horizontal scrollbar always bad?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Is a horizontal scrollbar always bad?
|
|
|
| I want to display about 40 images on a page and
currently just have them in a grid.
I'm testing out a few other ideas and also have
them just as a list, and all in a straight line.
The straight line obviously creates a scroll bar,
but in my opinion it is the best layout.
Is it acceptable to have a horizontal scrollbar, or
should this always be avoided?
Example of grid is here,
http://www.uksmallbusinessdirectory...le-network.html
links to other versions are obvious
Opinions appreciated.
| |
| Blinky the Shark 2007-01-27, 11:09 pm |
| T.J. wrote:
> I want to display about 40 images on a page and currently just have
> them in a grid. I'm testing out a few other ideas and also have them
> just as a list, and all in a straight line. The straight line
> obviously creates a scroll bar, but in my opinion it is the best
> layout. Is it acceptable to have a horizontal scrollbar, or should
> this always be avoided?
It's always bad when it appears on *my* screen. IMO, your practice will
just depend on how many people you want to aggravate.
--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
| |
| Paul Watt 2007-01-27, 11:09 pm |
|
"T.J." <no1@home.invalid> wrote in message
news:QLudnWWlDaeadS7YRVnyugA@bt.com...
>I want to display about 40 images on a page and
> currently just have them in a grid.
> I'm testing out a few other ideas and also have
> them just as a list, and all in a straight line.
> The straight line obviously creates a scroll bar,
> but in my opinion it is the best layout.
> Is it acceptable to have a horizontal scrollbar, or
> should this always be avoided?
>
> Example of grid is here,
> http://www.uksmallbusinessdirectory...le-network.html
>
> links to other versions are obvious
> Opinions appreciated.
>
>
The grid view is definatly the best, nice,compact and neat. The list view
generates alot of wasted screen real estate and looks amerturish.
As for the "film strip" view, I cant see the point. It compleatly breaks
your page and theres serious usability issues with a horizontal scroll.
HTH
--
Cheers
Paul watt
http://www.paulwattdesigns.com
| |
| Chris Beall 2007-01-27, 11:09 pm |
| T.J. wrote:
> I want to display about 40 images on a page and
> currently just have them in a grid.
> I'm testing out a few other ideas and also have
> them just as a list, and all in a straight line.
> The straight line obviously creates a scroll bar,
> but in my opinion it is the best layout.
> Is it acceptable to have a horizontal scrollbar, or
> should this always be avoided?
>
> Example of grid is here,
> http://www.uksmallbusinessdirectory...le-network.html
>
> links to other versions are obvious
> Opinions appreciated.
>
>
T.J.,
Nothing is always bad. Offhand I can think of two cases where a
horizontal scroll bar would be OK:
- Where part of the page is an image wider than the user's window.
For example, see http://beallsprings.org/BakerBeall%20cemetery.html
- Where you are trying to create a specific effect. For example, see
http://www.krystalrose.com/rosewood/index.html
There are probably others. Yours does not seem to be one of them.
You are using a fixed width grid, 4 objects wide. In a small window
(such as 640 X 480 or, perish the thought, on a cell phone) you are
going to have a horizontal scroll just to see the 4 images. On the
other hand, the user with a 22" display and the browser at full screen
will see just those 4 images on a line, with a huge amount of white
space in between.
You are also using a table, a structure intended for presenting tabular
data, to force a specific screen layout. See
http://pages.prodigy.net/chris_beal...r%20layout.html for
some reasons why you might not want to do that.
Consider the following possibility. Each phone is its own thing. In a
small window, you might want to show only one phone per line, resulting
in a vertical stack of the images. In a really wide window, you might
want to have 6 or 8 or even more across the window, fully using whatever
space the user has provided. In both cases, no horizontal scroll bar.
To do this, look into CSS.
1. Remove all the table stuff.
2. To each <a tag add a meaningful class= attribute, like
class="phonelink"
3. In a separate style sheet, specify that each link is to be floated
to the left, with some margins to keep the images from standing shoulder
to shoulder:
a.phonelink {
float: left ;
margin-left: xx ;
margin-right: yy ;
}
See http://www.w3.org/TR/CSS21/visuren.html#propdef-float for the details.
4. Make sure all of the images are the same height, to avoid some
really strange side effects.
The number of images on a horizontal 'line' will then adjust to the
user's window width, with no horizontal scroll until the window is
narrower than the widest image.
Chris Beall
| |
|
|
"Chris Beall" <Chris_Beall@prodigy.net> wrote in message
news:HCSsh.3561$O02.2871@newssvr11.news.prodigy.net...
> T.J. wrote:
>
> T.J.,
>
> Nothing is always bad. Offhand I can think of two cases where a
> horizontal scroll bar would be OK:
> - Where part of the page is an image wider than the user's window. For
> example, see http://beallsprings.org/BakerBeall%20cemetery.html
> - Where you are trying to create a specific effect. For example, see
> http://www.krystalrose.com/rosewood/index.html
>
> There are probably others. Yours does not seem to be one of them.
>
> You are using a fixed width grid, 4 objects wide. In a small window (such
> as 640 X 480 or, perish the thought, on a cell phone) you are going to
> have a horizontal scroll just to see the 4 images. On the other hand, the
> user with a 22" display and the browser at full screen will see just those
> 4 images on a line, with a huge amount of white space in between.
>
> You are also using a table, a structure intended for presenting tabular
> data, to force a specific screen layout. See
> http://pages.prodigy.net/chris_beal...r%20layout.html for
> some reasons why you might not want to do that.
>
> Consider the following possibility. Each phone is its own thing. In a
> small window, you might want to show only one phone per line, resulting in
> a vertical stack of the images. In a really wide window, you might want
> to have 6 or 8 or even more across the window, fully using whatever space
> the user has provided. In both cases, no horizontal scroll bar.
>
> To do this, look into CSS.
> 1. Remove all the table stuff.
> 2. To each <a tag add a meaningful class= attribute, like
> class="phonelink"
> 3. In a separate style sheet, specify that each link is to be floated to
> the left, with some margins to keep the images from standing shoulder to
> shoulder:
> a.phonelink {
> float: left ;
> margin-left: xx ;
> margin-right: yy ;
> }
> See http://www.w3.org/TR/CSS21/visuren.html#propdef-float for the details.
> 4. Make sure all of the images are the same height, to avoid some really
> strange side effects.
>
> The number of images on a horizontal 'line' will then adjust to the user's
> window width, with no horizontal scroll until the window is narrower than
> the widest image.
>
> Chris Beall
>
>
Thanks, but why do I need CSS to do this?
Wouldn't just breaking them out of the table and lining
them up achieve the same effect?
| |
| John Hosking 2007-01-27, 11:09 pm |
| T.J. wrote:
> "Chris Beall" <Chris_Beall@prodigy.net> wrote in message
> news:HCSsh.3561$O02.2871@newssvr11.news.prodigy.net...
>
Generalizations are always bad. *Always* ;-)
[beautiful, clear, patient explanation by Chris snipped]
[color=darkred]
This idea was my first thought, too (except I think you mean
margin-BOTTOM:yy). But I'm not sure why we need the float. Maybe it's
just too early for me today.
[color=darkred]
>
> Thanks, but why do I need CSS to do this?
> Wouldn't just breaking them out of the table and lining
> them up achieve the same effect?
>
Try it! (I just did, using the Web Developer Extension in FF, against
your site.) I didn't use the float though. I used
img { margin-right:2em; margin-bottom:2em; width:100px;}
You might want to use px rather than ems, since you don't have any
captions or other text around the images.
Without the CSS you don't have a good spacing between the images. With
the CSS, you can quickly and easily tweak the vertical spacing, the
horizontal spacing, the borders (none or blue or thick and red or thin,
dashed and green), the background colors, etc. You can also save on code
slightly, since the formatting info is stored once (embedded in the same
page or stored in an external .css file) rather than repeated for each
and every phone.
--
John
| |
|
|
"John Hosking" <John@DELETE.Hosking.name.INVALID> wrote in message
news:45b487bb$1_4@news.bluewin.ch...
> T.J. wrote:
>
> Generalizations are always bad. *Always* ;-)
>
>
> [beautiful, clear, patient explanation by Chris snipped]
>
>
> This idea was my first thought, too (except I think you mean
> margin-BOTTOM:yy). But I'm not sure why we need the float. Maybe it's just
> too early for me today.
>
>
> Try it! (I just did, using the Web Developer Extension in FF, against your
> site.) I didn't use the float though. I used
>
> img { margin-right:2em; margin-bottom:2em; width:100px;}
>
> You might want to use px rather than ems, since you don't have any
> captions or other text around the images.
>
> Without the CSS you don't have a good spacing between the images. With the
> CSS, you can quickly and easily tweak the vertical spacing, the horizontal
> spacing, the borders (none or blue or thick and red or thin, dashed and
> green), the background colors, etc. You can also save on code slightly,
> since the formatting info is stored once (embedded in the same page or
> stored in an external .css file) rather than repeated for each and every
> phone.
>
> --
> John
Thank you,
I appreciate what you are both saying,
but still are not sure why a horizontal scrollbar
is worse that a verticle one in this instance?
I know why, if there is text involved, but this is
just a line of images.
Because the images are the same width but
different height (more white background on some)
I think they are easier to see by just scrolling along
them
examples here,
http://www.uksmallbusinessdirectory...mple-21-01.html
http://www.uksmallbusinessdirectory...le-21-01-2.html
If there are definate reasons why not to use
a horizontal scrollbar, is it acceptable to but
the handsets in a scrolling iframe?
| |
|
| Horizontal scrolling is bad for 3 main reasons:
1 - People generally don't like to scroll horizontally (which is what
ultimately matters)...
2 - ...probably because the human eye prefers to downwards rather than
across (hence we use portait pages om paper rather than landscape)...
3 - ... and also because it's more awkward to use a horizontal scrollbar
than a mouse wheel or Pg Up/Dn keys.
Looking at your two examples, it's a no-brainer - the second one is far
easier to look at. if anything, I'd make it narrower still.
CJM
PS. It's interesting when you consider the popularity of Widescreen TV.
Widescreen TV goes against what our eyes prefer, but is adopted
nevertheless. Why? Because it dates back to the film studios were making a
concious decisions to make films wider so that they could fit more people
into a cinema!
| |
| Karl Groves 2007-01-27, 11:09 pm |
| Somehow I didn't see the OP.
Anyway, horizontal scroll is ALWAYS bad.
I've witnessed hundreds of users in the usability lab. EVERY TIME a user
in the lab experienced a page with horizontal scroll, they failed to notice
any of the information on the hidden part of the page.
--
Karl Groves
http://karlcore.com
http://chevelle.karlcore.com
| |
|
| On Mon, 22 Jan 2007 11:39:53 -0000, "T.J." <no1@home.invalid>
scrawled:
> I appreciate what you are both saying,
> but still are not sure why a horizontal scrollbar
> is worse that a verticle one in this instance?
Because there's a mouse wheel that allows users to to easily scroll up
and down, but no corresponding wheel for scrolling side-to-side. It
is therefore more of a pain to have to scroll horizontally.
--
MGW
I have yet to see a problem, however complicated, which when you looked at
it in the right way, did not become still more complicated. ~ Poul Anderson
| |
| Karl Groves 2007-01-27, 11:09 pm |
| MGW <mgw1979@hotmail.com> wrote in
news:99qar2l2c1a5tghjo5ucq9kc2vsroqorfo@4ax.com:
> On Mon, 22 Jan 2007 11:39:53 -0000, "T.J." <no1@home.invalid>
> scrawled:
>
>
> Because there's a mouse wheel that allows users to to easily scroll up
> and down, but no corresponding wheel for scrolling side-to-side. It
> is therefore more of a pain to have to scroll horizontally.
>
Not really. Well, you're on the right track.
The problem with horizontal scroll is people don't notice it.
People are used to vertical scroll. People are not used to horizontal
scroll so they don't notice it.
--
Karl Groves
http://karlcore.com
http://chevelle.karlcore.com
| |
| Mark Goodge 2007-01-27, 11:09 pm |
| On Sun, 21 Jan 2007 22:24:06 -0000, T.J. put finger to keyboard and
typed:
>I want to display about 40 images on a page and
>currently just have them in a grid.
>I'm testing out a few other ideas and also have
>them just as a list, and all in a straight line.
>The straight line obviously creates a scroll bar,
>but in my opinion it is the best layout.
>Is it acceptable to have a horizontal scrollbar, or
>should this always be avoided?
>
>Example of grid is here,
>http://www.uksmallbusinessdirectory...le-network.html
>
>links to other versions are obvious
>Opinions appreciated.
As a general rule, horizontal scrolling is best avoided, unless it's
the natural or only practical way of presenting the information. For
example, a timeline can be presented vertically, but it often feels
more natural to go left to right even if that involves horizontal
scrolling. Where a visual height comparison is important (eg, between
different products illustrated in proportion to actual size), then
keeping everything on one line and scrolling horizontally can be
useful. And some things, such as large panoramic pictures, are almost
impossible to present without it. It's also OK to offer a horizontally
scrolled layout of something which is also available in order formats,
so that people aren't forced to use it if they don't want to.
If you're planning to keep the three different layouts as user
options, then there's no problem at all with one of them being a
horizontal line. In fact, if your images are correctly proportioned to
actual size, then it makes use of one of the cases where horizontal
scrolling can be helpful. I would not, however, use it as the only or
primary method of displaying the information - keep it as you've got
it, with the grid the default and the vertical/horizontal lists as
alternatives.
Mark
--
Visit: http://www.CorporateContact.info - phone and email contacts for Amazon, Paypal, eBay and lots of other hard-to-contact organisations
"I believe in the kingdom come, then all the colours will bleed into one"
| |
|
|
"Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
news:d2ebr2t15gj46j15ne8iivqnsjqo6onek1@news.markshouse.net...
> On Sun, 21 Jan 2007 22:24:06 -0000, T.J. put finger to keyboard and
> typed:
>
>
> As a general rule, horizontal scrolling is best avoided, unless it's
> the natural or only practical way of presenting the information. For
> example, a timeline can be presented vertically, but it often feels
> more natural to go left to right even if that involves horizontal
> scrolling. Where a visual height comparison is important (eg, between
> different products illustrated in proportion to actual size), then
> keeping everything on one line and scrolling horizontally can be
> useful. And some things, such as large panoramic pictures, are almost
> impossible to present without it. It's also OK to offer a horizontally
> scrolled layout of something which is also available in order formats,
> so that people aren't forced to use it if they don't want to.
>
> If you're planning to keep the three different layouts as user
> options, then there's no problem at all with one of them being a
> horizontal line. In fact, if your images are correctly proportioned to
> actual size, then it makes use of one of the cases where horizontal
> scrolling can be helpful. I would not, however, use it as the only or
> primary method of displaying the information - keep it as you've got
> it, with the grid the default and the vertical/horizontal lists as
> alternatives.
>
> Mark
> --
Thank you,
I always intended using the grid as the default,
but just giving a different option of viewing them.
Now that I have the grid out of the table means I
don't really need to offer the verticle list option,
but I will leave the horizontal option.
This leads to my next question,
How do I keep text in center of viewing area?
It is central before starting to scroll, is there a way of
getting it to always stay central when scrolling.
page here,
http://www.uksmallbusinessdirectory...-filmstrip.html
| |
| John Hosking 2007-01-27, 11:09 pm |
| T.J. wrote:
>
> Thank you,
> I appreciate what you are both saying,
> but still are not sure why a horizontal scrollbar
> is worse that a verticle one in this instance?
> I know why, if there is text involved, but this is
> just a line of images.
> Because the images are the same width but
> different height (more white background on some)
> I think they are easier to see by just scrolling along
> them
> examples here,
> http://www.uksmallbusinessdirectory...mple-21-01.html
> http://www.uksmallbusinessdirectory...le-21-01-2.html
>
> If there are definate reasons why not to use
> a horizontal scrollbar, is it acceptable to but
> the handsets in a scrolling iframe?
>
The second example linked above is clearly preferable. It fits my
browser dimensions a lot more often (most of the time) than the first
(never).
I prefer the grid to either vertical or horizontal scrolling when the
scrolling is forced on me. The all-in-one-line views waste an awful lot
of space on users' browsers. I hate wasted space.
If I have to scroll, let it be vertically. It's what I'm (we're) used
to, and my mouse has a wheel that lets me do it easily.
Microsoft's Office products had (or maybe still have) a "feature" where
using the scrollwheel on the mouse would automatically induce
*horizontal* scrolling when a portion of the application window was
off-screen to one side. I hated, hated, HATED that "feature".
--
John
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|