* WalrusIRC

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: Making forum skin mobile-friendly  (Read 26365 times)

0 Members and 1 Guest are viewing this topic.

Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18872
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Making forum skin mobile-friendly
« on: January 14, 2015, 07:09:14 am »
Responsive forum skin is a feature that is coming in SMF 2.1 by default, but currently we have SMF 2.0 and probably until a while after SMF 2.1 goes gold. Some people have troubles using SMF 2.0 default theme on mobile computers and the one we are using right now is heavily based on SMF default.

I don't want users to have to switch between two themes if they want to have a mobile one, and I would prefer that the site colors and style looks identical on mobile devices, as in  not use some stock iOS-like theme from somewhere, so it looks like we will have to use CSS mediaqueries. We already use some, such as how the search moves out of the navigation when in low resolution, but that's not enough, and the site navigation is a major issue, and a suggestion I got is that signatures should be hidden on mobile and mini-profile moved elsewhere under a certain resolution.

So this will be the topic where the staff will discuss the changes and people can give feedback as they happen. Ideally not much work will have to be put into such theme update because we will have to redo everything from scratch when SMF 2.0 gets terminated anyway.


  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Online Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3131
  • Post Rating Ratio: +32/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Making forum skin mobile-friendly
« Reply #1 on: January 14, 2015, 07:18:39 am »
You raise a good point. Our current mobile solution is Tapatalk, but that would be way better if we actually have a mobile theme. Personally I don't mind switching between 2 themes, although we could add a button to easily switch between both themes, maybe with a little browser detection thrown in. (Or else take this theme that costs $20 that does everything for you, if you have the money for it.) The default theme for 2.1 (currently in Beta 1) will be responsive, so we'll obviously install a test copy as soon as possible (as DJ said, probably around RC2 or when it gets stable enough) and modify the theme with our colors so we'll be ready when the final 2.1.0 version comes out.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline Snektron

  • Lvl 69 Russian Snake
  • Super User
  • Join Date: Dec 2014
  • Location: Netherlands
  • Posts: 3165
  • Post Rating Ratio: +32/-0
  • SSSssssss.....
    • RobinDeWalvis
    • Kzyrox
    • RobinDeWalvis
    • quantuminfinity
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #2 on: January 14, 2015, 08:06:38 am »
Im on mobile right now and
i dont have any compliants though.
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


Offline Duke "Tape" Eiyeron

  • Urist McEiyolobster
  • Super User
  • Join Date: Nov 2014
  • Location: (V)(-_(//));(V)
  • Posts: 1636
  • Post Rating Ratio: +11/-2
  • Fanciest Walrus of the oceans.
    • @@Eiyeron
    • Eiyeron
    • /u/Eiyeron
    • Eiyeron
    • Rétro-Actif : Rétro/Prog/Blog
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #3 on: January 14, 2015, 09:34:23 am »
Me neither, except when I'm having troubles with the touchscreen keyboard or when FX is heavily derping. Your theme has big enough buttons for someone to press on it and I don't have troubles browsing (welp, I'm on a 5" FHD phone, so...)

And no, I don't want to have an application I don't know for browsing CW. If you really need a mobile verison, I could help providing some nice responsive bases.
  • Calculators owned: A lot.

Offline Snektron

  • Lvl 69 Russian Snake
  • Super User
  • Join Date: Dec 2014
  • Location: Netherlands
  • Posts: 3165
  • Post Rating Ratio: +32/-0
  • SSSssssss.....
    • RobinDeWalvis
    • Kzyrox
    • RobinDeWalvis
    • quantuminfinity
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #4 on: January 14, 2015, 02:49:13 pm »
And no, I don't want to have an application I don't know for browsing CW.
I second this.
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #5 on: January 14, 2015, 03:04:25 pm »
I have a little trouble sometimes but it's not too big of a deal. I'd like a mobile version as long as it didn't remove features.
  • Calculators owned: TI-83+, TI-84+


Offline aeTIos

  • Dabbler in C
  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location: Ede, NL
  • Posts: 1049
  • Post Rating Ratio: +12/-0
  • hi
    • r_vdijk
    • /u/aetios
    • aetios
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #6 on: January 14, 2015, 03:05:41 pm »
Do we even have a real mobile theme right now? If I access CW on my phone I get the desktop version.
ceci n'est pas une signature

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #7 on: January 14, 2015, 03:11:18 pm »
No (I think), but your browser should make text bigger so that you don't have to zoom in bunches.
  • Calculators owned: TI-83+, TI-84+


Offline xlibman

  • Omni founder & CW co-founder
  • Super User
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Quebec, Canada
  • Posts: 18872
  • Post Rating Ratio: +99/-4
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • @djomnimaga
    • @DJOmnimaga
    • DJ Omnimaga music store
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #8 on: January 14, 2015, 04:30:34 pm »
Do we even have a real mobile theme right now? If I access CW on my phone I get the desktop version.
Nah we don't have one. We got Tapatalk, but the new version, from what I saw in Streetwalrus screenshots, is garbage, and the only other alternative is text-only and was for very old mobile phones.

The goal right now is to make the current theme so that at low resolution it looks different, but still the same color scheme and stuff.

And the automatic text zooming in mobile browsers is a major issue with the theme right now because it forced me to merge the banner slogan into the image, so that it always remained the same size as the banner. >.<
  • Calculators owned: TI-57, 73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX (semi-broken), HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline rallat

  • New User
  • Join Date: May 2015
  • Location:
  • Posts: 1
  • Post Rating Ratio: +0/-0
Re: Making forum skin mobile-friendly
« Reply #9 on: May 08, 2015, 12:15:30 pm »
How do you handle the with Mobile-Fiendly algoo from Google here on the forum. Do you have a significant drop of organic traffic?
A website created by me a few months ago. I named it NinjaUnits.com and it's designed help people to convert pixels to inches and vice-versa. If you want to give it a try, go ahead and send me in a private message with your opinion or your suggestions for improvements. Thank you!

Online Juju

  • aka Yuki Kagayaki aka J̵̭͕͇ù̞̭̝̯̦j̴̭̙̗͖͡ù͏͓̲̕
  • CodeWalrus Staff
  • Super User
  • Server Maintenance
  • Moderator
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Join Date: Nov 2014
  • Location: Inside a walrus
  • Posts: 3131
  • Post Rating Ratio: +32/-2
  • Couch potato
    • jul.savard
    • juju2143
    • @juju2143
    • juju2143
    • @julosoft
    • juju-kun
    • /u/juju2143
    • juju2143
    • @juju2143
    • Juju's shed
  • Gender: Female
  • WalriiPoints: 99999
Re: Making forum skin mobile-friendly
« Reply #10 on: May 08, 2015, 12:36:31 pm »
SMF released a mod that makes it Google-friendly, but it unfortunately conflicts with the other mods. Gotta check for a solution, for the time being.
  • Calculators owned: TI-83+ (dead?), Casio Prizm (also dead???)
  • Consoles, mobile devices and vintage computers owned: A lot
On semi-hiatus until who knows when. CODEWALRUS 2.0 COMING SOON
YUKI-CHAAAANNNN
In the beginning there was walrii. In the end there will be walrii. All hail our supreme leader :walrii: --Snektron

if you wanna throw money at me and/or CodeWalrus monthly it's here

Offline Streetwalrus

  • Professional slacker
  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location: Israel
  • Posts: 2903
  • Post Rating Ratio: +20/-0
  • ƎW∀⅁ ƎH⊥
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #11 on: May 08, 2015, 12:54:52 pm »
A few improvements that could be made : some of the layout edits get in the way when browsing on mobile. For example the navbar looks like this in Firefox when you zoom :


Other things could be done to improve the site but it's one of the biggest issues. I don't like floating navbars personally. It's a waste of screen space.
  • Calculators owned: TI-80, HP 40G, TI-84 Plus rev G (yay 128k RAM), TI-83 Plus Silver Edition (broken LCD), TI-82 Stats.fr (black), TI-Nspire CX rev C (yay Nlaunchy), TI-83+ SE ViewScreen



Offline Snektron

  • Lvl 69 Russian Snake
  • Super User
  • Join Date: Dec 2014
  • Location: Netherlands
  • Posts: 3165
  • Post Rating Ratio: +32/-0
  • SSSssssss.....
    • RobinDeWalvis
    • Kzyrox
    • RobinDeWalvis
    • quantuminfinity
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #12 on: May 08, 2015, 01:22:11 pm »
Looks the same on chrome , but it should be an easily editable aspect, right?
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Join Date: Jan 2015
  • Location:
  • Posts: 872
  • Post Rating Ratio: +3/-2
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #13 on: May 08, 2015, 01:34:28 pm »
This is what it looks like for me on chrome:
  • Calculators owned: TI-83+, TI-84+


Offline Streetwalrus

  • Professional slacker
  • Super User
  • Original 5
  • Join Date: Nov 2014
  • Location: Israel
  • Posts: 2903
  • Post Rating Ratio: +20/-0
  • ƎW∀⅁ ƎH⊥
  • Gender: Male
Re: Making forum skin mobile-friendly
« Reply #14 on: May 08, 2015, 01:35:33 pm »
Originally it was like on Omni, in the header. DJ made this edit inspired by facebook, tiplanet and others. I personally think it's bad design. I've been experimenting a bit, responsive design should be feasible with the current theme with only css edits (aka the right way).
  • Calculators owned: TI-80, HP 40G, TI-84 Plus rev G (yay 128k RAM), TI-83 Plus Silver Edition (broken LCD), TI-82 Stats.fr (black), TI-Nspire CX rev C (yay Nlaunchy), TI-83+ SE ViewScreen



 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games