General thoughts for design tweaks

[mialondon]

• [x] remove the 'go to top' button from secondary content pages
• [x] Tighten up the spacing between the text box and the 'make some magic' button so the relationship is really clear - at the moment the button is closer to the footer than the text box. See #143
• [ ] Introduce some separation between the 'Go home and feed the machine new text!' and 'Like what you see? Save these results (will open on another page)' texts, as it looks like a paragraph and header rather than two separate actions. See #143
• [ ] On a small screen that shows only the logo and three steps, there's no indication that there's more below. (And we have two pieces of anecdotal evidence via reports from friends that people thought that was the whole page). We could tighten up the whitespace so the call-to-action text is more likely to be visible, or use a design element to direct attention down. Thoughts? See https://github.com/chnm/serendipomatic/issues/119

[scottkleinman]

Just my thoughts:

• The about and connect pages are right on the edge of where a 'go to top' link is useful. An alternative to removing it is to restyle it to be less prominent (the button was really just to get the element in there).
• I agree.
• I think tightening up the whitespace a bit is a good idea, but we should try something more radical for mobile screens. At present, I don't have a good suggestion.

On 3 August 2013 13:25, Mia notifications@github.com wrote:

-

remove the 'go to top' button from secondary content pages

Introduce some separation between the 'Go home and feed the machine new text!' and 'Like what you see? Save these results (will open on another page)' texts, as it looks like a paragraph and header rather than two separate actions.

On a small screen that shows only the logo and three steps, there's no indication that there's more below. (And we have two pieces of anecdotal evidence that people thought that was the whole page). We could tighten up the whitespace so the call-to-action text is more likely to be visible, or use a design element to direct attention down. Thoughts?

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/109 .

Scott Kleinman Professor of English Director, Center for the Digital Humanities California State University, Northridge

[fontnerd]

I will offer some suggestions when I'm at a computer. On Aug 3, 2013 4:25 PM, "Mia" notifications@github.com wrote:

-

remove the 'go to top' button from secondary content pages

Introduce some separation between the 'Go home and feed the machine new text!' and 'Like what you see? Save these results (will open on another page)' texts, as it looks like a paragraph and header rather than two separate actions.

On a small screen that shows only the logo and three steps, there's no indication that there's more below. (And we have two pieces of anecdotal evidence that people thought that was the whole page). We could tighten up the whitespace so the call-to-action text is more likely to be visible, or use a design element to direct attention down. Thoughts?

— Reply to this email directly or view it on GitHubhttps://github.com/chnm/serendipomatic/issues/109 .

[moltude]

• Agreed.
• Agreed that there should be less space between the box and the button. I don't know if this has been mentioned in previous tickets (so please ignore if this is been discussed and decided) but I think that bringing the 'Grab text' box and the 'Zotero box' should be more horizontally aligned (I think the box should only be as big as the placeholder text we have in there).
• Agree as well, did you want to keep the same formatting?

[fontnerd]

A few other issues I'd like to get to:

• I made a class called ".main" that, if added to the about and connect page divs would update the styling of the h2s + h3s to the same red color found on the homepage, as well as the Typekit webfonts. The class rule is in the "base.css" folder but the class isn't assigned in the HTML.

• increase the margins on the left / right of the about + connect page. As of right now, the line length is a bit long for optimal reading but this is quasi-minor. 30px on the left (to better align with the serendipomatic logo) and 10px on the right should do it.

• the hover state on the "Make Some Magic" button should have a shadow of #FFFFFF instead of #000000. The black shadow and black text look weird.

• on the results page, the "Go Home" should definitely have more separation from the "Save Results" action and perhaps that entire section can move down a bit.

I'm still a bit unclear where I am supposed to make any of these changes and terrified of screwing things up.

[mialondon]

@fontnerd - I'll have to check back through the discussion but if you push changes from your laptop or directly on the site, they should be honoured as people will check for any more recent changes (with re-merge) and merge any lines individually before committing their own stuff.

Can we also have external links as a slightly different colour (perhaps darker so less prominent) than internal app links? The idea being that it helps keep attention on the main call-to-action in using the site (especially the first time).

[mialondon]

Forgot to add, when you submit to master it should deploy to http://dev-serendipomatic.herokuapp.com/ so you can see it all... (Clearly I should either edit or respond to OWOT emails, not both!)