We're standardizing the sidebar width at 300px on all sites

Question

Update: this change is now live across the network. You'll still see some narrow 220px ads because it's going to take us a good while to update all of the old ads, but if you see any other style issues, please report here on meta.

Stack Exchange sites are ad-supported. We run relevant, unintrusive ads that don't get in your way--but they help us keep the lights on. Even sites that don't have paid external ads usually have a few internal ones, used to promote other sites on the network and whatever else each community feels is important. We don't run a lot of ads, and folks who've earned a nominal amount of rep see even fewer, but the ones we do run have one crippling problem:

The sidebar ads are currently a weird non-standard size. Yes, standardized ad sizes are a thing. And apparently if you ignore them, folks are more reluctant to advertise and have a tendency to make uglier ads. We don't like ugly ads, and we do like selling ad space. So starting next week, we will switch to the industry-standard size for sidebar ads. The new ad units will be 300x250 and the sidebar will be expanded to 300px wide to accommodate them. We won't be reducing content size or doing any sort of weird overlay; the ads and other sidebar content will just extend an additional 80 pixels to the right.

However, even though the sidebar is growing by 80 pixels, by reclaiming some margin space, the overall page width is only increasing by 60px. Here's what it's going to look like:

Over 98% of Stack Exchange users won't be affected by this change. Either they already use a viewport big enough to accommodate the new width, or they already use a viewport too small to accommodate the existing width. (And those who do find themselves affected won't be losing any content, the juicy stuff we all come here to look at. They'll just see a bit of the sidebar cut off unless they scroll.)

We're planning to roll this out on Tuesday, January 12. (There will be a transition period after that date while we work on getting all ad types swapped over; you'll still see some of the old size ads during that time.) In the meantime, let us know your thoughts.

Answer 1

Go ahead and do it!

I'm one of those who probably wouldn't even notice the change, since the smallest monitor I'm using is a 1680x1050 one. And on my 1920x1200 monitor I have even configured Chrome to zoom to 125% on the SE sites that I use, because I have a lot of unused space. So I know it's easy for me to say to do it, since I am substantially unaffected by this, but I really think you should just do it. The reason behind the change makes sense, and SE has to make money after all.

While I understand the concerns of those that, for any reason, have a small monitor/window, I would like to address the concerns of those that think this will be just one step towards an advertising hell, with animated GIFs, videos with sound that start playing automatically, popups, and whatever you can think of. Remember, these sites have been around for years. They have never used annoying advertisements. There's no reason to start yelling at them. They have explained why they want to make this change, and it makes sense.

Let's be pessimistic, and imagine that one day they really switch to intrusive, pervasive, annoying advertisements. What exactly prevents you from abandoning SE? We are the users, we have a power: the power to choose whether we visit these sites. If we decide we don't like the sites anymore, we can just go away. The staff will notice the drop in number of visitors, questions, answers, impressions, clicks, and so on, and do something (go back?). But I think it's safe to say they know this perfectly well, and they will do their best to prevent this situation. So I'm confident that this will not be the beginning of annoying ads.

Answer 2

People are asking for specifics about the browser width data we collected, what the numbers are, and how we collected them. So I'll try to answer those.

How did we collect them?

We simply measured window.innerWidth at the time of the ad request, and included it in the query string. The query string is captured in our traffic logs, so we can go back and scrape the data.

Fun fact: "clc" is our weird nonsensical, but short and easy to type, abbreviation for Calculon, the internal code-name for our ad server, and everything on the project is Futurama-themed.

We're not actively using this for anything other than learning about the popularity of various browser widths, in order to make informed decisions. It doesn't go to any third parties, it doesn't go into ad serving decisions, we don't use it for deciding whether to close your questions, or even link it to your account in any way.

Of course, anyone who has ads blocked won't be included in the report, which isn't perfect because everyone is affected by a new sidebar width, but it does give us a better sense of who currently sees, or will see, cut-off ads, which was also part of the goal.

What are the numbers?

I think we can safely release the percentages for each resolution. There certainly isn't any personally identifiable information in them, so here you go. Some notes about the data though:

• The percentages are technically a percentage of page-views, not a percentage of users, but it's a close enough approximation.
• I scraped the data a few different times, but what's included in the spreadsheet is from a couple weeks in October.
• I didn't individually aggregate resolutions above 2000px.
• There was a small amount of 0px traffic, but it was almost certainly bots, and therefore isn't included.

I've highlighted in the spreadsheet all of the resolutions which represent at least 1% of traffic. They are:

• 1024px ≈ 1.1%
• 1280px ≈ 9%
• 1366px ≈ 14.8%
• 1440px ≈ 5.2%
• 1536px ≈ 1.5%
• 1600px ≈ 4.9%
• 1680px ≈ 3.5%
• 1920px ≈ 19.3%

The results really aren't surprising given that they correspond to standard screen sizes. The only one of those which is smaller than the new width is 1024, which was actually a little bit too small for the old page width as well.

Where did the 98% number come from?

There's several different numbers you could pick as the number of people who will be affected. You could say that, in order to not cut off anything, you need a width of 1032 (although you still have a horizontal scroll until 1047). Then the people affected are in the range between 1032 and 1111px, which is 2.39% of traffic. EDIT: It looks like the overall increase is only going to be about 60 pixels (even less than we thought), which means the people affected are in the 1032 through 1091px range (approximately 1.6% of page views).

However, we're not quite done with the design yet, and we're trying to shave a few pixels off so that the overall page width increase would be less than 80px. If we could get it down to 65px overall increase, then it'd be 1.9% of traffic affected.

So, basically, we're targeting in the range of 2%, and 100% total - 2% affected = 98% unaffected.

Hopefully that answers your questions about the data.

Answer 3

Well, "80 pixels" doesn't sound as bad as "Sidebar, now 36% wider!" but it's still annoying to have larger ads, particularly since these ads don't go away for higher reputation users.

Consider hiding one of the two possible sidebar ads for high rep users to compensate for the 36% increase in ad space. You don't always display two ads anyway, so making it so high rep users only have to see a maximum of one sidebar ad would probably not alter your bottom line much.

Answer 4

What? I already very reluctantly made my browser window wider to accommodate Stack Exchange's current width. It's already too wide for comfort, it doesn't leave enough room for a decent-width window on the side. And now you want to make it even wider?

Ok. Time to learn more about CSS and get rid of all that right margin junk.

I'm disappointed that you don't consider user-friendliness to be a goal. The whole reason you have ads to sell is that we're writing all this content for free!

Answer 5

About 98% of Stack Exchange users won't be affected by this change. Either they already use a viewport big enough to accommodate the new width^[1]

For what viewport width is this change designed? I can think of a few cases with a roughly 1000px-wide viewport, taking the right scroll bar into account:

• Maximized window on a 1024x600 pixel netbook monitor
• Maximized window on a 1024x768 pixel XGA monitor
• Maximized window on a 1366x768 pixel WXGA monitor connected to a Windows 8.1/10 PC with a UWP app snapped to the side

And one with a roughly 930px-wide viewport:

• Window occupying half the width of a 1920x1080 or 1920x1200 pixel monitor. Ways of getting a half-width window include Snap under Windows 7 and later, Tile Vertically under previous versions of Windows, and analogous operations on other GUIs.

So you might want to add an feature letting (at least desktop) users hover over Linked, Related, or Hot Network Questions to make them temporarily slide over the question. And you might want to clarify to advertisers how many impressions get cut off on the right side, and whether being cut off affects the click-through rate.

Answer 6

The thing that would annoy me is not the ads getting cut off, but that the related questions and hot network questions would get cut off for 2% of the site's users.

I'm not in that boat, fortunately, but I'd hate to be one of the 760+ thousand people that visit per month and are affected by it, assuming quantcast's 38 million uniques per month is correct.

I would be interested to see the percentage of people who are already getting it cut off (who are included in your 98%). While you are saying that the change doesn't alter their experience, what you are really doing is increasing their numbers - so how big is that group now, and how big is it once you make the change - by what percentage are you increasing that group?

Answer 7

This site is 1030px wide - just enough to cut off a little content and make the horizontal scrollbar appear - so you're already selling yourself short on netbooks and non-maximized windows. Support 1024px (content around 980px), or target a larger size and hide the sidebar on smaller screens.

Answer 8

After reading through all the rants answers and comments, I felt compelled to write this.

SE is changing the side bar to make it more lucrative to run ads. So? Who are we to complain, and about such a small change?
SE is a business, business exist to make money. I don't mind, at all, the ads SE runs. SE has said they will never run any animated ads.

A side point
(Now supposing on the 12th SE rolled out some hideous flash ads, would that stop you from using the site? Or would it be just like when you abandoned youtube because of their preroll ads...)

What is the big deal with difference between a 220x250 image (which is already on SE pages) and the new 300x250 image we will have? _{get over it and move on}
The main content is not changing, period.
Thumbs up to SE for growing the site size, and keeping the content the same.

I feel that SE has gone above and beyond what they needed to do.
(Has yahoo or weather ever asked you if you think their Leaderboard ads are ok with you? What about youtube's ads in nearly every video, or facebook? Has any of them, before making an ad change, discussed it with you?)

---

Finally, I suggest (all in jest) to placate all the naysayers here, SE adds an option: either you get the new 300px side bar, or pay $10 a month and get it all ad free.

Answer 9

Just noticed this change has gone live. I have to say I hate it. I, like many others, don't have my browser window maximised. On my laptop I set my browser to about 70% the width and use the other 30% for an iPhone simulator. So when i'm writing code on my external monitor I have everything else I need on the other screen. Stackoverflow was already the reason why I had to make it 70%, the rest of the sites I use are much smaller.

Now its too big to fit. I'm left with a decision to either cut off the right side, or not have all my windows open at the same time.

Coming from the site I go to for programming advice, I find this pretty disappointing. I know many sites that don't force a margin width. My personal opinion on the style, is that its ugly. The amount of wasted whitespace has increased dramatically, not just from ad's.

I find it funny that the argument to do this is so ad's become more standardized and more people will advertise. As it currently stands, now I can't see a large chunk of them because they are cut off ... who does that help?

You need a much better solution than this.

Answer 10

First, I believe the percentage of page-views affected was underestimated.

My 30-inch monitor sports 2560×1600 resolution. Using Windows desktop magic to tile the browser on the left or right half of the screen (so that I can see two apps at once) gives a window 1280 pixels wide, which now results in a horizontal scrollbar on every Stack Overflow site. But since window.innerWidth reports 1220 pixels, my page views were likely counted as not affected. The problem is the pixels are a different unit than px, which is what the CSS uses to set the width of the content pane and the sidebar.

Second, for those affected, the change pushes the search box and the "Ask Question" link off screen. Since those elements are at the top of the page and the horizontal scrollbar is typically at the bottom, that seems especially unfortunate.

While it's true that the juiciest content is on the left, I find, more and more, that I'm drawn to the "Related," "Linked," and "Hot Network Questions" listed in the side bar, but now I can't read their titles without horizontal scrolling.

Third, the change affects how we view other sites in tabbed browsers. Making the browser wider to accommodate Stack Overflow's new width affects the layout in all the tabs, making many sites display blocks of text with lines far too wide to easily read.

The best websites reflow to accommodate any reasonable window size. Half of a 30-inch monitor seems pretty frickin' reasonable.

I understand the need to accommodate the standard advertisement widths, so I'd propose that you allow the main content on the left reflow narrower to make up for the lost pixels.

Answer 11

This sounds fine, and gives more room for related questions, I hope, but I have 2 related questions:

• Can we please make the main content section scaleable by window size? I usually run browser windows about 3200 pixels wide so when I open a Stack Exchange window there are acres of white space.

• Do we need to revise our community adverts to the new size? Or will you just scale them up?

Answer 12

Bret Copeland responded to otus in the comments that responsive design wasn't a priority, because the focus of the site was not on mobile users. However, I feel especially a lot of programmers use split screen to code on one side, and access documentation/Stack Overflow on the other side of their screen. That is why responsive desgin (and not just a horizontal scrollbar) is vital in my opinion.

Here is what Stack Overflow looks like on my 1920x1200 screen now, occupying 50% of its width:

Answer 13

I don't mind the adverts, but please consider the fact that ~8-9% of your users will see a horizontal scrollbar as a bug to be fixed in the future.

Personally, I'd even prefer seeing slightly less content rather than a horizontal scrollbar, but there is probably a balance to be struck. For example, a narrower sidebar if the screen width is too low, with ads and other wide content moved somewhere else in the layout.

I'm sure your designers can find a reasonable way to present the information more cleanly.

---

With the smaller change that went live I just avoided regressions – 90% zoom, which I was already using, still fits the wider sidebar on my screen. While I'm personally not affected any more than I was, I still hope this is something that will be improved in the future. Having an alternative layout to handle at least the ~1000px width you get with various 1024px and 1080px wide screens and hopefully even ~900px width would be great.

I don't think the range of resolutions in use will grow smaller any time soon, so a static sized design is suboptimal even if you ignore the very smallest resolutions.

Answer 14

Unintended consequence: topbar, header buttons

I've got no problem with wider ads. If it helps SE pay the bills, go for it! It'd be nice if we had some tooltips for sidebar items, but if not, those of us using smaller windows can just tune out those links -- not much harm done.

However, when I read in the announcement that the main content wouldn't be harmed, I understood that to mean (perhaps incorrectly) that the main functionality of the site wouldn't be affected. However, the whole page got wider, meaning the topbar and the header got wider, and since UI elements there are pinned to the right side of the rightmost pane, that means things that previously were visible are now not. On most sites I now have to scroll to get to the "ask question" button (previously it was partially available), and the search box is only barely there. This also badly affects certain moderator tools.

I'd like to see the essential functions of the site continue to be available in the 1030px width that is, I understand, the intended minimum size. If I lose most of the sidebar on my tablet or while editing side-by-side with my browser then, well, that's sad but oh well. But can you please find a way to make core functions continue to fit?

At least two sites center the set of buttons instead of moving them off to the right, and on those sites they all remain available with the recent change. Maybe this approach could be taken with other sites?

Compare those to what I now see on most sites:

Answer 15

I understand you had good reasons for this change and I don't object it. Sure, most of us have large enough monitors these days to fit the wider site on it. Unfortunately, this isn't true for those of us who use the Tor Browser with the default window size (which shouldn't be changed for privacy reasons). Using this setup, the new site looks like this.

I'm okay with this. It doesn't affect usability a lot. However, you might be interested in the fact that for users on Tor Browser, the change will actually make the ads less visible as they're now cut off vertically.

What is way more annoying to Tor users are the undecipherable CloudFlare CAPTCHAs you force us to solve and the fact that over some relays, the site markup is not sent properly. But this is subject of an unrelated debate.

Answer 16

Here's a style for Stylish (a Firefox addon) that shrinks the sidebar to 200px so that most Stack Exchange sites fit in a 1024px window, though there are some problems:

• Some sites (such as askubuntu, photo, and tex) still have something hanging off to the right, causing a horizontal scrollbar
• Sometimes the buttons at the top of the page ("Questions", "Tags", etc.) overlap with the site name graphic (such as gamedev and gis)
• codereview and tex get broken badly enough that I've omitted them from the list of sites that this style applies to (codereview's sidebar gets pushed below the content, and tex loses its "Questions" button)

Also, this doesn't do anything with the ads in the sidebar. They're still there (unless you're already adblocking them), and end up getting cropped to fit the 200px.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document
  regexp('https?://(?!codereview|tex).*\.stackexchange\.com.*'),
  domain("stackoverflow.com"),
  domain("serverfault.com"),
  domain("superuser.com"),
  domain("stackapps.com"),
  domain("mathoverflow.net"),
  domain("askubuntu.com")
{
  html
  {
    min-width: 960px;
  }
  body
  {
    min-width: 975px;
  }
  #sidebar
  {
    width: 200px;
  }
  #header,
  #content,
  #footer #footer-sites,
  .topbar .topbar-wrapper,
  .footerwrap
  {
    width: 960px;
  }
}

Answer 17

As a user (and fan) of Google Contributor, if this change means that a standard ad network like DoubleClick could be used (and thus that my Contributor subscription could apply to Stack Overflow) I would be very happy and excited.

If not via Google Contributor, I would gladly support some other micropayment solution for Stack Overflow. That would be the best of both worlds: Stack Overflow would be funded and I wouldn't have to look at ads while I'm using it.

Answer 18

The change seems to have been rolled out inconsistently: Code Review’s sidebar is even wider than the rest of the network. According to my web inspector, it’s a whopping 330 pixels.

Checked in the latest versions of Safari and Chrome on OS X. UK IP address.

Here’s a screenshot of Code Review against Sci-Fi and Fantasy. The difference in sidebar widths is noticeable.

[I wasn’t sure where to post this; happy to move to a different thread/Meta if that’s more convenient.]

Answer 19

Here's the CSS for the adaptive StackExchange layout that works for screens from 1024px

html, body { min-width: 1000px; }

.topbar .topbar-wrapper, #system-message, #header, #content, .footerwrap, #footer #footer-sites
{ max-width: 1060px; width: auto; }

#sidebar { max-width: 300px; width: calc(100% - 760px); }

.topbar .topbar-links { right: -8px; margin-right: 8px; }

It doesn't change the appearance for big screens, but adapts the sidebar size for small ones.

I suggest the StackExchange team use it officially. All you'll have to do to support this code in future is write adaptive side menu blocks that look ok from 240px to 300px. The ads (images) can be scaled via width: 100%, that shouldn't bother anyone since they will be reduced max to 80% of their initial size and only for 2% of users. And that's the only way to make the site usage comfortable for these users anyway.

And I suggest you, user with a horizontal scrollbar, use this code right now via Stylish.

Answer 20

In case you want to see it earlier, or perhaps get back once the new version rolls out¹, the CSS change is fairly trivial, at least for the most part:

div#content { width: 1100px; }
div#sidebar { width: 300px; }

Some other changes that could be made:

 /* to align the logo properly */
div#header { width: 1100px; }

/* to make the question links take all of the space */
.show-votes .sidebar-linked .question-hyperlink,
.show-votes .sidebar-related .question-hyperlink {
    width: 250px;
}

---

¹And yes, I'm aware of the fact that image ads can't just be squeezed.

Answer 21

Here is my Stylus [1] to fix this travesty:

@-moz-document
domain(stackexchange.com),
domain(stackoverflow.com),
domain(superuser.com) {
   #sidebar {
      width: 250px !important
   }
   .post-text {
      width: 710px !important
   }
}

I chose 250 because it factors cleanly: 2 * 5 * 5 * 5

1. https://github.com/openstyles/stylus

Answer 22

You mention a 98% figure that includes those whose viewports are already too small. But does that take into account that the site has a functional viewport width of about 990px? With that viewport size, a user does not have to scroll to read anything on the sidebar.

I think those should count as people who do not have to scroll now, but would with the update (with an effective viewport width of 1063px). Given numbers I've seen elsewhere, I'd expect around 4-5% of users to have 1024px width screens. And all of those users would now have a degraded experience.

Full disclosure: I use a 1024px screen, and thus would be one of those affected. I would much prefer that the text of the sidebar not become wider.

Answer 23

The content on the screen is very much shifted to the side, and is shrunk now, at least on my screen. 65% of the page is whitespace now, and one side has ~2.5x more whitespace than the other.

I realize it's a small thing, but it still looks bad.

Answer 24

Sadly, I must be in the 2%. My StackOverflow content has become smaller, and the ad space larger. I work on a 1024px small monitor provided by my client. Time to go shopping, I suppose.

Answer 25

I currently don't mind the ads that are on display these days, but I recognize that's because they are about community projects, community building within the network, and jobs. This change should alter that situation, so I'm wondering:

How much of the current ad impressions is internal advertising, such as jobs/careers, community building, community supported ads, etc? Let's just restrict this to Stack Overflow for now.

How much is this expected to change once this new unit comes into play?

How do internal ads, again - community building, community supported projects, and jobs/careers - compete with advertising now, and how would they compete once external advertising increases in volume?

Answer 26

status-completed

Just noticed the change. All in all, I like it. But I found an oopsie:

Using Firefox 42 on Windows.

Answer 27

Apparently being among the 2%, I find that the toolbars have increased in width is more annoying than issues with the sidebar per se. It is only particularly annoying in the review queue, which is the only place I've noticed that some buttons are entirely off my screen. Well, it's no big deal: If the review queue is inconvenient, I'll just skip it and move on to something more pleasant. Or increase my browser window widths.

Technology moves on all the time, and many times I have had a workflow I am comfortable with disrupted by some change such as this. This is one of the more minor changes. And despite it being personally aggravating, it is one of the more well-supported and better explained ones, too.

Answer 28

You said (bold in original)

We won't be reducing content size

Well, before I read the announcement that the changeover had gone live, I noticed that the content size was smaller. Or at the very least, looks smaller - I can't get out a ruler and compare the before and after.

Can I please have ugly ads instead?

Answer 29

Oh, don't worry about that. Every man who have ever cared for the ads' sizes have already enabled Adblock and won't have any problems. (Except for frontend developers that cannot use Adblock, but still are using Stack Overflow on a daily basis). Disclosure: I love Adblock.

Didn't you think that there're users with sidewise taskbars (most of Ubuntu users and a lot of Windows users) and Firefox with Tree Style Tabs that take some horizontal space of the screen? How did you measure the screen width: from the headers or from a JS? Of course, the latter was the only viable option. But there're users who don't like when someone spies on them, because such a number is a very unique thing. Tor Browser even has an alert for that. Disclosure: I don't like when someone does such thing without a consent.

Didn't you think you could have used that narrow band of space for a bar that scrolls the page to the top? This is much more handy than an advertisment.

And the funniest part is that the real issues with CSS are pretty much ignored on meta sites, so such a message seems like a hypocritic attempt to get people OK with an idea of making this website worse.

Answer 30

THIS UPDATE SUX !

For some reason, I can't get my 100% attention to the left side when starting StackOverflow. This sidebar width is stealing 10% to 90% of my attention which is annoying. I rarely use this sidebar based on my experience.