Forum Graphics and Design

SaraWolk

@Jack-Waugh I suggest the same exact layout as the homepage for now. So the header and three buttons would remain the same across all pages. The content below (where the welcome message is) would change.

Not that the images are large because they are high res, but you would still size them as needed when you put them into the site. I suggest roughly the sizes we see in my image for the original post.

In order for the design to work for mobil users as well the key there is to have the content on the home and splash pages not take up the full width of the page, rather they would take up somewhere around 50% of the page width, with 25% margins on a computer screen.

I'm not clear on how to get to the back end page where you work on that, or what it looks like, but if I knew more I could likely give better advice.

Jack Waugh

@SaraWolk This is a reply, so you can test whether you receive a notification.

SaraWolk

@Jack-Waugh
Notifications do work! You just have to turn them on under your profile settings. In an email you mentioned a few points. I'll respond here.

I see that you have a "homepage" up here: http://votingtheory.org:3001/about

We're getting closer - This needs to have margins like you see here: https://www.starvoting.us/
and in the mock up I made. That is key for mobile users and different interfaces.

Regarding a rewrite of the description, how's this?:

Welcome. This forum was created as a space for those who are passionate about voting theory, electoral policy, and election reform to come together in the hopes that when we work together we can collectively contribute something of value to the movement.

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

Regarding the buttons and their position and sizing:
They should be side by side and roughly the size pictured in the mock up. Where you saw the giant buttons, that wasn't the mock up, rather those were the actual full size images for you to download and upload. I'd like to try and keep our design within the norm of what is current and in style for a professional looking website.

Here's a new mock up with the part you didn't like rewritten:
Voting Theory Mockup.jpg

And here's a link to the source components: https://docs.google.com/presentation/d/1SEG0eR4L9vp7tU_ZWqJrUwZNQHMNwPPORpIW_Ce5YRU/edit?usp=sharing

Jack Waugh

@SaraWolk said in Forum Graphics and Design:

those were the actual full size images for you to download and upload.

I do not take images of buttons or text. I recreate them with HTML/CSS. The only images I have taken are the two variants of the logo. I do not need new mockups just for a text change; thanks anyway.

I propose the following edit of the blurb text. I use italics to call out edits; I do not propose to italicize in the publication.

Welcome. This discussion forum was created as a space for those who are passionate about voting theory, electoral policy, and election reform to come together in the hope that when we work together, we can collectively contribute something of value to the movement.

For this forum, the next in a series that have existed over time for the same topic area, we strive to cultivate a space where ideas can cross-pollinate, and where activists, experts, and everyday people can connect, share, and learn.

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.