[RFC] Responsive layout

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Post Reply
User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

[RFC] Responsive layout

Post by Arty » Sun Sep 16, 2012 6:59 pm

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?
Last edited by Arty on Sun Sep 15, 2013 12:30 pm, edited 1 time in total.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
MichaelC
Development Team
Development Team
Posts: 889
Joined: Thu Jan 28, 2010 6:29 pm

Re: [RFC] Reponsive layout

Post by MichaelC » Sun Sep 16, 2012 8:36 pm

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?
Formerly known as Unknown Bliss
psoTFX wrote: I went with Olympus because as I said to the teams ... "It's been one hell of a hill to climb"
No unsolicited PMs please except for quotes.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Reponsive layout

Post by callumacrae » Sun Sep 16, 2012 8:42 pm

Unknown Bliss wrote: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
Made by developers, for developers!
My blog

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Reponsive layout

Post by Arty » Sun Sep 16, 2012 8:49 pm

Unknown Bliss wrote: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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
keith10456
Registered User
Posts: 523
Joined: Sat Apr 22, 2006 10:29 pm
Contact:

Re: [RFC] Reponsive layout

Post by keith10456 » Sun Sep 16, 2012 11:16 pm

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

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Reponsive layout

Post by Arty » Sun Sep 16, 2012 11:18 pm

keith10456 wrote: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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Vinny Online
Style Customisations
Style Customisations
Posts: 126
Joined: Thu May 20, 2010 4:01 am
Location: Brazil
Contact:

Re: [RFC] Reponsive layout

Post by Vinny » Sun Sep 16, 2012 11:24 pm

+1

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC] Reponsive layout

Post by Oleg » Mon Sep 17, 2012 4:19 am

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.

User avatar
MichaelC
Development Team
Development Team
Posts: 889
Joined: Thu Jan 28, 2010 6:29 pm

Re: [RFC] Reponsive layout

Post by MichaelC » Mon Sep 17, 2012 6:33 am

Arty wrote:
Unknown Bliss wrote: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?
Formerly known as Unknown Bliss
psoTFX wrote: I went with Olympus because as I said to the teams ... "It's been one hell of a hill to climb"
No unsolicited PMs please except for quotes.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Reponsive layout

Post by Arty » Mon Sep 17, 2012 8:01 am

Oleg wrote: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.
Oleg wrote: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.
Unknown Bliss wrote: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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

Post Reply