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.

 

[Jeremy]

@feldon30, for the most part no.

 

[feldon30]

Signatures can be disabled in your account preferences.

I know every time the team has to add an option, a kitten dies, but it would be nice to have "Show Signatures When Mobile" or something like that.

 

[Lee]

You can always just add your own setting, won't take long... You can call them directly in the templates through conditionals, if I remember rightly.

 

[feldon30]

I am not sure how I can implement responsive with Google Adsense

Not being able to show mobile ads is a show stopper

See the detailed, yet simple explanation of how to use Google Adsense with Responsive here:
[url]http://www.labnol.org/internet/google-adsense-responsive-design/25252/[/URL]

It's just adding a few lines to your standard Google Adsense javascript. And yes, Google has approved it.

We display John's twitter header with a background image defined on the CSS to make it look like a "breaking news" banner. That obviously would be no good on the mobile style as the banner image is 800px wide.

Then use different CSS based on the browser width.

 

[feldon30]

I know every time the team has to add an option, a kitten dies, but it would be nice to have "Show Signatures When Mobile" or something like that.

You can always just add your own setting, won't take long... You can call them directly in the templates through conditionals, if I remember rightly.

I know, but I thought it would make a good built-in feature of XenForo 1.2 to allow users to show/hide Signatures based on whether they're on mobile. (it would trigger an extra CSS definition tied into the responsive stuff).

 

[Arantor]

The thing about XF versus other forum systems is that it's pretty stripped down in the first place. Some of the forums I frequent would need to strip stuff down simply because of the cruft that isn't attached to the content (user post count, badges, other icons and more under the poster avatar/name) which would be unnecessary clutter on something the size of a phone.

 

[Digital Jedi]

The thing about XF versus other forum systems is that it's pretty stripped down in the first place. Some of the forums I frequent would need to strip stuff down simply because of the cruft that isn't attached to the content (user post count, badges, other icons and more under the poster avatar/name) which would be unnecessary clutter on something the size of a phone.

Yeah, there's really only so much that a mobile user needs to see. Signatures, on the other hand, would really be dependant on what you allow on your forum. I don't think quite that many admins, by comparison to the whole, allow images that would stretch the page on mobile.

 

[algheilani]

I am logged in with my Note2.
And it's amazing
The layout + The editor

Can't wait for 1.2 release.

 

[algheilani]

On threads
I would recommend on user info block to add a more link so you hide some of the data rather shown every thing.

You can notice some guys like me add a lot of info so but a code to cut the info and show more link.

 

[Wildcat Media]

Pinch Zoom on Chrome for Android works fine here. I'd thought someone had asked earlier in the thread.

 

[Wildcat Media]

BTW, I am amusing myself, watching the layout change when I move the phone between portrait and landscape modes. In landscape it changes to the side postbit mode, and changes back to top postbit a split second after I rotate back to portrait.

Did find a minor editor bug though. I'll report it later.

 

[Hornstar]

This implementation of responsive is blowing my mind. I'm loving it so much. @Kier and @Mike you have done an amazing job.

 

[Paul B]

Pinch Zoom on Chrome for Android works fine here. I'd thought someone had asked earlier in the thread.

It works now, Mike must have fixed it.

Still hate using my tablet with fixed width though - the margins make the content too small.

 

[Wildcat Media]

It works now, Mike must have fixed it.

It's been awhile, but I think that might be a CSS or JS property (to prevent zooming)? I noticed when I zoomed that the text did not reflow, but I am pretty sure that is a Chrome browser setting on the phone (there is a "reflow" property in the settings). And it's no big deal as I rarely use pinch zoom. If I do, it's because my phone and my eyes are in one place, and my reading glasses are too far away.

Still hate using my tablet with fixed width though - the margins make the content too small.

I wouldn't think that would be too hard to fix. In fact, couldn't you specify different margins in CSS or JS for the different "steps" in screen width?

 

[Paul B]

Yes, it's just the settings here on xenforo.com.

 

[Wildcat Media]

One thing I really dislike about the responsive design is making it a 2-click process to check your alerts (one of the most performed actions).

It's make much more sense to have a little red bubble just before your username name that was clickable and use up very little real estate.

Ah yes, I just noticed that myself--there is no "alert" link on the narrowest (smallest) responsive design, yet on my phone there is enough room to add an Alerts link next to my username. (Although I do have a short username.) I would think it's a simple template or CSS edit to put Alerts up there. The other choices in that same menu bar get pushed to a separate menu on the left (the icon made up of three horizontal bars), so hopefully there would be room even on the smaller screens (like the original Motorola Droid 1 which has a tiny screen).

In the landscape view on my phone, the Alerts link comes back.

 

[xf_phantom]

Is the ACP also responsive? (sorry if it was asked already)

 

[Lee]

Ah yes, I just noticed that myself--there is no "alert" link on the narrowest (smallest) responsive design, yet on my phone there is enough room to add an Alerts link next to my username. (Although I do have a short username.) I would think it's a simple template or CSS edit to put Alerts up there. The other choices in that same menu bar get pushed to a separate menu on the left (the icon made up of three horizontal bars), so hopefully there would be room even on the smaller screens (like the original Motorola Droid 1 which has a tiny screen).

In the landscape view on my phone, the Alerts link comes back.

I'm sure that it wont be a massive job to move the alerts bubble back up to the top bar, should just be a simple template modification. One which I will be doing myself.

 

[Mike]

Is the ACP also responsive? (sorry if it was asked already)

No, though it's no longer fixed width.

 

[Pereira]

So what will style authors have to do to make their 1.1 styles responsive?