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?

ss-2013-05-24_11-33-30.png


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.

ss-2013-05-24_11-45-57.png


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.

ss-2013-05-24_11-49-35.png ss-2013-05-24_11-50-00.png ss-2013-05-24_11-50-46.png ss-2013-05-24_11-51-04.png ss-2013-05-24_11-52-22.png ss-2013-05-24_11-53-06.png ss-2013-05-24_11-53-36.png
 

Weppa333

Active member
Just a word for Mike, you could also specify device widths instead of pixels resolutions, especially with newer devices, it makes more sense to have infection points on width rather than on resolution.
Usually, complex CSS3 rules are actually based on both ( that min-RES and that min-width )
 

Mike

XenForo developer
Staff member
Just a word for Mike, you could also specify device widths instead of pixels resolutions, especially with newer devices, it makes more sense to have infection points on width rather than on resolution.
Usually, complex CSS3 rules are actually based on both ( that min-RES and that min-width )
I'm not sure what you're trying to imply here. We're using viewport width defined in "CSS pixels" rather than device width. Doing media based on device resolution simply isn't useful (with the retina iPad/iPhone being a good example).
 

Weppa333

Active member
CSS3 rules allow you to specify not only resolutions ( pixels ) but also physical width (inches). This is what I what suggesting you look at as well, because many responsive design are only based on pixels, and you end up with an ipad4 beeing detected as having more "width" than an ipad1, a device of similar PHYSICAL size. I agree Retina devices only report half of their physical pixel capabilities, but that's not what I'm talking about here.

PS Sorry, english isn't my native language :)
 

Chris D

XenForo developer
Staff member
Early June means; "the first week of June" right?

Anything in the first half of June is early June. So first or second week.

That's not guaranteed of course. Just going by what Mike said last week. It could take longer depending on various factors.
 
Top