Weaver Xtreme with Phones + Turnkey bbPress by Weaver

[hkp]

When I started on WP with the Weaver theme I used WPtouch to provide the mobile pages. That plugin has no editable features as I recall, and anyway, I had no phone at that time to view them.

To @Lesann ‘s point, I went to the WP showcase to on my phone earlier to view a dozen of the most innovative themes.  Sadly, all but looked identical, a long list of bits, with rather odd typography and no design character showing.

Two stood out.  1 was a Xtreme demo where parallax was used.  No other themes had that on their phone versions.

The other had 2 sliders in the list things, which was a pleasant change to be able to scroll to the right, rather than only down.

I didn’t view the desktop versions to see if the character/ style of the sites passed through to the mobile versions, but honestly, only one has any character at all that was suggestive for strong theme character.

I get the feeling that user-developers are just unaware that in places like Africa, India etc, almost 100% of site views may be on a mobile phone device.  So all the effort in perfecting the desktop version, does not get passed to mobile users.

Also, since phones can seemingly replace fonts willy-nilly, what one sees on the computer desktop is not always what is seen on the phone versions, where different phones, and even different browsers on the same phone, can vary.

From my limited experience, it seem that science of desktop design gets replaced, to some extent, by the art of balance and compromise on phones.

I gues that @Weaver understands this, because a year or so ago he openly invited submissions for suggestions for Mobiles enhancements on Xtreme.  Sadly, I didn’t see many public responses.

So with that in mind I’ll make a couple of new suggestions for “Turnkey bbPress” which we are using here on this Forum, based on using it today, accessed only on my phone.

As per the screen capture images below from A PHONE, would you consider:

1) Reducing the size of the user’s icon and name on Mobiles, to perhaps <75% of current size?  The present icon text is very readable, and this will provide more space for text on the right.

2) Reformatting the text style, so that it wraps around and under the user’s icon and fills the available space.  This will allow for more readable text, shorter posts (less scrolling), and images which fill the width available, rather than giving half the screen over to white space.

@Lesann, thank you for this opportunity to talk about this and think again about this whole topic.

Look forward to hear and see what you finally settle upon.

Regards and thank,
Angus

[Weaver]

@hkp –

I’ve developed a fairly simple minded tweak for phones for the forum.

Try adding this CSS to your site for a reduced width author info block on posts:

@media (max-width: 580px) {
  /* =phones */
  #bbpress-forums div.bbp-forum-author,
  #bbpress-forums div.bbp-topic-author,
  #bbpress-forums div.bbp-reply-author {
    max-width: 75px;
  }
  #bbpress-forums div.bbp-forum-author img.avatar,
  #bbpress-forums div.bbp-topic-author img.avatar,
  #bbpress-forums div.bbp-reply-author img.avatar {
    max-width: 60px !important;
    max-height: 60px !important;

  }
  #bbpress-forums div.bbp-forum-content,
  #bbpress-forums div.bbp-topic-content,
  #bbpress-forums div.bbp-reply-content {
    margin-left: 90px !important;
  }
}

Note you can now see how this works here on this forum. You probably know enough to tweak the CSS. Let me know, and I’ll add it to the Turnkey bbPress by Weaver plugin.

Like with different @media, you could add something similar for tablets, or simply change the 580px to whatever tablet width you want (eg: 767px).

Might want to add a font-size:80% rule or something like that, too, on .bbp-forum-author to reduce size.

 

[Weaver]

These rules don’t wrap around the author info box. I’m not sure that is easy to do simply with CSS. I think wrapping around divs takes nesting of divs, but bbPress itself is generating the content of the discussions, and not the plugin or the theme.

[scrambler]

@weaver and @hkp Given the issue is the text width becomes quite small on phone, you may want to alter the layout by having the Icon, the name, the role and the IP on the same line taking the whole width, and then the text under it taking the whole width.

Below is what it looks like

And below are what I believe the rule would look like to do that, instead of the ones you just suggested.
I am sure they need tweaking to apply just to the right content, but I cant test much on my side

@media (max-width: 580px) {
/* =phones */
#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
width: 100%;
}
#bbpress-forums div.bbp-forum-author a,
#bbpress-forums div.bbp-topic-author a,
#bbpress-forums div.bbp-reply-author a {
float:left;
}
#bbpress-forums div.bbp-forum-author .bbp-author-name,
#bbpress-forums div.bbp-topic-author .bbp-author-name,
#bbpress-forums div.bbp-reply-author .bbp-author-name {
float:right; padding-top:30px;
} 
#bbpress-forums div.bbp-forum-author .bbp-author-role,
#bbpress-forums div.bbp-topic-author .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role {
padding-top:20px;
}
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
margin-left: 10px !important;
}
}

[hkp]

@Weaver @Scrambler

I simply inserted your last code version as is, and the result is 100% perfect on my test site I think.

I believe this will be a great enhancement for phone users on the plugin and forum when it updated and released.

FYI, I also included some emojis and a small centered photo w/ shadow for testing too.  That all works too.

The only other suggestion I have are on the front page, where on the phone, the “Posts” is split in 2 lines and on the right column, the name below the icon, partially covers the icon.

Hope this helps.

Regards and thanks!

[Author]

Posts