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.

 

[Lee]

It turned out much better than I expected. Can't wait to test it out on a custom style

I like the postbit of the mobile view, very tidy

 

[jmurrayhead]

I like the postbit of the mobile view, very tidy

very tidy, indeed. I also like how the menus are trimmed, yet still accessible.

 

[Paul B]

It's not working well on my tablet (Note 10.1) with the fixed width styles as there are large left and right margins, making the text too small.

I can't zoom in either, it no longer works.

 

[Wildcat Media]

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

For me, "pleased" is an understatement. I like how the solution is browser-based and not tied to user agent, platform, etc., and that resizing is instant. This will be nice if I'm working across three forums at once--I can setup three skinny browser windows and not have to scroll horizontally.

 

[Wildcat Media]

It's not working well on my tablet (Note 10.1) with the fixed width styles as there are large left and right margins, making the text too small.

I can't zoom in either, it no longer works.

I have noticed zoom, or lack thereof, on many sites--would that be a feature of CSS (preventing zoom)? I'm OK with the size as-is, but I can see some users wanting to zoom in to make text larger. I've had to do it occasionally when I forget to wear my glasses...yet most mobile apps do not resize anyway (like Gmail).

 

[Paul B]

Prior to 1.2, the fixed width style fit the full width of the tablet and was also a comfortable size on the PC.
Now the fixed width text is too small on the tablet.
I could switch to the default style but that is too wide on the PC.

 

[Wildcat Media]

I could switch to the default style but that is too wide on the PC.

It's personal preference--I never run a browser in "maximized" or "full screen" mode (although I realize that others do). It is too hard for me to read. It goes against the old publishing guideline of putting text into narrower columns for readability.

 

[Paul B]

Hence why I use fixed width.
I want the width narrow but I also want it centered.

It's easier to use fixed width than mess about resizing and positioning the browser window.

Plus the default style uses a serif font, which is ugly.

 

[Lee]

Hence why I use fixed width.
I want the width narrow but I also want it centered.

It's easier to use fixed width than mess about resizing and positioning the browser window.

Plus the default style uses a serif font, which is ugly.

Have we had any reports on iPad viewing come in yet?

I'll check it out on mine when I get home from work, but wanted to know if there where any notable issues.

 

[Will]

Have we had any reports on iPad viewing come in yet?

I'll check it out on mine when I get home from work, but wanted to know if there where any notable issues.

Just checking it out on my iPad. Looks fine to me. I haven't look at everything but I don't see any noticeable issues.

 

[faeronsayn]

Although this might not be entirely relevant, but the resource manager's index page does not look good with the responsive layout.

 

[Paul B]

That has already been reported and will be dealt with in due course.

 

[Paul B]

This is how the fixed width styles now appears on a Galaxy 10.1.

 

[RobParker]

Is anyone else finding things quite buggy with the responsive design?

On an iPhone things keep failing to display properly (e.g some if the CSS doesn't seem to load, various issues with the editor, etc).

I'm not sure how much these problems are down to the new editor or down to the responsive style.

Also I was wondering how easy this will be to style for. For example in the template can we do

If size < val then show this CSS/code otherwise show this CSS/code.

I'm thinking things like background images or advertising where they'll now need to be responsive rather than style specific.

 

[Paul B]

According to the HYS thread, it will require JS to get different sized adverts to display.

 

[jmurrayhead]

Is anyone else finding things quite buggy with the responsive design?

On an iPhone things keep failing to display properly (e.g some if the CSS doesn't seem to load, various issues with the editor, etc).

I'm not sure how much these problems are down to the new editor or down to the responsive style.

Also I was wondering how easy this will be to style for. For example in the template can we do

If size < val then show this CSS/code otherwise show this CSS/code.

I'm thinking things like background images or advertising where they'll now need to be responsive rather than style specific.

Example? I'm not experiencing any issues from what I can see.

 

[Will]

I see no issues on my iPhone. As far as the editor, I haven't logged into the site on my phone to check that.

 

[RobParker]

Example? I'm not experiencing any issues from what I can see.

It might just be that I seem to be on a dodgy wifi connection but for example the editor loads but the icons are all blank or the edit fails to load

 

[Will]

It might just be that I seem to be on a dodgy wifi connection but for example the editor loads but the icons are all blank or the edit fails to load

Just logged in to check it. It did take a few seconds to load for me but it loaded.

 

[RobParker]

Or as happened then, I was half way through typing something and suddenly the text box stopped accepting any input and all I could do was delete text, not add any.