1

I am designing a page for a client, and they want to have a list of all the members in their organization. However, they only provide names for each member, and so there aren't any images, emails, or any other information to include alongside the names. This is by request of the client, and honestly the amount of names would make inclusions like this extend the page's length by far too much.

A set of bulleted list of points, inside a wrapped flex box

This is my current solution, recreated using information that is not identifiable to the client. My basic idea was to create a bulleted list inside a wrapping flex box. This is to try and display the information in a way that is easily legible and takes up the least amount of space possible, although I will definitely admit it's lacking in visual flair.

Does anyone have any suggestions for better, more visually appealing ways to display very bare-bones information like this, while still maintaining the usability of a straightforward list? Any feedback is appreciated, as I'm still fairly new to web design as a field, and I have a lot to learn.

0

2 Answers 2

0

1. Get some inspiration from end credits from movies.

2. Use some subtitles, one basic one is the letters


A

Albert • Alphonese

B

Beethoven • Bach


3. In case you want to throw them into a large paragraph, use the bullets as separators, not as lists.

Name1 • Name2 • Name3

4. I would not use left justification. Probably center one.

5. Only use the left justification if you are separating them into columns. If you are doing it on a web page, use the columns style so you have equal-height columns.

<div class="humungusList">Name1 • Name2 • Name100</div>
{humungusList: columns: 3}

If you are using columns, then you can use lists.

6. If you are worried about the webpage going forever, define a height on the container and add an internal scroll.

7. There are two tags you might consider details & summary. Only in the case there is a really large amount of names. They can be used to put all names from a letter (or department) inside a drop-down-like element.

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

1
  • Thanks for your suggestion, I think going with a style similar to that of movie credits will probably work best in my case. Commented Feb 1 at 19:17
0

I would use columns of bullets.

Columns, with bullets all left justified, would improve readability in my opinion.

enter image description here

I think the bulleted list is probably a good solution, especially if there's no other information for the individuals.

And actually if columns are utilized you don't really need any bullets.

3
  • Thank you for your suggestion! I think in the future I'll probably go with something more like this. But in this current instance, some of the names are particularly long (Mostly those representing organizations rather than individuals) and thus would either stretch out the columns to a noticeable degree, or require me to use multiple lines for a single entry, both of which would throw off the design. But your advice still is helpful when it comes to informing future projects, and that bit of context is something I forgot to mention, so there's no fault on your end. Commented Feb 1 at 19:09
  • If you do away with bullets.. and add some vertical padding between the names, you can use two lines for a name when necessary. The padding would serve as a good visual break.
    – Scott
    Commented Feb 1 at 19:55
  • Fair enough, that's essentially what I ended up doing anyway. I did away with bullets, added extra padding, and ended up with something that was a mix between your suggestion and the other user that replied. Commented Feb 1 at 20:17

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.