Ad blocker interference detected!
Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers
Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.
Archive of Current events.
More Thoughts on Page Layouts
It's been a while since we talked about page layouts and banner ads, but I've been wondering -- if we're going to look at designing pages in new and unconventional ways (i.e. moving images and/or infoboxes to left-justified at the top of the page), are we treating a full-screen browser at 800x600 as the lowest-common denominator? Or should the LCD be higher than 800x600? Essentially, what is the lowest standard to which we can agree we should be designing? Is this something that we can do a straw poll on or agree on?
I'm asking because I just took a look at that Marlo Thomas page again. With a left-justified 300px wide image at the top on an 800x600 resolution, I got the leftmost image in the gallery below. Essentially, with an approximately 260px wide left-nav and a 300px wide banner, the 300px wide image just doesn't fit and gets pushed below the banner ad anyway.
When I decreased the image to 200px wide (center left image in gallery below), it fit snugly between the left-nav and the banner on the 800x600 resolution. The article copy doesn't show up until below the image, but the picture is prominent and the layout isn't harmed at all.
When I kept the image at 200px wide (center right image in gallery below) and increased my resolution to 1024x768, the article copy does appear in a column between the image and the banner. But as opposed to when the image was 300px wide (rightmost image in gallery below), you now see an average of 6 words per line instead of 4, which I personally think is actually a much nicer read, even if it is just an increase of two words.
If we can agree that 800x600 is the minimum resolution we're designing to, what do people think about agreeing that left-justified images at the top of the page must be no more than 200px wide?
I'd also previously listed a bunch of issues with left-justifying images, but I've thought about it some more and have some ideas about possible solutions. They're not perfect, but maybe they'll inspire some discussion.
We know that left-justifying images can mess with section headers and bulleted lists, which aren't designed to wrap around objects to their left. See the image of the Kangaroo page in the leftmost picture in the gallery below for an example where the left-justified image interferes with the list at a 1024x768 resolution.
But to get around this, what if we agree that if an article has too short an intro paragraph followed by a bulleted list (or some other similar problem), we'll force a break (clear="all"). In the rightmost image in the gallery below, putting this code between the first paragraph copy and the list fixes the layout issue. There's more white space, but it at least looks like it was done on purpose. Can anyone let me know what this looks like on higher resolutions?
Another option is to set a minimum word-count for the first paragraph of articles that have lists high up in the page and a left-justified image. We could figure out the height of a tall image at 200px wide and establish an average word count to make sure the images don't make the lists break up in weird ways.
I also think it's a good idea to keep all infoboxes right-justified, directly below the 300x250 banner ad. That way, we can bring one single photo up above the fold but keep the rest of the page as similar to existing versions as possible.
- I've added images that show what those pages look like with our usual layout of 300px images on the right. In my opinion, the current layout looks better than any of the left-justified options, even with the ad. If the ad has to be there, then I think both pages look better the way they were -- it's a bigger image, and there aren't any issues with the bullets or a need to set a minimum word-count standard.
- We're going to be turning ads off for logged-in users -- probably later this week, if everything goes well with the engineering that needs to be done to create the "see pages with ads" option. I think Scott's idea of encouraging people to log in may be a better use of our time than redesigning pages that don't really present that much of a problem to begin with. -- Danny (talk) 05:50, 8 July 2008 (UTC)
Okay -- it's been announced on the Central forum, so I'm free to talk about it here! Phew. Check out the Wikia's New Style forum page for the details. The basic idea is to take ads off the site for logged-in users. Then we can encourage people to log in, and not see the ads anymore. (The one exception is the main page, where there will still be ads for everyone.) There are some details that are up for discussion, so I hope everyone visits and comments on the forum page. It'll be good to have everyone's voices heard on this one. -- Danny (talk) 15:02, 30 June 2008 (UTC)
- Top-notch idea. --MuppetVJ 15:22, 30 June 2008 (UTC)
There's a YouTube video featuring Sam with Animal, Beaker, Bobo and Swedish Chef as well as a penguin and a couple chickens. Anyone know if it's real? I added it to Sam's page. Is that all right? -- Holmwood
- Thanks for finding that! It's real, seems quite recent (it's clearly Eric Jacobson as Sam) and from the looks of it, it's either a) a "viral" promotion for the holiday put up by Disney (since the user "patrioticeagle" claims to be Sam) or b) an insider snuck ut out and it's a preview of something set to appear on Disney Xtreme Digital on the 4th (since they've had time/holiday sensitive clips before). Looking around, I don't see it on Disney's Muppet site yet. The ending, where Statler and Waldorf talk about "e-mailing it to everybody we know," strongfy suggests it's an intentional YouTube "viral promotion" (since as far as I can tell, Disney Xtreme Digital doesn't let one share clips that way). -- Andrew Leal (talk) 23:17, 27 June 2008 (UTC)
SNL Show #1
I'm sure everybody has heard by now that George Carlin passed away this weekend, and NBC just announced that as a tribute to him, they're going to show the very first episode of Saturday Night Live, which he hosted. I'm hoping they show it uncut (since commercial time is longer than it was in 1975), but even if they cut some out, I hope they show the Gorch material. So I'm just mentioning this for those who haven't seen it before. -- Ken (talk) 02:03, 26 June 2008 (UTC)
Hey, I have some good news. I was working with Christian today on the IE spacing issue... No news on that yet, but he's looking into it closely.
But while we were working on that, Christian figured out how to fix the problem with the  links getting pushed down by images. That's a super longstanding problem that we couldn't figure out how to fix. Christian tweaked the code and committed it to production, and it should get released tomorrow. So if everything goes well, that problem will be fixed tomorrow! Yay. -- Danny (talk) 23:11, 24 June 2008 (UTC)
- Hooray! We can finally do away with Sandbox: edit links problem. —Scott (talk) 01:15, 25 June 2008 (UTC)
- It looks like that page mixes both the section edit link problem and the IE spacing problem. The section edit will be fixed tomorrow... the IE thing is still in process. Christian figured out today that it's actually nothing to do with Wikia, or MediaWiki -- there's something screwy about the way that IE handles headers, pictures and text. That doesn't mean we're off the hook -- now we have to find a way to work around the IE screwiness. But it's nice to know that it's not happening because of something that Wikia did. -- Danny (talk) 05:08, 25 June 2008 (UTC)
Well, the conversation seems to have largely trailed off on the 19th (and I was too busy to participate that day), so I'm bringing this back to the top. Where do we stand on any possible consensus on how to deal with the ad problem? The only thing that seems to be fully agreed on right now is that we'll need to try different things on different types of pages, but nothing else beyond that. It's still a huge eyesore and bother for me, especially on pages which aren't really in contention as below (which seems to be mainly episodes, movies, and template heavy pages), but for actors, international voice actors, minor Dog City characters (who often don't even have an identified performer, and so on). For the international voices, really, only Henrik and myself seem especially interested or heavily invested in those. Since the format is unwaveringly simple (one picture and varying amounts of text or lists), and since I'm planning to add a lot more of those in the coming week (as I also try to reformat or add pages for the various dubbed productions), I'd like to go ahead and move those pictures to the left. Any objections? (They can also be used as a sort of test case; that is, if it doesn't generally bother people, we can use it on comparable pages for Creature Shop actors, minor or unseen characters, and anything else which fits the pattern, like Hugh Webster).
Also, is there any other area which is generally agreed upon and which we can note, so as to keep moving on this? Or any major issues which weren't mentioned before but which people are now coming across? The table/top image issue, discussed below, is still with us, but the only way to solve it apparently is to either dump the extra image or move it into the table. On both Waiter Grover and Fraggle Rock (France), those approaches seemed to work fine. -- Andrew Leal (talk) 20:20, 24 June 2008 (UTC)
- About pages with a big image and not so much text, I've been thinking about experimenting a bit with the height of the images to figure out what size will trigger the ad box. Making the images smaller could be the solution to keeping the current format with the image on the right side for small articles. I'am gona try and it out on Api Bavadra, its a fairly big image that can be downsized quite a bit. Henrik (talk) 21:04, 24 June 2008 (UTC)
- It seems the definition of a small article is 300 pixels, so if images can be keept at 299 pixels on small articles without a caption and info box the ad box won't trigger. With a info box, for instance a one name performer box, I guess the max height size of the image is around 220-230 pixels. So keeping the image height at these values would avid the ad box on small pages. However this will properly mean that the width of the images will go well below 300 on most articles. The biggest problem would be on character pages were the performer box is with 2 or more names, there the image would be very small Henrik (talk) 21:31, 24 June 2008 (UTC)
- Hi guys -- There's actually going to be a change to the ad system tomorrow, so it would be good to wait a day before we spend time figuring things out. I can't say what it is right now, because we're not announcing it on Central until tomorrow morning, and it wouldn't be cool for me to talk about it here first. Sorry about that -- I'm not trying to mess around with people or anything.
- Thanks for the response, Danny, that's good news. I'd simply assumed that the discussion had stalled, and I didn't want this still very major problem to just go on due to lack of communication. Peter, see the earlier discussion re Gorilla Suits and others. Any page with a table *and* a separate image at the top will cause a squish or break; that is to say, the picture will be pushed down next to the table, or with a clear all, create huge spacing issues. It's a pre-existing condition which the ads exacerbate, so as in other instances, pages which were fine before are messed up. -- Andrew Leal (talk) 22:03, 24 June 2008 (UTC)
- Sure it's ok Danny, I will be looking forward to see what the change is. The conclusion I've made by the tests I ran is that the image is gonna be quite small since there were a few variables I did not count on at first, like the difference on being logged in or not, making the max height around 200px with a one name info box. Henrik (talk) 22:06, 24 June 2008 (UTC)
- Gotcha, Andrew. Let's wait to see what the change to the ad system is tomorrow, but my recommendation on pages like that would be to use the 728x90 "push" option. It only seems to affect a handful of pages, so it wouldn't really be an overuse. Also, we're supposed to get 728x90 banners on pages with tables anyway - the fact that we're not is more a glitch in the system which is not detecting them far enough down the page. -- Peter (talk) 23:04, 24 June 2008 (UTC)
- Hooray! I just tried it on Gorilla Suits. The problem is cropping up on well under a dozen pages so far (probably around five to seven at most, even) so it's nice to know this works and won't be a problem (I read your comments on not pushing forced banners further down, so it didn't occur to me). -- Andrew Leal (talk) 23:20, 24 June 2008 (UTC)
Yeah, it's totally okay to use that trick sometimes. We shouldn't use it too much... but the definition of "too much" is pretty unclear right now. There's one wiki where they added it to every infobox template, and another where they're talking about using a bot to add it to every page. Those are too much. But using it on Gorilla Suits etc is totally fine.
I think that may end up being the solution for the episode pages too... We're already using it on Sesame Street episodes. We could use it for the other episode pages too -- that's probably less than a thousand pages total, on a wiki with 17,000+ pages. I'm still getting a feel for how much is too much... so I've tried to err on the side of caution so far. (Also, I may be the guy who ends up going to those wikis and telling them to cut it out, so I don't want my own "home" wiki to be seen as abusing it when I'm telling other wikis not to.)
I'm feeling like the episode pages are okay, though. I wouldn't do it for songs, books, characters, etc.... that feels like too far. But if we want to add that to episode box templates, then I'm okay with that. -- Danny (talk) 23:36, 24 June 2008 (UTC)
- Hi guys... Sorry... The change that I thought was going to go live today has been delayed. I'm going to be on a plane all day, so I'm not sure what's going to happen today. (Probably nothing.) You guys should keep talking about this stuff and figuring things out. Don't let me hold things up. I'm sorry that I halted things for a day. -- Danny (talk) 13:49, 25 June 2008 (UTC)
- I was working on Marlo Thomas just now, and since I still can't stand the way the ad pushes images down (especially on shorter pages), I went ahead and left aligned. You can see the results on the page, but I uploaded a screengrab of how it looks on IE7 (admittedly on a flatscreen monitor; my old one conked out awhile back and these are the only ones you can get now). Everything evens out nicely, no squishing, image on left, text right beside it, and then the ad. Not every page will be this even, but it definitely seems like a simple and effective way to fix pages like this (a single image, a few paragraphs, no templates). Thoughts? -- Andrew Leal (talk) 00:23, 26 June 2008 (UTC)
- I don't know. I swear I'm not trying to be persnickety, but on my monitor I get a whole column of just 3-4 words per line, and it makes my head spin trying to read it (see Cooperleft.jpg under the "Float left" section below for an example of what this format looks like on another page). I took a quick look online to see what standard column widths are, and minimum length for readability appears to be 8-10 words or so. I'm most concerned because this affects the first portion of article that someone is going to have to read when they get to the page. And I'm also looking ahead to when the 300x250 ad has Flash animation in it instead of just static Google ads.
- Anyway, I don't know what percentage of users this affects. And I don't really have an alternate solution, so I'm not going to stand in the way if this is the decision that everyone agrees to. I suppose I can live with it where there are no infoboxes, but it looks absolutely terrible on my screen. Maybe we decrease the image width, though. That at least buys us another 1-2 words. -- Peter (talk) 01:54, 26 June 2008 (UTC)
- Peter, how does Marlo look to you, specifically? Cooper isn't a good example and not what I'm talking about. On my screen anyway, I see over 12 words on average on the Thomas page, but as I said, I know my screen's not necessarily typical. Anyway, we'll deal with this more whenever the mysterious new adjustment takes effect. -- Andrew Leal (talk) 02:14, 26 June 2008 (UTC)
- Peter that screen grab is a good example on why I tried to figure out what image height would trigger the ad box, and maybe use smaller images instead of moving images to the left. However due to wikias height definition of a small article the images would be way to small. I really hope the changes Danny was talking about has to do with content of text instead of basing small articles on the hight. Henrik (talk) 15:46, 26 June 2008 (UTC)
I know very little about all the technical aspects of computers. Just enough to be dangerous. But I do know that I sort of like the pictures on the left to get them away from the ads. However, I'm one of those people who like the task bar running on the side of the computer, which isn't normal I know, so I thought I'd show what Marlo Thomas looks like to me. Just to speak for those of us who do things a little differently. Mostly its the spacing of her name that bugs me. -- Nate (talk) 16:06, 26 June 2008 (UTC)
- The problem with left align is that every screen resolution sees a very different thing. Nate appears to have a very small screen indeed (I'd guess 800x600). Danny once pulled some stats on screen resolution of visitors, and while only a small number use anything that small, something like 30% of the visitors or so use the 1024x768 which Peter and I use. At that resolution, as Peter noted, the text only has ~4 words per line between the picture and the ad, and then does a weird wrap below the picture. Lists do the same thing and look even worse. From the screenshot Andrew posted, he must be on a much bigger screen, and he's right -- it does look pretty good. So the real question becomes, are we willing to make the page very awkward to read for roughly 1/3rd of our visitors so the other 2/3rds don't deal with the ugliness the ad introduces when it slides things down?? -- Wendy (talk) 01:24, 27 June 2008 (UTC)
- Yeah, that's not even a question; like I said, it was a test. Both those screengrabs look pretty bad, but Nate's is boggling (I was on about 1024x768 or worse until my old monitor died a month or two back; on the new one, I'm at 1440x900, and I'm sure that's not common unless one has a newer monitor or until everyone else's minitors conk out, since now the stores are only selling the flatscreens individually). Well, I only tested it on the one page. We'll see if the new adjustment Danny mentioned makes any difference on that score, whenever it comes to pass. -- Andrew Leal (talk) 01:48, 27 June 2008 (UTC)
- Interesting note: I hit Random Page and landed on Dr. Pain which looked painfully bad with the 300x250 banner above the image. I did a test and removed the caption under the photo, and voila! The page is now short enough to qualify for no-ad status. I wonder how many other pages this will affect. I'd rather sacrifice captions than anything else. -- Peter (talk) 21:32, 27 June 2008 (UTC)
- Peter, it either worked just on your machine, or it didn't reload (which happens; for one night, every Wiki page registered as "NOt fully loaded, with errors," so for that space of time, every page was ad free); take another look (and a screengrab if it's still ad free for you). The "short" thing varies, but just taking out a caption doesn't necessarily do it. Dr. Pain still looks bad, because the picture is taller and has the performer template. Almost any page with a template gets pushed down, no matter how short. Anyway, whenever Danny gets back, we'll see what the timeline for whatever further change is coming. -- Andrew Leal (talk) 22:38, 27 June 2008 (UTC)
Hey, even with the ad-related chaos, it's great to see that we've made it to another milestone -- 17,000 articles today! Congratulations to us, and thanks as always to the contributors who make the wiki bigger and better every day. -- Danny (talk) 00:18, 21 June 2008 (UTC)
Okay, so I'm gonna to get to the heart of things -- the biggest thing we have to fix now that we're using New Monaco.
I'm talking, obviously, about the colors.
Having the top bar and the edit bar match looked great when they were separated. Now it's just green on green, and it looks yucky. Anybody have ideas on how to switch the colors up a little, so it doesn't look so dark up top? -- Danny (talk) 01:03, 19 June 2008 (UTC)
- Can we also eliminate the overlap of the top bar with the edit bar? Or am I the only one who thinks it looks weird? -- Peter (talk) 03:20, 19 June 2008 (UTC)
- I tried out one possibility, although it doesn't look quite right because the image file isn't the right size. It's using the curtains image from Entertainment.wikia. In order to really use that properly, the image would have to be resized so there isn't that weird gray space right under the Wikia logo -- the curtains would go down to where the logo starts. I know that makes it kind of Muppet-Show focused, but I think it would look cool. -- Danny (talk) 18:33, 19 June 2008 (UTC)
There are a bunch of different types of pages that we need to figure out how to re-format, but it looks like the hot-button one to figure out first is the episode pages. We've been talking about the TMS pages, but whatever we decide is also going to affect the pages on Fraggle Rock, Dinosaurs, Bear, Farscape, etc. So it's a good idea for us to figure out what to do with these pages.
I'll try to summarize the different approaches that people have suggested so far:
- Episode 308: Loretta Lynn/sandbox -- Make a header infobox across the top, which will fit next to the 300x250 ad. (I didn't do it quite right on this sandbox page, because I don't know how to make that box not be fixed-width to 100% of the page.) Make this fit with a 300x250, to avoid overusing the table/banner loophole.
- Episode 307: Alice Cooper -- Move pictures and infobox to the left, and make them 250px wide.
- Episode 224: Cloris Leachman -- Move the information from an infobox into the text, under a separate heading.
- Episode 304: Gilda Radner -- Swap the infobox and the top picture, so that a picture appears above the fold.
At the moment, I think my #1 preference is the Loretta Lynn method, with the Gilda Radner method at #2. The Cloris Leachman method is kind of sad, and it'll de-value writer and director credits on Fraggle episodes.
I think the Alice Cooper method is okay, but it creates some weird spacing issues further down the page -- on my screen, the picture of Alice and the monsters makes the bullet-list of "Songs and Sketches" wrap in a weird way.
- After I posted yesterday, I surfed around a little more and also started thinking about using tables for Muppet Show episode pages like we do on Sesame Street episodes. I actually think that this method could work pretty well here. We could still do a detailed description of the episode at the top of the page and replace Songs/Sketches into a Table, similar to what you did with Episode 223: John Cleese.
- For Muppet Show episodes, I think it might be best to lose the infobox entirely, since the only really key information it provides is that it's an episode of the Muppet Show. The guest star is in the article title, and I agree that the release dates and video information can be relocated further down the page. So I'd prefer some mix of Loretta Lynn and John Cleese, but without an infobox at all. And this should work whether we move to tables or not. And if the layout breaks the tables (if we do go that way), we can opt to implement the 728x90 "push" on an episode-by-episode basis. Episodes with a lot of intro copy like Alice Cooper probably won't need it, but episodes with not so much intro copy like Liberace might need it in the interim until longer intro copy can be written, wherever possible.
- Now, this won't work for something much more plot-oriented like Fraggle Rock episodes, where the infobox also has more key information like writer and director. For these, I'd agree that the Loretta Lynn method would work best.
- The question is do we want to be 100% consistent across all types of Episode pages? It seems to me that the Sesame Street episode pages are fine as-is. -- Peter (talk) 15:35, 18 June 2008 (UTC)
- I like Loretta Lynn, but instead of putting the words "The Muppet Show" (or correspondingly Fraggle Rock or whatever) what if we put the show's logo instead? I made a stab at this with Episode_309:_Liberace/Sandbox although I think the actual logo in question could be made better. This puts an image up top (even if it's the same image tons of times) and leaves the rest of the page in good alignment with itself. -- Wendy (talk) 23:41, 18 June 2008 (UTC)
- I tried a version of the Alice Cooper episode with a table but with no infobox here: Episode 307: Alice Cooper/Sandbox. I've moved the production/air dates and video release information below. I think it looks pretty good, and the top half of the image is above the fold, but it may not work as well when we don't have as much body copy in the first section. So a top-left infobox might be best. Personally, I prefer the Loretta Lynn/Sandbox infobox to the Harry Belafonte/Sandbox and Liberace/Sandbox versions because it's the shortest. The other two push the main copy down quite a bit. And it feels like the 728x90 on Harry Belafonte is self-defeating, since it pushes the image down even further than the 300x250 would if the infobox was top-left instead of centered all the way across the top. Thoughts? -- Peter (talk) 15:36, 19 June 2008 (UTC)
- I did another version of Alice Cooper here: Episode_307:_Alice_Cooper/Sandbox2. This one has the Loretta Lynn-stlye infobox on the top-left. Can someone confirm for me whether, on a screen with higher resolution, you get copy between the infobox and the 300x250 banner ad? -- Peter (talk) 15:46, 19 June 2008 (UTC)
images above the fold
Before we continue, I want to be sure that a majority of contributors feel that having images above the fold is important to them. To be clear on what that means, "the fold" refers to the area traditionally on newspapers that gets the best real estate spot because it's the first thing a reader sees without having to unfold the paper. For websites, it's whatever you see on your screen before you have to start scrolling. The new ad placement forces the images we've been placing on our articles, mostly below the fold.
So for example, a reader who finds our Paula Abdul page when searching Google, decides to click the link because they're curious as to what she has to do with Muppets. The page loads and all they see is an ad, some text (which accumulates to a poor man's version of her Wikipedia article), and maybe the top of her hair. The interesting part of the picture where she's posing with Elmo and Zoe is below the fold. They get bored and click 'back' on their browser without ever having seen her illustrious career with the Muppets.
Judging by the conversation below, Danny, Andrew and I have expressed an interest in trying to do something to remedy this. I don't know if it means aligning some things on the left, everything on the left, resizing images, designing a hard-coded column, wrapping existing images around the adspace, designing a different header, or Frog knows what. There are a number of solutions available to us by editing the CSS stylesheets; in most cases, 17,000 pages won't have to be edited by users or bots. We're a pretty creative bunch, and I'll bet we can come up with something. Play around in Photoshop and post mock-ups, or fiddle with some code in your personal CSS files (User:Username/monaco.css) or Sandbox space (User:Username/sandbox). I'm interested in hearing from everyone. —Scott (talk) 01:52, 18 June 2008 (UTC)
- In general -- yes, I'd like to have images above the fold. We've worked really hard to add lots of pictures to pages, and it's part of what makes our wiki great.
- One thing to think about is that on some pages (like the TMS episode pages), we've decided to have the infobox above the picture; that's why the picture is getting pushed down. If the choice is to have an infobox above the fold or a picture, then I'd rather swap them and have the picture on the top.
- Still, there's lots of options that we're still working out. -- Danny (talk) 04:52, 18 June 2008 (UTC)
- Peformer templates get pushed down too. The ads pushing the images down is kind of annoying. I think it's more attracitve to have the picture as one of the first things you see. More appealing that way.--Justin 23:11, 18 June 2008 (UTC)
- If we're going to move them to the left, then I'd rather see the performer box on top than try to figure out where we're putting it now and keeping it consistent (and in most character cases, those boxes aren't much of a problem and really help to orient the visitor and it's often one of the first things they look for). Books all have pictures on top, but episodes and songs don't, so I can see switching those but keeping both together on the same side (especially since all three templates, like the movie one or the always below designer one, are more technical: dates, writers, publishers, etc; stuff that's good to have, necessary even, but not of prime interest to more casual Muppet fans or visitors as much as double checking who's playing Grover now, say, or trying to remember who performed The World's Oldest Fraggle and so on). -- Andrew Leal (talk) 23:26, 18 June 2008 (UTC)
- I think it's less important to have an image above the fold and more important to have a well-designed page that looks good. If that can be accomplished with the image, then that's great, but if a better design pushes the image down then I think that's ok too. Images/infoboxes on the left with text next to them leave things remarkably squished looking on smaller screens (1024x768). I think if there's a strong push to have them on the left then the text needs to start below them. -- Wendy (talk) 23:49, 18 June 2008 (UTC)
- If the text could be placed below, I'd favor it; it would be almost ideal, in fact, so you see image and/or box on top left, ad on top right, and can easily move down to read. I'd have to see it in action, but it sounds like it would work, and further mitigate "ad mixing directly with content" issues. This is, again, if it's technically possible, and probably considering the types of pages, so with a stub with an image, only one or two sentences, left may work just as well or better; I wonder, would a "clear all" thing accomplish that? As is, the text squish to the left is much the same as in a newspaper, so it doesn't bother me in any of the screengrabs or the Kelly Ripa page, but small screens shouldn't have to suffer if possible and potential weird "wrapping" is unquestionably an issue. -- Andrew Leal (talk) 00:04, 19 June 2008 (UTC)
I've been going through all of our problem reports and it appears that everything that's breaking is directly related to the side of the screen we've been accustomed to aligning things here on the wiki for two and a half years. With the introduction of the ad space appearing at the top right of every page, all of our images and templates are being pushed down, sometimes below the fold. There's been some discussion about shifting some of that stuff to the left. I've been playing around with page previews to see how different types of pages would look, and it's a mixed bag. It's creating an uneven balance that doesn't make sense.
What if we shifted everything to the left? Kermit's page would have all the images aligned to the left, with his performer and design boxes on the left just above and below it like they are now. I've edited my personal css file to see, in real time (not merely in mock-ups), what a bunch of differenet pages would look like, and it's working remarkably well. The procedure would be very simple; the code is already done. This could solve our entire list below. What do folks think? —Scott (talk) 18:34, 17 June 2008 (UTC)
- I think it's worth trying out... Can you post some screenshots of different pages? What happens if there's a smaller browser -- does the text get all squished between the picture and the ad? -- Danny (talk) 18:36, 17 June 2008 (UTC)
- There would probably still be exceptions, but in general, that does make a difference. The Kelly Ripa screengrab you posted looks perfect. The books would still be an issue, though, at least those without any text at all, so a sentence or even a repetition of the info in the box or a "See also" could help. The biggest issue is that it's an enormous manual task to fix over 15,000 pages. You're our expert, Scott. Could bots be set up to help with this? -- Andrew Leal (talk) 18:40, 17 June 2008 (UTC)
- I get that images on the left isn't the status quo for designing web pages, but I think having an image visible on the page when it first loads is more important than just seeing the ad. As for 300px images squishing more, we could always shrink our default down to 250px. Again, wouldn't be a big task for anyone but me to worry about. —Scott (talk) 18:57, 17 June 2008 (UTC)
- I just changed the width of the picture on Episode 307: Alice Cooper to 250px and I get one extra word per line between the image and the banner ad. Having the topmost part of the article be an average of 4.5 words per line for 16 lines on a 1024x768 screen resolution just doesn't seem viable to me. -- Peter (talk) 19:02, 17 June 2008 (UTC)
- Here's the Alice Cooper episode page with everything aligned to the left on the standard 1024x768 screen ratio. —Scott (talk) 19:31, 17 June 2008 (UTC)
- Now you only have 14 lines of 4.5 words per line - so two fewer than if the infobox is on the right. It's still a poor layout, as your eye is being pulled in three or four directions at the top of the page, and it will only be worse once the real, animated ads start running.
- But the big problem is below the fold. Because there's no way to figure out where the bottom image will end, you get a weird wrapping issue here. And because we can't design pages to every browser width, we'll get issues like this on many page if we make a universal change to having all images and infoboxes on the left.
- Personally, I don't think having an image above the fold is important enough to justify either of these changes. -- Peter (talk) 19:52, 17 June 2008 (UTC)
- I do. Especially when there's little to no text at all. For example, this is what a page with little to no text looks like in 1024x768. —Scott (talk) 20:05, 17 June 2008 (UTC)
- The adjusted Cooper screengrab looks fine to me, under the circs, and I agree with Scott about the importance of above the fold images. And the alternative is much much worse, to me. I don't have any problem reading it because it resembles a newspaper layout, really. And as stands, there's major browser issues right now with the spacing, so it's better to fiddle with and identify the issues then not to try it. I really hated the way everything looked this morning on *every* page. Now? Still an adjustment, but one that feels like a better compromise to me, between revenue needs and aesthetics. In the case of something like the Cooper page (not necessarily the page itsel), if possible, it might be useful to find a way to place the image *right*, but next to the ad, not below it. That's just another possibility for fiddling, and won't work as well with episodes or other big boxes, but might be a useful alternative to the left move on, say, Miss Piggy and other major character pages. I have no idea how it will actually *look*, mind, but again, any of the things discussed so far beats the "Box on top of everything" look as far as I'm concerned. -- Andrew 22:25, 17 June 2008 (UTC)
- I agree that it's a major issue on book pages like that, but our book pages have, as a rule, always looked lousy and empty. Adding text to those is a completely separate endeavor. Maybe those are one of the cases where we force a 728x90 banner, but I think that the Episode 307: Alice Cooper page looked better before we moved everything to the left. -- Peter (talk) 21:19, 17 June 2008 (UTC)
- I think it looks better without an ad on it at all. But that's not within our power to change. However, we have the ability to customize the way our pages are seen, which is something we've been doing since the wiki started. There have been obstacles to get around every step of the way, this is just one with a little more work involved. We need ads on the wiki to survive. Without them: no Muppet Wiki. I'd like for us to work together and figure out the best way for us to live with these changes. There won't be any perfect solutions, but I'd like to hear your suggestions as to how we can adapt. —Scott (talk) 22:36, 17 June 2008 (UTC)
- Andrew: I'm glad you're feeling a little better about things. This is day one of this new ad format. My goal for day one is for it to start out as "broken" and end up as "not broken". Everything from day two on is about actually making it look good. As my boss keeps reminding me, this is a marathon and not a sprint. -- Danny (talk) 23:25, 17 June 2008 (UTC)
- I agree with everything you've said, Scott, but I think that we are already working towards solutions. My concern is that the Wiki has a variety of pages that the new 300x250 banner ads affect in different ways, and I don't think that one universal solution will apply to them all.
- I still think that having the image on the top left on a page like episode 307 isn't a good idea. Before, there were two main things at the top of the page to focus on - the article copy and the infobox. If we leave the images and infoboxes on the right side of this page, we do sacrifice an above-the-fold image, but we still have only two things to look at - the article copy and the banner ad. But if we move the images and infoboxes to the left, there will be three points of focus - image (or infobox, whichever we put on top), article copy, and banner ad, not to mention the left-hand nav. I think it makes the page very unfocused and difficult for a newcomer to read.
- That said, others appear to place a higher importance on images above the fold. I disagree, but fine. Still, the second image on that page is breaking the layout of the below-the-fold section for me, which is the problem with left-aligning images and infoboxes. As Image:Cooperleft2.jpg shows above, the Songs/Sketches heading and the first bullet are pushed to the right of the images, but the rest of the bullets are at the far left, which screws up the look and feel of the list.
- My suggestion on this page would be to right-align the second image below the Songs/Sketches heading, which fixes the list problem.
- But when we try to apply that kind of solution to other pages in the Muppet Show Episodes category, the same change doesn't work everywhere. Take episode 309, for example, which has much shorter intro copy. This squeezes the Songs/Sketches headline and first bullet between the image and banner ad (see Image:Liberace1.jpg below), which is a much more difficult read than the Alice Cooper episode page. Plus, if you keep the second image on the left, it breaks up the Cast section (see Image:Liberace2.jpg below). And if you move the second image to the Notes section, it breaks the whole page (see Image:Liberace3.jpg below).
- So, what I'm saying is there does not appear to be a universal solution even for Muppet Show Episodes pages. I tried putting the infobox on the left and keeping the images on the right. This brought the images up a little so you could see the top portion of the image, but it also had a bizarre effect on the page (see Image:Liberace4.jpg below).
- So I speak honestly when I say that I think, on pages where we have a lot of copy and need to keep a 300x250 banner, the page looks better with the images and infoboxes right-aligned. If we want to see more image above the fold, bump the top one up over the infobox. On most Wikipedia pages, the image is above the infobox anyway. In my opinion, this is one of the best way to keep the look and feel of the episode pages consistent across the board.
- Another, perhaps more frowned-upon option, would be to force the 728x90 banners on some pages like these. The change has already been implemented on the Sesame Street Episode template, and there are more non-table Sesame Street Episode pages that don't really need the 728x90 push than there are Muppet Show Episode pages in total.
- Moving on to pages where we don't have a lot of copy, that's a completely separate issue that I haven't really started to think about yet. Maybe on those Books pages or Character stubs, moving the infoboxes or images to the left would work better. I have to play around with it a little more. But then again, we may need a separate approach for Books that have little to no copy than we'll need for Books that have sufficient copy. For example, I tried moving the image and infobox on Kermit, Save the Swamp! to the left, and it broke up the Characters list.
- Anyway, I know that sounds like it leaves us back where we started, but what I'm really saying is that we should approach solutions cautiously and individually before making any sweeping changes that will have unintended effects that we have to go back and fix again later. -- Peter (talk) 00:42, 18 June 2008 (UTC)
- One thing that we could do is think about a total redesign of the pages. I added a table format to Episode 223: John Cleese about a year ago... and I keep meaning to go and do that with some more episodes. So one option would be to rethink the TMS episode pages as something more like what we're doing with the Sesame pages. -- Danny (talk) 04:49, 18 June 2008 (UTC)
- I just made a change to Episode 224: Cloris Leachman as another possibility. I took out the infobox entirely, putting that information into a heading that I'm calling "The Facts". (Not a great phrase. We could think of a better one.) Now that I'm looking at it, the information that's in that box isn't really that interesting -- production dates, and air dates that we're not really certain of. The video release is the kind of thing that we put in a separate heading on song pages, and once all five seasons are out on DVD, that bit isn't going to be very interesting anyway.
Pages with problems
Link to pages that have problems with the new ad format. Next to the link, describe the problem that you're seeing, and possible solutions.
- Bear Loves Bedtime! -- On short book pages, the cover and infobox get pushed down a lot. We could float one of those to the left -- either the book cover or the infobox. What do folks think? -- Danny (talk) 14:39, 17 June 2008 (UTC)
- Kermit and Robin's Scary Story and tons of other book pages -- Same as the Bear Loves Bedtime issue, but much worse because there's no text at all, with the image and box providing all of the information. The majority of our book pages are like that. -- Andrew Leal (talk) 15:33, 17 June 2008 (UTC)
- We're going to have to make some decisions about how to deal with all the right-floated stuff. It's been our format to float everything to the right, and it's served us well, but now we have to rethink.
- We could change Template:Book so that the box floats left instead of right. That wouldn't take any time at all, and would fix all those pages automatically. If we decide to move the book covers to the left, then that's tougher -- I think we'd have to do it all by hand.
- I don't think so. For just about all of these issues, as far as images are concerned (not boxes), without re-jiggering on Wikia's end, we have three basic options: move to the left, move to a gallery below (which on most pages now, while reducing to a thumbnail, would actually make it much easier to locate the image relevant to the topic), or just leave as is. For boxes, in many cases, we might have to just jettison them and revert back to the old methods (won't work for songs, episodes, books, movies, DVDs, etc., but doable if extremely unfortunate on character pages). Right now, it's messed up every page on the Wiki except for the cases where the banners are used (which effectively push everything down evenly and so don't hurt the aesthetic at all, really), stubs with no images, other "short pages" which somehow escape the issue, and pages like Episode 106: Elephant & Hunting Dog (no images, very short sentences, episode box includes nothing more than the show title), where the ad doesn't affect the reading/editing experience much at all (again, that would change when/if/as such pages are improved, so it offers an incentive *not* to do so and to remove any images which are used as placeholders, like book covers on non-book pages or a character on a puppeteer's page when we have no photo). -- Andrew Leal (talk) 18:24, 17 June 2008 (UTC)
- Here's an example, a screengrab I took of Agnieszka Mazurek. Since we haven't found a photo of her, a picture of Beata was added just to pretty the page. With the ad, it uglies it instead, so I removed it. That makes the page register as the stub it is (since it's based on page height, apparently, not size or number of words etc.) Not the ideal option and exactly what I worried about, but when it can be done (which is only in these cases), it helps. For other pages, even major ones, galleries are a better option (not best, but working with what we have...) Miranda Richardson generates a banner because there's no top image, and even Peter Ustinov and Steven Mackintosh do likwise, since there's one top image but a gallery below. Pages with longer text, especially cast lists, and a gallery at the bottom, like Die Muppet Show, still get the pushing box; given the original page layout, that article is again one of the few exceptions where things just manage to even out and the aesthetic/layour isn't hurt. -- Andrew Leal (talk) 18:32, 17 June 2008 (UTC)
Short pages with a picture or infobox
- David Healy Ben Burtt, Kelly Ripa, countless other people pages -- One issue, which probably can't be resolved, is that now the vast majority of people pages, unless they're really long, now have the subject's image completely pushed down below. It's much worse if the original image is smaller than 300px (which in some cases can't be helped); a few of the countless affected pages are On a page formatted like Frank Oz, with a long table of contents, the push doesn't matter, and actually helps line up the image with the main part of the article, but for thousands of pages, that's just not possible. So either we begin moving images to the left after years of telling people to do it on the right, or move the picture, which can no longer take center place anyway, to a gallery below (smaller, but it will actually get more attention that way). -- Andrew Leal (talk) 15:19, 17 June 2008 (UTC)
- Mr. Wolf and other pages which are stubs in length, but have a picture and/or box. Same issue as the people pages. In a case like Celia Skunk, where the image doesn't even show the subject, or a few illustrator/author pages which just include covers of books they worked on (and in many cases, anthologies whose covers don't reflect their specific contributions anyway), the best solution is to yank the picture entirely (or for illustrators, turn into a gallery). And an inversion, which pleases me at the moment but probably not Wikia in terms of what's being tracked, a page like Pa Otter, where image and text line up almost perfectly, right now receives no ad of any kind whatsoever. It's the stubs with images that suffer. Also doesn't always affect pages of a certain length without a box template, such as songs. See Going to Katroo versus Only Mrs. Zabarelli Knows. -- Andrew Leal (talk) 15:19, 17 June 2008 (UTC)
- Episode pages, like Episode 101: The Big Squeak -- Like people, any page where a paragraph, even a fairly detailed one, is the only text has everything else pushed way below. It tends to affect most pages except Sesame Street and The Muppet Show (which have long lists of notes and character pages and so on) and other short pages. Expansion can help, but again, in many cases, it's just not possible, so either move to the left, or make the picture a gallery and keep the box where it is. -- Andrew Leal (talk) 15:19, 17 June 2008 (UTC)
Pictures and tables
- Gorilla Suits -- The table pages aren't all fine either. In this case, having an image at the top, substantial text, and then the table squishes the table. Easiest solution is a negative, so to speak: just remove those images or shove them into the gallery (in a case like this, it was added for illustration and a visible image at first glance, but is basically a different angle of the Muppet Show entry. -- Andrew Leal (talk) 15:19, 17 June 2008 (UTC)
- This one actually is a new version of an old problem -- having a picture at the top and a table underneath means that they run into each other sometimes. On Gorilla Suits, that wasn't a problem, because we had enough text to support the picture. Now we've got two "pictures". The way that we've dealt with that in the past is to put a <br clear="all"> tag above the table, so it clears the picture before the table starts. -- Danny (talk) 18:05, 17 June 2008 (UTC)
IE spacing issues
- Kermit the Frog -- This is just one of many, but the new ad change exacerbates the apparently unfixable problem in IE browsers of spacing issues. A few pages, I'd rearranged the placement to resolve that when possible (since Scott's noted that putting all or many images at the top messes up edit links). Now, that's no longer much of an option, so it's a matter of moving more images to the top or omitting some on image heavy pages, where they'll drag well below the bottom, or gallery-izing, and so on. Muppet Eyes also looks terrible at the moment (another page with many non-300px sized images), and so on. The Muppet Movie, which already had major issues because of multiple long posters placed under headers, looks especially bad now, as does The Muppet Christmas Carol and nearly every other movie page (for Carol, the gap is approximately 430 pixels long). -- Andrew Leal (talk) 15:19, 17 June 2008 (UTC)
- Sesame Street Video Player -- another huge spacing issue, because the image and box are at the top and the list below. Solution: Just move the picture below the second heading (which will work in general on pages with boxes and short lead text followed by a long body as long as only one or possibly two images are concerned). -- Andrew Leal (talk) 15:33, 17 June 2008 (UTC)
- I'm using IE7, and every machine I've encountered that uses IE (at libraries, on other people's machines, university offices, etc.) has the same problem. I've brought it up periodically over the last two years but either nothing could be done (since some if it is issues with IE in general, if I recall right) or it was a low priority. I've had to live with it or try to fix pages where I could, but this ruins everything. See the gallery below. The longer the image, the worse the problem, unless images are stacked on top of each other. In other words, a poster or tall character pic placed below the heading of a short paragraph will push down text beneath that image, and continue the issue if it's still longer than the text area, pushing down any pictures that are below the header of the next paragraph and on and on, creating multiple spaces on many pages. The ads make it even worse, obviously affecting some more than others. Some of the pages below still had spacing issues, ranging from minor to intermediate, as did several others (and new ones were created all the time). A good few, however, by fixing image placement or expanding paragraphs or whatever, were perfectly balanced through yesterday, like Batman and Labyrinth, but are now out of whack. Elmo looks particularly bad, and this affects most movie pages, and several hundred (possibly even a few thousand) pages. -- Andrew Leal (talk) 18:18, 17 June 2008 (UTC)
- Okay, this is perfect. Thank you. This is the perfect time for this to get fixed. I'll show this to Christian in a few minutes, and I'll get back to you with what I know. I'll try to get this fixed as soon as I possibly can. Don't worry about going around and changing pages yet. -- Danny (talk) 18:23, 17 June 2008 (UTC)
- Hi, just to check in about this. There's a list of bugs related to New Monaco that the tech folks are working on right now. This problem is on that list. I'm not pestering any tech people today -- they've been working really hard the last couple days -- but I'll start pestering soon. This bug may not get fixed before the end of the week -- if it isn't, then I'm going to push 'em to fix it early next week. Andrew, please let me know if you see any change with it, okay? I promise I won't leave this broken forever.
Ads Breaking Pages
I'm seeing ads breaking the layouts of several pages, whether they're squishing tables or making short pages too long. Can we discuss a procedure for making note of these situations? I'd rather not use the talk pages, which I think should be left for actual content discussions. Should we create a new "Attention" template box for this kind of issue? I'd like to make it as simple as possible so that we're not doing too much extra work to deal with this change.
- I think the easiest way to figure stuff out is to list all the problems here on Current events. I'll archive the rest of the discussions, so that we can use this page as the to-do list for fixing problems. I'm going to be working on this stuff site-wide all day, but Muppet Wiki is my #1, so bring on the questions. Scott and I should both be around to fix stuff today. -- Danny (talk) 14:15, 17 June 2008 (UTC)
- Making a note of what pages that are broken, especially the short articles don't seem worth while to me since theres alot of them. Apparently theres a feature that prevents the new ad box to appear on some short pages. From what I learned is it's measured on the hight of the article, now the main problem with this is that many of the pictures are making the system think it's a big article, since they are making the article higher. Danny is it possible that the measurement is changed so it's the text that decides if there should be a ad box or not, instead of the article hight ? I've been thinking we could go around it entirely by converting the smaller articles into tables and thereby prevent the box on the right and get the banner instead. Henrik (talk) 14:18, 17 June 2008 (UTC)
- I'm not sure how the height is calculated -- whether it's text height or pictures or what. I think it may actually be paying attention to your browser window and screen resolution as well -- I'll have to test that out. We'll need to experiment a little to see what works best.
- There's one trick which I just added to Template:Episodesesame which forces a banner ad on the page instead of a box ad. It's possible for us to use that trick, but we should use it sparingly -- if every big wiki uses a bot to put that on every page, then it means Wikia doesn't get any 300x250 ad inventory. In the worst-case scenario, then the collision-detection gets disabled, which would be really bad. But we can make some reasonable choices about which pages would really suffer with a box ad.
- I just tried to logout and I discovered that there seems to be many problems with IE7 compared to Firefox. The google adds background color in firefox are white but black in IE7. And for instance on the Sesame Street episode guides theres a top banner on Firefox but not on IE7 it has the ad box (this was before Danny's fix). Henrik (talk) 14:44, 17 June 2008 (UTC)
- Height is definitely calculated by total height, including images and infoboxes, but with no regard whatsoever to text. See pretty much anything in our Books category. The vast majority of our books pages appear to be just images and infoboxes, with minimal text where there is any at all. They looked a little silly before, but now we have a lot of pages with just a right hand column of 300x250 ad, image, and infobox. -- Peter (talk) 15:22, 17 June 2008 (UTC)
- It should also be noted that many (all?) of our infoboxes appear to be a little wider than 300px, which makes them look odd against directly below the 300x250 banners. Also, while our images are for the most part 300px wide, they appear wider than that because of the frame around them. Not that it's painfully unsightly, but it should be addressed. -- Peter (talk) 17:43, 17 June 2008 (UTC)
- I've also been surfing over at Wookiepedia to see how the change has affected their site, and almost all of their right-hand-channel templates seem to naturally populate their pages with a 728x90 banner, whereas almost none of ours do. What's different about their templates? -- Peter (talk) 18:03, 17 June 2008 (UTC)
- Looks like one of the users added the empty-table trick on all of the infoboxes. Like I said above, that's possible to do, but we should use it sparingly. It's a loophole that nobody's planning to close right now, but if it's used abusively, then it could be closed. -- Danny (talk) 18:14, 17 June 2008 (UTC)