Xenforo on mobile?

Robert9

Well-known member
I never use a mobile to view my forum, but maybe more than 60% of my visitors do that. So i tried it yesterday and was shocked.
To many links, to many blabla, it was an absolute terrible experience - and i know what to do and where to click.

From the view of a newbie there could be only one thing to do, close the page!

Now my question: Is there any template for mobiles with a heavy reduction to two points: read and write, please?
 
With the last arrangements I made, I removed the good old theme. I removed excess plugins. I opened XenForo default child theme. I have added minor adjustments to the default child theme. I have a lot more to do. I am trying to imitate xenforo.com while editing the theme plan. But that's the result already.
 

Attachments

  • 9312F150-E6CD-442F-AAF9-9ECC15243209.webp
    9312F150-E6CD-442F-AAF9-9ECC15243209.webp
    37.5 KB · Views: 6
  • 7060EC21-63B8-45B6-9EC8-D0845C197AE4.webp
    7060EC21-63B8-45B6-9EC8-D0845C197AE4.webp
    38.2 KB · Views: 6
In that case, it should be easily done with a little bit extra.less. Take a look at the element class and set it to hidden at a special viewport.
Here are the 3 breakpoints for the extra.less:
Less:
@media (max-width: @xf-responsiveWide) { break at width < 900px; }
@media (max-width: @xf-responsiveMedium) { break at width < 650px; }
@media (max-width: @xf-responsiveNarrow) { break at width < 480px; }

View attachment 226568

@mcatze I think this will stick to the extra.less template
 
@mcatze

  • XF\CssRenderException: Error rendering template public:extra.less: ParseError: Unexpected input in public:extra.less on line 3499, column 44 (on or near line 3499)
  • src/XF/CssRenderException.php:87
  • Tarafından: Bilinmeyen hesap
  • 4 Haz 2020 - 18:51
Yığın izleme
3496 | }
3497 | }
3498 |
3499| @media (max-width: 900px) { break at width < 900px; }
3500 | @media (max-width: 650px) { break at width < 650px; }
3501 | @media (max-width: 480px) { break at width < 480px; }
------------

#0 src/XF/CssRenderer.php(408): XF\CssRenderException::createFromLessException()
#1 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss()
#2 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate()
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates()
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render()
#5 css.php(30): XF\CssWriter->run()
#6 {main}

-------------

Previous Less_Exception_Chunk: ParseError: Unexpected input in anonymous-file-2882.less on line 3499, column 44
3497| }
3498|
3499| @media (max-width: 900px) { break at width < 900px; }
3500| @media (max-width: 650px) { break at width < 650px; }
3501| @media (max-width: 480px) { break at width < 480px; } - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
#0 src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules()
#1 src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse()
#2 src/XF/CssRenderer.php(404): Less_Parser->parse()
#3 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss()
#4 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate()
#5 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates()
#6 src/XF/CssWriter.php(53): XF\CssRenderer->render()
#7 css.php(30): XF\CssWriter->run()
#8 {main}
Durum isteği
array(4) {
["url"] => string(285) "/css.php?css=public%3ACMTV_QT_questions_only_forums.less%2Cpublic%3Alightslider.less%2Cpublic%3Anode_list.less%2Cpublic%3Anotices.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Axfmg_media_list.less%2Cpublic%3Aextra.less&s=82&l=23&d=1591285863&k=89f8853779907e8aca9efcd8c6219c61dea7b245"
["referrer"] => string(30) "https://www.bebekforum.net.tr/"
["_GET"] => array(5) {
["css"] => string(180) "public:CMTV_QT_questions_only_forums.less,public:lightslider.less,public:node_list.less,public:notices.less,public:share_controls.less,public:xfmg_media_list.less,public:extra.less"
["s"] => string(2) "82"
["l"] => string(2) "23"
["d"] => string(10) "1591285863"
["k"] => string(40) "89f8853779907e8aca9efcd8c6219c61dea7b245"
}
["_POST"] => array(0) {
}
}
 
the code I wrote is exactly like the extra.less template

Less:
@media (max-width: @xf-responsiveNarrow) {
    .message-footer { display: none; }
    .p-body-header {
        .p-description {
            display: none;
        }
    }
    .p-body-main {
        .block-outer,
        .message-attribution-opposite {
            display: none;
        }
      
    }
}

@media (max-width: @xf-responsiveWide) { break at width < 900px; }
@media (max-width: @xf-responsiveMedium) { break at width < 650px; }
@media (max-width: @xf-responsiveNarrow) { break at width < 480px; }
 
@Robert9 Have a look at the offerings from www.PixelExit.com.

I'm running on heavily customised version of Nova (you can customise so much with it), and it looks great on mobile.

Head over to their site and run a demo of their themes using mobile option (or Inspect > Mobile on a browser), and you'll see how flexible and good looking a properly made mobile theme can look on a forum.

Personally I don't bother with Google PageSpeed as its widely known to be incredibly inaccurate compared to real world user experiences.

www.gtmetrix.com is far more reliable and precise AND you can fine tune it to a testing location most of your users will actually visit from. Afterall if all your traffic is from France and French locals, then testing from a server in Ohio or Singapore is completely pointless and inaccurate.
 
Personally I don't bother with Google PageSpeed as its widely known to be incredibly inaccurate compared to real world user experiences.
If you use GoogleAds you should also use pagespeed to optimize your site.
GTMetrix overlooks some of what Google pays attention to when ranking a page.

Example:
If I scan
https://developers.google.com/speed/pagespeed/insights/?url=https://pixelexit.com/
google wants to optimize the loading of the fonts, they slow down the page construction.
1591342468435.png

A few simple "font-display: swap;" in core_fa.less the problem would be fixed.
That's only one point to make pageloading faster.

1591342148633.png
...
GTMetrix does not criticize that, pagespeed does.

Therefore, I use both tools for page optimization, but do not advise anyone from PageSpeed. ;)
Then, on mobile, you get:
1591343319188.png

with ~50 Addons and heavy modded XF-Default-Style
 
Last edited:
From personal experience I've seen Pagespeed pick up on issues that are already corrected or non existent, and flag them as issues.

In addition to this, testing from a non local location when you have traffic from a single location gives you lots of speed based false positives.

There was a Google Webmasters webcast/seminar a while back (they hold regular ones) where even they admitted "dont use Pagespeed due to its inaccuracies".
 
Thanks to this issue, I increased my page speed, which is very bad, to this level. How can I do better?
 

Attachments

  • FBCC24ED-792F-48C7-9169-1E107CE658BF.webp
    FBCC24ED-792F-48C7-9169-1E107CE658BF.webp
    45.3 KB · Views: 3
  • E03B9C32-EA25-42EC-9F65-786E90626DB6.webp
    E03B9C32-EA25-42EC-9F65-786E90626DB6.webp
    38.4 KB · Views: 2
If you use GoogleAds you should also use pagespeed to optimize your site.
GTMetrix overlooks some of what Google pays attention to when ranking a page.

Example:
If I scan
https://developers.google.com/speed/pagespeed/insights/?url=https://pixelexit.com/
google wants to optimize the loading of the fonts, they slow down the page construction.
View attachment 226976

A few simple "font-display: swap;" in core_fa.less the problem would be fixed.
That's only one point to make pageloading faster.

View attachment 226975
...
GTMetrix does not criticize that, pagespeed does.

Therefore, I use both tools for page optimization, but do not advise anyone from PageSpeed. ;)
Then, on mobile, you get:
View attachment 226978

with ~50 Addons and heavy modded XF-Default-Style
can i have the full codes
 
If you use GoogleAds you should also use pagespeed to optimize your site.
GTMetrix overlooks some of what Google pays attention to when ranking a page.

[...]

GTMetrix does not criticize that, pagespeed does.

Therefore, I use both tools for page optimization, but do not advise anyone from PageSpeed. ;)
Then, on mobile, you get:
View attachment 226978

with ~50 Addons and heavy modded XF-Default-Style

This is pretty misleading, as you are only testing your index page which does not contain any ads.

Pages of your forums that do contain ads get way worse ratings and thus the overall result is fail:
pagespeed-insights.png
 
This is pretty misleading, as you are only testing your index page which does not contain any ads.

Pages of your forums that do contain ads get way worse ratings and thus the overall result is fail:
View attachment 227251

Sure, these changes are not even 30 days online (with MobileStyle). ;)

In addition, with XenForo it has so far been impossible to make all pages speed-compatible in MobileStyle, but if the start page needs to be loaded forever, this is far more a no go from Google's point of view than if at least the start page quickly scales and arouses interest.

Unfortunately I can not change the CSS implementation of XF because the developers would have to improve that responsive scaled properly

You only have to compare the old and new data on the screenshot to see what has improved :)
 
Last edited:
Back
Top Bottom