2

Related to question How to resolve lengthy hyperlinks? with responsive webdesign in mind... In past practices on desktop, links would span 2 lines where on mobile they would span almost 10 lines! Clients have stressed that the long text links need to include all the verbiage so users know what forms/pages they are looking for.

However I've heard more complaints from customers that they are unable to find the content they are looking for as being overwhelmed by the long links.

I've researched the topic of line lengths for responsive webdesign Web Typography Overview and the source states longer line lengths cause users to double back re-reading content/link/etc.

I've also explored using various colors, margin & font-sizes with little to no success.

Knowing abbreviations are not in the equation (Not sure how to handle on mobile as desktop would use a tooltip to display full text) how would you approach this conflict? Would it be wise to pitch for less lengthy links or keep the links are they are?

mobile & desktop links

Improve this question
5
  • 2
    In case anyone suggests using the <title> attribute; overall that's a bit of a useless attribute these days, so don't bother! ;)
    – JonW ♦
    Jan 27, 2014 at 15:57
  • @JonW: Yeah I looked into <title> as a possible solution but JAWS doesn't even see the element.
    – Courtney Jordan
    Jan 27, 2014 at 16:12
  • Nobody really sees the title, except people who specifically hover over the link with their mouse on a desktop machine. Keyboard user: nope. tablet user: nope. Screenreader user: nope!
    – JonW ♦
    Jan 27, 2014 at 16:17
  • Oh this is simple just use a NLP javascript library that interprets and rewrites the text in a more abbreviated fashion. That being said there might be something to that joke... What if you had "long" and "short" url text properties that were used based on screen width.
    – VoronoiPotato
    Jan 27, 2014 at 16:32
  • Yeah that's another issue in itself. I've been looking into solutions but the interaction itself is handled so differently from touch to mouse. If it was just text, tap could be used to display the full word however if it's contained within a link tap will direct to another page.
    – Courtney Jordan
    Jan 27, 2014 at 16:47

2 Answers 2

Reset to default
5

I think the problem is probably not that the links are long (and you've mentioned that shortening them is not an option). The problem is that the links look like links and are thus overwhelming.

Below is a native app with a UITableView that you can find in many apps. Guess what, when you click on a row, you go to somewhere. And of course that's tons of text. Yet people treat them as text, not some super long link.

So maybe one approach is to mimic that. Try to make the links into some sort of text that the mobile user knows that they can click on it and go somewhere. (Try make it clickable anywhere, like in the app below, not just on the text. Mobile users hate link because they are actually hard to tap on - our fingers are not as accurate as a mouse cursor.) Then it's perfectly fine to wrap the text into multiple lines (as the app below), just to make sure you have enough line-height, etc. so it's readable.

My 2c.

Some standard tableview.

Improve this answer
1
  • I really like this list style implementation!
    – VoronoiPotato
    Jan 27, 2014 at 19:59
1

If links are really that long I don't see much ways to display them without taking too much place on the screen so I'd suggest to pitch for less lengthy links.

Otherwise you can display too long links ending by "..." as a button like below.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

But well, this is weird.

Improve this answer
1
  • That reminds me of a text preview. They work on news sites (syracuse.com/poststandard for example, uses Full Story >>) Do you have any other examples besides news websites using this convention?
    – Courtney Jordan
    Jan 27, 2014 at 19:05

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.