4

For a ready only form that is also designed to be responsive, some fields are long and some short. Currently, the default behavior is truncating long fields based on the space constraint. And on hover, tooltip kicks in to read the truncated text.

How does this work with tablets or mobile devices where there is no hover over tooltips or alt tags for these responsive pages?

I would think of using wrapping instead of truncation, but this results in pushing down the content and making a long form even longer.

So, are there best practices or rules on how to deal with long text that does not fit a space?

Improve this question

2 Answers 2

Reset to default
1

I think one of the rules of thumb here is: "throw away half of the content, than, throw away half of what's left". It basically boils down to simply trying to get to the essence of your content. Try to see how other sites make a concise call to action, give bits of information, ...

As quoted many times, users don't read, they scan.

Even the resulting content may push down your content, but by eleminating the wasteful text, you can try and limit that, so to answer your question, don't hide (truncate) the important bits that state the purpose of the website (and thus the benefit to the user), only truncate text that is only important to the interested user, as it would require and extra step to read it e.g. news articles (which teases a user to read more)

Books to read:

  • "Don't make me think" - Steve Krug
  • "Letting go of the words" - Janice Redish
Improve this answer
4
  • Good reads. I tend to truncate or use ellipsis when you can still get what it is written without the missing content.. Or when you have a 'more details' view afterwards. I agree that responsive tables are challenging, but you can also make them scrollable via css (overflow-x: scroll or auto) and set a maximum width for each column to avoid long lines..
    – maia
    Aug 20, 2015 at 0:20
  • 1
    Hello Maia, this question doesn't take into account tables; interesting addition though :-) I'd avoid using horizontal scrolling altogether, since its not something that happens a lot. Tables are a really hard nut to crack in RWD, thats why I like to design these mobile first, so I definitly try and eliminate the wasteful information and focus on the rest. Setting maximum width can be tricky as it could just 'squeeze' a text right in... I think all of it, as usual, depends on the situation :-) thanks for your great input! :-)
    – Xabre
    Aug 20, 2015 at 6:17
  • in the theory you are right. However,try doing this with complex stuff like a stocks table or when columns vary a lot, and tell me how much you can cut and make your usrs happy. It all depends on your problem ! Mobile first is the way to go when you can start from scratch..
    – maia
    Aug 20, 2015 at 9:45
  • I definitly agree with "it depends on your problem" :-) That's what I meant with "tables are a really hard nut to crack" ;-)
    – Xabre
    Aug 20, 2015 at 10:09
1

If you are ok with having your text truncate, there is something really dubious about the value of that text, particularly if that is a label. And the web was designed to scroll and expand vertically, and this should be leveraged to your advantage rather than obscuring or completely hiding vital information from your designs and applications.

There are some scenarios you might not be able to avoid this.

  • Tabular UI (spreadsheets)
  • Collapsing long articles to show a smaller teaser/intro. In these cases, you can (and should) always provide a "read the full text" link.

I an't think of other cases. If you can, would love to see what those are.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.