Tuesday, July 14, 2015

website design - Golden ratio, with or without padding/margin?


Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout?



Method One


c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px

50px, column 1 (495px), 100px, column 2 (305px), 50px

Method two calculate the column widths ignoring the margins.


c1+c2=1000px
c1/c2=1.618


=>c1= 618px c2=392px

effective column width after adding the margins/paddings


c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px

% difference in two methods 518-495/518= 4%


The 4% difference would not make any any difference, but the % difference will be more when dealing with narrow layouts.


Can someone please suggest which method is better. Please include the links and ref supporting your answer.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...