Xenforo on mobile?

Robert9 · May 31, 2020

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?

Baby Community · Jun 4, 2020

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.

Baby Community · Jun 4, 2020

mcatze said:

Just a little example what you can do..

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;
        }
       
    }
}

View attachment 226572

I imitate this. to which less template should I paste this? extra.less?

Baby Community · Jun 4, 2020

mcatze said:
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

Baby Community · Jun 4, 2020

I shouldn't forget it in the evening. I need to add the default-child theme to the extra.less template

mcatze · Jun 4, 2020

bebekforum said:
I need to add the default-child theme to the extra.less template

You had to insert these code snippets in the extra.less of your theme that you want to use.

Baby Community · Jun 4, 2020

@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) {
}
}

Baby Community · Jun 4, 2020

@mcatze
i think we collided with the question-thread plugin

Baby Community · Jun 4, 2020

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; }

mcatze · Jun 4, 2020

The last three entries are just dummies. You should delete them.
They're just for explaining what are the breaking points.

Baby Community · Jun 4, 2020

@mcatze

thank you so much You are a very good and sharing person

Baby Community · Jun 4, 2020

@mcatze

RallyFan · Jun 5, 2020

@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.

Masetrix · Jun 5, 2020

RallyFan said:
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.

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

...
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:

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

RallyFan · Jun 5, 2020

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".

Baby Community · Jun 8, 2020

Thanks to this issue, I increased my page speed, which is very bad, to this level. How can I do better?

Baby Community · Jun 8, 2020

Masetrix said:
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

Kirby · Jun 8, 2020

Masetrix said:
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:

Baby Community · Jun 8, 2020

Since I accidentally deleted the site in my google adsense account, I no longer have a problem like advertising. But still mobile 77%

Baby Community · Jun 8, 2020

@Kirby Does server speed have an effect? If I switch to a larger vps?

Masetrix · Jun 8, 2020

Kirby said:
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

Render Blocking CSS | Articles | web.dev

By default CSS is treated as a render blocking resource. Learn how to prevent it from blocking rendering.

developers.google.com

You only have to compare the old and new data on the screenshot to see what has improved

Xenforo on mobile?

Well-known member

Well-known member

Attachments

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Attachments

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy