Wikipedia talk:WikiProject Usability/Main Page/Draft/Talk archive for Draft 3

Edits

Things I just edited.. for those of you working on this project.

• Some boxes had padding, others did not. The ones without padding (text hit the borders, or got close) I added 8px padding. Looks pretty uniform.
• Added a box around the sister projects.. + #ffffff background.
• Made languages box have a #ffffff background. The rest of the page did and the slight aquamarine white color made the rest of the page look misplaced. Uniform white looks very nice.
• I did not change the border color of the sister project box.. it is the same as the language box. It should probably be changed, but I did not know what to. Also, the background colors of the sister and language boxes could certainly be changed.. I more or less defaulted them to white so I didn't mess with the page's styling..
• The source of the FPC template cannot be viewed or I would make one that came sans formatting. If anyone is an administrator and would like to send me the wiki source code, I can make one that will work with the page..

If you need any more help or wish to reprimand me for making stupid edits, feel free to let me know. I'm good with HTML and I can help wherever. drumguy⁸⁸⁰⁰ - speak? 17:58, 5 January 2006 (UTC)

No reprimands. You were bold: that's good! Though one of the biggest critiques in feedback from users is that there is too much white space -- they like the gaps between the boxes small. Other than the column of white down the middle, everything else you did appears to be right on the mark! The page looks a lot crisper than it did. Thanks! As for the colors for the sisters and langs, we should research the standard first, and embellish it a little. Go for it! 19:49, 5 January 2006 (UTC)

You can generally view the sourcecode of protected pages, so I'm not sure why you were having trouble there. Also, why do we need Template:FPC? I'm not sure why you mentioned this template. Go for it! 19:49, 5 January 2006 (UTC)

If you carefully trace the transclusions back to the original source, you'll find that they are subpages, one for each day of the year. Unfortunately, the formmatting is in every single one of them. According to Wikipedia:Picture of the day: "The picture of the day is an image which is dynamically updated each day with an image from Wikipedia:Featured pictures." The problem I keep running into is that the centralized source calls pictures from those 365 subpages, each with the border formatting in them. If I'm mistaken, or have missed something, please point it out to me.

I've posted the template source below in a reply to another user. Go for it! 19:49, 5 January 2006 (UTC)

Also there's a very slight browser compatability "problem".. Although it isn't really a problem. Comparing the page on Firefox, IE, and Opera.. you'll see that in Opera and Firefox, the different sections have some padding between them, but on IE, the padding is about 1 pixel. Not sure why, not sure how to fix.. I know IE has some odd border, margin, and padding interpretations in terms of what the added pixels (as borders margins or paddings) displace and in what direction. drumguy⁸⁸⁰⁰ - speak? 18:04, 5 January 2006 (UTC)

We'll have to fix this in a future redesign. The Portals for Cricket and Philosophy solve this problem, so I'm told. Go for it! 19:49, 5 January 2006 (UTC)

Yes, there is something else you can help us with. Is there a way to make the bottom edges of columns with multiple boxes line up? Go for it! 19:49, 5 January 2006 (UTC)

Well that's difficult to answer. Yes there is, but there will always be a few constraints. Your main constraint in this instance is that one column will *always* have to be longer than the other. Pending that this is okay, I've set up an example.. [1]. This example works only with two columns.. if three or more are required, it gets, unfortunately, trickier. How this one example works is that in the source, you must input the second column's data first. It has the "float" attribute set to "right", so that it will always sit up against the right edge of the master div. Its "position" attribute is set to "absolute" so that it will not interfere with the other column's placement. Lastly, you declare "bottom: 0px; right: 0px;" so that it rides 0px from the right hand side of the div and 0px from the bottom, or, in other words, flush against the bottom-right corner. The first column (the one that always must be longer is set to "position: relative;" so that the master div will fit to that height and allow both columns to display fully. You do not set it to "bottom: 0px; left: 0px;" because both would be redundant since objects flow LtoR and the first column is as long as its going to get.. I sincerely hope you do not want to make the left column longer (or let them both be of dynamic lengths) because the programming got too hairy for me and I gave up for now.. but if its needed, I can keep looking.. I'm sure there's a solution. If you require 3 or more columns, tell me how many, and I can at least even try with that. Unfortunately you cannot dynamically call another attribute's height with document.getElementById('id').style.height or programming would be a lot easier. Maybe they'll include an attribute that makes this easier in the next version of CSS. drumguy⁸⁸⁰⁰ - speak? 06:08, 6 January 2006 (UTC)

Pic of the day

I highly suggest you switch {{POTD}} with {{Pic of the day}}. The proportions of {{Pic of the day}} so much better fit the space on the Main page. I tried this switch, in preview, with the Draft, and it looks so much better. Secondly, (not the best solution) but it just happened to make the bottom of the boxes line up nearly perfectly in my browser. Though, I tried resizing my browser to see what would happen. I discovered another major problem with the design (using {{Pic of the day}}). The left-column <div> boxes (Today's featured article, DYK) resized accordingly with my browser window. The right-column (Featured picture, and ITN), didn't resize accordingly. This is because of how {{Pic of the day}} is set-up. It would instead need to move the text below the pic, when the browser is resized. Tom had implemented something like this in the earlier draft, with the right-hand browse bar. —--Aude (talk | contribs) 18:24, 5 January 2006 (UTC)

I don't think Tom's markup had any live feeds. It was all mock-up. Though his draft was a damn good starting point -- I wouldn't have known where to begin without it. The problem we're having now stems from the way POTD is set up. Each day's pic has it's own formatting. Trace through the template source, and you'll see what I mean. If you find a centralized source from which we can generate the daily pic without the border, and with the text in columnar fashion, please let me know. Meanwhile, let's all try to find someone who is familiar with the setup over there at POTD. Thanks for your input. We're getting close! Go for it! 19:16, 5 January 2006 (UTC)

• Good news: the pages look exactly the same in Firefox and IE, XP SP2 at 1280x1024 on a 17" TFT. Bad news: That means they have the same flaws as well. The POTD has a lot of space to the right, between the integrated border and the Main Page module. To fix this I'm guessing we'd have to either completely revamp the POTD, or make a special version for the main page, although I think I may have found a fix. Will post back if it works.
  Secondly, there is a huge gap between the Did you know, and On this day, created by the size of the News box. I think (and from what I've seen a lot of people agree) that the News box has too many stories. If we fixed all the widths of these boxes, took the bottom two News stories out and stopped everything just randomly floating, then we could have the boxes properly lined up, with the minimum of white space and scrollbars. BUT - one of the concerns expressed is that we want to try and avoid tables at all costs. Could we use a system similar to Userboxes (and userbox lists) to align everything? —Vanderdecken∴∫ξφ 12:31, 6 January 2006 (UTC)
  • Right! I've got something. Look at sections 7 and 8 here. Especially where it says: <div style="float:right"> {{POTD|250px}} </div> Now that '|250px' parameter could be applied to the POTD frame somehow, but I don't know an awful lot about whichever script the Main Page is written in (with all the -|'s everywhere). —Vanderdecken∴∫ξφ 12:50, 6 January 2006 (UTC)

The talk page link you provided is very helpful, giving some more insight on how they do the POTD. I'm sure we can setup some script/template like they mention, for the POTD to fit in the main page. If the consensus likes the new design, at that point, we can get Solipsist to provide further guidance. This user seems to be the one handling the POTD duties most days. —--Aude (talk | contribs) 14:12, 6 January 2006 (UTC)

Div box alignment

I'm not sure of any ideal, elegant solution to getting the boxes to line up properly, with the current four boxes (ITN, POTD, FA, DYK). I think the best solution is to only use two boxes, as is done with the current main page. The two boxes would look better, and reduce the number of colors used in the design. —--Aude (talk | contribs) 18:27, 5 January 2006 (UTC)

Is there a way to overlap borders? If so, perhaps we can put the second box "inside" the one above it? Go for it! 19:17, 5 January 2006 (UTC)

While <div> boxes are great, and tables were never intended for layout purposes, I think the best solution is to just use a table with two columns: (1) FA and DYK (or On this day) (2) ITN and POTD. Make each of the two columns use just one color, as is currently done on the main page. That solution will take care of the box alignment problem, as well as the issue of just too many colors used in the draft design. So many colors really seems unprofessional to me. I have copied the draft design to User:Kmf164/Main_page_draft and for now, have switched the position of ITN and POTD (as suggested by many). I'll keep working on the tables/colors. —--Aude (talk | contribs) 00:36, 6 January 2006 (UTC)

Okay. Here's a solution (User:Kmf164/Main_page_draft) for the box alignment problem, the issue of too many colors, and the POTD issues.

As for the POTD issues, I have figured it out how it works. The POTD appears to be something that is manually created each day at Wikipedia:Picture of the day/January 6, 2006 or whatever the date is. Look at its history and you see that Solipsist created it, as well as created Wikipedia:POTD/January 6, 2006, which is the other template that is used. I have tweaked these and now have {{User:Kmf164/Pic of the day}}, which is a hybrid of both, with the longer caption beneath the pic. This fits best in the draft design, and I see no reason why whoever sets up the POTD, can't work with a third template.

I will look into creating an alternative to User:Kmf164/Main_page_draft, with the second search box that some people liked to see how it looks. —--Aude (talk | contribs) 00:56, 6 January 2006 (UTC)

That works quite well. Jasongetsdown 01:05, 6 January 2006 (UTC)

Added note - my draft design also puts the FA, On this day, and DYK all in the left column, rather than "On this day" below everything. —--Aude (talk | contribs) 01:07, 6 January 2006 (UTC)

ITN vs. POTD

I suggest putting in the news above pic of the day. I use the former more often and I'm sure most people do too. If they want to see the other ones they can scroll down, however, news should be right there. Anyone else agree? —Ilyanep (Talk) 21:20, 5 January 2006 (UTC)

Yes. ITN should be above the POTD. mdf 00:23, 6 January 2006 (UTC)

WP:RD and WP:HD

No linkage at all to help newcomers navigate to these newcomer friendly places? --hydnjo talk 21:34, 5 January 2006 (UTC)

Rentastrawberry's Idea

I think that the giant hole in the right side of the page needs to be taken out. What I would do is:

1. Put "Do you know" in the blank spot.
2. Put "On this day" where do you know is.
3. Extend the FAC description so that do you know and on this day end at the same spot.
4. Under that is where the "Wikipedia in other languages" section should start.

Tell me what you think. RENTASTRAWBERRY ^{FOR LET?} röck 23:29, 5 January 2006 (UTC)

Pastel Colored borders?

Eugh! :) How about a dark skin? —Ilyanep (Talk) 04:51, 6 January 2006 (UTC)

Um, I guess I'm in the minority, but I LIKE the pastels. Maybe make the coloration available as a skin option? Her Pegship 19:02, 6 January 2006 (UTC)

Colorations

The current English home page and the current proposition at User:Kmf164/Main_page_draft are both rather drab when compared to other languages... for example, the Italian homepage looks very nice. Their buttons at the top of all pages are rounded, too. I don't know why its necessary that the English page be quite so battleship gray and blah..? I personally like the proposed pastel colors. drumguy⁸⁸⁰⁰ - speak? 06:14, 6 January 2006 (UTC)

One thing to note, though.. I certainly do not like how the categories are displayed on the italian page. way too much room taken up there. drumguy⁸⁸⁰⁰ - speak? 06:16, 6 January 2006 (UTC)

I seriously dislike the Big Yellow Box up at the top. I think a nice pale gradient would look a lot better, e.g. like this. - Mark 08:20, 6 January 2006 (UTC)

The Italian job

Wow, I really like the Italian version too. Those particular icons are bright, smooth, but not large and obtrusive. If we want to change the "battleship-gray bureaucratic" look on the front page, but still keep it simple and dignified, maybe icons are the way to go. Her Pegship 16:03, 7 January 2006 (UTC)