1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

What have you done to make your Xenforo site mobile friendly?

Discussion in 'Forum Management' started by Amin Sabet, Sep 19, 2016.

  1. Amin Sabet

    Amin Sabet Well-Known Member

    I know that default Xenforo is fairly mobile friendly, but lots of members still prefer Tapatalk. I'm unwilling to use Tapatalk any longer, and none of the other app options appeal to me very much either, so I am trying to make do with customizations to my site styles.

    I was hoping that we could all share some tips and tricks in this thread. Here are some of the things I've done (not necessarily) in order of impact):

    1) Remove most of my ads. Ads slow things down a lot, and it's essential to keep mobile pages light. I left just my highest earning ads, which also happen to be among my fastest.

    2) Use a mobile-friendly style. I use Flat Awesome + from PixelExit.

    3) Make logo small and put large, tap-friendly links to "Recent Posts" and "Unread Posts" (New Posts) in my site header. This is how it looks on my phone:


    4) Remove all user banners in the mobile phone view by adding this to the EXTRA.css template:

    <xen:if is="@enableResponsive">
    @media (max-width: @maxResponsiveNarrowWidth)
        .Responsive .messageUserBlock .userBanner
             display: none !important;
    5) Use an addon to allow users to post a new thread from any page including the site home page and forum index. I use AD Quick Thread.

    6) Remove subnavigation links so there is a single navigation bar and also make the font smaller on page titles. Every bit of real estate counts in mobile.

    7) Use an addon to enable push notifications in conjunction with the necessary mobile apps. I use [bd] Push Notification, which lets my members get notifications via Pushbullet.

    Please share some of the things you've done to make your sites as mobile friendly as possible.
    Last edited: Sep 19, 2016
    Breixo, thumped, maszd and 6 others like this.
  2. AndyB

    AndyB Well-Known Member

    Last edited: Sep 19, 2016
    AnneMoss, Breixo, thumped and 2 others like this.
  3. Amin Sabet

    Amin Sabet Well-Known Member

    I forgot to mention, would be great if folks could share a link to their site so we can see these tips in action.

    My site is https://www.mu-43.com/
    maszd and AndyB like this.
  4. eva2000

    eva2000 Well-Known Member

    thumped, Amin Sabet and rafass like this.
  5. ŽivaAkcija

    ŽivaAkcija Well-Known Member

    just buy premium style and enjoy.
    la2k16 and Anthony Parsons like this.
  6. rafass

    rafass Well-Known Member

    Own customizations + a little imagination xd
    Screen Shot 2016-09-19 at 5.30.47 PM copy.png Screen Shot 2016-09-19 at 5.31.09 PM.png
    I also have the recent post and unread post with font awesome icons, but now are comment out in the template. https://foro.io/
    Last edited: Sep 19, 2016
  7. rafass

    rafass Well-Known Member

    This is my logo (2 custom icons) :
    Screen Shot 2016-09-20 at 12.01.00 PM.png
    The hover effect is touch friendly in mobile devices using this script:
    <script type='text/javascript'>
    "i.fa.fa-io").live("touchstart", function() {
    live("touchend", function() {
    And I'm adding the new class "visited" in some divs + [CSS :before] to change the icons after click on them using this script:
    <script type="text/javascript">
    This is the result:
    Amin Sabet, tajhay and maszd like this.
  8. la2k16

    la2k16 Member

    once i bought UI.X I've been on auto-pilot as far as mobile
  9. Amin Sabet

    Amin Sabet Well-Known Member

    I think the custom styles go 60-70% of the way towards making our sites mobile friendly, but there's a lot more to be done.

    I'd love to get them lighter, using fewer resources, fully AMP compliant, limited use of infinite scrolling (like for search lists, not threads). Maybe user-selectable lazyloading of images for those on limited data plans. Etc etc.

    There are valid reasons why some people (not just a few) prefer Tapatalk to our mobile styles, even when our styles are excellent.
    Claudio likes this.
  10. Amin Sabet

    Amin Sabet Well-Known Member

  11. Amin Sabet

    Amin Sabet Well-Known Member

    Breixo, Xon and maszd like this.
  12. Amin Sabet

    Amin Sabet Well-Known Member

    I'm trying out this product: https://www.scientiamobile.com/page/imageengine

    Basically what it does is take the images on the forum and resize them according to the device the visitor is using. So someone on a phone may get a 50kb 480px image instead of the 1MB 1600px image that they get when visiting on a desktop or large tablet.

    For image heavy sites, it should make a massive difference for mobile. For example, try this URL from your phone and your desktop, and you'll get two very different file sizes and image sizes:


    For ImageEngine, there is a free Lite version that does up 5GB monthly bandwidth and a full version that starts at $100/month.

    This addon is required to make it work with Xenforo: https://xenforo.com/community/resources/tinhte-image-attachment-optimization-cdn-support.909/
    MattW likes this.
  13. Amin Sabet

    Amin Sabet Well-Known Member

    Breixo likes this.
  14. thumped

    thumped Well-Known Member

    use [BD]Cache to enable AMP support
  15. adaaaam

    adaaaam New Member

    This thread is incredibly useful...
    Amin Sabet likes this.
  16. tommydamic68

    tommydamic68 Well-Known Member

    FYI- You have 2 widgets enabled for "members online now."

    Screen Shot 2016-11-27 at 6.39.47 AM.png
    Amin Sabet likes this.
  17. Amin Sabet

    Amin Sabet Well-Known Member

    Oops, thanks for pointing that out!

    I made a few other changes:

    1) Removed the header in responsive (thanks for the idea @AndyB ) and put a very small version of the logo in the Navigation bar.

    2) Put some space between Post Ratings in responsive using this code in EXTRA.css

    @media (max-width:@maxResponsiveWideWidth)
         .dark_postrating_inputlist li { margin-right: 10px; }
    3) Added a Mobile Bar (sticky buttons for New Posts, etc, at the bottom of the screen) courtesy of the latest PixelExit custom style updates.

    4) Removed "Login / Register" at the top of screen since I have those in the Mobile Bar.

    Live demo: https://www.mu-43.com
    Breixo and maszd like this.
  18. Breixo

    Breixo Active Member

    Thanks a lot for sharing @Amin Sabet
    This thread is really helpful.
    Can you share the code used to remove subnavigation links?
    Same with the small version of the logo in the Navigation bar. Didn't want to use @AndyB addon because of loosing it. But your solution looks great!
  19. Anthony Parsons

    Anthony Parsons Well-Known Member

    What have you done to make your Xenforo site mobile friendly?

    Lots... way too much to mention of the top of my head. The biggest was getting a page to load on a mobile in approximately 3 seconds.

    The more important question is what am I going to do in order to negate most of what I have done?

    I'm working towards making my server fully HTTP/2 so pages load in 2 seconds or better on a mobile. The single largest mobile problem is load time. Any page that takes longer than 3 seconds to load on a mobile, you instantly lose 53% of your users. For every second it gets uglier. Themes are already mobile responsive... getting all the requests to load instantly is the biggest mobile issue.

    HTTP/2 is super experimental though... hence only 10% of the web actually use it, even though all browsers now support it. It's a real pain to get right and working properly. NGINX is way easier, still painful though, than Apache, to get fully HTTP/2, especially with push.
    Breixo likes this.
  20. Amin Sabet

    Amin Sabet Well-Known Member

    That's a setting in the PixelExit style I use:

    My solution for that one is a bit of a hack. The PixelExit style I use has an option to have a small New Posts link next to the off-canvas toggle:


    I replaced that New Posts link with a small version of my site logo by finding this part of the Navigation template:

    <xen:if is="{xen:property xb_offcanvas_menu_newposts}"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>
    and replacing it with this:

    <xen:if is="{xen:property xb_offcanvas_menu_newposts}"><a href="{$logoLink}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{$xenOptions.boardTitle}"><img src=/mu.png  alt="{$xenOptions.boardTitle}" display="inline-block" height="16px" style="margin:0px 6px -3px 0px"><span>Home</span></a></xen:if>
    And at the same time remove the header in mobile using this in EXTRA.css, credit: @Arty (link):

    @media (max-width:@maxResponsiveWideWidth)
         .Responsive #logoBlock { display: none; }
         .Responsive #headerMover #headerProxy { height: {xen:calc '@headerTabHeight * 2 + 2'}px; }
         .Responsive #loginBarHandle { display: none !important; }
    Breixo likes this.

Share This Page