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 3 Guests are viewing this topic.

CKH4

I like divs too but apparently the new standard is tags with their own names like <this></this> and <that></that>.
  • Calculators owned: TI-83+, TI-84+


novenary

#61
I don't check for mobile in the PHP. In fact I only made minor edits to the template, and the whole mobile theme is pure CSS based on window width, with the page meta viewport set. I don't like stuff that dynamically changes the HTML depending on the user agent.

As for tables, it's to make formatting easier (they make horizontal/vertical alignment uniform). There's no reason why they should go. Hell even wirc uses a table to display messages.

Duke "Tape" Eiyeron

Trusting user agents is so fragile that even a curl with some settings could be taken as every browser in the world.

And about tables, they went unpopular because people were overusing them. A HTML document is before a web page a document. You're assumed to follow the documentation and use the right elements to give to your page some semantic sense (using a title to name the document, h1 to give a principal visible title, em to have an normal emphasis and strong to have an heavy one, etc...). HTML went through versions to evolve to something that would split the style from the content (hence the apparition of CSS). Thus we should avoid using tags only because they have a graphical effect on a few browsers and build the pages on a semantic manner than a visually appealing one.

But yeah, tables are fine because they set a lot of things done but they tend to be treated/rendered quite differently across the browsers (margin hell for instance).
  • Calculators owned: A lot.

CKH4

In those cases I use appearance: none; and its other browser friends.
  • Calculators owned: TI-83+, TI-84+


Duke "Tape" Eiyeron

Actually, it's a bit more complicated than just swapping CSS properties. Now, search engines or even browser for visually impaired people (no offense, I just don't know the right term) tries to fetch the data in a semantic manner. In a tag, you would have a more important sentece or term than just in a <p>. <header>, <footer> <nav> <aside> doesn't do anything to help formatting but to give sense to your page. Web crawlers/browsers will be more able to navigate through your page if you structure it correctly. Giving it a structural sense will help you also in web-dev as you know that when you're playing with a <aside> you're programming something related to the main content.
  • Calculators owned: A lot.

Unicorn

ok, so it seems that my kindle has a just big enough screen so it is registered as a half desktop half mobile device. Is there any way that is can be 100% mobile? I know this because I can see all the stats on the home screen on my kindle,  but not on an actual iPhone.
  • 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 ??? ??? ??? ??? ???



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

Dream of Omnimaga

I guess it depends. The mobile theme is entirely based on screen resolution, though, so you would need to ask Street to see if it's possible to detect which device you use.

However I would really recommend getting your Kindle replaced with something else, because from what you have been describing in the last few months, the Kindle browser seems worse than Internet Explorer 6.
  • 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

Unicorn

Oh, yeah. It doen't really matter to me tho. As long as I can get online its good. Anyways, its not gonna get replaced by an i device or kindle fire or android. My parents have rules about that stuff.  :=|
  • 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 ??? ??? ??? ??? ???



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

novenary

It's based on window width which is not the same as screen resolution. Try resizing the window on a pc. ;) Also, it's completely expected to display that way on tablets. The page width adapts to the window so that it uses as much screen space as possible.
Btw : my phone in landscape switches to tablet mode, my tablet in landscape switches to desktop, and in both cases I find that to be a good thing given the screen sizes.

Unicorn

Could there maybe be a group for larger windows size? I am always on portrait mode,so it looks weird.
  • 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 ??? ??? ??? ??? ???



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

novenary

I could add themes that force the desktop and mobile versions, but you need to switch themes all the time.

Dream of Omnimaga

I would preferably not want that, because on Cemetech I often get switched back to mobile theme even when I don't want to use it.

Also regarding theme bugs, here are the pages that are broken:

http://codewalr.us/index.php?action=admin;area=portalarticles - Some stuff is outside the screen and unreachable, so we cannot approve news from mobile devices.
http://codewalr.us/index.php?action=stats - Same issue with the post stats. Page views in particular are impossible to see completely.
http://codewalr.us/index.php?action=mlist - The list and navigation overlaps outside the screen and we can scroll the page left and right

The following are PHP-related, not CSS:
http://codewalr.us/index.php?action=profile - Not really a mobile-specific bug, but PHP code appears underneath the navigation and the page text is much bigger. This started happening after I uninstalled then reinstalled some mods a few days ago.
http://codewalr.us/index.php?action=admin - Same
http://codewalr.us/index.php?action=who - Same
  • 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

novenary

Quote from: DJ Omnimaga on May 19, 2015, 05:16:48 PM
http://codewalr.us/index.php?action=admin;area=portalarticles - Some stuff is outside the screen and unreachable, so we cannot approve news from mobile devices.
http://codewalr.us/index.php?action=stats - Same issue with the post stats. Page views in particular are impossible to see completely.
http://codewalr.us/index.php?action=mlist - The list and navigation overlaps outside the screen and we can scroll the page left and right
Gonna check these out.

Quote from: DJ Omnimaga on May 19, 2015, 05:16:48 PM
The following are PHP-related, not CSS:
http://codewalr.us/index.php?action=profile - Not really a mobile-specific bug, but PHP code appears underneath the navigation and the page text is much bigger. This started happening after I uninstalled then reinstalled some mods a few days ago.
http://codewalr.us/index.php?action=admin - Same
http://codewalr.us/index.php?action=who - Same
Apparently you solved it already so that's cool.

Dream of Omnimaga

Yeah for some reasons, one mod package added code after a PHP closing tag so that code showed up as plain text under the site navigation.
  • 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

Dream of Omnimaga

  • 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

Powered by EzPortal