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

[Amin Sabet]

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

 

[AndyB]

I like to remove the header for mobile users, so I use this add-on:

https://xenforo.com/community/resources/remove-header-responsive.3304/

I like to show the New Posts first for mobile users, so I use this add-on:

https://xenforo.com/community/resources/new-posts-responsive.4668/

You can see these two add-ons in action here:

http://www.southbayriders.com/forums/

 

[Amin Sabet]

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/

 

[eva2000]

haven't done much beyond using FA+ pixelexit style right now https://community.centminmod.com/

 

[ŽivaAkcija]

just buy premium style and enjoy.

 

[rafass]

Own customizations + a little imagination xd

I also have the recent post and unread post with font awesome icons, but now are comment out in the template. https://foro.io/

 

[rafass]

This is my logo (2 custom icons) :

The hover effect is touch friendly in mobile devices using this script:

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

<script type="text/javascript">
$('a').click(function(){
    $(this).addClass("visited");
});
</script>

This is the result:

 

[la2k16]

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

 

[Amin Sabet]

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.

 

[Amin Sabet]

I just added a smart banner which essentially guides iOS users to bookmark my site to their homepage.

Here is the code: http://kurtzenisek.com/p/smart-web-banner/

Demo on my site (only visible if you visit on an iOS device: https://www.mu-43.com/

 

[Amin Sabet]

Couple more additions:

Lazy Load addon by @Xon - https://xenforo.com/community/resources/lazy-load-img.3979/

On my sites, lazy load is an opt-in option. I think it really helps for mobile.

Web app install banner: https://xenforo.com/community/resources/web-app-install-banner.5322/

 

[Amin Sabet]

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/

 

[Amin Sabet]

Look at the difference between using KeyCDN to serve full sized images to an iPhone:

https://www.webpagetest.org/result/161123_1V_CFCJ/

And using ImageEngine to serve resized images to that same iPhone:

https://www.webpagetest.org/result/161123_CY_CDPV/

 

[thumped]

use [BD]Cache to enable AMP support

 

[adaaaam]

This thread is incredibly useful...

 

[tommydamic68]

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/

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

 

[Amin Sabet]

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

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]

Thanks a lot for sharing @Amin Sabet
This thread is really helpful.
Can you share the code used to remove subnavigation links?

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.

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!

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

 

[Anthony Parsons]

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.

 

[Amin Sabet]

Can you share the code used to remove subnavigation links?

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

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!

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