Column Width in a Browser App

4 Feb 2005 - 9:03am
9 years ago
11 replies
1047 reads
Suresh JV
2004

Hi All,

I've a need to reduce the column width in a browser App.
The values of the column will never exceed 3 digit numbers.
But the column header is a big word of 12 characters.
[Eg. Deliverables]

I feel the column simply occupies more space than required
and in some cases I could avoid horizontal scroll just by
reducing the width. I can't:
-use an abbreviated word [not a common practice for that word],
-use an image icon [Though image is well defined throughout the app]
-wrap the content since it is one word.

Is it OK to use truncated word [Del...] like this. Similar
to any desktop app. But there is no column resize here.
Could any one suggest me some solutions.

Thanks to all.

Regards,
Suresh JV.

Comments

4 Feb 2005 - 8:51am
Dave Malouf
2005

> Is it OK to use truncated word [Del...] like this. Similar
> to any desktop app. But there is no column resize here.
> Could any one suggest me some solutions.

Why can't you resize the column? Is there a browser constraint?
W/o being able to resize the column, I say you are stuck with your column
widths being dictated by the header character length.

Truncating the column heading w/o a way to untruncate it, when you said that
an "abbreviation" is not going to work, seems a bit weird.

But I will offer this and see if it helps.

If! You can put a tooltip on the column name so that when you mouseover
"Del..." you get a tooltip that says "Deliverables" that might be a way to
teach the users the truncation's meaning.

But it is not ideal.

-- dae

4 Feb 2005 - 9:07am
Gerard Torenvliet
2004

Suresh,

If you must use an abbreviation of "Deliverables", there are a few suggestions:

1. Use the HTML <ABBR title="Deliverables">Del.</ABBR>. I don't know
what the browser support is for this tag, but I suspect that this is
way to achieve a tooltip.

2. Perhaps use an icon for a column header. If this column will be
used frequently, an icon might be a more rememberable way of
communicating "deliverable". And, if you use alt and title attributes
on your image, you get tooltips in IE and Firefox.

3. Make a vertical image of the text "Deliverables".

Just some ideas. Not a nice problem. Note that the abbreviation "del"
might not be the best choice because it sounds like "Delete". Maybe
"Dlvs"?

Good luck!
-Gerard

On Fri, 4 Feb 2005 20:33:41 +0530, Suresh JV <sjv at inteplan.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Hi All,
>
> I've a need to reduce the column width in a browser App.
> The values of the column will never exceed 3 digit numbers.
> But the column header is a big word of 12 characters.
> [Eg. Deliverables]
>
> I feel the column simply occupies more space than required
> and in some cases I could avoid horizontal scroll just by
> reducing the width. I can't:
> -use an abbreviated word [not a common practice for that word],
> -use an image icon [Though image is well defined throughout the app]
> -wrap the content since it is one word.
>
> Is it OK to use truncated word [Del...] like this. Similar
> to any desktop app. But there is no column resize here.
> Could any one suggest me some solutions.
>
> Thanks to all.
>
> Regards,
> Suresh JV.
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/
>

--
Gerard Torenvliet
g.torenvliet at gmail.com

4 Feb 2005 - 9:32am
Suresh JV
2004

>If! You can put a tooltip on the column name so that when you mouseover
>"Del..." you get a tooltip that says "Deliverables" that might be a way to
>teach the users the truncation's meaning.

>But it is not ideal.

This is what I've done right now but not quite happy with it. My doubt is...
Is there is any precedence to this practice or am I one of the first ones
to start it. [There is no way to resize the column width at the client side
in any browser. Not counting active x control from IE or Flash UI]

Regards,
Suresh JV.

4 Feb 2005 - 9:16am
Tadej Maligoj
2004

Make me a small car for eight people. Nobodoy demands that. But many
demand impossible things on the web... ;+(

There is another (ugly) solution: make font as small as possible (it
is not neccessary readable, just recognisible).

Tadej

On Fri, 4 Feb 2005 10:07:22 -0500, Gerard Torenvliet
<g.torenvliet at gmail.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Suresh,
>
> If you must use an abbreviation of "Deliverables", there are a few suggestions:
>
> 1. Use the HTML <ABBR title="Deliverables">Del.</ABBR>. I don't know
> what the browser support is for this tag, but I suspect that this is
> way to achieve a tooltip.
>
> 2. Perhaps use an icon for a column header. If this column will be
> used frequently, an icon might be a more rememberable way of
> communicating "deliverable". And, if you use alt and title attributes
> on your image, you get tooltips in IE and Firefox.
>
> 3. Make a vertical image of the text "Deliverables".
>
> Just some ideas. Not a nice problem. Note that the abbreviation "del"
> might not be the best choice because it sounds like "Delete". Maybe
> "Dlvs"?
>
> Good luck!
> -Gerard
>
>
> On Fri, 4 Feb 2005 20:33:41 +0530, Suresh JV <sjv at inteplan.com> wrote:
> > [Please voluntarily trim replies to include only relevant quoted material.]
> >
> > Hi All,
> >
> > I've a need to reduce the column width in a browser App.
> > The values of the column will never exceed 3 digit numbers.
> > But the column header is a big word of 12 characters.
> > [Eg. Deliverables]
> >
> > I feel the column simply occupies more space than required
> > and in some cases I could avoid horizontal scroll just by
> > reducing the width. I can't:
> > -use an abbreviated word [not a common practice for that word],
> > -use an image icon [Though image is well defined throughout the app]
> > -wrap the content since it is one word.
> >
> > Is it OK to use truncated word [Del...] like this. Similar
> > to any desktop app. But there is no column resize here.
> > Could any one suggest me some solutions.
> >
> > Thanks to all.
> >
> > Regards,
> > Suresh JV.
> > _______________________________________________
> > Welcome to the Interaction Design Group!
> > To post to this list ....... discuss at ixdg.org
> > (Un)Subscription Options ... http://discuss.ixdg.org/
> > Announcements List ......... http://subscribe-announce.ixdg.org/
> > Questions .................. lists at ixdg.org
> > Home ....................... http://ixdg.org/
> >
>
> --
> Gerard Torenvliet
> g.torenvliet at gmail.com
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/
>

--
_______________________________
Tadej Maligoj, Information Architect
e1: tadej.maligoj at gmail.com
e2: studio at maligoj.com
m: 031 306 986
w: www.maligoj.com

4 Feb 2005 - 10:14am
Larry Tesler
2004

Suresh,

If the surrounding column headings are narrower than their column
data, steal some space from them using colspan.

Larry

At 8:33 PM +0530 2/4/05, Suresh JV wrote:
>I've a need to reduce the column width in a browser App.
>The values of the column will never exceed 3 digit numbers.
>But the column header is a big word of 12 characters.
>[Eg. Deliverables]
>
>I feel the column simply occupies more space than required
>and in some cases I could avoid horizontal scroll just by
>reducing the width. I can't:
>-use an abbreviated word [not a common practice for that word],
>-use an image icon [Though image is well defined throughout the app]
>-wrap the content since it is one word.
>
>Is it OK to use truncated word [Del...] like this. Similar
>to any desktop app. But there is no column resize here.
>Could any one suggest me some solutions.

4 Feb 2005 - 10:38am
Pradyot Rai
2004

Suresh JV
> This is what I've done right now but not quite happy with it. My doubt is...
> Is there is any precedence to this practice or am I one of the first ones
> to start it. [There is no way to resize the column width at the client side
> in any browser. Not counting active x control from IE or Flash UI]

Suresh, there's no way that you can resize the columns. But you can
make the columns fluid and allow the headers to truncate 9with
JavaScript). We did it in my previous life, and my UI guy wrote the
JavaScript for it (so please don't ask me how to write JS). So it is
possible.

You did not explain the whole context, so I am not able to give you
more. However, you may want to think, if it is necessary to have, say,
20-30 column in the table? If that's the situation, than is the
Browser/HTML the best place for user to work on? Or would you allow
export the results in their favourite apps?, etc. There are so many
solutions, that you may not have to constrain yourself on the header
itself.

Choose your problem wisely :-)

:p

4 Feb 2005 - 11:38am
Julian_Orr at p...
2004

Hmm, not sure if it is html-able, but do the excel thing and use a
horizontal orientation or angle parking? Lastly, hackish & aesthetically
impoverished is to wrap the column title? I know i prefer this to having
to scroll to see what I need to see.

Cheers,
julez

4 Feb 2005 - 10:42am
Jim Griffin
2005

Hi all. First time poster, long time reader.

Suresh, given your limitations, your situation doesn't yield any ideal
solutions, but using a combination of techniques may be able to get
you closer to what you want.

I use tooltips (title="" attribute in HTML) as often as possible for
column headers, as sometimes I need to abbreviate common terms for my
audience (e.g. LTM = Last 12 Months). These tooltips allow me to
spell everything out in the rollover. It's not the best solution, but
my users and I have found it helpful on several occasions.

May I suggest an additional method? Are you able to use a little
JavaScript or CSS in the header? Perhaps you can always show (for
example) the first 4 characters of the column header followed by an
ellipsis (...). An ellipsis technically means that there are some
characters or words omitted. If the tables are wider for higher
resolutions, then the header could spell out a couple more characters
until it meets the new width or spells out the whole word. Gmail is
doing this with the subject of the e-mails.

Has anyone else tried this?

- Jim Griffin
Capital IQ, NYC

---------------------------------------------------------------------------

On Fri, 4 Feb 2005 20:33:41 +0530, Suresh JV <sjv at inteplan.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Hi All,
>
> I've a need to reduce the column width in a browser App.
> The values of the column will never exceed 3 digit numbers.
> But the column header is a big word of 12 characters.
> [Eg. Deliverables]
>
> I feel the column simply occupies more space than required
> and in some cases I could avoid horizontal scroll just by
> reducing the width. I can't:
> -use an abbreviated word [not a common practice for that word],
> -use an image icon [Though image is well defined throughout the app]
> -wrap the content since it is one word.
>
> Is it OK to use truncated word [Del...] like this. Similar
> to any desktop app. But there is no column resize here.
> Could any one suggest me some solutions.
>
> Thanks to all.
>
> Regards,
> Suresh JV.
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/
>

4 Feb 2005 - 11:52pm
david gee
2004

Suresh JV wrote:

>This is what I've done right now but not quite happy with it. My doubt is...
>Is there is any precedence to this practice or am I one of the first ones
>to start it. [There is no way to resize the column width at the client side
>in any browser. Not counting active x control from IE or Flash UI]
>
>

It's quite possible, and not that complicated in modern browsers, to
make grids with resizable column widths, assuming Javascript is turned
on. See, for example, www.domapi.com.
Another solution is to break your grid up into two quadrants, with some
fixed columns on the left, and a wrapper for variable columns with a
horizontal scrollbar. If executed properly,
this can work fairly well. For a current project, I've built a
Javascript-enabled grid with a fixed area and a quadrant that scrolls
horizontally and vertically, as well as a widget for hiding/showing
columns on the client side. Feedback has been fairly positive - when
used in the right context, it's quite intuitive. You run into problems
when you try and place a grid like this inside a web-page
that already scrolls - too many scrollbars on one page (ie www.k10k.net)
can be quite painful to deal with.

david

7 Feb 2005 - 7:01pm
Prasant Sivadasan
2004

Hi Suresh,

The table widgets available at www.activewidgets.com displays data in a
table with resizeable headers/columns, client-side sorting and much more.

Thanks,
--

Prasant Sivadasan
Interaction Designer | Sun Microsystems

Suresh JV wrote:

>[Please voluntarily trim replies to include only relevant quoted material.]
>
>Hi All,
>
>I've a need to reduce the column width in a browser App.
>The values of the column will never exceed 3 digit numbers.
>But the column header is a big word of 12 characters.
>[Eg. Deliverables]
>
>I feel the column simply occupies more space than required
>and in some cases I could avoid horizontal scroll just by
>reducing the width. I can't:
>-use an abbreviated word [not a common practice for that word],
>-use an image icon [Though image is well defined throughout the app]
>-wrap the content since it is one word.
>
>Is it OK to use truncated word [Del...] like this. Similar
>to any desktop app. But there is no column resize here.
>Could any one suggest me some solutions.
>
>Thanks to all.
>
>Regards,
>Suresh JV.
>_______________________________________________
>Welcome to the Interaction Design Group!
>To post to this list ....... discuss at ixdg.org
>(Un)Subscription Options ... http://discuss.ixdg.org/
>Announcements List ......... http://subscribe-announce.ixdg.org/
>Questions .................. lists at ixdg.org
>Home ....................... http://ixdg.org/
>
>

13 Feb 2005 - 5:31pm
Ron Conescu
2005

Suresh,

Another couple of ideas:

1. Use a graphic of the word "Deliverables," horizontally, in a narrow
font, perhaps broken onto 2 lines. For example, if you put

Deliv-
erables

into Arial Narrow 9 point, and then used Photoshop to make it smaller,
you could make it almost as narrow as "Del" while still being readable.

2. Use a synonym for "Deliverables" which is either much shorter, can
be abbreviated with less confusion, or can be split onto multiple lines
more easily. For example:

Work Products
Products
Results

I think "Work Products" could be abbreviated as:

Work
Prod

which is almost as narrow as "Del".

ron

Syndicate content Get the feed