Welcome Guest [Log In] [Register]
Add Reply
Mobile Wikifang
Topic Started: Mar 22 2014, 09:06 AM (605 Views)
TimeWalker
Member Avatar
Well, I've arrived!
More and more people today actually surf on mobile devices. They often don't have a high enough resolution to have Wikifang appear correctly. That's why I thought that maybe we could add a simple support for mobile devices.

Currently there are some problems when looking at Wikifang on mobile. For example font sizes are all over the place. And you have to tediously zoom in and scroll all around to read infos. With a mobile version, we'd have a much more simpler but friendlier version of Wikifang which should show everything readable and correctly on mobile. This could be useful if you quickly have to look up something on devices like mobile phones.

Right now as a test, it has been already installed but has to be manually switched to view it. The mobile version kinda works like the Wikipedia mobile site. To try it out, you just have to go on the bottom of the page and tap on "Mobile version". It's not perfect and there are issues that need fixing, but it gives an idea how it could work.

So the question is, would it be useful to have a mobile friendly version? If yes then we could collect some ideas what to add or change and work will initiate to fix some issues that mobile site has.
And if we add it, should it automatically turn to mobile view on phones? As a note, you'll still be able to switch to Desktop and vice versa.
Offline Profile Quote Post Goto Top
 
RacieB
Member Avatar
very good
For an example, here's Firefox on my phone showing both desktop and mobile versions of the mainpage:
Posted Image Posted Image
Posted Image
Posted Image Avatar by Criminal Crow
Offline Profile Quote Post Goto Top
 
Sanky
Member Avatar
Also known as Sanqui // Strong beam of light sent out from the huge hollow ahead
Pics:
Spoiler: click to toggle

Guess which I prefer.
Edited by Sanky, Mar 22 2014, 09:32 AM.
Avatar by RacieB~

GET ON THE TULUNK VILLAGE DISCORD!
Here's how!
Offline Profile Quote Post Goto Top
 
TimeWalker
Member Avatar
Well, I've arrived!
Comparison on my device with the latest Firefox Mobile:
Posted Image Posted Image
Offline Profile Quote Post Goto Top
 
DaVince
Member Avatar
I translate Telefang stuff
If it helps, there is a CSS media query that allows you to check whether the device is in portrait mode (orientation:portrait and orientation:landscape):
http://www.hongkiat.com/blog/css-orientation-styles/

Considering that screens that are in portrait view are almost exclusively phone/tablet screens, perhaps this query can be used to our advantage.

Or you can use all of these to ensure it'll look right on most devices, I suppose: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I translate Telefang-related stuff, but not for the time being.

Projects:

Telefang 1Hiatus until stressful period is over
Telefang mangaHiatus until stressful period is over
Offline Profile Quote Post Goto Top
 
andwhyisit
Member Avatar
Telefreak
When it comes to creating responsive websites there is no easy fix. Especially not for a massive website filled with numerous tables and inline styles. The content would need to be extensively reworked.
If I say that I am going to do something and I don't get around to it then please remind me.
Offline Profile Quote Post Goto Top
 
DaVince
Member Avatar
I translate Telefang stuff
Obviously, but reflowing most of the basic content (pictures, text) shouldn't be *too* difficult, and the little information tables are also small enough to fit in a nice mobile style. That should cover 90% of the information on the wiki.
I translate Telefang-related stuff, but not for the time being.

Projects:

Telefang 1Hiatus until stressful period is over
Telefang mangaHiatus until stressful period is over
Offline Profile Quote Post Goto Top
 
andwhyisit
Member Avatar
Telefreak
I wasn't worried about tables for layout as much as stuff like this:
http://wiki.telefang.net/List_of_Denjuu_in_Telefang_1
Edited by andwhyisit, Mar 23 2015, 10:03 PM.
If I say that I am going to do something and I don't get around to it then please remind me.
Offline Profile Quote Post Goto Top
 
RacieB
Member Avatar
very good
I actually got this email from Google a week ago,
Quote:
 
To: webmaster of http://wiki.telefang.net/

Google systems have tested 352 pages from your site and found that 100% of them have critical mobile usability errors. The errors on these 352 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

The reasons they go on to give in webmaster tools are Viewport not configured, Small font size, Touch elements too close, and Content not sized to viewport (the last one coming up only ten times and mainly wrt pages in the Angios and Gymnos lines which has gotta be their huge evo template hahaha)
Edited by RacieB, Mar 24 2015, 03:25 AM.
Posted Image
Posted Image Avatar by Criminal Crow
Offline Profile Quote Post Goto Top
 
TimeWalker
Member Avatar
Well, I've arrived!
The plans to make it mobile was put on hold as the Mobile Extension for the MediaWiki software wasn't really great and it's right now too difficult to make the current skin fit on any device smaller than 10".
The problam with making the current template work on small devices was that I had too much trouble with tables like the List of Denjuu or the evolution tree. They most likely need a lot more fixes than just small CSS stuff added to make it more responsive.
Offline Profile Quote Post Goto Top
 
kmeisthax
Memelord Fandom Trash
I've done true responsive tables, but it's damn near impossible to do so generically. You need to decide on a static breakpoint which will always be wrong; and there's special concessions that have to be made in your markup so that the table headings are visible in the content. The idea is to abuse the display attribute to turn every row into it's own table; then inject column headings using the ::before psuedo-element and attr() to pull the heading content from a data-attribute on each cell. Which would have to be automatically injected by a MediaWiki extension or after-the-fact JavaScript... and then there's all sorts of issues with colwidth attributes which actually are the one thing you can't override in CSS.

The CSS framework Bootstrap handles this in a far less impressive manner. Their responsive table implementation just places the entire table in horizontal scroll overflow, so mobile users can scroll left and right to see the other columns, while the table itself stays in frame. It's still clunky as hell, but at least is doable. We'd probably also want some kind of sticky headings solution as well, since tables can be longer than most phones.
A cellphone with 4 bars of reception! That's what a D-Shot is!
(Or, why AT&T will never carry one)
Offline Profile Quote Post Goto Top
 
Sanky
Member Avatar
Also known as Sanqui // Strong beam of light sent out from the huge hollow ahead
We'll probably want to turn the horizontal evolution trees into vertical ones.
Edited by Sanky, Jun 30 2016, 01:19 PM.
Avatar by RacieB~

GET ON THE TULUNK VILLAGE DISCORD!
Here's how!
Offline Profile Quote Post Goto Top
 
DaVince
Member Avatar
I translate Telefang stuff
Quote:
 
The CSS framework Bootstrap handles this in a far less impressive manner. Their responsive table implementation just places the entire table in horizontal scroll overflow, so mobile users can scroll left and right to see the other columns, while the table itself stays in frame. It's still clunky as hell, but at least is doable. We'd probably also want some kind of sticky headings solution as well, since tables can be longer than most phones.

I actually like the sound of this. I believe it's also done this way on Wikipedia, and while not great, it seems sufficient, especially when tables are kept horizontally compact to begin with.
I translate Telefang-related stuff, but not for the time being.

Projects:

Telefang 1Hiatus until stressful period is over
Telefang mangaHiatus until stressful period is over
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Wikifang · Next Topic »
Add Reply