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 :package:

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 :smile:

[tshepang]

good: I love the new Tags page (me loves dates beside my Posts)

bad: I unlove the new font page; 'Continue reading' is redundant, given one can already click on the title; I also unlove the oversized titles; it likely works well when one adds summary as well, which is not the case with me.

[talha131]

@tshepang Thank you.

'Continue reading' is redundant, given one can already click on the title;

It is redundant. I added it as "call for action" for the reader. Of course user can click on title but it is not that obvious. It does not invite user to do anything. "Continue Reading →", on the other hand, asks user to do something.

I am pretty sure that if you perform an A/B testing on it, call for action will reduce visitor bounce rate at your front page.

Please try adding summary to few of your articles and see how it looks.

I also unlove the oversized titles; it likely works well when one adds subtitles as well, which is not the case with me

Can you tell me which font-size do you recommend? It is currently set to 2em.

What about archives page?

[tshepang]

I only noticed the Archives page now. No please, i much prefer the minimal data+title list.

[tshepang]

Can you tell me which font-size do you recommend? It is currently set to 2em.

I don't know. The previous one was fine.

[talha131]

Man, it seems you like your heart is set on old front and archives page!

[tshepang]

It is. Sorry for complaining. I like minimal designs.

[tshepang]

Please try adding summary to few of your articles and see how it looks.

It looks a lot better when SUMMARY_MAX_LENGTH is not disabled. I just might get used to it.

[talha131]

It looks a lot better when SUMMARY_MAX_LENGTH is not disabled. I just might get used to it.

Phew!

Lets keep it open till @calfzhou chimes in.

[calfzhou]

Wow, it's a huge change. The old one is compact and clean, as well as the new one is informational.

Personally I like both of them. But I'm not sure, may be my preconceptions, the new archives and front page look like not part of elegant theme. Need some time to get familiar with it :)

[tshepang]

I vote for Archives to be like it was... date+title only.

[talha131]

Guys I am surprised beyond words :smile:

Archives page and Recent posts was a compromise that I had to made to ship it. I was not satisfied with the design but I was running out of time so I settled on it and shipped it. I always thought it to be the weakest part of the design. I expected someone to point out this obvious flaw.

Now, from your comments, I realize many users are satisfied with it. They like it.

How is it even possible? How can something that I perceived as flaw become a feature? I am flabbergasted.

[talha131]

Don't worry! It is not a big deal to go back and revert the changes. I just want to make sure we make the right decision here. I am sure if we brainstorm together we will come up with something far better than an individual can come up with.

[talha131]

Archives Page

1. The information density is far less than the previous version's compact design.
2. Each link too much space
3. Why do we need "posted in Category" under each link?
4. Page is too much black. Monotonous look.

The good things

1. Each year has its section. If we insert an id in the HTML, user can link to the posts of a year. "Here are the posts that I wrote in 2013" for example.
2. We can have navigation buttons on the top to jump from one year to another.

What if

1. We remove category information
2. Link to article will appear as it used to, blue color, small size link
3. Date will appear the way it appears now i.e on the right hand side.

What do you guys think now?

[talha131]

Here is the first draft

An obvious flaw with it is that the right side is totally empty.

This can be cover if we move date to the right side. But keep year heading on the left.

[talha131]

I think this one is good merge between old and new style.

Years on the left are links.

[talha131]

One I get your feedback, I will finish it and move to Recent posts issues.

[tshepang]

I like the latest draft. Interesting you used my site as an example :)

[calfzhou]

Vote for the second one too! Awesome! And elegant.

[talha131]

@calfzhou @tshepang It is almost done, I will push it out in next few minutes.

Recent posts

Now lets talk about Recent posts. What can we do to improve it.

I think old design lacks these things

1. No category. Sometime articles' title only makes sense when it is clear in which category it is posted
2. No call for action, like Continue Reading. Although the blue color of the link does fill the role to some extent.
3. Article summary (I am not set about this. Perhaps it is not required at all).

Problems in new design

1. Too dense. Too much info.
2. Monotonous color

How about we use the old design but add category information to it.

Here is a draft

[talha131]

I have pushed out changed for Archive page. It is responsive so please test it on different screen sizes.

@calfzhou do you have a blog? Do you mind sharing its link?

[calfzhou]

How about add category after article title like this?

"Continue Reading" button is needed only when article summary is present.

[talha131]

"Continue Reading" button is needed only when article summary is present.

I think adding summary is not a good idea. It adds to info overload on the main page.

I think your proposal is better than

Do you think we need to add "on", I mean "posted in {{Category}} on {{date}}"?

[tshepang]

@talha131 did you test the latest change? Looks quite bad here:

![Uploading Screenshot from 2013-11-24 16:06:11.png . . .]()

[talha131]

did you test the latest change? Looks quite bad here:

@tshepang I tested it thoroughly. Which part is bad?

[tshepang]

Sorry, I meant to attach a screenshot. Github is acting up on me:

[talha131]

You will have to upload it again! :smile: not working here.

[talha131]

Which browser is it? OS?

[tshepang]

Debian. Tried both Chrome and Firefox.

[talha131]

Try now! Also please share your feedback in recent posts discussion.

[tshepang]

"Continue Reading" button is needed only when article summary is present.

I agree with this suggestion.

Regarding @calfzhou screenshot, I do prefer my date to be cold yyyy-mm-dd. No need to bother with localisation there.

[tshepang]

Now me loves the latest Archives page. Tell me, how come you didn't experience the issue I did?

[calfzhou]

Do you think we need to add "on", I mean "posted in {{Category}} on {{date}}"?

This is good. It makes article more clear. And could we make category names clickable with some color.

GitHub's image uploading is not working, i'll upload image later.

[talha131]

I do prefer my date to be cold yyyy-mm-dd. No need to bother with localisation there.

Elegant prints locale date, whatever it is that you have set in your configuration.

Now me loves the latest Archives page. Tell me, how come you didn't experience the issue I did?

I use Mac OSX. It auto hides the scroll bar, as a result such issues do not bubble up during my testing.

[calfzhou]

@calfzhou do you have a blog? Do you mind sharing its link?

Yes I have one, but it's in Chinese language. I'm not sure whether it is useful to you.