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.

 

[Anthony Parsons]

This sounds impressive. It would be even better if XF had a conditional that interacted with the smallest size to completely drop content from mobile loading, and included it everywhere else. Google favour light mobile style v heavy loading hiding things.

Would also be nice if it downsized images for that smallest value as well... Purely targeting mobile phones for the fastest speeds possible.

 

[Forsaken]

Of course forsaken, we agree, but the main problem I see with responsive as that it's cool as long as you limit yourself to what's out of the box. Once you start trying to make a living out of your community, I'm not sure how you integrate your own tools/specifities, ads, etc, everything that makes YORU site stand out from the other sites, into to a fully working super cool responsive design.
You end up re inventing the wheel for each and every little addition. A stuipd example ; a facebook like box ! How do you make that responsive ? Without "dumbing it down" to something as blunt as "show on desktop, do not show on mobile" ?

Honestly you're not going to be able to do that unless you're an experienced design and/or hire one that is familiar with responsive design patterns. And how does this argument not apply to a mobile style which would be harder to change than a responsive style which potentially uses your unique design to already make yourself stand out from other sites?

It is no different than a regular XenForo board, only that you have to do things slightly different. With ads you will put them in a Google approved conditional that will show sizes at different breakpoints so that they fit the design properly.

For your own tools, if they are built with XF and done properly by a knowledgeable developer the would have been made with the standard CSS as a base, meaning that they're easily made responsive. Which is something that should have been done from the very beginning!

 

[Moddis]

Wow, this is great news!

One major question with this:

I am currently in rocess fo developing a static 1k px header. Will that header scale down with the screen-size (which would prob be awesome) or should I 1) Try to make a min size header with a repeatable few pixels to stretch in and out 2) Continue to work on the 1k px header and create a different one for smaller screensize ?

Thanks!

 

[CTXMedia]

Are there any conditionals for responsive? For example, if we want to display regular sized ads on the desktop version of our site but smaller banners on mobile devices - E.g.;

<xen:if is="{$Responsive}">
        <Small width banner>
<xen:else />
        <Full size banner>
</xen:if>

Cheers,
Shaun

 

[Mike]

Responsive just means that there's additional CSS loaded and conditionally used based on viewport width. If you need to do something where hiding/displaying conditionally via CSS isn't an option (ads being a good example), you need to use JS. For example: http://www.labnol.org/internet/google-adsense-responsive-design/25252/

Note that you do need to check to make sure you're not violating any Google policies with this, though there has been anecdotal evidence they're happy with you doing something like this.

 

[RobParker]

Does that mean its not possible to do conditionals in the template to select mobile Adsense ads rather than normal ones?

 

[Forsaken]

Responsive just means that there's additional CSS loaded and conditionally used based on viewport width. If you need to do something where hiding/displaying conditionally via CSS isn't an option (ads being a good example), you need to use JS. For example: http://www.labnol.org/internet/google-adsense-responsive-design/25252/

Note that you do need to check to make sure you're not violating any Google policies with this, though there has been anecdotal evidence they're happy with you doing something like this.

Google approved this a few months ago .

 

[Anthony Parsons]

<xen:if is="{$Responsive}">
        <Small width banner>
<xen:else />
        <Full size banner>
</xen:if>

Exactly. A single conditional that linked to the smallest viewport would make design streamlined for tablet / desktop versus mobile. I put table with desktop because tablet resolutions are now often the same as desktop, and most use them via wi-fi and not a mobile connection.

With a single conditional to depict mobile devices (the smallest declaration) we could literally deliver one template or the other, drastically cutting down code bloat to mobile devices where speed and file size really do count against carrier speeds and data costs.

 

[Veer]

Responsive just means that there's additional CSS loaded and conditionally used based on viewport width. If you need to do something where hiding/displaying conditionally via CSS isn't an option (ads being a good example), you need to use JS. For example: http://www.labnol.org/internet/google-adsense-responsive-design/25252/

Note that you do need to check to make sure you're not violating any Google policies with this, though there has been anecdotal evidence they're happy with you doing something like this.

I'm not willing to take any risk on Google Adsense by using JS.

Are there any conditionals for responsive? For example, if we want to display regular sized ads on the desktop version of our site but smaller banners on mobile devices - E.g.;

<xen:if is="{$Responsive}">
        <Small width banner>
<xen:else />
        <Full size banner>
</xen:if>

Cheers,
Shaun

That would be awesome!

 

[xf_phantom]

I'm not willing to take any risk on Google Adsense by using JS.

they've updated their policy

Going forward, we will permit publishers to make modifications to the AdSense ad code so long as those modifications do not artificially inflate ad performance or harm advertisers and otherwise comply with our Terms and Conditions and program policies. This will enable you to try a range of techniques on your site such as:

• Responsive design: Enabling publishers to create a single webpage that will adapt to the device on which it’s being viewed, whether it’s a laptop, smartphone or tablet, to maximize user experience.
• A/B testing: Running a test by creating multiple versions of a page, comparing user behavior to see which page is the most effective.
• Setting custom channels dynamically: Tracking performance of segments of users, sections of your site, or other behavior to maximize ad and user experience.
• Ad tag minification: Enabling your site pages to load faster by reducing the amount of data to be transferred.

http://adsense.blogspot.com/2013/05/updates-to-our-modifying-ad-code-policy.html?spref=tw
http://www.labnol.org/internet/google-adsense-responsive-design/25252/




More informations: https://support.google.com/adsense/...&subid=ww-en-et-asblog_2013-05-23&medium=link

Acceptable modifications

Here are some acceptable modifications:

Responsive design
True responsive design is typically defined by using CSS media queries, but similar behavior can be accomplished by using the code snippet below. Keep in mind that this example will adjust based on user screen sizes but won’t accommodate screen orientation changes.

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1234567890";
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = "2345678901";
google_ad_width = 728;
google_ad_height = 90;
}

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

 

[Veer]

they've updated their policy

Yeah that's great, thank you so much

 

[Forsaken]

I'm not willing to take any risk on Google Adsense by using JS.


That would be awesome!

There's no way to do that conditional with PHP as responsive design is based on screen width, browser width or other client side factors.

 

[Seba Kerckhof]

I know responsive design usually works according to screen resolution. However, with current top smartphones having resolutions similar (or even larger!) than most monitors, this doesn't really make sense for me.
It means that on more and more smartphones you'll get the full view. No matter how good the resolution is, you'll still need to zoom and swipe the page in all directions in order to read the text. I don't know if you can query screen dimensions in css, but that would make more sense IMO.

 

[Forsaken]

I know responsive design usually works according to screen resolution. However, with current top smartphones having resolutions similar (or even larger!) than most monitors, this doesn't really make sense for me.
It means that on more and more smartphones you'll get the full view. No matter how good the resolution is, you'll still need to zoom and swipe the page in all directions in order to read the text. I don't know if you can query screen dimensions in css, but that would make more sense IMO.

http://www.w3.org/TR/css3-mediaqueries/

 

[Father Sebastiaan]

You guys are really on the move, good deal... Does anyone know if this can be turned into an app with a wrapper easily?

 

[Roco3D]

It looks very nice. I've been looking for a mobile style but i couldn't find any witch has full support. Now I wonder how this will work with full hd resolution phones.

 

[Liam W]

I hope you correct the spelling mistake before you release it

Also, this is wonderful

 

[Forsaken]

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?

View attachment 46726

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.

View attachment 46727

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.

View attachment 46729 View attachment 46730 View attachment 46731 View attachment 46732 View attachment 46733 View attachment 46734 View attachment 46735

Just noticed something.

Wouldn't it be better to switch "Search Forums" with "What's New"? as I'm assuming the magnifying glass icon is going to allow users to search there. It just seems redundant, and the What's New feature would be more accessible this way.

 

[Luke F]

Just noticed something.

Wouldn't it be better to switch "Search Forums" with "What's New"? as I'm assuming the magnifying glass icon is going to allow users to search there. It just seems redundant, and the What's New feature would be more accessible this way.

+1, 'what's new' is much more important than any of the other links next to it

99% of my use of xenforo forums consists of clicking it repeatedly

 

[s.molinari]

Just saw this post. Great stuff Mike. Very interesting how the new design "responds".

Scott