Join us on Discord!
You can help CodeWalrus stay online by donating here.

Making forum skin mobile-friendly

Started by Dream of Omnimaga, January 14, 2015, 07:09:14 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Dream of Omnimaga

But what about people who have javascript disabled? :P
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

Unicorn

More specifically, me! On my kindle. As long as there is an option for a regular theme without any crazy new stuff, I'm good. :)
  • Calculators owned: I own all of them: PICKACHUP TI 84+ CSE TI 83+ SE TI something something ??? ??? ??? ??? ???
  • Consoles, mobile devices and vintage computers owned: PICKACHUP ??? ??? ??? ??? ???



??? ??? ??? ??? ???

c4ooo

Hmm... On my iPad CW is actually good looking. In fact it is practically identical to how it looks like on my PC. When i use an iPhone, however, which had a much smaller screen, then the site starts looking ugly, because the sides of the page are adhered to the sides of the screen, so on a smaller screen the different texts and buttons and stuff turn into a jumble thats a pain to the eye.  On a similar note, when I turn my iPad right side up, so that it is taller then it is wider, the active posts page becomes unpleasant to read.

Dream of Omnimaga

#108
Any screenshots? One major problem on mobile devices is that text adjusts its size based on some rather unlikely things, which can make it challenging to make a forum theme look decent on mobile without removing too many features. But iDevices tend to be garbage when it comes to web standards and third-party software.

As for the smaller screens, under a certain resolution the site is set to hide the side bars. Personally I would like the recent posts page to have smaller text, but I don't think it's possible to have control on text size on mobile devices.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

novenary

That sounds weird, I use CSS3 mediaqueries to adapt the site design to smaller screens, I suspect that mobile safari doesn't support it, or at least you're on an older version that doesn't.

c4ooo

#110
Here are two images:.


It looks a hell of a lot worst on smaller screens. On an iPhone the avatar is on the right and the buttons are somewhere in the middle, and the text is all over the place.

Snektron

Didn't you check if the schreen is smaller than 500 pixels or something? isn't iphone wider than 500 pixels?
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


novenary

At 1024px it should make the page full width and enable responsive image scaling, at 490px it should switch to a nicer on column layout. Try it in a desktop browser by making your window narrower for comparison.

Dream of Omnimaga

Ideally i would like if  recent posts only took 1 line each instead of two.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

novenary

It's because of the table layout, the only way to fit it on one line is to hide the text that doesn't fit.

Dream of Omnimaga

#115
That sucks. I wish there was a workaround that didn't involve hiding text.

That said, I find the site much easier to browse on mobile than it used to be a few months ago.


EDIT: Also I am almost tempted to make the site show a red warning at the top of the page for iOS users that encourages them to upgrade to the much more web-compliant Windows browser called Internet Explorer 6 so that they don't miss out on CW functionalities. :P
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

Dream of Omnimaga

Something I noticed is that on Chrome mobile, sometimes the navigation links are still clickable like before, then other times they aren't. Is that normal?
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

novenary

I have no idea, I noticed that firefox is kind of wonky when aiming at a menu that has an active link next to it as well. Guess the CSS thing I did is not well supported. :P

Dream of Omnimaga

Weird as well. That said I think I noticed that the clickable area of links more to the riggt is slightly off by a couple of pixels in Windows Chrome and Opera. Maybe that's the same issue that you are having?
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U
Now active at https://discord.gg/cuZcfcF (CodeWalrus server)

novenary

Not really, it's just that it likes to click the nearest link instead of bringing up the menu, unless I zoom in a lot.

Powered by EzPortal