[RFC] Responsive layout

[Arty]

Ticket: http://tracker.phpbb.com/browse/PHPBB3-11552
PR: https://github.com/phpbb/phpbb3/pull/1719


This is an alternative to [RFC] Mobile style.

There are several ways to make forum mobile friendly, two of them are:

• Create separate mobile style
• Create responsive layout for existing style

What is responsive layout?

Responsive web design is creating style sheet for existing design that changes the way design looks depending on device and/or screen resolution. You can read long article that explains it here: http://en.wikipedia.org/wiki/Responsive_Web_Design

If you'll browse web, you might find some responsive design examples. Problem is, all of them are applied to simple designs. Forum design is far from simple, so can it be done?

In last few months I have created responsive layout for forum design that is even more complex than prosilver, so yes, it can be done. It is fully functional, including user control panel, moderator control panel, popup windows. You can see it here: http://www.artodia.com/forum/

How to test it if you don't have mobile device? Just change browser window width to smallest possible and see what happens.


Responsive layout vs mobile style

While you can have both responsive layout and mobile style, creating both would be waste of time, so one has to be selected. Both methods have its advantages and disadvantages.

Advantages of mobile style:

• It is faster. Responsive layout is addition to existing style, so mobile browsers get all data that desktop browsers get. Proper mobile style will have only data relevant to mobile layout. Browsers cache images and scripts, so it mostly affects first page load.
• No matter how much forum admin will mess up wrapping forum style into his ancient table driven website layout, mobile layout will work just fine.

Advantages of responsive layout:

• No need to maintain yet another style.
• Style authors will customize it, so forums will look the same on mobile and desktop browsers.
• Browser will automatically use correct CSS rules based on resolution. No need for user agent sniffing. phpBB will not have to include mobile device detection function.

What do you think: responsive design or separate mobile style?

[MichaelC]

Why are you making a separate RFC? An RFC should be about a problem then discuss different ways to fix it. The previous RFC was about the problem of speed & usability on Mobiles, the main implementation suggestion was a new mobile style, however a alternative suggestion should have been posted there?

[callumacrae]

Why are you making a separate RFC? An RFC should be about a problem then discuss different ways to fix it. The previous RFC was about the problem of speed & usability on Mobiles, the main implementation suggestion was a new mobile style, however a alternative suggestion should have been posted there?

Because the other RFC is "mobile style", not "mobile improvements". Responsive designs aren't exclusive to mobiles, either.

+1 to the RFC. Good luck making Prosilver responsive, though xD

[Arty]

Why are you making a separate RFC?

In addition to what callumacrae posted, posting suggestion like this in 10 pages long thread is never a good idea. As soon as thread will reach page 11, everyone replying to it will not read my post (nobody reads 10 pages of thread, people read only first and last pages) and will reply to what was discussed in first post of thread. It is pointless.

[keith10456]

Interesting... How different would it be from prosilver? In other words, are we talking a complete redo of the prosilver style?

[Arty]

Interesting... How different would it be from prosilver? In other words, are we talking a complete redo of the prosilver style?

It will require minor changes + responsive stuff, which means just one more css file that changes styling of some elements based on browser window width. There won't be many changes to template files.

[Vinny]

+1

[Oleg]

Conceptually, browser window size less than 1000 horizontal pixels does not necessitate a mobile device, despite what a lot of people seem to think nowadays.

Practically, mobile style should be lighter than a desktop style, due to bandwidth available on mobile devices. Let's say at least 5x lighter, maybe 10x lighter. A single style still loads 1) all markup, 2) all images, 3) huge stylesheet. I'm seeing shadow and corner images in livehttpheaders. These all should not be existing in a mobile style.

[MichaelC]

Why are you making a separate RFC?

In addition to what callumacrae posted, posting suggestion like this in 10 pages long thread is never a good idea. As soon as thread will reach page 11, everyone replying to it will not read my post (nobody reads 10 pages of thread, people read only first and last pages) and will reply to what was discussed in first post of thread. It is pointless.

Even so, now the discussion for which to use is fragmented between two topics?

[Arty]

Practically, mobile style should be lighter than a desktop style, due to bandwidth available on mobile devices. Let's say at least 5x lighter, maybe 10x lighter. A single style still loads 1) all markup, 2) all images, 3) huge stylesheet.

Stylesheet, images, scripts are loaded from server only on first page load, then those elements are loaded from browser cache.

Markup is smaller than with proper mobile device, maybe 2-3 times smaller. It is the main advantage of full mobile style.

5x is realistic if you count all external elements that are cached, but 10x is unrealistic.

I'm seeing shadow and corner images in livehttpheaders. These all should not be existing in a mobile style.

That's by design and it will stay there. Just because style is usable on mobile device, doesn't mean it has to look ugly. Prosilver does not have such design feature.

Even so, now the discussion for which to use is fragmented between two topics?

Not really. That topic is about css driven mobile layout vs jquery mobile.