Add compact layout

[ericcornelissen]

ℹ️ If you're interested in this feature, please leave comment or add a 👍

---

Kind of issue

• Feature
• Bug
• Design
• Other, namely:

Description

Following the original design, a "compact layout" mode can be added to the website. The end-design may differ from what is displayed there, it is just a guideline.

[jorgeamadosoria]

Are there more details on this? Is this issue still relevant?

[ericcornelissen]

No more details than in the comment that is linked. Essentially it would entail adding an option to use a more "compact" design. I.e. the cards would be smaller, more cards could fit on the screen at once, but touch targets would be smaller. This would be similar to something that Google has in various apps (including Gmail) where you can choose between a "Comfortable" design and a "Compact" design.

It is relevant in the sense that there's interest (currently 5 👍s) and it hasn't been added yet.

[jorgeamadosoria]

I was think that the implementation of the. menu with icons, the universal download type, and the icon detail issues would diminish the relevance of this.

The menu is now shorter, the universal type would make the card way shorter , the detail view would allow many options for each icon without overloading the page....
I think we should reassess how this would look after addressing those other issues? Because it would certainly look different.

Not discarding the relevance of the issue, but rather asking for a more detail view on how this would look after implementing those other things.

[ericcornelissen]

At least to me, all the points you raised are almost irrelevant to this issue. First off, the compact design is mostly targeted towards the cards/grid items, so the "menu" is by-and-large out of scope. Second, a key difference between a "Compact" and "Comfortable" design is the size of elements and the amount margins/paddings in a design. In a "Compact" design things are closer together and click targets are smaller. I think this still applies after addressing #33 and even #43 (in my eyes the detail view should only add info currently not displayed, not move info currently displayed into the details view).

[jorgeamadosoria]

(in my eyes the detail view should only add info currently not displayed, not move info currently displayed into the details view).

Ah, but that doesn't has to be the case. Info that is currently shown but doesn't have to be include license and brand guidelines, for example.

Also, implementing the universal download type removes one download option from the card, which can help to redesign it even in the current layout. That will affect the compact layout as well.
Thus, it is important to have clarity on what the compact layout looks like, preferably after implementing the other ones.

[ericcornelissen]

but that doesn't has to be the case. Info that is currently shown but doesn't have to be include license and brand guidelines, for example.

It is definitely true that it doesn't have to be the case, though I feel strongly that at least the license should be visible at all times.

But, even if we remove those two, I still think a compact layout could be added. Again, it's mainly about the size of elements and the margins/paddings between them. Even if it's just the SVG, the name, the color, and the download button, that's still four elements that can all be resized and moved.

Also, implementing the universal download type removes one download option from the card, which can help to redesign it even in the current layout. That will affect the compact layout as well.

Yes it would affect the compact layout, but the fact that it does does not affect whether or not we should add a compact layout or not.

Thus, it is important to have clarity on what the compact layout looks like, preferably after implementing the other ones.

Of course it does, no one has said otherwise. There's simply no preview for this yet (beyond what's in the linked issue) as no one has worked on this yet...

[jorgeamadosoria]

But, even if we remove those two, I still think a compact layout could be added. Again, it's mainly about the size of elements and the margins/paddings between them. Even if it's just the SVG, the name, the color, and the download button, that's still four elements that can all be resized and moved.

I'm not saying that we shouldn't add the compact mode, the idea is fine. My concern is in designing something that is not based on the current layout.
For example, for compact, a card could have one colored side, the icon for copy, a download button and the name, that's it. But that assumes we have universal type, and that we moved brand and guideline to the detail view. Otherwise, we would have to accommodate more buttons, or make a decision of which buttons won't make it to the compact view.
That's my concern.

[ericcornelissen]

This issue would be the place to discuss that. With the current design, it should probably somehow have a way to download both an SVG and PDF. If we decide that's unacceptable then this would be blocked by #33 (or something similar). If we think the license and guidelines links do not always have to be displayed, they could be omitted from the compact layout. Indeed, before working on this issue we should probably discuss what to hide in the compact view, or what to (icon+)text link to replace by an icon, or whatever other strategy one can use to make a layout more compact. For example, we may not need a complete detail view, but simply a transition on compact cards that shows more buttons after clicking on it or hovering it (both ideas that appeared in simple-icons/simple-icons#980).

[jorgeamadosoria]

I think I'll be able to work on something for this that looks like this preview in simple-icons/simple-icons#980):

As soon as #33 is done, I can move on to this.
I would like to have compact layout being the only layout, not a switch. The reason is expediency and page size: supporting both layouts is not really necessary (even though the comfortable layout in 980 is beautiful) and the icon detail view would take care of the additional info anyways.