#NewTwitter (Archive)

    To anyone curious about #NewTwitter proportions, know that we didn't leave those ratios to chance.

    This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise. - @stop

    Comments and faves

    1. christhomson, Monsieur M, Sbaush, Andrew Simone, and 312 other people added this photo to their favorites.

    2. MacMan156 (32 months ago)

      Omg fib numbers!!

    3. JessiePanda (32 months ago)

      This is beautiful!!!!!!!

    4. da_n (32 months ago)

      Yay Golden Ratio! Can be difficult to scale in fluid designs sometimes. Now if only I had my #NewTwitter I could look at it myself!

    5. ★emu_zone (32 months ago)

      I see what you have done there :) ace

    6. Marius Nedelcu (32 months ago)

      they aren`t like this any more.

    7. BB (O.ö) (32 months ago)

      This is not the proportions on my page.. mine is almost (if not) 50/50... :/

      Dont like it!!!!!!

    8. wintersweet (32 months ago)

      Ah, that's why it looks so terrible on my 1920x1200 screen, I guess. :/ It's literally half and half, and I really don't like it. Too much weight on the less-important info. I really wish it were adjustable. Please take into account the rest of us...

    9. samodoidi (32 months ago)

      It's awesome that you're using Phi in your design. I myself like to use fib numbers and the golden ratio in my designing whenever possible.

      I do suggest that you make the layout, somehow, keep the golden ratio in tact. Maybe make each side a percentage width?

      .main-content {
      width 61%;
      }
      .dashboard {
      width: 32%;
      }

      this is roughly the golden ratio (roughly is always the best you can do when it comes to irrationals like Phi). Now, just make sure the container element has a smaller width than the body.

    10. samodoidi (32 months ago)

      like the original poster said:

      If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.

      So if your screen is wider the ratios are thrown off.

      What I suggest they do is not let the details pane be the only thing that expands when you have a larger width screen. Rather, have both expand proportionate, keeping the ratio 61:32 (which is roughly the golden ratio).

    11. kitface (32 months ago)

      Fibonaaaaciiiiiii

    12. MJ-Davies (32 months ago)

      I knew there was something about it that I really liked... great job on the redesign!

    13. samodoidi (32 months ago)

      Golden ratio always seems to make software successful. Look at Google Chrome as another example.

      However, I'm disappointed that the ratio vanishes as the viewport's width increases.

    14. samodoidi (32 months ago)

      Just messing with the design a bit. If you add the following CSS properties, you can keep the ratio:

      .main-content {
      width: 61%;
      }

      .dashboard {
      width: 32%;
      min-width: 0px; /*or set this to something smaller than the current 340px */
      }

      Remember, you must ADD this to the current set of styles. This keeps the same ratio for whatever screen width the user might have. I didn't test this out much, but it should hopefully help you guys out and give you something to play with. =D

    15. robotspacer (32 months ago)

      Looks much better this way. It's a shame that with the semi-fluid layout, you actually do leave it to chance.

    16. pakzam (32 months ago)

      surprise, perfect!

    17. jrepenning (32 months ago)

      And how did you decide that "four" was the perfect number of tweets to set the height, and hence the widths?

    18. Communicator (32 months ago)

      I [heart] the golden ratio.

    19. samodoidi (32 months ago)

      would be nice if they didn't leave it to chance. Tell me what you think of my previous comments?

    20. samodoidi (32 months ago)

      Sorry, my last comments were not correct, the ratios should be 62% for the main content and 38% for the details/dashboard side. However, when you have padding on the dashboard area (which you do), you can't use percentages, unless you put the padding on a child element within the dashboard. Though, this will require an extra div element, unless you style the div.component elements.

      However you decide to do it, all I recommend is that you use CSS percentages on both sides to maintain the golden ratio proportions. Sorry if I'm a bit of a troll on this topic; I just put a lot of attention to detail.

    21. adiyaa1 (32 months ago)

      The proportion in the picture above looks pretty good. I only wish it side column wouldn't increase in size according to the width of your screen. My side column is the same width as my timeline column, and it doesn't look quite right :(

    22. Bob & Mia (32 months ago)

      The eye doesn't register the proportion, even at the narrowest width, because it's the color change and the border between of the sections that make the difference, not at the content alignment of the details pane.

      It's also a whole lot prettier without following, followers, favorites, and listed cluttering up the details pane.

    23. JennaG (32 months ago)

      Like several others, the proportions on my screen are almost 50/50 and I hate it. I won't switch over to new Twitter because of this. It's like having half a screen of blank, wasted space.

    24. SpiritbearNY (32 months ago)

      Ugh, I totally agree with those who are complaining about the 50/50 ratio. It looks awful and I want it to go away. I mean, I don't dislike it. I hate it.

    25. samodoidi (32 months ago)

      A lot of people seem to dislike the 50/50 ratio issue. Twitter, you best listen to your users and stick with the 1.618:1 ratio for every screen size. I personally think the golden ratio is the best ratio for this because the smaller side is not too small where it is out of focus like a typical sidebar.

      I'm advocating my suggestion to it's fullest extent, giving the left portion 62% and the right portion 38%.

    26. Alfonso Martinez (32 months ago)

      Simply beautiful!

    27. traceyyyz (32 months ago)

      iz ok unless on tiny macbook. big dashboard meanz too much LR scrolling for theze pawz. boo. also hurtz my eyez. double boo.

    28. evil_cotton (32 months ago)

      i hate the 50/50 proportions. the right side is less important info, and i really like how it is now. i can make custom backgrounds that are fun and cool, but this new layout makes it so you can't see any of my background except for slivers on all sides. if you could give the option to keep the old twitter, i would be a happy person.

    29. katyggls (32 months ago)

      Yes except that even on my 1440 x 900 screen it's not like that. It looks awful and takes up too much space. I'm not just talking about the ratio. The layout itself is too wide. It obscures many people's custom backgrounds as well.

    30. mcmlxxii (32 months ago)

      Why not have the sidebar and main feed expand in relation to their original size? It is after all known as the Golden Ratio

    31. kasai. (32 months ago)

      Another one hating this 50/50 business. Not minding the Golden Ratio, but that's sure not what it's looking like for me.

    32. Isaac Z. Schlueter (32 months ago)

      Note how the only people impressed by this are the people not on #newTwitter, because the rest of us know that's not what it looks like, ever, in any circumstance.

    33. Ilaria Mauric (32 months ago)

      Hi Twitter, I really like the New Twitter, congrats! Now, we all have problems to design Twitter backgrounds, though.... Why don't you allow transparencies on layout? Designers would be able to think on personalization on the bottom right, there's much room over there! Please do it and let'd start a new Twitter Background Design Trend :)

      bye!
      ilaria

    34. clogwog (32 months ago)

      come to think of it, so is this flickr page...

    35. RSNY (32 months ago)

      ha ha nice! I did same (experiment though) few years ago...

    36. *Curiosa (32 months ago)

      I don´t like at all the proportion. What i love the most on your web was the ability to read clearly everyone in mi timeline. Right in the midle.
      Now i can´t do that. The right sidebar is too big, at least for my taste and my followers as they said.
      I hope you upgrade with better proportions. Right now i changed to the old version. :(

    37. symmetricalist (32 months ago)

      I saw it before somewhere....

      symmetricalist.com

      perhaps...

    38. Barbato (32 months ago)

      Lacryma Fibonacci! Approaching the golden ratio (approx. 1 : 1.618 or 0.618 : 1) is awesome!
      www.twitter.com/arthurbarbato

    39. Barbato (32 months ago)

      bg's that scale to fill (stretch) screen are desirable (imho)... and your bg real estate is prime ad space, too! check my bg for an ad spot for reference. DM q's. peace.

    40. emarts.pe (32 months ago)

      no me lo hubiera imaginado :P

    41. btomaso (32 months ago)

      Why not let users decide how wide they want them to be?

    42. bp122284 (32 months ago)

      I mean, grats on using a natural phenomena for developing your widths, but I don't use your resolution or screen size, so It doesn't apply to me and looks ridiculous! Either use some JS to apply it correctly depending on viewport size, or make it statically smaller, it's very ugly on larger resolutions with TONS of wasted space.

    43. ·júbilo·haku· (32 months ago)

      this will only be true with THAT specific height....

    44. efelippe (32 months ago)

      I'm surprised, it's beautiful!

    45. ozanilbey (32 months ago)

      Yeah, that's me you are seeing on the picture and this is my answer:

      Golden Ratio is just for the minority: twitter.com/#!/ozanilbey/status/25904584104

    46. sancta (32 months ago)

      The Golden Ratio!

    ← prev 1 2
    (81 comments)
    The photo owner has disabled commenting.
    keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts