treat the Tags view to the accordion style

[tshepang]

I find the accordion idea interesting, and I wonder why the Tags view isn't taking advantage of it?

[calfzhou]

+1

And the tag cloud should be sorted (in reversed order) by the number of related articles.

For above example tags, python should be the first one, followed by development, no, programming, test, and then blogging, c++, etc.

[calfzhou]

And, it will be great if the articles list under one category/tag uses the similar style with archives. Looks like this:

[talha131]

@tshepang @calfzhou

Cool ideas guys. I have added it to the milestone 2.5

I think date should appear on the left side as it does already. Eyes scan from left to right, at least of those whose first or second language is left to right languages like English, which makes the majority of any sites' audience.

Dotted line is also unnecessary. Dates of left hand side function as bullet points.

On Archives and front page dates appear on extreme right, where they cannot function as bullet points. That is why I had to use dotted lines.

It will be great if we brainstorm together and redesign Archives and front page. What do you say?

[calfzhou]

It's OK to me to put date on either the left side or the right side. My only concern is that it might look good if article tiles are aligned along their first character.

Currently, when there are several articles under one category, as you can see, the titles are not aligned:

But I prefer this:

Which one do you like?

[talha131]

Ah so that's another bug. Titles should be aligned. @calfzhou good to have you here. It would have taken me very long to notice these bugs myself.

[calfzhou]

It will be great if we brainstorm together and redesign Archives and front page. What do you say?

This site's archives page (http://markstruzinski.com/blog/archives/) look good. Just FYI.

[talha131]

@calfzhou I agree, our archive page should be similar.

I wonder what can we do to improve recent posts on front page.

[talha131]

@tshepang @calfzhou

I find the accordion idea interesting, and I wonder why the Tags view isn't taking advantage of it?

I have been thinking about it. There is a major difference between usage of categories and tags. Categories are like sections in a newspaper. It will be in limited number. Most blogs have around 5 categories. If they have more than that, then they very often move part of their blog to different domain.

On the other hand, tags can be in hundreds. They are used profusely. That's why you see most blogs have tag clouds.

Now image 100-200 tags in accordion style. It will be overkill. It looks good when it is in limited number. If you have a page full of it it will not look as good.

Please share your thoughts on it.

[calfzhou]

I wonder what can we do to improve recent posts on front page.

I'd like to show: article title (and sub-title), post date, summary (and a "read more" button/link), category and tags, number of comments.

[calfzhou]

For tags page, how about only show several top tags in this page? We could leverage pelican TAG_CLOUD_MAX_ITEMS setting.

[talha131]

I'd like to show: article title (and sub-title), post date, summary (and a "read more" button/link), category and tags, number of comments.

That's a reasonable start.

[talha131]

For tags page, how about only show several top tags in this page? We could leverage pelican TAG_CLOUD_MAX_ITEMS setting.

If we show only top tags, then how will visitor get access to lesser used tags?

And the tag cloud should be sorted (in reversed order) by the number of related articles.

It is sorted alphabetically to make it easier for the user to scan it.

So many times I have visit a blog that only has a tag cloud. Tag cloud gives me an idea which topic has most articles in this blog. But it does not help in discovering the content which is not in the top tag list.

For example, I am looking for a NSPredicate article. The blog mostly writes on Career Advice or Software Development practices. The tag for Cocoa will be hidden in the cloud. This makes it nearly impossible to find this tag.

Same thing will happen if we sort tags by number of articles.

Let me know if my point is not clear.

[calfzhou]

If we show only top tags, then how will visitor get access to lesser used tags?

Is it possible to add tags to search index? Then when user searches an tag, he will get all posts related to it.

It is sorted alphabetically to make it easier for the user to scan it.

I think that if you are trying to find one specific topic, you could use search instead of tag cloud.

The purpose of search is that i don't care which topic your site is focus on, i only want to find what i'm interested in. I know that days ago you wrote something about Cocoa, even if this is not your major, I can come and try to find it.

But for tag cloud, it is used to tell a visitor your major focus. He might follow you after looking through your high frequent tags and find that most of them are interesting.

That's why we add the number of articles to each tag and category. We don't need sort categories by the number of articles, because there are usually only a few categories. A visitor can quickly scan through all categories and get a brief idea about the major domain (as well as all domains) of your site. But it's hard to people to go through every tag (even if they are in alphabet order) to find their interests.

A perfect tag cloud, in my opinion, is composed by a series of small clusters. Each cluster is related to one topic (similar to a category, but much more accurate). For example, one cluster contains all iOS development related tags, another one contains all career advice related tags. Clusters are sorted by the number of articles, of course. And inside each cluster, tags are sorted (or placed) by the number of articles too.

I just tried to search "clustered tag cloud", not surprisingly there are many people working on it.

Aha, i'm off the topic, clustering needs some NLP and ML work 📦

Anyway, my point is that tags cloud should help user easily to get the major topic of a site, not to show every single tag to the visitor.

[talha131]

@tshepang @calfzhou

1. I have changed Archives page
2. Style of recent posts on the front page is also changed
3. Articles on Tags page are displayed with published date
4. I have tried to made sure that these changes are responsive.

Can you guys please check it at different resolutions? Let me what you think about it.

[talha131]

@calfzhou @tshepang

And the tag cloud should be sorted (in reversed order) by the number of related articles.

To continue the discussion,

It is not easy to do. Pelican tag do not have a member that tells the count of articles it has. That's why we have to count the articles manually to show in the superscript.

Secondly, it is not necessary that visitor uses tags only to from an opinion about blog's major focus. It is certainly used for navigation too.

To be honest, many bloggers use categories and tags interchangeably. It is hard to make a rule that fits all sizes. We, as a theme developer, have to come up with solutions that works for most people.

Though I do see your point and agree that "discerning major focus of a blog" is a valid use case of tags.

A reasonable middle ground is to show a button that changes the sort criteria of the tags. It can be pulled off with Javascript. Clicking on it will change sort from alphabetical to article count and vice versa.

Let me know what you people think about it.

[talha131]

@calfzhou

You reported this issue

It's OK to me to put date on either the left side or the right side. My only concern is that it might look good if article tiles are aligned along their first character.

I am unable to reproduce it. Need more information from you to reproduce and fix it 😄

[talha131]

My blog is http://www.gocalf.com/blog/, just updated the theme.

Awesome thank you!

[calfzhou]

That's what i have in mind, except I want to make category link muted.

Okay, i agree with you. I myself now find that two blue links on a single line looks ugly. 😆

[tshepang]

I also agree. I'd go with a shade of grey instead of different background color.

[talha131]

What do you guys think of this?

[talha131]

I think this one is better and clearer, though it takes up two lines. It is easier to understand. Each info is placed separately from other.

Title
Category
and on right you have date.

I think date should appear on the right on the same line as category.

[calfzhou]

I think date should appear on the right on the same line as category.

Vote for this.

I think it's OK to use two lines. Still very clean.

[tshepang]

+1

[talha131]

Hang on guys! I will push it out in next few minutes.

[tshepang]

@talha131 rocks!

[tshepang]

Did you forget to make the Category text distinctive?

[talha131]

@tshepang @calfzhou

Please check now. Also check it on different screen sizes.

There is a bug which I cannot fix. It you change the browser window size to small. Date will appear under category.
When you change the window size back to normal, date still appears on an empty line.

Otherwise this fix is good!

It does, however, appear that the current front page ignores that setting.

I think it should be fixed now. Let me know what you see @tshepang .

Did you forget to make the Category text distinctive?

Well if you hover over it, it changes its style. I figure this distinction is good enough.

[tshepang]

There is also an extra space between in and <tag name>:

[talha131]

Yeah, again its intentional. For distinction. I want to make sure all categories properly line up.

[talha131]

There is a bug which I cannot fix. It you change the browser window size to small. Date will appear under category.
When you change the window size back to normal, date still appears on an empty line.

This problem happens only on Chrome (I think Safari too will have the same issue). Any idea how to fix it?

[tshepang]

The date thing is fixed. Thanks.

[talha131]

Great!

@calfzhou let me know what you think of it?

Also if you can fix the Chrome problem, it will be great.

[calfzhou]

This version of front page look great!

I guess the cause of date placement issue is that its display style is set to block.

[tshepang]

Given:

• Don't you guys feel that article title font size should be a bit larger than that of posted in Category?
• I also feel like the date is too far away from the associated Posts (on wide screens).
• isn't Recent Posts a little too large?
• besides being not capitalised, all posts does not look clickable.

[talha131]

@tshepang Please open up new issues, even if it is related to some old issue. It is not difficult to reference old issues if you think it is necessary.

Separate issues makes my life a lot easier to assign labels, milestones, track progress and manage todo list.

Also, open and close status of an issue affects milestone progress bar, which is one, perhaps only, way to see progress of a release.

[talha131]

Don't you guys feel that article title font size should be a bit larger than that of posted in Category?

On my dev machine, size of "posted in ____" is 13.8667px. Size of title is 15.4px. Do you have the same size on your machine?

See the computed section in element inspector. Please share those values here. It could be your system does not have the fonts that Elegant uses which will effect title size.

I also feel like the date is too far away from the associated Posts (on wide screens).

What do you propose? Please keep in mind the suggested style has to fit for users who have "About me" and "My projects" sections on top of recent posts.

isn't Recent Posts a little too large?

It is 38.5px here. What's your value?

besides being not capitalised, all posts does not look clickable.

Intentional! There is a big archive button at the top menu bar. If you hover over "all posts", cursor shape changes which is universal on all browsers to the best of my knowledge.

[tshepang]

I get the same Computed font size values.

[talha131]

I get the same Computed font size values.

@tshepang the conversation has gotten jumbled up now. Lets start a new thread to keep it clean 👔