Khoros Communities responsiveness

[karolinalinda]

Hi everyone,

I don't know how about you and the feedback you get from your Community members, but we've heard quite a lot about too much whitespace in our Community.

I've gone through a couple of Khoros communities, including Atlas as well, and I don't really get why the content is displayed only in the middle of the screen, instead taking 100% of its width.

Surprisingly, I found that in Atlas there exist a responsive page: it's the category page (for example, https://community.khoros.com/t5/Community-Discussions/ct-p/communitydiscussions) that uses the entire screen and is responsive when, for example, making the browser window smaller.

Has any of you found a solution how to take the entire Community responsive? Or why in Atlas the category level is, but the rest isn't?

Thanks!

Karolina

[TeroRe]

Yes, there are wasted space a lot in the desktop. Sometimes I get feedback about this. Our active members uses desktop a lot so this is very important for them. Visitors users mobile.

[StanGromer]

This is really a simple styling change (code wise) but it goes far beyond that. Many modern websites do not scale 100% to the monitor size because some monitors are huge, and it causes huge readability issues if you don’t take everything into account. 

It’s really a UX decision more than anything. The platform supports it easily. 

[Claudius]

This is actually coming back to typographic and usability best practices. Readability studies showed that lines should have around 70 characters to allow readers to easily continue reading on the next line. That's what usually is dictating the font size and maximum width of the layout column in websites that contains text blocks. More context and ressources in this exchange: https://ux.stackexchange.com/questions/3618/ideal-column-width-for-paragraphs-online

Technically there's nothing that prevents your skin to us width: 100% on Khoros widgets, but it would result in quite bad site usability.

[karolinalinda]

@TeroRe In our case, these are also mainly desktop users. I also use desktop only, as mobile view looks very messy. I know there were already posts and ideas about the mobile responsiveness.  Does it work for you? Are you happy with your mobile view?

I'm wondering, how much we can improve on our own, through styling, and how much it is built-in. We're still in the process of learning the platform and discovering various parts and we know that we can customize many things, but we also know that some things are hard-coded and we can't change them easily on our own.

Any hints or best practices around the responsiveness are much appreciated!

Thanks!

Karolina

[mhock]

@karolinalinda 

We have had complaints about too much white space on our community since we launched in January 2018.  We are a private Community for customers/partners and 99% of our members visit on their desktop during work hours. 

We are trying to reduce some of it on our own.  @gdawson has been doing a lot of work.  We have found you reach a point where you can no longer modify without understanding the custom skin.

[Claudius]

Most of the time when building a page for wide desktop landscape and tall portrait mobile view the widgets get re-arranged from a multi-column side by side to a one-column vertical layout. You can see this in action at our community at https://community.dataiku.com

It's a common design pattern for frontend web design so anyone familiar with styling should be able to build. Khoros a few years back did a great job in porting the most commonly used widgets to support a responsive view, so you shouldn't run into any "hard-coded" blockers. At least I didn't, but I might also be too much into the platform that I already instinctively avoid any of the problematic areas 😏

I'm happy to give your styling wizard a tour of how to approach the responsive design. (And since your are also a Titan I've also shared some hints about this here: https://community.khoros.com/t5/Titans/Suggestion-on-Platform-Improvements-on-Redesign/ba-p/619059 - Sorry to any non-Titan for sharing this teaser link :P)