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.

 

[Luxus]

What? People complain about something that isn't released yet and haven't seen how it is implemented or used!?

Impossible! I've never heard of or seen such a thing here!

Asking ≠ complaining

 

[Koiranpentu]

Excellent news. Thank you! Can't wait for 1.2 release.

 

[Kevin]

Mike (and/or Brogan)...

I may have missed it but when the responsive mode kicks in will a link be available to override and display the normal 'desktop' style? It drives me nuts when sites force a mobile style with no way of viewing the normal layout.

 

[DRE]

Impressive.

 

[Forsaken]

I usually optimize for iPhone landscape, portrait, and iPad. And the new phones have me throwing me off with their huge resolution (but small screen size)

That is only the showing / hiding of the elements and font resizing, though. I consider that trivial. The other topics I will be interested in is ...

• The login experience is a little weird in mobile. Basically because you click on the "Register" button that appears on the sidebar (is it there anymore), and then the popup from the top of the screen slides in. This is slow on most devices, and a little weird since not all the content is visible on the screen. Also, "Yes my password is" is preselected, and you need to select "Create a new account", and selecting a radio button in a touch device is extremely annoying. My personal opinion is that page should just go straight to the registration page
• The inline moderation is going to be a challenge. I think that will be one of the features that can shine on a responsive layout, or make one's life miserable.
• I wonder whether on a mobile device, clicking on a profile should send you to the complete profile, instead of displaying an overlay. The overlay is slow to load on mobile, and looks weird. I guess after responsive it should be no bigger than the usual screen anyway.

All in-all when optimizing for mobile devices the basic philosophy should be: The site should be usable without me having to scroll or zoom in. That is the litmus test that I will do once we have some preview next month

Without having seen or used their implementation of breakpoints you really can't make any comments on it.

The default breakpoints they've setup would cover most devices, and they could always have other breakpoints that will cover edge cases (720p and 1080p screens).

• There is always a chance that they have completely changed the login design for mobile devices, and is something that would get suggested when we see the implementation of it.
• On a mobile device I would prefer that clicking on a username or avatar forwarded me to the profile rather than to the member card. While useful for desktop/laptops it is more of an irritant when viewing on a mobile device when the profile will be faster, provide the better experience and less interaction. If I'm on LTE it isn't much of an issue, but slower connections will likely have issues with it.
• This would be a huge benefit if it works well.

Asking ≠ complaining

Asking here becomes complaining almost instantly.

 

[Paul B]

Regarding the member card, check the first post, it's completely different.

 

[Forsaken]

Regarding the member card, check the first post, it's completely different.

Yeah, I just would rather disable it for mobile devices as it isn't quite as useful as going to the profile on a mobile connection or slower device.

 

[CTXMedia]

One complaint I had from users when I ran responsive was they wanted the ability to swap back to the full version of the site. Some people like visiting the full site on a mobile device for whatever reason.

Hoping we might have a per user option to disable responsive?

Actually, that's a good point. Will there be a "Desktop version" link anywhere or an option to chose a non-responsive style - you know, for use on tablets, or even phones if you prefer the full-site experience?

 

[goyo]

Nowadays I'm using "new" mobile devices (mainly Samsung Galaxy Note 2, sometimes HTC ONE) for browsing more often than my desktop.

90% of my browsing time Mobile friendly / Responsive designs get in the way (poorly executed) so I keep have to request desktop versions or use hacks for that.
As their resolution is basically a desktop resolution it's very easy to magnify something and get a desktop "feeling" than use some quirky mobile view with huge fonts and limited set of features.

We'll see...great work @Mike

 

[Forsaken]

Nowadays I'm using "new" mobile devices (mainly Samsung Galaxy Note 2, sometimes HTC ONE) for browsing more often than my desktop.

90% of my browsing time Mobile friendly / Responsive designs get in the way (poorly executed) so I keep have to request desktop versions or use hacks for that.
As their resolution is basically a desktop resolution it's very easy to magnify something and get a desktop "feeling" than use some quirky mobile view with huge fonts and limited set of features.

We'll see...great work @Mike

http://mediaqueri.es/

Take a look at some of those sites and that'll show you how responsive design should work *in theory*. Depending on whatever site you've gone too it sounds like they've gone the lazier approach of removing functionality and just scaling things up, rather than addressing how interactions will change and that the experience shouldn't change much between resolutions.

You should be able to go from a large display on a desktop, to a small netbook, to a tablet and than to a phone and have a consistent and usable experience that is catered to each resolution.

 

[erich37]

any impact on this ?

http://xenforo.com/community/threads/youtube-not-showing-when-android-mobile.50292/

 

[DRE]

Regarding the member card, check the first post, it's completely different.

This is dope.

 

[Bapun Raz]

Looks awesome.

 

[CyberAP]

I might get a lot of dislikes but this is the first 'Have you seen' post I don't like at all. XenForo needs its own mobile style, or should I say a mobile web app. What responsive gets us is just a clipped desktop experience. On a mobile phone users have absolutely different needs, they need to get information quicker. But with a responsive site it's impossible to do, we come up with a lot of scrolling through extra information while searching for content. For example we don't need Forum view on mobile, it's obsolete there. It's convenient for desktops where we can quickly scroll through the page and see what's new. Mobiles need a feed of new messages or most popular content. Moreover mobile site shouldn't have all the content from sidebar, like 'stats' or 'who's online' (just display it as 'Online now: 30'). That extra information ruins the purpose of mobile web, users should only get what they want - posts, and as quickly as possible. Not member cards, not thread lists, but new content and posts.
I know a lot of people find responsive design very useful but when it comes to real world I prefer standalone web apps. Have a look at Twitter of Facebook and compare their desktop and mobile sites. They are absolutely different apps with different aims.

 

[ibnesayeed]

I might get a lot of dislikes but this is the first 'Have you seen' post I don't like at all. XenForo needs its own mobile style, or should I say a mobile web app. What responsive gets us is just a clipped desktop experience. On a mobile phone users have absolutely different needs, they need to get information quicker. But with a responsive site it's impossible to do, we come up with a lot of scrolling through extra information while searching for content. For example we don't need Forum view on mobile, it's obsolete there. It's convenient for desktops where we can quickly scroll through the page and see what's new. Mobiles need a feed of new messages or most popular content. Moreover mobile site shouldn't have all the content from sidebar, like 'stats' or 'who's online' (just display it as 'Online now: 30'). That extra information ruins the purpose of mobile web, users should only get what they want - posts, and as quickly as possible. Not member cards, not thread lists, but new content and posts.
I know a lot of people find responsive design very useful but when it comes to real world I prefer standalone web apps. Have a look at Twitter of Facebook and compare their desktop and mobile sites. They are absolutely different apps with different aims.

To implement something like this easily, it will be nice to have a JSON API endpoint available in the core. For example if whatever data is exposed here on web interface, if that is also available in a JSON format (by simply adding .json at the end of the corresponding URL) then fantastic Mobile Apps can be built easily using a framework like Sencha Touch or lightweight jQuery Mobile.

 

[erich37]

I might get a lot of dislikes but this is the first 'Have you seen' post I don't like at all. XenForo needs its own mobile style, or should I say a mobile web app. What responsive gets us is just a clipped desktop experience. On a mobile phone users have absolutely different needs, they need to get information quicker. But with a responsive site it's impossible to do, we come up with a lot of scrolling through extra information while searching for content. For example we don't need Forum view on mobile, it's obsolete there. It's convenient for desktops where we can quickly scroll through the page and see what's new. Mobiles need a feed of new messages or most popular content. Moreover mobile site shouldn't have all the content from sidebar, like 'stats' or 'who's online' (just display it as 'Online now: 30'). That extra information ruins the purpose of mobile web, users should only get what they want - posts, and as quickly as possible. Not member cards, not thread lists, but new content and posts.
I know a lot of people find responsive design very useful but when it comes to real world I prefer standalone web apps. Have a look at Twitter of Facebook and compare their desktop and mobile sites. They are absolutely different apps with different aims.

I think for XenForo it is the right way to create the "mobile web" the way Mike has announced in the first post. Creating standalone Apps might get much more complicated in various ways.

However, I agree that it is probably not that exciting for the mobile-user to view "statistics" or the "Membercard", but rather being able to view the "latest content" like we have the thread-list-view in "What's New" and also in some sort of stream as we have at the "Recent Activity".... and being able to quickly reply to that content.


... and maybe also send an acoustic sound to my mobile device when I do receive an "Alert"

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Weppa333]

#94 is a valid comment indeed.
As far as I'm concerned, I was also in favor of a mobile style rather than responsive. Main problem with responsive is that it loads a lot of stuff that usually doesn't get displayed. Also, even taking into account dynamic CSSes, it relies on the basic fact that SQL queries are the same for mobile or desktop.
I was also in favor of mobile... Which is why I was enclined to go IPB way.

But, as a webmaster with limited ressources, I now feel that responsive is kinda "best of both worlds" for us little websites. The main advantage for me now is that you only have one skin to maintain. Also, with a "real mobile" wbesite you really don't know what you should do with tablets... MObile skin ? Probably not. Desktop ? Nope. Another skin ? Wher does it end ?

So I must say I switched my own opinion from #94 to "responsive" recently...

 

[Forsaken]

There's this major misunderstanding that a responsive style needs to be dumbed down. Many sites dumb down or removal elements of lesser importance because it increases the experience. There are plenty of examples for web applications that use a responsive design that offer the same experience on mobile as they do on desktop.

It all depends on the implementation and until we see how the responsive style works here there isn't all that much that can be said.

 

[Weppa333]

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" ?

 

[xf_phantom]

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.

I have to disagree.

It's included in the response style (because it's the default xf style)

A native app won't support custom addons out of the box because it's a compiled app from the appstore and because of their installed API.

You don't need an API addon http://xenforo.com/community/thread...kberry-windows-phone-7-webos-nokia-app.14335/
You don't need to keep it updated
You don't need to wait for their bugfixes