Mobile-Friendly

[hylomatt]

It's not a super-dead thread but I've been distracted for a while with a new job. I hadn't touched this mobile version for a while but I just found out that enough people were using the version that I published, that it knocked out my hobby account. Good to see some people were finding it likable and usable.

[hylomatt]

okay, fixed it. I'll have to look at the analytics to see how many people are actually using it.

[atomatom]

[atomatom]

eg, here is what it looks like when you change one font size. it very easy to do this selectively when viewed on smaller screens so that the site stays the same on desktop/computers/etc.

_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[atomatom]

anyway, i think i will experiment. i think can do a lot of changes myself with mobile firefox addons: https://addons.mozilla.org/en-CA/firefox/addon/css-override/

i'll see if i can get it looking good on my phone using the plugin override and then maybe everett we could talk about adding a small bit of CSS to the site template ( https://www.thesamba.com/style.css )
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[VanWagon]

It's 2025. This can't really be that hard to implement. I bet the majority of the sites traffic comes from mobile devices. How about catering to those devices???

[atomatom]

[EverettB]

Yes, if you want to revamp the css to make it more universal and/or larger in places, feel free to go for it and I'll implement it.

The existing CSS file is super old.

I have made a few things larger over time but haven't gone through everything.

On a computer you can make the font larger, some mobile devices do this automatically but sometimes it's weird and random, like one post in a thread will be larger than another one.

Another thread about font sizes:
https://www.thesamba.com/vw/forum/viewtopic.php?t=784188
_________________
How to Post Photos
Everett Barnes - [email protected] | My wanted ads
"Water is the only drink for a wise man" | "Communication prevents complaints"
Stop dead photo links! Post your photos to The Samba Gallery!

[atomatom]

thanks everett. i'll have a go.

tricky part is not messing the entire site layout up, because it would be very fiddly to make everything bigger, but i'll focus on the message text first as that would be the thing people are squinting at the most.
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[atomatom]

here's a first stab at it. i didn't even get fancy with css media queries.

main things;

* add meta viewport to head (in html file) below the content type

[atomatom]

the main ugly things are the top nav/banner (ad was removed because i didn't want google suspecting any foul play). i would argue, even those these are a bit janky looking, it is overall more usable.

everett, if you want we could have an additional narrow design version of the top nav. basically don't try and put so much on one row, stack it vertically instead. then we show the narrow version on mobile/narrow screens, and the wider one (current design) on desktop. lmk if that is something you'd be ok with.
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[atomatom]

and to be clear; i'm happy to do more work on this. it would be nice to give back to the site. also nice to be able to use it on my phone without having to turn it sideways and zoom in.

i am mostly looking for feedback from everett - is this the right directions? what do you hate/want fixed?
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[EverettB]

I was waiting to see if anyone else would chime in with an opinion.

It looks huge to me on my desktop (too large in my opinion) but it's definitely a lot more readable on my phone.

On my Android it didn't size to fit, meaning the sample thread was off the right side of the screen but I just had to zoom out a little and it was nice.
_________________
How to Post Photos
Everett Barnes - [email protected] | My wanted ads
"Water is the only drink for a wise man" | "Communication prevents complaints"
Stop dead photo links! Post your photos to The Samba Gallery!

[atomatom]

ok, i've updated it to keep the pixel size the same for desktop. IMHO, 12px is pretty small, but no big deal to keep it as-is. or i could bump it up less.

for "mobile" - on any device that has a viewport of 600 pixels wide (or less) it will bump the font up to 20px. on my android (pixel 7 pro) this looks pretty readable.

(as above) preview site is here: https://carchrae.github.io/samba-styling/

one challenge is the banner ad at the bottom (and probably at the top too), since it is an iframe and it being set in pixels instead of %. that is one reason why the page will scroll. i appreciate some of that is google injecting the ad, so not clear we can fix this too much (but happy to help try). this is more nice to have rather than critical.

@everett, if you think the font sizes are good, i'll try and spend a bit more time to make the menus and banner fit better. i'll then make a minimal "diff" of changes so you can integrate them.
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[TypePete]

Software engineer here, I would be willing to volunteer time to help make improvements. I like the idea of updating font sizes, and keeping the look and feel true to the classic samba. The only thing that I would propose is a more mobile friendly navigation layout. My fat fingers have issues selecting options from the dropdowns
_________________
1971 VW Bus Riviera

[atomatom]

@TypePete - agree re the menu. the main concern is to do this 'on the surface' without having to dive deep into PHP. that said, i think it would probably be safe to hardcode a mobile menu based on the php links. we can then use a css media query to hide the traditional nav on mobile, but keep it showing on desktop. (and likewise re showing the mobile friendly menu).

it is all a bit hacky, but then again, what forum is this!
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[atomatom]

i also think we should roll out changes slowly. like just changing the font size (on mobile) and adding the viewport meta tag will make the site far more useable than it currently is.

@everett, i can give you a minimal set of changes to integrate if you want to tip toe into this.

main reason to do slow and steady is that a 'full rebuild' is a project that might never get done.
_________________
84 Vanagon Westy, 1.9L, California raised but defected to Canada.

[EverettB]

Sounds good.

The stuff above looked good when I checked it out on my Android. Fonts, etc.

If you want, look at the how the mobile menus are for the phpBB Forums site at http://www.phpbb.com

This is the newer version, which unfortunately I can't really move to without rewriting all of the stuff I wrote for the site that they don't have - Classifieds/Gallery/More
_________________
How to Post Photos
Everett Barnes - [email protected] | My wanted ads
"Water is the only drink for a wise man" | "Communication prevents complaints"
Stop dead photo links! Post your photos to The Samba Gallery!

[TypePete]

Cool cool, I’ve been looking in to it. Will try to get a similar test site up with the proposed mobile menu on it for people to take a look and test.
_________________
1971 VW Bus Riviera