Theming - Designer Guide

It's pretty common to get mockups with this style of layout:

This is perfectly fine. The problem is when they move other information above or below the user photo:

Of course on client mockups, the text over overflows, but in real life, user names can be long, there can be more reactions activated in the future than what was in the mockups, roles can be longer than the designer anticipated, translated text can be longer than in English, etc.

tl;dr: Dynamic user content should never be retrained to a very small column, like the width of a user photo.

Usually for responsive mobile themes, we'll either:

1. Move the panel below the main page content (except on the profile page, where you expect to see your personal info first).
2. Or we move the panel into a hamburger menu. This one generally gives a worse user experience.

We can conditionally hide/show components, but generally, it's best to keep things where they are.

Examples:

Accordion menus:

https://ovdialogue.ovariancanada.org
Ovarian has used option 1 above, but they've decided to hide some functionality inside of an accordion menu to save space

Custom Links

Age of Empires have also opted for option 1, they chose to move links from the header in their hamburger menu https://forums.ageofempires.com/ Note that there are no "Vanilla" components in their header and it's nice and lean.

Hamburger menu WITH side panel

https://community.acer.com
Note that the positioning of the mebox dropdowns are totally different than on desktop.

community.zteusa.com

General Tips

• Don't put too much content on mobile menus. Some people likely have smaller screens than you do.
• We can put the mebox inside the hamburger menu, but it's a bit weird, because you'll have dropdown menus inside a menu. It's best to keep it outside. It might be better to not have it in the panel on desktop for consistency
• Don't forget on touch screens, you don't have that much real estate and you need big click targets for fingers
• Good idea to replace the user name for just the user photo on mobile (or replace it with a "person" icon) to save horizontal space. Remember, user names are dynamic and can be long.
• Remember the mebox is replaced with signin/register buttons when you're not logged in

Another common issue is fixed height elements that have dynamic content. For example, you display discussions on categories into 2 or more columns and expect fixed heights for them.

In most cases, we'll need to truncate text to do this, sometimes so much so that it becomes difficult to read pertinent information.

Depending on the markup, we can can sometimes accommodate that design easily. In this example, we've got variable heights, due to the length of the text for the discussions. (Some titles are 1 line, some are more.)

In some cases, it's not possible to have the elements on the same row to dynamically get their heights set in CSS. If you've got dynamic lengths of titles, descriptions, tags, user names, etc, it might be so truncated that we barely see any information.

Also note that the amount of content on "1 row" will vary in responsive designs. A small screen doesn't have as much space as a desktop monitor. It can also vary based on the word length.

The above example has the same letters in both discussions. The "words" are longer in the blue text and creates a third line.

Horizontal real estate is always more precious than vertical on the web. Vanilla is very dynamic, so designers shouldn't assume we get fixed sizes for any user generated content.

Will not work in all browsers, mostly IE/Edge: https://caniuse.com/#feat=css-filters

Yes, i know it just will ignore it, I'm just pointing it out. Some clients expect everything to be identical in all browsers.