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.

 

[Kevin]

Using javascript.

https://support.google.com/adsense/answer/1354736

But that is for the Google Adsense code, I was wondering how to...

For custom headers and logos you would just link to a different header based on the screen size.

 

[Paul B]

The JavaScript can be applied to anything, it will likely require template edits though.

 

[Teapot]

I mentioned this in another thread, but I've been playing with the responsive design all evening, and I have to say it's a really fantastic piece of design work. Even messing with it in the inspector, like changing my username in the user menu or renaming the tabs, can't fool elements into overrunning each other or otherwise breaking the layout.

I genuinely would have paid good money for this feature alone if it were an official add-on.

 

[Jeremy]

I mentioned this in another thread, but I've been playing with the responsive design all evening, and I have to say it's a really fantastic piece of design work. Even messing with it in the inspector, like changing my username in the user menu or renaming the tabs, can't fool elements into overrunning each other or otherwise breaking the layout.

I genuinely would have paid good money for this feature alone if it were an official add-on.

There is one thing I hate about it. And I can't decide if I actually want to complain/make a suggestion. Missing last poster information feels odd to me (two dates for the threads).

 

[dutchbb]

Just tried it on iphone, looks good. May even prefer it over Tapatalk.

 

[Martok]

Just tried it on iphone, looks good. May even prefer it over Tapatalk.

If only to convince forum users to ditch Tapatalk in favour of responsive design...

 

[tafreehm]

I have custom theme, when I upgrade to xf1.2 will my custom theme become auto responsive ?

 

[Teapot]

There is one thing I hate about it. And I can't decide if I actually want to complain/make a suggestion. Missing last poster information feels odd to me (two dates for the threads).

I certainly see your point. I think I wouldn't mind too much as long as I knew whether there were posts I hadn't read or not, but it's always a shame to lose functionality.

 

[0ptima]

It's great to see such good feedback for this feature. I'm personally really pleased with how it's come together.

Love it too! Was browsing the site earlier today on my phone and it works well

 

[Jeremy]

I certainly see your point. I think I wouldn't mind too much as long as I knew whether there were posts I hadn't read or not, but it's always a shame to lose functionality.

Ill probably end up fighting with it and getting it to display on my install because I find it weird. Home page doesn't bother me... Thread listing is odd.

 

[Teapot]

I have custom theme, when I upgrade to xf1.2 will my custom theme become auto responsive ?

Partially. If your theme is -heavily- customised, you'll probably need to customise it to make it work properly, but otherwise it should be nearly seamless - it's the same styling options used in the rest of the system.

 

[tafreehm]

Partially. If your theme is -heavily- customised, you'll probably need to customise it to make it work properly, but otherwise it should be nearly seamless - it's the same styling options used in the rest of the system.

I'm not sure what do you mean by heavily customized but I didn't change template structure but to change color and images. I guess I'll be ok.
Thanks

 

[AndyB]

When I logged into Xenforo on an iPhone, I didn't see a way to turn off Responsive Design to go back to the normal full site view. Is this option missing?

 

[Jeremy]

Not realistically possible with Media Queries because the browser chooses the CSS to use based on screen width:
http://xenforo.com/community/threads/responsive-design.50888/page-9#post-552230

Your best bet is to create a style identical to your default where you remove any media queries (leave the CSS for desktop version). Suggestion is here:
http://xenforo.com/community/threads/desktop-mode.51625/

 

[Digital Jedi]

Posted this screenshot and post using Galaxy Note II. Upload dialog seems to have also been simplified, so adding the screen was pretty straightforward. The editor seems to work pretty well, too, overall. I do a lot of commenting on articles via my phone and tablet, and the interfaces can be uber frustrating, especially if you have more than a couple of things to say. Comment boxes are too small and scrolling almost never works inside of them, and you can never quite go back to any text you've already entered, which makes it virtually impossible to spell check properly. So far, Swyping this response has been fairly uneventful.

Only thing that seems to be acting a little odd is, the Note has a cursor when using the stylus, and the mouseover on elements is a little off. For instance, when going to select the last line in this editor, the buttons below it light up. Move the cursor over the buttons, and the link to my screen highlights instead. Mouseovers are probably not something you'd really think about when designing for touch screens, but several devices of note (no pun intended) make extensive use of them. Not the least of which is the Galaxy Note line of devices.

Also, not sure what's doing it, but something dynamic in this page is causing the page to jump up and down while I'm using the editor. I keep tapping things I'm not supposed to. I thought I was finally having that seizure...

 

[RobParker]

For custom headers and logos you would just link to a different header based on the screen size.

That really needs to be as simple as possible and should be built-on in my opinion.

Similarly the Adsense thing is going to wanted by virtually everyone running ads so would make much more sense to have that as an option somehow.

Going further, things like digital points ad positioning will need altering. I don't know whether that's something he'll need to add in or whether its something we can do just in the template (sounds like it isn't).

 

[Roco3D]

I like the way it looks in my galaxy s2, but I would like to have the option to hide the signatures because some of them are really big and my 3g data quote is narrow.
Also I think that pagination should show less buttons... something like "< 1 2 3 > FU" so it shows only one row.

 

[Paul B]

Signatures can be disabled in your account preferences.

 

[Roco3D]

Signatures can be disabled in your account preferences.

I know that but it will hide them also when I'm using the desktop.

 

[feldon30]

I'm late to this party, but I'm also one of the first to get annoyed at stripped down, broken mobile versions of sites. I installed AtomicWeb on my phone just to be able to spoof a browser string and get the "real" website.

That said, I am not sure I'd ever need to do that with XenForo 1.2 or other Responsive designs because features aren't being removed, just reshuffled visually to fit better on the screen. Do you actually lose anything when viewing XenForo 1.2 on mobile?