0

While thinking about a proper layout for a search page which contains always groups of three data entries I initially came up with such a concept:

concept

The search groups, which can be searched for consist of a "value", e.g 123.45, a number, a short string, but can ultimately be any length and format (e.g "G2" or "lorem ipsum dolor"). This value accompanies a title with the length depicted above. It can be short or long, the image above has typical length of those titles. And finally an url.

After a quick thought I think this concept is exceptionally bad transporting the information. The "value" box cannot properly display arbitrary lengths, it is tricky to provide an ellipsis for the values and have the full value as a mouse-over-tooltip since this does not work for touch-devices in any way. Ellipsis for titles and urls do similarly fail. Finding a proper height for those boxes need to take content constraints into account which are simply not foreseeable.

Variable height of those search boxes create a very disturbing layout.

I've checked other sources which have similar data, e.g google search results or reddit's type of page display. It seems that linearising the data as it is rather wide than restricted seems promising but still does not handle the arbitrary width of the value very well.

wide

Further flattening the results á la

Last Value may be long, Lorem ipsum dolor sit amet (...), http://the.page.domain.com/url/which/gets/long/sometimes

59.99, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales nibh a metus faucibus, eget convallis est feugiat. Praesent id vellit amet, http://the.page.site.com/url/oh/man/why is this long too

Harshly breaks the visual appeal (working with emphasis, colors) may mitigate the issue but I am still unsure whether the idea is correct.

(Btw. all 3 elements are equally important in the search, everything else in the single groups has been already dropped. The box layout is purely for grouping, space can perform equal or better in partitioning the page)

Improve this question
2
  • Is the short question that you don't want to truncate the returned page URL?
    – DarrylGodden
    Apr 29, 2015 at 19:17
  • @DarrylGodden, I do not understand what you ask. Shortening anything here means hiding it from the user on a touch-device, putting an ellipsis anywhere is not the issue. While having ellipsis on the title being displayed after n-lines of text might be a little bit challenging in CSS I rather thing the entire idea of presenting the content is bad.
    – Samuel
    Apr 30, 2015 at 7:19

1 Answer 1

Reset to default
1

In these cases, I tend to 2 two things:

1) Use a list approach, something similar to Material lists (when not Material lists directly) 2) Limit content length

However, since it seems this might not be an option for you, I'd go with a Masonry grid, like teh image below:

enter image description here

This will allow you to play with both vertical and horizontal lengths without problems. However, keep in mind this could not be very good if content is small. Personally, I'd try the Material lists approach, but there you have an option

Improve this answer
1
  • Actually a brilliant and simple idea. The content provides lots of break points so breaking them is easy and the content can consume as much vertical space as it wants.
    – Samuel
    Apr 30, 2015 at 18:11

Your Answer

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

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