Forum Graphics and Design

[SaraWolk]

@Jack-Waugh said in Forum Graphics and Design:

that have existed over time for the same topic area,

I like all those edits except the suggested change to "that have existed over time for the same topic area,"

I don't think it reads quite as well, and it doesn't reference that this is a continuation of the election science forum, which is a hat-tip to them for their contribution.

Re: the buttons. My point was to clear up the misunderstanding on the correct sizing. It's important that subtext like buttons not be larger than the actual heading. I think I sized it to be the same as the tagline.

[Jack Waugh]

@SaraWolk I think of the layout of the page as consisting of the header with the main body below the header. Our header will have the banner on top and the standard row of three buttons below the banner but still within the header. Some of these definitions are arbitrary, but you and I need a common idea of them so we can talk about the placement and size of the components and not misunderstand one another. Again, I am using the term "banner" for the dark ribbon above, which contains the logo and the cursive writing and the orange writing, and the term "header" to include the banner and the standard buttons.

I understand that you like to see the header a little bit wider than the main body. The above illustrates that relation and so does starvoting.us, which you cited as an example of a professional and trendy look. However, the picture above is not as wide as the max width in starvoting.us. Suppose a visitor makes her browser screen really wide. Then what should be the max width of the banner and the max width of the main-body text? Unless you say otherwise, I will treat the above example as the maximum. I think we should limit how far a reader has to scan back and forth while reading a paragraph. Otherwise, one gets lost. That is why newspapers are printed in columns. If the text were any wider than the above, I would want to go to two columns.

[Jack Waugh]

[SOLVED]

@Marylander, do you by any chance know CSS?

My media queries don't work when I tell Firefox to simulate a handheld Trojan horse.

I have:

@media not screen and (min-width: 561px) {
  .banner.of_darkness {font-size: 5.5vw}
  .wide-for-banner {display: none}
  .narrow-for-banner {display: inline}
}
@media only screen and (min-width: 561px) {
  .banner.of_darkness {font-size: 31px}
  .wide-for-banner {display: inline}
  .narrow-for-banner {display: none}
}

These work as I expect on my computer. When I narrow my browser screen past a certain width, the behavior switches as I commanded. But when I tell Firefox to simulate a handheld, the rendering makes a miniature copy of a very wide window. Any idea how to make the viewport-width detection work on handheld devices?

SOLUTION

@media (min-device-width: 561px) and (min-width: 561px) {...}

[SaraWolk]

@Jack-Waugh I don't know about fixing the code, but the widescreen margin spacing is looking better in your image.

I was picturing the buttons on the white background below the banner, partly because I made my mock up using the format you already have in the pink votingtheory.org page in the hopes that you could just plug in my images to the existing layout.

Creating the elements from scratch in the code is more professional, so whatever is easier for you and looks in proportion is fine with me. Whether the buttons are in the header or below it, I imagine it will look fine either way.

[Jack Waugh]

@SaraWolk Using the images would have saved me a great deal of time, and I know how to keep them in proportion. For almost every objection I can think of to doing that, I can also think of an answer to that objection. However, I still have a vague feeling that such a practice can come back and bite later. Also, building the looks with HTML helps me improve my skills.

"Whether the buttons are in the header or below it, I imagine it will look fine either way." Here, you have confused talk about definitions with talk about real things. But no problem; I have come to, I think, reasonable answers about the widths and margins.

[Jack Waugh]

@SaraWolk said in Forum Graphics and Design:

I like all those edits except the suggested change to "that have existed over time for the same topic area,"

Where's my text cursor? It disappeared.

Well, the main thing that bugs me about "The next generation in a series of election science forums, we . . ." is the "we". Who are we? Are we a group of people who are doing this? As a group of people, we're not a generation. Also, the plural of "forum" is "fora", and "election science forums" means election fora that are also science fora; we want "election-science fora" or "fora on election science" or "fora on the science of elections."

In building this, the next generation in a series of
election-science
fora, we strive to cultivate a space where ideas can
cross-pollinate and activists, experts, and everyday
people can connect, share, and learn.

[Jack Waugh]

I think I have pretty good success at realizing the visual design and now I am fiddling with some details about the behavior that happens when one presses a button. Most people would just make those links, which would be trivial, but I am experimenting with an ability to navigate among some pages without causing the browser to refresh. Arguably, such navigation is not that valuable a feature for this application, but I am trying to build techniques for future work. I expect to front the design on our real home page in mere hours.

[SaraWolk]

We= the Forum council and community. It's inclusive.
Fora = argh! I don't think this is a word that is known well enough to be on our splash page. At worst people won't understand, or will find the sentence pretentious. At best it'll detract attention from what we are trying to say.

I'm not going to try and convince you to go with something grammatically incorrect. I guess we can skip that entire line? Or even skip the whole 2nd paragraph? Or if you all like it we can just keep the last draft from Jack. I'm okay with any of it am excited to see this looking good enough to go live with!

[Jack Waugh]

For any thought you may have in mind and want to communicate, there must be a clear way to express it in plain English. I find it frustrating that your response is to leave out some of the ideas you tried to articulate. I guess it is better to be somewhat "incorrect" than to be bullied into silence by a pedant. Maybe I am underestimating the ability of readers to see the intent behind writing that looks to me not to be availing itself of the precision that our glorious language offers.

OK, here's a pretty credible-looking reference that says you are right and I am wrong on "forums".

[Jack Waugh]

I believe this is resolved.