XF 1.2 Responsive Design

In order to better support smaller-screen devices such as mobile phones and tablets, XenForo 1.2 will be introducing a responsive version of the default design.

What is responsive design? At the simplest level, it allows you to specify CSS that applies only if the screen width is below a certain level. This allows the design to be significantly altered to fit smaller screens. For example, tabular or horizontally-focused designs don't work well when you only have a screen that's 320px wide (an iPhone).

So, what options will XenForo provide?

Here you can see that we provide 3 "inflection points". In general, they correspond to particular classes of devices.

• Narrow (max width: 480px): phones vertical, some phones horizontal
• Medium (max width: 600px): some phones horizontal, 7" tablets vertical
• Wide (max width: 800px): 7" tablets horizontal, 10" tablets vertical

You can also disable the responsive design entirely. Specific pages can also opt out of the responsive design with a <xen:container /> line.

For add-on developers, many of your pages will automatically support the responsive design well. It really depends how much "default" CSS you are using. If you are creating multi-column layouts (such as some resource manager pages), you will need to write custom responsive versions. However, if you're just using standard systems like tabs and forms, you will automatically inherit the responsive changes.

The extent of changes on a page will really vary based on the width of a device. For example, "wide devices" (601-800px by default) will see mostly similar pages, but things like sidebars will be moved if needed.

But this is really more about screenshots. For ease of my job, I'm taking these screenshots in Chrome on a desktop machine. As always, this is a work in progress and things are still subject to change.

This part does deserve special mention as it's very dynamic now. The short of it is that if there's not enough space to fit things (at any resolution), navigation/search options will be hidden as necessary and shown behind menus. User alerts/unread conversation counts will be folded into your user menu. If there is a selected navigation tab, it will always be shown as well.

These screens are all taken at the "narrow" level to show you the full extent of the possible changes.

 

[Blue]

How do google ads react when using Responsive Design? Do they still display? Do they scale? How do they react?

 

[Paul B]

I have already replied to your previous post asking that.

Read the link.

 

[Blue]

As a confused xf customer I was hoping you would explain it to me.

 

[Paul B]

http://xenforo.com/community/threads/1-2-responsive-layout-and-adsense-concerns.53096/#post-567863

 

[Jeremy]

As a confused xf customer I was hoping you would explain it to me.

XenForo support shouldn't be expected to support another company's product. And explain how something works past providing links, as Brogan has done.

 

[Blue]

I would like to see this in action. Is anyone using this on a live site that I can look at?

 

[MattW]

What version of IE is XF 1.2 supporting to? I've just opened IE8 on my work laptop to log into my test forum as a different user, and Responsive doesn't really work on there. Wasn't sure to report as a bug or not

 

[Mike]

IE8 doesn't support responsive designs (it doesn't support media queries).

 

[MattW]

Cool, thanks @Mike . I'll add a notice in my FAQ section telling people to use a real browser and go cry somewhere else

 

[0ptima]

Which browser versions does XF 1.2 support?

 

[Jeremy]

I believe the same as 1.1.

 

[Mike]

1.2 deprecates IE 6 and 7 (you'll see a notice recommending you upgrade if you use them), but otherwise browsers are always "best effort". If IE8 doesn't support media queries, we're not going to make a huge effort to force it, provided it degrades gracefully.

 

[Ji2myTran]

Just really love this...

 

[RobParker]

IE8 doesn't support responsive designs (it doesn't support media queries).

Is there any way to then just force it to always be full width and force a scollbar if it's IE8? It doesn't compact very nicely so forcing the scrollbar seems like the better option if it's possible.

 

[FredC]

Is there anything similier to "Responsive extra CSS" or is this controlled in the normal "Extra CSS" template? I need to remove/modify a few things other then adsense but am having difficulty with the learning curve since moving away from Artys' Responsive plugin.

 

[Jeremy]

No, the response CSS is intermingled with the appropriate sections. Always surrounded by a conditional based on @enableResponsive.

 

[FredC]

No, the response CSS is intermingled with the appropriate sections. Always surrounded by a conditional based on @enableResponsive.

Nope still not getting how or where to make changes.. I appreciate the effort though.. Maybe an example of what i want to do will help me get my understanding of how to make responsive changes.
My Ad Header is populated with Share this code..

<xen:hook name="ad_header" />
<div class="ad-block">
<div style="float: right; width: 330px; position: relative; top: 20px;">
<span class='st_sharethis_vcount' displayText='ShareThis'></span>
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_googleplus_vcount' displayText='Google +'></span>
  </div>
</div>

However as you can see by the following screenshot the padding drop and hide important buttons. I either need to remove the ad header when shown on mobile devices or adjust the padding Either of which i know how to do or even where to start with this new core responsive framework..

 

[Jeremy]

This may be helpful to you:
http://xenforo.com/community/resources/responsive-adsense.2084/

You may also want to read up on media queries:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

XenForo also has style properties for the various widths that you can use in your media queries:
http://xenforo.com/community/threads/responsive-design.50888/

Tips:

• Inline styling, major no-no (in general, but more specifically) in responsive.
• You will define your classes multiple times using media queries, with different definitions each time (so, ad-block will be defined 3 times for each of the various sizes)

 

[FredC]

Ehh, disabled responsive and reinstalling Artys'.. His seems much easier to work with as it contains a Responsive extra css template that makes commenting these things out much easier then XF's version.. Im probably just missing something but all this seems much more complicated then the plugin.

 

[Russ]

Ehh, disabled responsive and reinstalling Artys'.. His seems much easier to work with as it contains a Responsive extra css template that makes commenting these things out much easier then XF's version.. Im probably just missing something but all this seems much more complicated then the plugin.

Well it's your preference however it's super easy once you get the hang of it. There's no need for extra templates for the responsive, you can use extra.css:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
   .cssexample
   {
     width: here's css specific to the Wide Width;
   }
}



@media (max-width:@maxResponsiveMediumWidth)
{
   .cssexample
   {
     width: here's css specific to the Medium Width;
   }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
   .cssexample
   {
     width: here's css specific to the Narrow Width;
   }
}
</xen:if>