Why is there no 'responsive' variable/switch in XF 1.2?

CTXMedia

CTXMedia

Well-known member
@Mike and @Kier I like the new responsive layout for 1.2 - it's very much at the forefront of forum design, but the lack of server-side control is bugging me. It's like we have no control over it - period.

I appreciate that the viewport size is definied on the client side, but is there no way to get that information back into XF and set a $responsive_mode = 1 switch?

It would make a great deal of difference in our ability to control the layout elements, such as logos and ads - show the normal logo when not in responsive mode, the smaller one when you are; same with the ads.

Is it possible? Is it impractical (too much code refactoring)?

It would be great if us site owners could have control over our layout based on the device being used to view it.

Cheers,
Shaun :D
 
Last edited:
I'm really not sure I am following this.

You can use media queries to control any portion of the CSS.

What is it that you want to do that you cannot with media queries?
 
Chris Deeming said:
I'm really not sure I am following this.

You can use media queries to control any portion of the CSS.

What is it that you want to do that you cannot with media queries?
Click to expand...

How would I use CSS media queries to load two different banner ad code snippets (large for desktop, small for mobile)?

How would I use CSS media queries to do if/else template changes based on whether XF is in responsive mode or not?
 
Brogan said:
What would this variable do exactly and how would it be set?
Click to expand...

I'm not sure how it would be set, hence my initial question to the devs.

The variable itself could be a simple on/off to denote whether your site is being displayed in responsive mode or not, or could be variable to denote desktop (res=0), tablet (res=1), or mobile phone (res=2), etc.

This would give site owners the opportunity to modify templates specifically based on the type of device being used to view the site - something (it appears) you cannot currently do.
 
"Responsive mode" is something that doesn't exist. It simply means that the site responds to the size of the viewport.

An iPhone in portait mode is 320 pixels wide and can be 480 wide in landscape (iPhone 5 may be different). Android phones are all different. My Nexus 7 is somewhere around 600x880. The iPad is 768x1024. The concept of phone vs tablet doesn't really exist. If I want, I can drag my desktop browser window to be narrow and it should respond too.

If you want to detect these things, you need to detect them in JavaScript or CSS media queries. They're not sent the server.
 
Last edited:
Clickfinity said:
How would I use CSS media queries to load two different banner ad code snippets (large for desktop, small for mobile)?

How would I use CSS media queries to do if/else template changes based on whether XF is in responsive mode or not?
Click to expand...

Quite simple:

<img src="styles/mybigbanner.jpg" class="bigBanner" />
<img src="styles/mylittlebanner.jpg" class="littleBanner" />

They both exist in the template side by side.

Then in CSS:

Code: 
     .littleBanner
     {
          display: none;
     }

    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
          .littleBanner
          {
               display: block;
          }

          .bigBanner
          {
               display: none;
          }
    }
    </xen:if>

I'm aware you meant banner ADS, by the way, but the same could apply. There's also lots of advice out on the interwebs and even some Javascript based solutions to manage the responsiveness of adsense code (for example).
 
You could do something like this.... in logo_block:

Code: 
      <div id="logo"><a href="{$logoLink}">
         <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
         <img src="@headerLogoPath" class="fullLogo" alt="{$xenOptions.boardTitle}" />
         <img src="@imagePath/xenforo/sources/mobilelogo.png" class="mobileLogo" alt="{$xenOptions.boardTitle}" />
       </a></div>


Then css...

Code: 
.mobileLogo
{
display: none;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
   .mobileLogo
   {
     display: block;
     padding: 25px;
   }
   .fullLogo
   {
     display: none;
   }
}
</xen:if>

Just a thought.
 
Chris Deeming said:
Quite simple:

<img src="styles/mybigbanner.jpg" class="bigBanner" />
<img src="styles/mylittlebanner.jpg" class="littleBanner" />

They both exist in the template side by side.

Then in CSS:

Code: 
     .littleBanner
     {
          display: none;
     }

    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
          .littleBanner
          {
               display: block;
          }

          .bigBanner
          {
               display: none;
          }
    }
    </xen:if>

I'm aware you meant banner ADS, by the way, but the same could apply. There's also lots of advice out on the interwebs and even some Javascript based solutions to manage the responsiveness of adsense code (for example).
Click to expand...

Nice one chris just the example I was looking for. Excellent post. :thumbsup:
 
Thanks for the logo examples guys, but what about ad-code snippets in templates - we can't load two sets and hide one with CSS, that will create false impressions and get us into trouble with our ad networks.

Can anyone provide a javascript example that can be used to detect the viewport size and display template elements based on the size?
 
@Clickfinity What are you trying to accomplish with this? Responsive is a CSS thing. It can vary even on a single pageload. Resize your browser right now and you'll see the style scales down.

It has nothing to do with PHP or anything on the server side.
 
Clickfinity said:
So you could do something like this in the head of the PAGE_CONTAINTER template?:

Code: 
<script type="text/javascript">
  width = document.documentElement.clientWidth;
  responsive_mode = "2";
  if (width > 500) {
    responsive_mode = "1";
  }
  if (width > 800) {
    responsive_mode = "0";
  }
</script>

How would you get the responsive_mode value into a useful conditional in XF?
Click to expand...

If your using DfP then see my thread here: http://xenforo.com/community/threads/javascript-help-ad-tags.53335/

I've figured it out and it works a treat in my testing.
 
Jeremy P said:
@Clickfinity What are you trying to accomplish with this? Responsive is a CSS thing. It can vary even on a single pageload. Resize your browser right now and you'll see the style scales down.

It has nothing to do with PHP or anything on the server side.
Click to expand...

I'm trying to protect my revenue and stop XF 1.2 from trashing the layout by being "responsive" with 728x90 banners in place!! (y)

Adsense offers responsive javascript for their ad code, but many other networks do not; in the case of BuySellAds, for example, I've been advised to "drop" their code for small viewport layouts to protect their advertiser's impression counts. In other words, drop revenue!

As it stands - with no server-side control - I will simply have to disable responsive as it will not fit in with the banner sizes I use and I am not willing to sacrifice revenue for the sake of the responsive "feature".

I would like to use it. I feel my members and guests will benefit greatly from it (especially after using XenForo.com in responsive mode I myself on my mobile). But unless I can control it, it will simply cost me money.

What I would like is a simple way to load specific sizes ad_ templates based on the viewport width. That way I can set-up a number of ads within whatever network I'm using, make an XF template for each ad code snippet, and then load the appropriate ad size template based on viewport width (I do realise this is not an entirely exact science as the viewport width can change, but for the vast majority of page requests the width will remain at whatever size it has been requested at [with the obvious exception of orientation changes - but for 'mobile' view widths I'd load small enough banners to fit land/port]).

What about using an existing javascript library like http://responsejs.com/ or http://verge.airve.com/ - pushing just the width (on page load) into a variable - $viewport-width for example - giving us the opportunity to use that value to display specific content in the templates.

I'm not looking to change what responsive is or does, just enhance it by getting some server-side (me) control over it - so that I can adjust my site to suit my preference and those of my membership. That cannot be completely achieved through CSS media queries alone, can it?
 
Considering that a responsive design is meant to respond to requests on the client machine, there really isn't anything a server can do about it (it never receives the size). You are free to include a JavaScript library to load your ads post-load based on view size.
 
King Kovifor said:
Considering that a responsive design is meant to respond to requests on the client machine, there really isn't anything a server can do about it (it never receives the size). You are free to include a JavaScript library to load your ads post-load based on view size.
Click to expand...

You cannot query the viewport size before serving the page?
 
You must log in or register to reply here.

Similar threads

H
  • Question Question
XF 2.2 Why is there no phone
Replies
12
Views
304
htsumer
H
B
  • Question Question
XF 2.1 Why is there no meta keywords field for SEO?
Replies
4
Views
661
ShikiSuen
ShikiSuen
nocte
XF 2.0 XF\Mvc\Entity\Finder - why is there no whereIdsNot() method?
Replies
2
Views
876
nocte
nocte
gavpeds
  • Question Question
XF 1.4 Why is there no way to turn off RSS?
Replies
2
Views
2K
AndyB
AndyB
ekine
Add-on Why is there no decent blog addon for xenforo?
2 3 4
Replies
64
Views
21K
Mouth
Mouth
Top Bottom