This is now done! Interested in your thoughts on the implementation. We haven’t yet exposed the sequence editor, but the navigation and style can be seen in the three major collections linked from the frontpage.
Grey text makes it harder to read than plain black. If you want to reduce contrast, consider instead making the background off-white (either #fcfffa or #f9fff5 would be fine — 99% or 98% lightness of the same hue as the theme color green).
Post visual separation
A bit hard to detect when one post ends and another begins, on a skim. Some possible solutions:
Add border to posts (on class “comments-item”, add border: 1px solid #cbd6c2, padding: 4px 6px); or,
Add background color to posts (on class “comments-item”, add background-color: #edefeb, padding: 4px 6px); or,
Greater v-spacing of posts (on class “comments-item”, set margin-bottom: 30px)
Bugs (?)
The hamburger menu only closes with another click on the hamburger menu (best practices is for a click anywhere else on the page—outside the menu—to close it)
Upvote/downvote buttons and vote count appear twice on each post (above and below)
When adding a link in a comment, hitting Return/Enter in the link URL popup does not cause it to close (i.e. does not have the effect of hitting the Submit button) (Mac OS X 10.9, Chrome 60.0.3112.101)
Miscellaneous
Mini-hamburger menu on each post has just one menu item (Subscribe); consider simply having a Subscribe link on the post itself, in small text
Hamburger menus considered harmful in general; consider substituting an on-hover drop-down (achieves the same effect, but with fewer clicks)
Typography
Line spacing (“line-height” CSS property) of body text of posts (not comments) is too large (more than 1.8); consider reducing to 1.5 (with the short line length—which is good!—this should be more than sufficient to ensure readability)
Conversely, line spacing of body text of comments is a bit too low (1.25); consider increasing to 1.35
The bold weight of the body-text font is barely distinguishable from the regular weight. This is, unfortunately, an uncorrectable feature of the “ET Book” font; no heavier weight is available, as far as I can tell. Consider using one of these free alternatives:
(or something else; in any case, the kind of font is just right, but this particular font family happens to have this flaw...)
Comment editing UI
Consider adding something to visually distinguish the comment currently being written, from surrounding comments; perhaps, a lighter, or darker, background (depending on whether you implement one of my suggestions above for visual separation of posts)?
The reason this is helpful is that, when writing a comment, I might scroll around the page—to the OP, or to other comments—to reference other people’s words, etc., and then want to continue writing the comment. (Note that the Tab key does not take me to the comment editing field, which would mostly obviate this issue; this, I presume, is just a feature of how this editing UI is implemented...)
Archive browse feature
Or rather, the lack thereof. To be added in the future, I hope?
Pro
Almost everything else!
Typography
The body text font is attractive and readable and the default text size is good for readability (on a 1080p desktop monitor, anyway) (but see Cons)
The text column width is good
Layout of comment blocks is attractive and uncluttered
Overall typography is well-done
Layout
Uncluttered and aesthetically pleasing visual design
(mostly) excellent front page layout (but see below); puts the interesting stuff front and center
Layout of post pages also solid; easy to navigate
Seems like the layout will transfer quite well to mobile platforms (looking forward to seeing the design of the mobile version of the site!)
UI elements
Well done on the redesign of the post sort order widget! This is spot-on
Very nice comment composition/editing UI! I haven’t been actually impressed with one of these for a long time; is it custom or third-party?
The stripes to the left of the comments (indicating comment hierarchy) are quite useful
Consider allowing the front-page content to occupy two columns, on wide viewports. (Perhaps, Recommended Reading and Featured Posts on the left, and Recent Posts and Recent Comments on the right?)
Navigation UI
Currently, when I’m viewing a post or comment page, and I wish to navigate to somewhere else on the site, I have to first go to the front page, then go from there to where I want to go. This is not quite optimal.
As an alternative to removing the hamburger menu (or transforming it into an on-hover drop-down), consider expanding its use; perhaps, for example, put a copy of the Recent Posts/Recent Comments/Feature Posts feeds in there?
This is an epic comment with lots of great ideas and observations.
A few comments/opinions:
I don’t think the text should be proper black as in #000000. I find that slightly off black makes for a better reading experience, and I think this is pretty standard practice, though I may be mistaken.
I think it’s a feature that upvotes and downvotes appear above and below. I may want to see the count at the top before reading, but then again at the bottom so I can vote once I’ve read the post.
Agree that hamburgers aren’t great, but hover based UIs aren’t tablet friendly, so I’m not keen on that solution.
Strongly agree with the comment editor not being visually distinct enough. Multible times when writing this comment I’ve scrolled up to reference your comment, and then found it a little annoying to find where I was typing my reply.
Re: #1: It is common practice to make body text off-black. Is it good practice? Well, Matthew Butterick’s book, Butterick’s Practical Typography—considered a definitive work on the subject—uses black text.
You may note that Butterick suggests using off-black text—but consider his reasoning: the issue is contrast! As Butterick notes, screens emit light rather than absorbing it, making high contrast potentially painful to look at. Indeed; but darkening the background reduces the amount of light emitted, while lightening the text increases it. The former is superior as a way of reducing contrast. (Just don’t do both! That’s wholly unnecessary.)
Re: #2: Something to be A/B tested, I suppose. (Alternatively and even better: have this be user-configurable, via the account settings page, e.g.: “Display vote widget (•) above post only ( ) below post only ( ) both above and below post”. “Sane defaults plus comprehensive configuration options” is the gold standard of UX design for such matters.)
Re: #3: This is exactly the point of responsive design. Hover for desktop clients, hamburger for mobile. There is no reason at all to insist on a single, unified solution; web UIs should at all times be appropriate to the platform they’re being viewed on.
Re: #1: I to am a big fan of Practical Typography :) That’s a pretty good point, I actually don’t thik we disagree much. I think I may prefer just slightly prefer whiter backgrouds with slightly grey text. But only slightly.
Re: #2: I largely agree with this, though I might lean more on the side of giving the user less configuration options. Like, if you give everyone an option for everything, then the options get real cluttered. But I don’t have strong feeling about adding this preference in general.
This is now done! Interested in your thoughts on the implementation. We haven’t yet exposed the sequence editor, but the navigation and style can be seen in the three major collections linked from the frontpage.
Very nice!
Some comments on the design, pro and con:
Cons
Grey text
Grey text makes it harder to read than plain black. If you want to reduce contrast, consider instead making the background off-white (either #fcfffa or #f9fff5 would be fine — 99% or 98% lightness of the same hue as the theme color green).
Post visual separation
A bit hard to detect when one post ends and another begins, on a skim. Some possible solutions:
Add border to posts (on class “comments-item”, add border: 1px solid #cbd6c2, padding: 4px 6px); or,
Add background color to posts (on class “comments-item”, add background-color: #edefeb, padding: 4px 6px); or,
Greater v-spacing of posts (on class “comments-item”, set margin-bottom: 30px)
Bugs (?)
The hamburger menu only closes with another click on the hamburger menu (best practices is for a click anywhere else on the page—outside the menu—to close it)
Upvote/downvote buttons and vote count appear twice on each post (above and below)
When adding a link in a comment, hitting Return/Enter in the link URL popup does not cause it to close (i.e. does not have the effect of hitting the Submit button) (Mac OS X 10.9, Chrome 60.0.3112.101)
Miscellaneous
Mini-hamburger menu on each post has just one menu item (Subscribe); consider simply having a Subscribe link on the post itself, in small text
Hamburger menus considered harmful in general; consider substituting an on-hover drop-down (achieves the same effect, but with fewer clicks)
Typography
Line spacing (“line-height” CSS property) of body text of posts (not comments) is too large (more than 1.8); consider reducing to 1.5 (with the short line length—which is good!—this should be more than sufficient to ensure readability)
Conversely, line spacing of body text of comments is a bit too low (1.25); consider increasing to 1.35
The bold weight of the body-text font is barely distinguishable from the regular weight. This is, unfortunately, an uncorrectable feature of the “ET Book” font; no heavier weight is available, as far as I can tell. Consider using one of these free alternatives:
Alegreya
EB Garamond
Crimson Text
(or something else; in any case, the kind of font is just right, but this particular font family happens to have this flaw...)
Comment editing UI
Consider adding something to visually distinguish the comment currently being written, from surrounding comments; perhaps, a lighter, or darker, background (depending on whether you implement one of my suggestions above for visual separation of posts)?
The reason this is helpful is that, when writing a comment, I might scroll around the page—to the OP, or to other comments—to reference other people’s words, etc., and then want to continue writing the comment. (Note that the Tab key does not take me to the comment editing field, which would mostly obviate this issue; this, I presume, is just a feature of how this editing UI is implemented...)
Archive browse feature
Or rather, the lack thereof. To be added in the future, I hope?
Pro
Almost everything else!
Typography
The body text font is attractive and readable and the default text size is good for readability (on a 1080p desktop monitor, anyway) (but see Cons)
The text column width is good
Layout of comment blocks is attractive and uncluttered
Overall typography is well-done
Layout
Uncluttered and aesthetically pleasing visual design
(mostly) excellent front page layout (but see below); puts the interesting stuff front and center
Layout of post pages also solid; easy to navigate
Seems like the layout will transfer quite well to mobile platforms (looking forward to seeing the design of the mobile version of the site!)
UI elements
Well done on the redesign of the post sort order widget! This is spot-on
Very nice comment composition/editing UI! I haven’t been actually impressed with one of these for a long time; is it custom or third-party?
The stripes to the left of the comments (indicating comment hierarchy) are quite useful
Performance
Seems good so far; no major issues!
Extra bonus commentary
Front page layout
Here’s how the front page looks on a 1080p screen…
Ok, nothing too wrong here...
And here’s how the front page would look like on a 4k screen…
Hmmm.
Consider allowing the front-page content to occupy two columns, on wide viewports. (Perhaps, Recommended Reading and Featured Posts on the left, and Recent Posts and Recent Comments on the right?)
Navigation UI
Currently, when I’m viewing a post or comment page, and I wish to navigate to somewhere else on the site, I have to first go to the front page, then go from there to where I want to go. This is not quite optimal.
As an alternative to removing the hamburger menu (or transforming it into an on-hover drop-down), consider expanding its use; perhaps, for example, put a copy of the Recent Posts/Recent Comments/Feature Posts feeds in there?
In closing
Overall, good work on the redesign! Thumbs up :)
This is an epic comment with lots of great ideas and observations.
A few comments/opinions:
I don’t think the text should be proper black as in #000000. I find that slightly off black makes for a better reading experience, and I think this is pretty standard practice, though I may be mistaken.
I think it’s a feature that upvotes and downvotes appear above and below. I may want to see the count at the top before reading, but then again at the bottom so I can vote once I’ve read the post.
Agree that hamburgers aren’t great, but hover based UIs aren’t tablet friendly, so I’m not keen on that solution.
Strongly agree with the comment editor not being visually distinct enough. Multible times when writing this comment I’ve scrolled up to reference your comment, and then found it a little annoying to find where I was typing my reply.
Thanks!
Re: #1: It is common practice to make body text off-black. Is it good practice? Well, Matthew Butterick’s book, Butterick’s Practical Typography—considered a definitive work on the subject—uses black text.
You may note that Butterick suggests using off-black text—but consider his reasoning: the issue is contrast! As Butterick notes, screens emit light rather than absorbing it, making high contrast potentially painful to look at. Indeed; but darkening the background reduces the amount of light emitted, while lightening the text increases it. The former is superior as a way of reducing contrast. (Just don’t do both! That’s wholly unnecessary.)
Edit: Check out readthesequences.com for an example of “black on off-white”.
Re: #2: Something to be A/B tested, I suppose. (Alternatively and even better: have this be user-configurable, via the account settings page, e.g.: “Display vote widget (•) above post only ( ) below post only ( ) both above and below post”. “Sane defaults plus comprehensive configuration options” is the gold standard of UX design for such matters.)
Re: #3: This is exactly the point of responsive design. Hover for desktop clients, hamburger for mobile. There is no reason at all to insist on a single, unified solution; web UIs should at all times be appropriate to the platform they’re being viewed on.
Re: #1: I to am a big fan of Practical Typography :) That’s a pretty good point, I actually don’t thik we disagree much. I think I may prefer just slightly prefer whiter backgrouds with slightly grey text. But only slightly.
Re: #2: I largely agree with this, though I might lean more on the side of giving the user less configuration options. Like, if you give everyone an option for everything, then the options get real cluttered. But I don’t have strong feeling about adding this preference in general.
Re: #3: Totally.