4 ms·

There's a big problem with cards : if they're from different heights, it's really hard to float. I've implemented something like that in a yet to release proje

There's a big problem with cards : if they're from different heights, it's really hard to float. I've implemented something like that in a yet to release project recently, without even thinking of the concept of card. Being a responsive app, it looked to me like an obvious choice. I've put some lorem ipsum content in those cards, and it looked just beautiful. ... then I placed real content. Shit happened. Simply using float won't do it when cards have different height, it looks too ugly and have a lot of random almost entirely blank lines. The look and feel of pinterest was good enough for the type of content I wanted to display, so I had a look to how they did it : every card is absolutely positioned to form a compact canvas, which means they have to compute every card position based on which will be shown. I'm not saying it's impossible to achieve, but it seems to me it's not that responsive friendly, because it's not css friendly : the straighter solution to make it responsive is to have cards using the whole width of the block they're all in, or to have them all the exact same height. EDIT : to illustrate this : http://jsfiddle.net/uV645/3/ http://jsfiddle.net/uV645/3/ Resize browser by width to see effect.

sujeetsr 13y ago
Have you tried stuff like the masonry or shapeshift plugins for jquery?
- oelmekki 13y ago
  Not yet. To be honest, I've just decided to focus on backend features, put a locked height on items and to get back to this in the "let iterate on design details before releasing" phase. But those plugins are a perfect fit that I didn't know of, thanks for it ! It's still something that have to be done through javascript, though. So I guess we probably have to consider cards canvas as a feature rather than as a design element (like calendars, graphs, etc).
- TuringTest 13y ago
  Personally I think the "fluid" responsive design for article snippets is a mistake; but then I hate multi-column feed designs, so that may be just a personal preference. Apple got it right with the iPhone menu structure, which was inspired by the iPod (maybe they nailed it because it was not card-based). There, columns always maintain the same positional relation (there are menus to the "left" and sub-menus to the "right"), so you can always remember by muscle-memory where a particular item is located relative to the others. Re-flowing similar items breaks those relations. Responsive pages make sense when the side columns are used for side content (i.e. "aside" tags, headers and footers, navigation...) - there, placing the sub-content above or below the main content to show it on a narrow screen is not a problem, since the moved card was subordinate to the main article anyway.

sujeetsr 13y ago

Have you tried stuff like the masonry or shapeshift plugins for jquery?

oelmekki 13y ago
Not yet. To be honest, I've just decided to focus on backend features, put a locked height on items and to get back to this in the "let iterate on design details before releasing" phase. But those plugins are a perfect fit that I didn't know of, thanks for it ! It's still something that have to be done through javascript, though. So I guess we probably have to consider cards canvas as a feature rather than as a design element (like calendars, graphs, etc).
TuringTest 13y ago
Personally I think the "fluid" responsive design for article snippets is a mistake; but then I hate multi-column feed designs, so that may be just a personal preference. Apple got it right with the iPhone menu structure, which was inspired by the iPod (maybe they nailed it because it was not card-based). There, columns always maintain the same positional relation (there are menus to the "left" and sub-menus to the "right"), so you can always remember by muscle-memory where a particular item is located relative to the others. Re-flowing similar items breaks those relations. Responsive pages make sense when the side columns are used for side content (i.e. "aside" tags, headers and footers, navigation...) - there, placing the sub-content above or below the main content to show it on a narrow screen is not a problem, since the moved card was subordinate to the main article anyway.