News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Some updates on SMF 2.1

Started by emanuele, September 02, 2012, 04:39:44 PM

Previous topic - Next topic

Nao 尚

That's an interesting discussion going on, or I don't know anything.

1/ Recognizability of a product. I think it requires some thought. I for one did recognize SMF when I looked at Penguin. It had the same color scheme, and basically the entire layout is 95% the same. Now, when you look at Wedge, the layout is also similar, but it offers a homepage by default, so it's not exactly SMF either, but it shows signs of being a fork. The color scheme is different precisely because it's not SMF, and it needed to have a scheme of its own. Those who like SMF's better can stick to something closer in spirit, like the Wuthering skin. (You can see it in action by selecting it in the sidebar's drop down menu. It should work for guests, too.)
All in all: SMF 2.1 should be a recognizable SMF iteration because it's SMF, and because people are going to update one day or the other. When someone goes from SMF 2.0 to 2.1, they want to benefit from the latest additions and tweaks and security fixes. When they go from SMF 2.0 (or whatever) to Wedge, that's because they want to try something entirely different. It's not the same state of mind.
For that reason, I think it's best that SMF keeps in line with its earlier themes when it introduces a NDT, and waits until version 3.0 (with the smCore rewrite) if they want to attempt something different -- which I'm sure they'll do, somehow.

Good recognizability examples: phpBB 3 (default theme has the userbox on the right, which is something no other forum had tried before, and it's still usable, even though I prefer it on the left), BBPress, IPB.
Bad recognizability: XenForo, Vanilla, myBB. For the first two, the default themes are just too unconventional and full of odd ideas. So, yes, finding a generic forum you'll immediately recognize XF or Vanilla, but your second reaction will be 'too bad it's that default theme...'
For myBB, the problem is that it's not recognizable enough... When I see a myBB forum, I'll either think it's phpBB or some vBulletin theme.

2/ Content versus containers. Oh, that... It's only one of my many obsessions. When I'm on a forum, as a power user I want to have easy access to any possible actions or information. Especially when I'm administering that forum. When I'm just a regular user, it's not so important. But if you start thinking like a noob user, or just someone that gets to your forum through a google reference and only cares to read a post and then go on with their life (which is absolutely fine with me!), they don't want all the clutter.
Think of the last time you followed a news link and found a news website that had tons of 'Follow us on twitter/facebook/iwetmypants/google+' buttons, multiple ads everywhere (header, sidebar, content side, footer, popups...), things like that. Websites so crowded that you have to search carefully for the comments area. They don't encourage discussions, they just treat you like you're stupid and all you want to do is share their URL to all your friends.
So, that's one of the things that bothers me: there should be enough side information to allow for both noobs and power users to be happy, but still make the content king.

I fixed this in my own way, with several tweaks:
- having a mandatory sidebar. It can actually be removed by a skin, but these skins should provide for a fallback or expect the sidebar content to be hidden entirely. Having a sidebar by default means that modders will have a place to target when they want to insert content, instead of having to add it where they know it can be pushed -- i.e. where the main content is. I know it can be disputed (emanuele doesn't share my views on this IIRC), but it's still a decision I made that I'm happy about, two years later. Most notably the fact that if your screen isn't wide enough, Wedge won't attempt to cram the sidebar into its usual place, and will instead move it to the bottom, where it's unlikely to hinder your reading habits.
- user mini-menus. I like to think that my implementation is what inspired the same thing in Penguin :) After all, it's not a very original concept, what's original in mine is that the menus are generated by JavaScript so as not to take any space in the HTML, and thus make it faster to load. Anyway, user menus definitely help with the userbox clutter. I still haven't gotten to removing the visible icons, which kind of defeats the menu's original goal, but that's only because I want to be able to see if a user has a website icon or not. I'll probably move that one next to the username because it's important to me, more important than a user's PM or mail links. You may also notice that these icons, even if they're still there, are now dimmed (reduced opacity) so as not to take attention away from the content. It's a good compromise and I'd recommend that if icons are going to stay, they're dimmed the same way in SMF. It's only 3 lines of CSS, really... (including the hover code.)
- more padding! It's not up to Bloc's tests in this area, but it's still nice to have some breathing space I think... If you have to take away padding from an element for it to it, it's time to start thinking about the reason why it needs to be so cranked.
- obviously, no facebook/twitter/etc clutter in the default theme Weaving... Not only does it save space, it allows make pages more responsive.
- and generally moving all JS to the bottom (at least when a user has no session opened yet, meaning they don't have any JS in their browser cache), things like that make the page more responsive and thus you can start reading the content earlier.

These are things that I'd encourage SMF to try out as well...

Good clutter-free forum: FluxBB (although it takes it a bit too far... Given that even avatars are a plugin, that's a bit far-fetched in my opinion...)
Bad forum (i.e. not clutter-free): vBulletin. It's nice to offer plenty of features... But it's a very bad idea to enable them all by default. I know, what they're after is your money, but to me it's always been a no-no because the focus seems to be on forum features rather than the post content...

So, all in all, I'd take FluxBB as a good example of both recognizability and clutter-free content, with BBPress a close second (it does have interesting things going for it, but overall it's too WordPress-centric for my taste). Had FluxBB had a nicer codebase (i.e. clean and flexible code), I might have worked on it rather than on an SMF fork... I really did evaluate it. It just wasn't enough for me. But OTOH, SMF was so slow in comparison, which is why I focused so much of my work on making Wedge faster than anything... I'm not sure it'll be noticeable for most users, probably won't, but it's still going to be something I'm very happy with. Plus, the work I invested in Wess (the CSS preprocessor) is probably going to be distributed with an OS license in the future, so that it can be reused in other projects.

3/ Going for originality in the default theme. Ah, this one is tricky... One could argue that Weaving is 'original' in many aspects, but I really did my best to make it look 'dull' to the untrained eye. Not exactly dull, but at least 'normal'. The idea, which is valid for SMF and every other web software product really, is that recognizability should only be a plus, but it's more important that when someone installs a forum and starts using it without applying any tweaks, it shouldn't look like everyone else's forum. It's something I never really fixed in Wedge, so I'm definitely not going to boast about it... Half of the work should be done by admins, i.e. installing a logo/header is the first thing they should do. The other half should be made by developers, e.g. by ensuring that it's actually very easy to change the default look. I think that even just changing the background or windowbg colors would be enough to guarantee a 'unique' effect, as long as the default theme isn't too unique itself in its design. In Wedge, you can easily select one of the other available skins, which are quite different from the root one, but I'd like to make it easier to just change the color, so I'll probably also ship a 'test' skin that just does that -- changing some colors -- and will have the very bare minimum needed to do that task. If people look into that skin and see it only has a few lines, they'll probably want to play with it and change the colors, and then make it the default skin for their forum.
I think that SMF's 'variants' aren't used much on SMF forums because (1) they aren't advertised properly, (2) SMF never really encouraged to use them (for instance by shipping a sample variant), (3) well, they're probably a bit complicated to grasp for the untrained eye... Even though it's not exactly true.

I think I'll stop here for now... I've given you enough food for thought ;)
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

bloc

How does Wedge fare with mobiles..or simply smaller widths? Or more to the point, what do you have of plans for it?

Reason I ask is because I recently worked with trying to make a regular SMF theme more responsive, by altering only the CSS. The ideas of using separate templates for mobile users might not be the best after all, not when phones come out that have 1024px by default(..) It blurs the separation between touch=small widths and desktops which only get bigger and bigger(2100+ pixels). I think by working with the design's CSS is a better solution then, for now anyhow.

A few things I picked up from the net and use are:
1) use a selectbox for the menu, which hides on bigger widths than 480px
2) hiding whole columns in boardindex/messageindex on lower widths, only keeping the most relevant ones
3) using a sidebar to maximise the space on widths above 1200px, jumping beneath the main content on lower
4) stop relying on hovers on lower widths, to meet the typical touch-based devices, although as said, it might need to be re-visited
5) using a css grid that can be put on 100% width on lower widths, and work as floats with percents on higher

In SMF 2.1 some measures have been taken to be more responsive too, Antechinus have written some about that. I think I will agreed with him now lmao. ;D

I recollect some discussion about this in Wedge too..but its been a while since I followed that.

..but back to content versus clutter: its most times a question of what looks attractive first, then whats useful next. Somewhere inbetween those extremes is where the solution should be. If stark naked, the forum looks unfinished, if over-worked it looks bloated. But content, as in discussions foremost, though I have experimented with showing discussions as blogs/galleries etc - as have Wedge - is and should be the most important. FB is also about content to some degree..but it presents it in another way, it assumes a lot about you, presents things it reckon you will be interested in..and generally is not very fair to you in what you actually want to read. You select friends, but they are often suggested by..FB. And so on..

So the FB way isn't the answer IMO, discussions as up to now, in forums, have something great going for them, they follow a linear direction, and you only follow one at a time. Mechanisms for reading unread posts are there, but I think more could be done there, and perhaps more options to tag topics for example, so you can make a structure yourself on top of the unread/category/board structure.  Or just make own preferred things like ignore boards..anything but more boxes about the sites you own, what social services you use, what color your cat has or where you lived 10 years ago.. :P

Sunburned Goose

Quote from: Bloc on September 29, 2012, 03:48:58 PM
A few things I picked up from the net and use are:
1) use a selectbox for the menu, which hides on bigger widths than 480px
2) hiding whole columns in boardindex/messageindex on lower widths, only keeping the most relevant ones
3) using a sidebar to maximise the space on widths above 1200px, jumping beneath the main content on lower
4) stop relying on hovers on lower widths, to meet the typical touch-based devices, although as said, it might need to be re-visited
5) using a css grid that can be put on 100% width on lower widths, and work as floats with percents on higher

Touch and :hover are not friends.  You can make optimizations for the desktop, but the designer would be assuming large screens are desktops but iPad 3's resolutions put that argument down.  It's time to move one and leave :hover in the past.  Navigating in SMF 2.0 on a phone is not fun.  Try to send a PM.  You click on "My Messages" and you see a drop down flash before you are taken to the PM page.  There, if you want to send a message, you have to click on "Messages" (which is not a very discoverable location for "New Message" btw).  If you happened to be zoomed in to click on "Messages", you are jerked up to the top of the page because the link uses a '#' anchor, and then you have to drag back down to see the popup under "Messages".  It's just inconvenient for touch users.  In 2.1, it's worse because once I get into "My Messages", I can click on any of the links in "Messages", "Actions", and "Preferences", but unlike 2.0, it takes me directly to the first item in the drop down, and I have no way to get to any of the sibling links.  Hover doesn't work anymore if there is any consideration for touch friendly user interfaces, which includes desktops as touch-sensitive desktop screens are becoming more common.

Grid systems are helpful, but they really shine on content heavy websites like blogs.  I'm working a project that is building a responsive template for SMF 2.0 to see how responsive design can be applied to forums.  I've already posted about it and will keep the discussion in this post

bloc

Have a look at http://www.blocweb.net , the theme is displayed there although its much more to do in it.

I'll check out the progress on your work.

Sunburned Goose

That theme looks sharp.  I will bookmark that and look at it more.
Goose.

dimspace

Quote from: emanuele on September 03, 2012, 07:17:32 AM
Quote from: JBlaze on September 03, 2012, 07:04:48 AM
I also may decide to run this on my live forums, once an upgrade package is available. I highly suggest you know your beans before making a decision like that btw ;)
Prevent this is the reason I didn't post the upgrade package! :P

Oh go on.. I have a carbon copy of my forum on my server that we use for testing themes, mods etc prior to implementing them on the main forum, so was hoping that there was an upgrade feature to try out on that..

but can understand for every 100 people that tried it there would be 1 muppet that tried it on  a live forum

Kindred

oh, you give them too much credit. I estimate at least 50 out of every 100 would do it and then complain....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

butchs

I ran 2.0 beta for a long time live.  Never complained and just fixed it myself.  I was bad, I did not share...
:o
I have been truly inspired by the SUGGESTIONS as I sit on my throne and contemplate the wisdom imposed upon me.

Kindred

Naughty....

However, a beta is still very different from an alpha
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Atomic Blaze

Quote from: Kindred on October 02, 2012, 09:29:20 PM
Naughty....

However, a beta is still very different from an alpha

Depending on the developers, some teams release alpha quality betas, others release RC quality alpha.
Trick number one, looketh over there. Doth endeth the trick.

Follow me on Twitter!

Party Llama || GitHub

emanuele

* emanuele would release RC quality alphas, skip beta, and alpha quality RCs. (just to keep the balance of the universe :P)


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

Joshua Dickerson

I would probably wind up doing that because I didn't want to wait for the next version to get features in there heh.

Unit tests FTW!
Come work with me at Promenade Group



Need help? See the wiki. Want to help SMF? See the wiki!

Did you know you can help develop SMF? See us on Github.

How have you bettered the world today?

Powerbob

Downloaded and installed on test site, first impression, very good job 8)



My SMF 2.1 Beta test site; http://www.pplb.net/smf21/index.php

Trekkie101

Quote from: Powerbob on October 11, 2012, 04:57:43 AM
Downloaded and installed on test site, first impression, very good job 8)

Glad to hear it. :)

Antechinus

Quote from: Nao 尚 on September 29, 2012, 11:25:35 AM

2/ Content versus containers. Oh, that... It's only one of my many obsessions. When I'm on a forum, as a power user I want to have easy access to any possible actions or information. Especially when I'm administering that forum. When I'm just a regular user, it's not so important. But if you start thinking like a noob user, or just someone that gets to your forum through a google reference and only cares to read a post and then go on with their life (which is absolutely fine with me!), they don't want all the clutter.

Think of the last time you followed a news link and found a news website that had tons of 'Follow us on twitter/facebook/iwetmypants/google+' buttons, multiple ads everywhere (header, sidebar, content side, footer, popups...), things like that. Websites so crowded that you have to search carefully for the comments area. They don't encourage discussions, they just treat you like you're stupid and all you want to do is share their URL to all your friends.

So, that's one of the things that bothers me: there should be enough side information to allow for both noobs and power users to be happy, but still make the content king.

Yup. One guy here is working on a Facebook-styled theme, partly because he's impressed with how much data FB outputs to each page.  I've always thought that SMF outputs too much useless data to a lot of pages, and prefer to minimise it for less clutter. I think the best way to go is to first identify what is essential and put that on clear display. Then, decide what else would be useful and have that clearly linked, but concealed (droppys, etc). Otherwise, things are just too confusing for a lot of n00bs and casual users.


QuoteI fixed this in my own way, with several tweaks:
- having a mandatory sidebar. It can actually be removed by a skin, but these skins should provide for a fallback or expect the sidebar content to be hidden entirely. Having a sidebar by default means that modders will have a place to target when they want to insert content, instead of having to add it where they know it can be pushed -- i.e. where the main content is. I know it can be disputed (emanuele doesn't share my views on this IIRC), but it's still a decision I made that I'm happy about, two years later. Most notably the fact that if your screen isn't wide enough, Wedge won't attempt to cram the sidebar into its usual place, and will instead move it to the bottom, where it's unlikely to hinder your reading habits.

Sidebars can be good (I use them myself via a portal) but I'm not sure they're necessary. If they are present, I prefer them to be collapsible without having to hunt for ridiculously tiny icons. A clickable full-height div down one side of the screen works well.


Quote- user mini-menus. I like to think that my implementation is what inspired the same thing in Penguin :) After all, it's not a very original concept, what's original in mine is that the menus are generated by JavaScript so as not to take any space in the HTML, and thus make it faster to load. Anyway, user menus definitely help with the userbox clutter. I still haven't gotten to removing the visible icons, which kind of defeats the menu's original goal, but that's only because I want to be able to see if a user has a website icon or not. I'll probably move that one next to the username because it's important to me, more important than a user's PM or mail links. You may also notice that these icons, even if they're still there, are now dimmed (reduced opacity) so as not to take attention away from the content. It's a good compromise and I'd recommend that if icons are going to stay, they're dimmed the same way in SMF. It's only 3 lines of CSS, really... (including the hover code.)

Sorry, but I've never even looked at your coding for Wedge. The user mini-menu is an idea several people have come up with independently. Think of it as covergent evolution. ;)


Quote- more padding! It's not up to Bloc's tests in this area, but it's still nice to have some breathing space I think... If you have to take away padding from an element for it to it, it's time to start thinking about the reason why it needs to be so cranked.

Totally. To my mind, one of the things that has always been wrong with the SMF gui is that it insists on spewing so much garbage into such a tiny space. It's not necessary or desirable to do that, IMO. I've often thought that it's a relic from the early days, when everything on the web was ugly and the only way geeks could get their rocks off was by outputting bigger amounts of data than the other guys ( a sort of "mine is bigger than yours" situation).

hcfwesker

WOW!  An auto-emulator for installing packages from older versions.  LOVING IT!!!

Theme looks delicious, as well.  The drop downs for the main menu are very slick and a nice touch.

Antechinus

Funny you should mention menus. I've just been tweaking them up over the last couple of days. We've decided to add flyouts to the old sidebar menus too, since some people still prefer the sidebar but could benefit from the extra access options provided by the flyouts. I had already coded them a while back, just out of curiosity, so it was easy to add them to 2.1. They use much of the same css that runs the other drop menus, so it's not that much more complex than not having them.

Screenshot attached. Second one is the same area focused in the flyout, but by keyboard access without javascript enabled. This should reassure people who are worried about us getting carried away with that new-fangled javascripty stuff. The accessibility of the entire 2.1 menu system, with or without javascript enabled, is a lot better than the 2.0.x system. :)




Akyhne

I never used the new top menu. Always hated it. Old style sidebar menus are way easier to use.

There are some issues with the new layout in SMF 2.1. Where would the team like these reported?

Antechinus

Anywhere. Mantis or the Bugz board. Same as always. :)

bloc

Tried several menu types in the "bwtheme" project I made a year back, where sidebar + flyout was one of them. I quite liked how they worked out, although i ended up changing how the sidebars looked, to better display the flyouts.

Advertisement: