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:

    29485825090_8f46c026b8.jpg

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

    Code:
    <xen:if is="@enableResponsive">
    @media (max-width: @maxResponsiveNarrowWidth)
    {
        .Responsive .messageUserBlock .userBanner
        {
             display: none !important;
        }
    }
    </xen:if>
    
    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
    thumped, maszd, Araripe and 5 others like this.
  2. AndyB

    AndyB Well-Known Member

    Last edited: Sep 19, 2016
    thumped, RobinHood and Amin Sabet 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:
    PHP:
    <script type='text/javascript'>
        $(
    "i.fa.fa-io").live("touchstart", function() {
          $(
    this).addClass("active");
        }).
    live("touchend", function() {
          $(
    this).removeClass("active");
        });
    </script>
    And I'm adding the new class "visited" in some divs + [CSS :before] to change the icons after click on them using this script:
    PHP:
    <script type="text/javascript">
    $(
    'a').click(function(){
        $(
    this).addClass("visited");
    });
    </script>
    This is the result:
    gif1.gif
     
    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

    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:

    https://jsdm.imgeng.in/pc_125/https://www.mu-43.com/attachments/30896301565_628e250ec9_h-jpg.489233/

    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

  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

    Code:
    @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
     
    maszd likes this.

Share This Page