Mobile optimization

classic Classic list List threaded Threaded
34 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Mobile optimization

casinobingofriends
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

Hugo <Nabble>
Where is the URL of your site? Also, where did you read that April 21st is the date? We have a module that improves responsiveness on Nabble apps, but that's still in beta. Once you confirm your site's URL we will make it available for you to test.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

casinobingofriends
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Google Announcement

casinobingofriends
In reply to this post by Hugo <Nabble>
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

Hugo <Nabble>
Thanks for the link.

You should be able to see the new module when you click "Options > Application > Extras & Add-ons". There is a "Responsiveness" section and you should select the "responsive layout" module. Please give it a try. Please note that this is not perfect. It improves the mobile experience and this should be enough to make google happy. We have tested this module with some specific forums and google stopped complaining about mobile issues on those forums. Please let us know if you have issues.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

casinobingofriends
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

casinobingofriends
In reply to this post by Hugo <Nabble>
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

casinobingofriends
In reply to this post by Hugo <Nabble>
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

Hugo <Nabble>
I am glad you found a solution. Please let us know if you have other issues.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

GregChapman
Hi Hugo,

Thought I'd chip in on this one in case it is any help, although, I'm probably just teaching you to suck eggs and it's just a matter of a lack of resources to carry it out!

I've just developed my first site, designed to be mobile-friendly according to Google (still at its "test" URL). Here's the link to the page with my forum embedded:
http://www.muddybroadbluesband.co.uk/new/contact.html

And here are screen dumps of that page on my Samsung S3 Mini (native screen: 800x480px - though the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
appears to mess with that somewhat!)
Samsung Galaxy S3 Mini

Samsung Galaxy S3 Mini

As you see, in portrait orientation, some columns are lost completely and others truncated. In landscape mode you can see all columns, but the proportions of screen space taken by the "Topic" and "Last Post" columns are disproportionate.

As Google suggests, it seems to me that as the screen reduces in size it is imperative to remove certain features of the standard screen. I'd suggest that the order of priority for display is:

Topic Title
Topic Author
Last Post Date
Last Post Author (ideally to have a preceding line break to place it under Last Post Date)
Replies
Views
Topic Author Icon - Last Post Author Icon (These have equal priority - remove or show both)

In terms of implementation it appears the biggest problem is that currently there are insufficient specific functional CSS classes in your code. Instead it is stuffed with generic visual classes (e.g. "nowrap", "no-decoration", "light-border-color", "invisible", "weak-color", "medium-border-color", etc) that are used all over the forum so that altering their rules have unwanted impacts everywhere else. This makes it impossible to pick out some of the features I identify that in these circumstances need a "display: none" CSS rule.

The good news is that it should be a simple and quick fix to add the necessary functional classes to identify the various components of the screens above.

One can return at at any later date and begin to merge the code for those generic visual classes into the functional classes and generally implement this throughout the entire Nabble code.

I know I should attempt to do this myself, but experience teaches me I am not skilled enough with NAML code to risk trying it!

It may be worth mentioning that I also have Nabble's "Mobile Friendly" option set ON on the site. It appears to work well. The one oddity is how orientation affects the message creation screen. If you start in portrait mode and switch to landscape, then you need to zoom out. Conversely, if you start in Landscape and switch to portrait, you need to zoom in. Ideally it would be able to switch the zoom factor as you change orientation.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

casinobingofriends
In reply to this post by casinobingofriends
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

Hugo <Nabble>
In reply to this post by GregChapman
Greg, thanks a lot for the feedback!
I improved the responsiveness module and this will benefit all users. Please check your forum again with a cell phone and let me know if you still see issues.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

Hugo <Nabble>
In reply to this post by casinobingofriends
Vidas, I've released some improvements based on Greg's feedback and I've also made some custom changes to your site. It looks okay on my cell phone. Please take a look and let me know.
Reply | Threaded
Open this post in threaded view
|

Re: Google Announcement

GregChapman
In reply to this post by Hugo <Nabble>
See:
http://support.nabble.com/Forum-not-showing-properly-in-mobile-devices-td7589906.html
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

GregChapman
In reply to this post by Hugo <Nabble>
Hi Hugo,
Hugo <Nabble> wrote
I improved the responsiveness module and this will benefit all users. Please check your forum again with a cell phone and let me know if you still see issues.
Here are some current images, from the site now at:
http://www.muddybroadbluesband.co.uk/contact.html
(At this new location I have done some minor CSS upgrades so the forum now only shows red when hovering over links.)

Samsung Galaxy S3 Mini
Samsung Galaxy S3 Mini
Removing the avatars from the display definitely works for me in producing a more usable display! On the landscape display you seem to have created more space for the topic title which is good too. One aspect I haven't tested is the impact of a longer username under the "Last Post" column.

(Aside: In the ideal world the Topic List screen would be recoded as a definition list rather than as a table. The <dt> element could hold the folder/pinned icons and subject line and the <dd> element holding the Replies, Last Post and Views components. With the limitation of the table removed, which requires the display each topic within a single row, a much more flexible display would be possible covering a number of lines on smaller screens - and it might not be too difficult to implement!)

Moving on, the individual post display still has some significant issues:

In portrait orientation, while not a major issue, I find it strange that the Search box appears to "float left". (It doesn't do this in Landscape orientation)

More importantly, in portrait orientation, things are obscured beneath the [Reply - Threaded - More - Report] component of the post header as it moves beneath the [post author] component, obscuring almost all of the [selected post marker, date and post subject] components, as the two screenshots below show.

It also seems to me that, on the narrowest of screens, the entire avatar column needs to be disposed of (as it effectively is on desktop screens where a user opts for "small avatar") as, when long posts are displayed, most of the column is wasted space.
Samsung Galaxy S3 MiniSamsung Galaxy S3 Mini
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

Hugo <Nabble>
Greg, thanks again for the feedback. I fixed some of the issues you reported (including the endless reload loop) and I've released the code to the n4 server, where you forum is hosted. Can you please check your forum again? If everything looks fine, I will release this to all servers.

Please note that some other issues you reported are harder to fix, so I will leave them for now. The main goal is to make the forum readable and usable in mobile devices.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

GregChapman
Hi Hugo,

I've dragged down on several different pages to refresh them when using my Android tablet, and I'm still seeing the icon on the page tab flashing every second.

All my other screens also still look the same as this morning. In case something hasn't propagated yet I'll try again in the morning and report then.

I do appreciate that some of my suggestions are not simple fixes.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

GregChapman
Hi Hugo,

Regret all screens are showing the same way as in my last message with screen shots.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

Hugo <Nabble>
Below you can see how your forum looks on my phone. The refresh loop bug is also fixed. If you still see the old issues, it is probably cached files in your mobile browser.



Reply | Threaded
Open this post in threaded view
|

Re: Mobile optimization

GregChapman
Hi Hugo,

If you look at my images, you'll see that my screen appears a little narrower than yours (or the text bigger in proportion to the width available).

In your first image it doesn't have a major impact. Each topic title text just wraps sooner - and is is better than my first sceenshots.

However, in the second image even the relatively short username means there's not enough room for the "Reply-Threaded-More-Report" component and it then slides under the username line and obscures everything bar the "Selected post" marker or first two characters of the date.

Perhaps the date line just needs a "clear: right;" rule? But if it's not as simple as that then I guess it's down to a decision on whether the Galaxy S3 Mini and its 800x480 screen is too far below the norm to chase down a solution, especially given that in landscape mode there's adequate space, for any normal length of username:

Samsung Galaxy S3 Mini
Samsung Galaxy S3 Mini
I thought that, this morning, I did wait long enough for the flashing tab icon to stop flashing on page reload. However, I can now confirm that after two or three flashes the icon does go steady, seemingly confirming you have fixed the issue with constant reload.

[Probably Irrelevant Aside: I don't fully understand how the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
works. Maybe I should do as some advise and dispense with the recommended "initial-scale=1". My tablet, which has a 1440x900 screen, shows the full "desktop site" in landscape mode, complete with its conventional horizontal menu bar. The CSS tells the browser to switch to the three bar "menu button" when the display is 640px or less, yet my phone retains the menu button in landscape mode and my tablet shows in it portrait mode, when both are above the 640px limit!]
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
12