New Concept for Forum Categories Design
#1
[Image: 71923f6c7860941b6b12dcdbacaa9cc9.gif]
I am currently working on a new theme for my forum and have incorporated this forum selection style, as seen in the GIF. I have seen this concept done by a select few communities, one of them being The Verge.

It's a very neat concept.
Name's Waleed, I'm a graphic and web design (2015) graduate from Canada. Self-employed and lending my design skills to the MyBB community.
Reply
#2
NodeBB has this since some time. That was their default theme.
Reply
#3
Does not work as well as the default presentation of information IMO
What goes around comes around
Reply
#4
Sorry but is not something new. Forums in blocks already exist long time ago, the overall design can change but is still the same concept.

Anyway is a nice design.
I don't give support on PM.
Reply
#5
IMO it's way more difficult to scan columns than rows.
Reply
#6
I enjoy this look personally, but I think it should be a setting. Like this:

[Image: grid-list-1.jpg]
(This is a random Google image, just fyi)
Reply
#7
(2016-07-26, 03:37 PM)Eric J. Wrote: I enjoy this look personally, but I think it should be a setting. Like this:

[Image: grid-list-1.jpg]
(This is a random Google image, just fyi)

Yes but only issue would be adding one more JavaScript for it and increasing page load time. Not a fan of adding more visual effects vs page load.
- MyBB Heart
Reply
#8
If it's done right it would only require toggling a class on a main container (e.g. forum-list--row, forum-list--column), the appearance can all be changed with CSS. A simple class toggle in vanilla JS (As opposed to jQuery, which requires the whole library to load) at the bottom of the body wouldn't really have much of a speed difference.

/* Localstorage plugin would go here */

(function() {
    var forumList = document.querySelector('.forum-list');
    if(Storage.get('forum-orientation') == 'column') {
        forumList.classList.remove('forum-list--row');
        forumList.classList.add('forum-list--column');
    }
});

This is just an example showing how it can be done easily with little performance impact. Further optimizations can be made using things like PHP (Though much more technical) and transitioning the switch between them so it isn't jarring.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)