I note that recently your links to various pages on your web site load pages
that do not fit properly on my screen resolution (800×600). Among my hatred’s
is the fact of being required to scroll from left to right to read what would
normally be of interest to me. I also visit sites whose web masters have coded
their pages to fit any screen resolution the user has chosen to apply to his
monitor. Somehow these people can help us all. Why don’t all web masters (ahem)
do this?
I will say that most of my pages do work without left/right
scrolling required at 800×600. I do try to be one of “those webmasters”.
But you’re also quite right, in that it didn’t take long for me to find a
page where that annoying scroll bar appeared again.
I know what causes it on my site, and I’m not aware of a way to stop it.
There might be a couple of approaches you can take to mitigate the impact,
though.
Become a Patron of Ask Leo! and go ad-free!
The problem is actually very simple: on some pages there is a “word” that is
too long and cannot be “wrapped”.
Here’s typically what happens when web page such as this one is displayed at
different resolutions. On a wider screen, the text might display as this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem ante,
adipiscing non, elementum id, suscipit eu, diam. Aenean rhoncus. Sed
ullamcorper tempus ipsum.
Whereas on a narrower screen that same text might get laid out like
this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem ante,
adipiscing non, elementum id, suscipit eu, diam. Aenean rhoncus. Sed
ullamcorper tempus ipsum.
You can see that the paragraph of text was “re-wrapped”. Words get moved to
different lines because line breaks were inserted at the last space between
words on a line before it would have gotten too wide. Thus the text is
displayed in the narrower box, but without requiring any left to right
scrolling.
The problem occurs when a word is too long. Like this example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
AntidisestablishmentarianismSupercalifragilisticexpialidocious. Ut sem ante,
adipiscing non, elementum id, suscipit eu, diam. Aenean rhoncus. Sed
ullamcorper tempus ipsum.
The word can’t be broken, so the browser has no alternative but to allow it
to extend beyond the right margin of where the text “should” have ended.
But that’s a fake word, you say? True enough. This isn’t:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
http://ask-leo.com/internet_safety_how_do_i_keep_my_computer_safe_on_the_internet.html
Ut sem ante, adipiscing non, elementum id, suscipit eu, diam. Aenean rhoncus.
Sed ullamcorper tempus ipsum.
It might try to wrap the text (“-” is sometimes considered a
valid place to break a word), but the rest of the link is still too long.
world.”
And in fact, when my pages don’t fit into 800×600 it’s almost always for
exactly that reason: there’s a link that can’t be wrapped that forces your
browser to layout the page to fit the link rather than the screen
resolution.
Fortunately this doesn’t happen very often. More typically those links are
coded like this:
Internet Safety, which “hides” the long part. There are two exceptions:
-
My newsletter, which includes the full URL for those reading in text-based
email programs -
User submitted comments. In fact there’s at least one comment I’ve
encountered on my site that includes a URL that’s too long even for me, and I
run 1920 pixels wide.
You do have a couple of interesting alternatives.
In FireFox, if you decrease the text size (View menu,
Text Size, Decrease), Firefox will re-wrap
the text at the new size, potentially allowing it to fit. Internet Explorer
will do something similar if you change the text size, but my experience is
that it doesn’t quite resize everything you’d want it to. IE’s Zoom feature
doesn’t re-wrap anything at all but does make everything smaller and narrower,
and could also be used to make things fit into your desired resolution.
So, are webmasters with problems at 800×600 likely to change? Probably not.
Just like 640×480 support has pretty much vanished into the past, I believe
that 800×600 support isn’t long for this world. Why? Numbers. Less than 8% of
Ask Leo! visitors are at 800×600, and that number has been decreasing steadily
over time. (Roughly half my visitors are at 1024×768, and the remainder are all
at higher resolutions.) I’m not alone, and as webmasters make design tradeoffs
if there’s extra work involved in making 800×600 work, they’ll be less and less
likely to take the time for a smaller and smaller audience.
Of course we all have opinions. I believe Fred Langa discussed this one of his old post on
The Langa Letter. I seem to remember he had solution, too.
BTW, 8% may not seem like very many, but if the proper math is applied I would be sure the numbers would work out to several thousand. After all, some people will put up with any discomfort.
—–BEGIN PGP SIGNED MESSAGE—–
Hash: SHA1
Absolutely. Ask Leo! gets roughly a million visitors every month, so you’re
very right – that 8% adds up to about 80,000 visitors. That’s why, aside from
the issue I mention in the article, I *definitely* haven’t written off 800×600
:-).
Someday that percentage will drop even lower, and I’ll run across something
where I just can’t justify the effort. But for now, 800×600 is on the list.
Leo
—–BEGIN PGP SIGNATURE—–
Version: GnuPG v1.4.6 (MingW32)
iD8DBQFGN8kwCMEe9B/8oqERAkYJAJ9BbdS34gj3Oz4s95QJM9WO2vzM1gCgiqBP
Csmw7jeJZp9Lt8nG0jeK6Kw=
=iTT3
—–END PGP SIGNATURE—–
There’s always tinyurl if you don’t want that 8% to have to deal with horizontal scrolling.
Try Opera. The Opera browser has a “fit to screen” option that allows 640×480 as well as 800×600 without needing a horizontal scrollbar. Works great.
Hi Leo,
Thanks for your educational newsletters.
Now I would not have mentioned it if you had not asked, but I usually get a left-right scroll bar on your pages. The only way NOT to get one is to set the resolution better than 1024×168.
Why? Well maybe it has to do with my placing the taskbar vertically up the left side of the screen. I need more vertical screen than horizontal, so that’s where I put the task bar.
Unfortunately an increasing number of webmasters seem never to admit this possibility. There might also be a technical issue that libraries do not handle it correctly.
With the growth in widescreen PCs , I would expect that vertical placement of the task bar might become more common.
Best regards,
Ed
—–BEGIN PGP SIGNED MESSAGE—–
Hash: SHA1
Bob: I actually have my own “tinyurl”. For example http://ask-leo.com/d-ms goes
to Microsoft.com, but it could be any arbitrary length URL. I use it long URLs
all the time.
I can’t control what my visitors post in comments, though.
Leo
—–BEGIN PGP SIGNATURE—–
Version: GnuPG v1.4.6 (MingW32)
iD8DBQFGPSaNCMEe9B/8oqERAkp4AJ4scqk8MwOX2uo40t3zcuR31T4vxgCgjnEq
hoyjcPMCw+LVYgPD7ZccDKQ=
=8zbO
—–END PGP SIGNATURE—–
—–BEGIN PGP SIGNED MESSAGE—–
Hash: SHA1
Ed: funny you should raise that. I have the task bar on the left on my Windows
Vista laptop for exactly that reason.
But the problem’s actually worse than that. Many people don’t run the browser
full screen. So no matter what your screen resolution is, the amount of it
allocated to the browser window is often much less. VERY difficult for web
designers to account for :-).
Leo
—–BEGIN PGP SIGNATURE—–
Version: GnuPG v1.4.6 (MingW32)
iD8DBQFGPSfiCMEe9B/8oqERAizbAKCGp58d7WJyQDYc5vAInIAlBdIsBQCfXpi5
y/VYxbNSAVRWuKp3SHecR/U=
=RRHT
—–END PGP SIGNATURE—–
Sometimes, instead of non-wrappable text, it is images on the page that cause the horizontal scrolling at 800×600.
One of my websites, nypc.org has a header image that is 927 pixels wide. However, I use JavaScript to resize this image down to 700 pixels wide so there is no horizontal scrolling at 1024×768.
The script is viewable in the page source, but this is the basic idea:
if (document.body.clientWidth
Please tell me where this IE’s Zoom feature is? What do you have to turn on to make it work? I have IE6, I’m guessing it’s not automatic.
—–BEGIN PGP SIGNED MESSAGE—–
Hash: SHA1
It’s an IE7 feature.
Leo
—–BEGIN PGP SIGNATURE—–
Version: GnuPG v1.4.7 (MingW32)
iD8DBQFG+I3eCMEe9B/8oqERArJlAJ0QHjdhsghTpvH+LKGcqBtLsCruSwCeOMtf
nHCkWOgdE+xajoHJkaDyRMc=
=4nFD
—–END PGP SIGNATURE—–