Complaint about problems with browsing on mobile devices.

Users who are viewing this thread

Phonemelter said:
Also was...

Code:
/* tweak some things and hide others for very narrow displays; most of this contributed by Swyter (http://forums.taleworlds.com/index.php?action=profile;u=39852) */
@media screen and (max-width: 980px)
{
   #content_section, #header, #footer_section { min-width: inherit; }
   body { padding: 0; }
   .avatar, .signature, .title, .postgroup, .membergroup, .blurb, .custom, .im_icons, .profile, .game_badges, .reportlinks { display: none; }
   .poster { position: absolute; margin-top: -.4em; }
   .postarea, .moderatorbar { margin-left: 1em; }
   .postarea .flow_hidden { margin-left: 150px; }
   .keyinfo { width: 77%; }
   .post { margin-top: 0; }
   img.bbc_img { max-width: 100%; }
   .inner { padding: .4em .1em 0 0; }
   #header div.frame { background-position: 90% -480px; padding-right: 2px; }
   #content_section div.frame { background-position: 90% top; padding: 0 5px; }
   #footer_section div.frame { background-position: 90% -820px; }
   #header, #content_section, #footer_section { padding-left: 0; }
   .postarea div.flow_hidden, #advanced_search dl#search_options { width: inherit; }
   img#upshrink { margin-right: 0; margin-left: 0; }
   #top_section, #search_form { margin-right: 0px; margin-left: 5px; }
   #search_form input.input_text { width: 80px; }
   iframe.youtube_embed { width: 100%; }
   #detailedinfo dd.game_badges { display: inline; }
   .news h2 { float: none; clear: both; }
   #news_column_1 div { margin-left: 0; }
}
@media screen and (max-width: 699px)
{
   tbody.content td.stats { display: none; }
   tbody.content td.icon { padding: 0; }
/* yes the below selection is hacky, will be better in SMF 2.1 themes */
   table.table_grid thead th[width="14%"], table.table_grid tbody td.stats { display: none; }
}

...plus a few other tweaks all that was added?
The first @media definition was already there but was changed to affect somewhat wider screens than before (was only very very narrow), and the second @media definition was added.
That, and the standard viewport definition was added was added to the page header:
<meta name="viewport" content="width=device-width, initial-scale=1">

Without that, the font sizing on my Android tablet actually was a bit crazy, with some text too small and some text much too big. This is in Firefox, Chrome, and the default browser. All 3 browsers look decent now with reasonable font sizes all around.
The only real problem I see is that in Chrome and the default Android browser, the rank icons overlap the post divider.
About not being to zoom: I'm able to zoom in and then back out in all 3 browsers. It of course won't zoom out beyond the starting full width.

This is all just on the default forum theme, no changes were made to other themes. So, not sure what problem you're having with them, Teo. There have been recent complaints about mobile usability which I was able to see on my own tablet, which is why I saw no need to poll users.

The visibility of the avatar and such is subjective, but I can see your point there. It bears tweaking.

Darwin said:
Nwb2E.png

There's way too many linebreaks, stretching the whole thing vertically. Maybe it would work better if you set a lower font size for everything. I personally never had a problem with reading while fully zoomed out.
Especially the buttons look ugly and are more difficult to click, as there's another button right above/below.
Was the forum even usable with a full sized theme on your phone before? If nothing else I can probably go back to specifying a minimum width so things don't get so smushed in on top of each other; you'll end up needing to do a bit of zooming and/or panning around, but I expect you're used to that at this point.
Out of curiosity, what model phone is that? I'd like to look up the scale pixel width as a reference.


EDIT:
A couple of changes now in place. The avatar and icons in that area now stay until the display width is in the smaller (<700px scale size) bracket of the two, so that should be visible on most tablets. The minimum width is now also set to 580px (scaled, again, so not actual pixel width for high res mobile devices), so smaller devices will again need to zoom and/or pan around to see the entire page.
 
Janus said:
Darwin said:
Nwb2E.png

There's way too many linebreaks, stretching the whole thing vertically. Maybe it would work better if you set a lower font size for everything. I personally never had a problem with reading while fully zoomed out.
Especially the buttons look ugly and are more difficult to click, as there's another button right above/below.
Was the forum even usable with a full sized theme on your phone before? If nothing else I can probably go back to specifying a minimum width so things don't get so smushed in on top of each other; you'll end up needing to do a bit of zooming and/or panning around, but I expect you're used to that at this point.
Out of curiosity, what model phone is that? I'd like to look up the scale pixel width as a reference.

Yeah, without any problems. But with zooming, of course.
The screenshot above was taken with the Chrome Mobile Mode thing, but it looks the same on my phone, a Nexus 5. Here's a screenshot from the phone:
zy81S.png

Maybe decreasing some paddings would also free some space for text.
And thanks for your efforts, by the way. :wink:
 
The forum was absolutely fine before, all you had to do was zoom in. The writing is too big, hurts my eyes and I don't know who half these people are without avatars.
 
Darwin said:
Maybe decreasing some paddings would also free some space for text.
I don't see any remaining padding that could be trimmed without making it look cramped and weird.

Scorpia said:
The writing is too big
This is one thing I don't get, beyond people being used to having to read super tiny text while browsing on their phone. If you phone is using correct scaling, which I'd think pretty much all modern phones with high resolution screens are, the text should look almost exactly the same physical size as it would on a desktop monitor. I just checked Darwin's screenshot above, for instance; his phone has a pixel ratio of 3, so shrinking his screenshot to 33.33% indeed makes the font size in it very close to the same as on my desktop monitor.
If the text really does look much too big and you don't think you're just too used to tiny text on a phone, please indicate the model of your phone/tablet and if possible provide a screenshot for reference.


Based on the feedback on the avatar being very important, I've gone ahead and taken that adjustment for very small screens out, so the avatar section is always shown. The minimum width I added earlier is still in place, so phones will generally need to pan/zoom a bit.
Signatures are back as well on very small screens. A question for those of you browsing on phones or very small tablets, would you rather continue seeing signatures on posts or would you rather not have them cluttering the limited space on your screen?
 
I'm on phone, and it's fine for me as it is now. I don't mind the sigs staying, because with the minimum post height set by the avatars and badges and whatnot, there's plenty of place left for the sigs in case of short posts, and their presence isn't an issue with long posts either. Cluttering isn't a problem for me; it's not like I need extensive empty spaces for a comfortable forum browsing experience.

Edit:
Bzyir.png
 
Hmmmm. It kinda works for me now on the Rev.5 theme. Which is better than nothing since at least it's in a comfortable colour scheme. But both default and Curve still don't show avatars or sigs for me.
 
TaleWorlds Curve (
thumbnail.gif
) or SMF Default Theme - Curve (
thumbnail.gif
)?
Only one of them is the default and it's not the one called default!
 
Teofish said:
Hmmmm. It kinda works for me now on the Rev.5 theme. Which is better than nothing since at least it's in a comfortable colour scheme. But both default and Curve still don't show avatars or sigs for me.
Then you've definitely got something very strange going on, as again none of the other themes have been changed at all, only the default Taleworlds Curve theme.
 
Eh, guess I'll just have to live with using the rev.5 theme then. It's a bit annoying since its layout is somewhat different from what I'm used to. But if everything's ok for everyone else I can hardly complain.
 
Bromden said:
Bzyir.png
This should be fixed now. If you come across other things which can be improved, please feel free to post them.
 
Janus said:
Darwin said:
Maybe decreasing some paddings would also free some space for text.
I don't see any remaining padding that could be trimmed without making it look cramped and weird.

Yeah, I thought of the board index, but that's just the "last post" on the right that takes up space and the other table cells scale accordingly.


What I get now after zooming out is perfect. :smile:
 
There seems to me to be a minor problem with profile statistics on the default theme, depending on how you have your profile laid out. The posting time by hour looks rather cramped.
6WN9A.jpg
 
Back
Top Bottom