[RFC] Define max-width for prosilver

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.
Locked
User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Define max-width for prosilver

Post by callumacrae »

I agree that it should be 960px… but your reasoning is terrible. It's responsible design. Stuff looks different at different widths.
Made by developers, for developers!
My blog

mrgtb
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb »

The problem is you're not going to able to please everyone with this type of style change. If you use 960px, then those using large wide-screen monitors will complain there's a little forum plonked in middle of huge screen with loads of background space shown. So you can win really which ever way you go on this, you ain't going please all with this change.

User avatar
Sumanai
Registered User
Posts: 95
Joined: Sat Aug 31, 2013 11:12 am

Re: Define max-width for prosilver

Post by Sumanai »

mrgtb wrote:If you use 960px, then those using large wide-screen monitors will complain there's a little forum plonked in middle of huge screen with loads of background space shown.
Now users are complaining that the forum is too wide to read.
Sorry for my English.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: Define max-width for prosilver

Post by PayBas »

mrgtb wrote:The problem is you're not going to able to please everyone with this type of style change. If you use 960px, then those using large wide-screen monitors will complain there's a little forum plonked in middle of huge screen with loads of background space shown. So you can win really which ever way you go on this, you ain't going please all with this change.
_57c8a1a431a592af806925e57258202f.png
_57c8a1a431a592af806925e57258202f.png (61.82 KiB) Viewed 6676 times
Sorry. Couldn't help it.

mrgtb
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb »

Anyway, I thought "Arty" was the one dealing with the style. He's the style whizz kid expert, he's on the styles staff team. Leave it to the Pro. :)

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

Re: Define max-width for prosilver

Post by callumacrae »

mrgtb wrote:Anyway, I thought "Arty" was the one dealing with the style. He's the style whizz kid expert, he's on the styles staff team. Leave it to the Pro. :)
Last post in March.
Made by developers, for developers!
My blog

mrgtb
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb »

callumacrae wrote:
mrgtb wrote:Anyway, I thought "Arty" was the one dealing with the style. He's the style whizz kid expert, he's on the styles staff team. Leave it to the Pro. :)
Last post in March.
Right, shame, but have seen he's a lot more involved with XenForo these days.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 907
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Define max-width for prosilver

Post by hanakin »

mrgtb wrote:Anyway, I thought "Arty" was the one dealing with the style. He's the style whizz kid expert, he's on the styles staff team. Leave it to the Pro. :)
hold up Arty is by no means the wizz kid who did everything a lot of individuals helped to get prosilver where it is. Furthermore just because someone is on the styles team or the staff does not mean that they are the best most skilled person! There are individuals with more experience in certain areas. I am not saying Arty did not make a lot of contributions but come on.

The fact is the topic is being taken in way too many directions. This was never intended as a change to the design. It is a fix to a bug in that the content area is too wide with a fully fluid width. Then people started complaining about the amounts of whitespace on the sides of the browser hurting their eyes. The simple answer to this was to change the background from pure white to something subtler. Instead we were pushed into making it a full on revamp of the style.

Let me break it down in simple terms to help get this merged for everyone.

PROBLEMS
  1. We need to prevent the content regions from becoming so large that it becomes to straining to legibly read based on the length of the lines of text
  2. We need to ensure that prosilver provides an easy to read experience for the user without causing any eye strain
FIX
  1. In order to fix the line length we need to apply two fixes to prosilver to assist with setting a proper (CPL) Characters per Line. #1 a max-width to call knock it off to the fluidness with 1152px chosen to accommodate 1280px and wider monitors. #2 a new font-size established per break-points to ensure proper CPL
  2. Second we need to address the fact that the background is too straining on the eyes with so much pure white. #3 Change the body color to something like #F5FBFF
#1

Code: Select all

#wrap {
    padding: 0 20px;
    min-width: 650px;
    max-width: 1152px;
    margin: 0 auto;
}
#2

Code: Select all

@media (min-width: 774px) { 
    .postbody .content {
        font-size: 1.4em; /* 14px */
        overflow-x: auto;
        line-height: 1.643em; /* 23px */
    }
}

@media (min-width: 990px) { 
    .postbody .content {
        font-size: 1.6em; /* 16px */
        overflow-x: auto;
        line-height: 1.625em; /* 26px */
    }
}

@media (min-width: 1206px) { 
    .postbody .content {
        font-size: 1.8em; /* 18px */
        overflow-x: auto;
        line-height: 1.6112em; /* 29px */
    }
}
#3

Code: Select all

html, body {
    color: #536482;
    background-color: #F5FBFF;
}
font-size on phone size screens
Screenshot 2014-07-02 20.23.32.png
(104.38 KiB) Downloaded 473 times
font-size on tablet size screens
Screenshot 2014-07-02 20.13.36.png
(164.98 KiB) Downloaded 473 times
font-size on smaller desktop screens
Screenshot 2014-07-02 20.12.28.png
(151.96 KiB) Downloaded 473 times
font-size on larger desktop screens
Screenshot 2014-07-02 20.10.49.png
(144.32 KiB) Downloaded 473 times
Donations welcome via Paypal Image

mrgtb
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

Re: Define max-width for prosilver

Post by mrgtb »

Do you not think that font-size in posts is a little large? :o

I admit it's too small now in ProSilver used for reading and writing posts with editor. I have changed it on my own forum to a better font-size using a different font family (but still same set phpBb uses) and size for posts, polls and in text editor. I linked to all the changes I've made on my forum in another post made in this topic earlier back.
Snap1.png
(72.42 KiB) Downloaded 459 times

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 907
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Define max-width for prosilver

Post by hanakin »

no its what individuals have become a custom to that is too small. From a print & design standpoint the font-size for content should be based on a combination of the average distance from the medium in relation to the mediums size. The screen shots are probably a little mislead because of the bastardized way prosilver handles font-sizes it mess them up so the sizes apear slightly larger.

This is why the default browser font-size for all browsers on all computers is 16px ;) Because when the browser was created the screen sizes were small enough that 16 provide adequate coverage for all possible sizes especially given that they were bubled sceen CRTs

This does not hold up today as I am writing this on a 27in High Def screen IMAC at over with a resolution over 2000px sitting roughly 24in or 61cm from my monitor
Donations welcome via Paypal Image

Locked