Tiki blogs and news (articles) pages are looking out of date, and aren't keeping up with web design trends. This page is to discuss and move forward on a proposal to redesign the structure/layout of these pages and lay the groundwork for new designs that stand out and are more elegant. Please edit this page to add ideas, comments, questions, etc. about the appearance and function of Tiki's blog pages and news pages.
(The idea for this page came out of some initial discussion by Marc, Bilal and Yves Dax and Gary.)
Timeline
Suggested but open to discussion: Maybe low hanging fruit and quick fixes and style improvements can be taken care of for Tiki 20, and more extensive revamping for Tiki 21.
Steps in the process
- Identify characteristics of leading blog and web news page designs and note where Tiki is falling short.
- Check what information/functionality needs to be on the pages and plan where it should be placed, for example by using wireframes.
- Plan/edit Smarty template files to position the information (try to provide design flexibility as much as possible).
- Improve packaged themes' styling of these pages.
- Looking at current (Tiki 19 or trunk) blog pages, what should be changed/improved on the theme level?
- Currently blog posts are displayed in Bootstrap
div.cardelements. In many themes, this has a border anddiv.card-headerhas a background color. Does this cause too much of a dated "info in a box" appearance?- Proposed action: I looked at a lot of contemporary blog page layouts/designs and almost all of them simply use white space and font styles rather than borders and background colors to present blog post information. My plan is to override the
.carddiv border and background color properties for blog posts as a default and then let themes reinstate them (totally or partially like maybe having horizontal border separators) where it matches the theme's look and for variety. Update: changes committed for Tiki 20.
- Proposed action: I looked at a lot of contemporary blog page layouts/designs and almost all of them simply use white space and font styles rather than borders and background colors to present blog post information. My plan is to override the
- Possibly produce new themes focusing on blog/news presentation (but actually all the packaged themes should present these pages well).
- Enable optional layout(s) for blog top page such as Pinterest-style grid of cards, one for each blog post intro. A similar thing could be done for the articles feature.
Specific issues
- Check and Solve any issue with Social Network (Facebook, Twitter, etc) so Blogpost and Articles are sharable, likeable properly and published automatically where it needs to.
- ...too many redirections detected by Facebook - Bernard.
- Be able to upload an image and post about it in the same form (ideally [also] from phone) - jonnyb.
- ...Facebook does not grab the right image to display on posts. It would be nice if the blog-article image was the one grabbed, and not the site logo or other image used. I mean the nice large image you're talking about that describes the post. Don't know if my experience with article-blogs was before or after the past revamp - Brendan.
- ...Feeds registering updates to an article (or blog?) with duplicate entry - Brendan.
- About comments - Brendan
- Instead of “0 comments” it would be nice if it read something like “Be the first to comment” or something of that sort.
- Clicking on the comments link should bring you to the place on the page where the comments are, not the top of the article.
- If you need to be logged in to comment, there should be a link that says “Log into to comment” with a link to the login page, instead of "There are no comments at this time.”
- Currently, at the top of an article, it reads "Author: Author Name - datetime" (or timeago). Perhaps this could be less formal. Or maybe when timeago is enabled it could read like the relative times something like “By Dr Sassafras 1 day ago” instead of "Author: Dr Sassafras - 1 day ago”. Or something in this train of thought to makes it a little more informal, and read a little bit better. - Brendan
- The top of the blog page is dominated by the Find form: the input is 50% of the page width and there is a "Displayed rows" input that (IMO) is not needed and is visually distracting. I suggest making "Find" more subtle, like narrowing the input and putting the button inline, and removing the "Displayed rows".
Related initiatives
- Blog Revamp in 2014 with many good results. The page has a lot of blog feature information and comparisons with other platforms.
- Overall informational redesign of tiki.org (reduce the clutter of links and make it easier for users to find information).
- Redesign the landing page/homepage.
- Consider/carry out merging "info.tiki.org" and the community site.
Related links
- https://wordpress.org/news/
- 17 of the Best Examples of Beautiful Blog Design
- 9 Blog Layout Best Practices to Remember in 2019
- Blog Design Inspiration: 7 Examples of User-Focused Design
- 25 Examples of Inspirational Blog Design
- https://www.creativebloq.com/web-design/best-blogging-platforms-121413634
- https://www.creativebloq.com/web-design/how-to-start-a-blog-1131726
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}