opened
thatbudakguy
username_0
[figma link](https://www.figma.com/file/MEt3gfKX4N3WTLPbLGBbGC/Startwords?node-id=225%3A2217)
this issue tracks the implementation of the homepage design.
As a reader, I want to see featured content on the site's homepage.
issue
created
gissoo
username_1
@username_0 I can't view the "homepage link" – gives me "internal error" 
Also, if this is about the homepage, could you change the figma link to show the "homepage" page on Figma? – I don't think the "Tablet" page on Figma is the appropriate one to look at
comment
created
thatbudakguy
username_0
updated the links, thanks!
comment
created
gissoo
username_1
@username_0 
below are my notes:
On all devices: 
1. The "read more" below the issue abstract is not matching the design, it needs to be left-aligned (aligned with the issue abstract) and slightly closer to the last line of the abstract than it is now. 
2. The "Read more about Startwords." needs to be replaced with a red arrow to match the design. 
3. The doi is missing, which needs to be below the authors. 
4. The length of the article previews need to be similar, this will be a problem that we need to fix. 
5. It will be better to have shape for the bottom of the preview text, however I don't think it's a deal breaker now, but would be nice to fix it for the next issue. 
6. I like the interaction of the red arrows! Thank you for doing this!

On mobile:
1. The "Data Beyond Vision" title is crossing the boundaries, which is causing the arrow to be misplaced as well as an increased space between the title and the authors – "Vision" should be wrapped. 

On tablet:
1. The position and width of the 1. issue number 2. issue abstract, and 3. theme do not match the designs and what was agreed. The three pieces mentioned need to match the x position of the opening paragraph on the left and regarding the width, it will need to match where the opening paragraph on the right ends, i.e. aligning with the x positions of rest of the metadata on this page.
comment
created
thatbudakguy
username_0
ok, I _think_ I was able to address everything here. regarding the placement of the arrows when the titles wrap, it's unfortunately pretty hard to control...I was able to get it to not wrap the arrow on its own, but more control than that might be hard to accomplish.
comment
created
gissoo
username_1
@username_0 thank you! This looks great, mostly everything is fixed!

A couple of points:
regarding my earlier comment:
4. The length of the article previews need to be similar, this will be a problem that we need to fix. – Can we do something about this? 

On mobile:
1. The "Data Beyond Vision" title is crossing the boundaries, which is causing the arrow to be misplaced as well as an increased space between the title and the authors – "Vision" should be wrapped. 
- I know you have written above that it's difficult, but it looks like it's fixed! (Although I refreshed once and it was back to everything in one line, crossing the boundary, and refreshed again and it looks like it's fixed :D – not sure why this is happening) – But I think it actually matters, and visually changes the design, would be happy to discuss alternatives. (see the image)
- Same thing is happening with the DOI crossing the boundary, the two DOIs are too close to each other. (see the image)![Screen Shot 2020-04-15 at 3.20.18 PM.png](https://images.zenhubusercontent.com/5bf307a69d595b459ec91bb1/3f62bd3d-a142-43e5-a85a-46f84a8dd16f)
- Also, sorry Nick, I just updated the DOI style here and everywhere else to match what we agreed on for the article page. Could you add "doi: ...." to be as part of the link? – You can see this in the design now.


Desktop:
1. Is there a way to prevent the featured content from increasing width on desktop and to look the same as it does on tablet?
comment
created
thatbudakguy
username_0
@username_1 can you explain what you mean by "crossing the boundary"? in the design the preview text of the two articles are very close to each other; there's just a few pixels in between - the same as with the DOIs here.
comment
created
gissoo
username_1
@username_0 that makes sense – I think in development it looks visually even closer. I'm trying on Figma exactly what you currently have on the site, and what's on the site is so much closer, which makes a huge difference. I think one way to solve this issue is by aligning this with the design, where the left opening paragraph starts higher on the page. On the site, left and right start exactly on the same y axis.
comment
created
thatbudakguy
username_0
ok, I've:
- added tighter margins for desktop
- pushed the second article preview down a bit to create more visual space
- added `doi:` at the start of the doi links
comment
created
gissoo
username_1
@username_0 Thank you! This looks so much better now!

Just this question:
regarding my earlier comment:
4. The length of the article previews need to be similar, this will be a problem that we need to fix. – Can we do something about this? 

(Also, just a general question that now I'm wondering about, do you know if this is the fault of Figma that there seems to be more space between the DOIs for instance, than there is on the site? – because the font size is correct) 

Otherwise I think I'm done reviewing this issue.
comment
created
gwijthoff
username_2
I agree with Gissoo that the length of the article previews should be similar if possible, but this is more of an authorial and editorial issue than a design issue. The opening lines that have been selected for both articles right now are really good. The fact that the article on the left has more authors makes that entire block similar in size to the article block on the right with a longer preview text. At least that's a consolation, so it doesn't seem (at least to my eye) like they're mismatched now. But it might be something we want to consider for the editorial style guide, recommending a particular word limit for the opening line(s) article preview.

Also: there’s something too jagged about the article preview shapes — they don’t quite have the clean angle lines we’ve been going for. Can we experiment with word break properties to make the words conform more to the shape we’re hoping for?
comment
created
thatbudakguy
username_0
@username_2 how do you feel about hyphenation to aid in keeping the shape? I turned on automatic hyphenation and increased the slope on the text-shapes, which yielded this (on tablet):

<img width="309" alt="Screen Shot 2020-04-16 at 10 13 09 AM" src="https://user-images.githubusercontent.com/4924494/79466692-eaf0ea80-7fca-11ea-9021-22244f35b109.png">

I think we might need to dynamically adjust the slope based on the screen size, because this slope becomes too steep for mobile.
comment
created
gwijthoff
username_2
@username_0 much cleaner lines! Would you mind taking screenshots of a few different options, showing the entire home page? Auto-hyphenation on and off, how both appear on mobile and tablet, etc. It would be good to get a sense of what our options are.

Not being able to shape the bottom of the lines (i.e. narrowing back down) seems to change the overall feel we were going for (@username_1 may have thoughts on this). The original design was intersecting polygons, now it's abutting triangles. So it would be good to see the range of options we're looking at right now.
comment
created
thatbudakguy
username_0
here's some screenshot using different values for the slope of the content on mobile and tablet, with hyphenation turned on:
# mobile
<img src="https://user-images.githubusercontent.com/4924494/79492280-c2c6b300-7fed-11ea-8aa5-3f9be422399c.png" width="50%" />
<img src="https://user-images.githubusercontent.com/4924494/79492286-c4907680-7fed-11ea-92ac-63bd11b24e6c.png" width="50%" />
<img src="https://user-images.githubusercontent.com/4924494/79492292-c65a3a00-7fed-11ea-85d4-945279e51a1c.png"  width="50%" />

# tablet

![Screen Shot 2020-04-16 at 14 21 14](https://user-images.githubusercontent.com/4924494/79492863-9bbcb100-7fee-11ea-84fe-89f675f19113.png)
![Screen Shot 2020-04-16 at 14 21 20](https://user-images.githubusercontent.com/4924494/79492864-9cedde00-7fee-11ea-8723-8daa7b2dec30.png)
![Screen Shot 2020-04-16 at 14 21 26](https://user-images.githubusercontent.com/4924494/79492871-9e1f0b00-7fee-11ea-8b04-fcef45a753f4.png)
comment
created
gwijthoff
username_2
I think I like the second option best for both mobile and tablet you screenshoot above. It's super content-dependent though — if the author or editor changes a single word in these opening lines, the shape of the polygons and the word breaks will look entirely different. But I say let's go with option two for now!

Are we waiting on anything else for this issue, or should I close?
comment
created
thatbudakguy
username_0
@username_1 mentioned that it would be good to set an absolute limit on article preview text length, but so far I haven't been able to figure out how to do it...it looks like you can set `summaryLength` in the hugo settings, but it didn't have any effect for me.
comment
created
gissoo
username_1
comment
created
gissoo
username_1
@username_0 thank you so much for providing these variations!!! I really like the first variation on mobile – but I do understand that the second one looks better on both mobile and tablet in this specific case. (v1 might work better in the long run – not sure). I'm not sure how I feel about the hyphenation here yet. (they do happen to be necessary evils in typography :D)
comment
created
thatbudakguy
username_0
just wanted to mention - it's very possible to do the first one on mobile and the second one on tablet. also as you pointed out i think i have the margins wrong on tablet, so these screenshots aren't as applicable as they should be...
comment
created
gissoo
username_1
that is great news @username_0 Thank you so much!!!!
comment
created
thatbudakguy
username_0
OK, with a little more experimenting and some...creative usage of CSS paths, I was able to create the rounded shape. Here are some screenshots for reference, showing with hyphenation turned off/turned on for mobile and tablet. The blue lines of the shaping polygon are shown for reference. We can control the height of the polygon that shapes the text, but it has to be an absolute value - unfortunately it can't scale to the size of the text itself. Currently I have 300px set, which seems to balance OK between the lengths of the two previews.

## tablet
hypens ON (left), hyphens OFF (right)

<img src="https://images.zenhubusercontent.com/5aa82c4b4b5806bc2bcab4fa/c21d2f9f-6ccc-47ce-896e-1502cdfb999a" width="200">
<img src="https://images.zenhubusercontent.com/5aa82c4b4b5806bc2bcab4fa/1a6b937e-c7cf-4f51-8bfa-0a427f06f3a8" width="200">

## mobile
hypens ON (left), hyphens OFF (right)

<img src="https://images.zenhubusercontent.com/5aa82c4b4b5806bc2bcab4fa/4ec97248-ae51-4089-aefb-dd7c22811df2" width="200">
<img src="https://images.zenhubusercontent.com/5aa82c4b4b5806bc2bcab4fa/0b6776ba-1ef5-4d75-9dab-582b56a759e0" width="200">
comment
created
gissoo
username_1
@username_0 Thank you so much for these!!! I love how these look so much more than how they currently are. I love them when there is **no hyphen**, mainly because I'm noticing that in the versions without the hyphens the words are also **not** breaking at the end of a line? Is that true? It's much more easier to read in the version without the hyphen, because an entire word is wrapped to the next line. The shape of the entire paragraph also looks much better visually in the versions without the hyphens. They especially look better on tablet than mobile. But mobile is fine too.
comment
created
gwijthoff
username_2
This is so cool, brilliant solution @username_0! I also agree with @username_1 that the **hyphens off** version is best. There are just so many broken words on mobile that it messes with the readability. And the shapes look just as good without word breaks.
comment
created
thatbudakguy
username_0
The shaping is still quite restrictive, and some content (including the intro for rebecca's essay) just doesn't naturally fit into the shape at all. Right now, the way I can see to implement this is:

- measure the number of characters that can reasonably fit into the shape via some trials 
- allow writers to choose the intro to their piece using `<!--more-->`, but truncate it if it has too many characters and add an ellipsis
- set an exact height for both the preview text and its outside shape so that the layout can't move around or break

this approach means that some (maybe most) previews will end up getting truncated, and it will likely require some trial and error on the part of the editor to find the right preview text. if the preview is too long it will be truncated, and if it's too short it will not fill up the shape and leave a bunch of empty space. however, the layout will be stable across various screens.
comment
created
gwijthoff
username_2
@username_0 FWIW, I don't think it's a bad idea to have that much of the editor's and author's attention on the opening lines to get them to fit perfectly. It's an interesting feature, a constraint, to have editor and author collaborate on working within that format.
comment
created
thatbudakguy
username_0
@username_2 thanks, this input is helpful. based on you and @rlskoeser's comments I think I can make one or two more revisions and then we can close this out.
comment
created
thatbudakguy
username_0
OK, I've deployed the latest version of this and updated the testing notes at the top. Would like design testing from @username_1 and a final test from @username_2 on fitting the article preview quotes into the new shapes.
comment
created
gissoo
username_1
@username_0 This looks amazing! Thank you for working on it!

The notes below apply to both the homepage and the single issue page.

On tablet and mobile: 
- The spacing between the article opening paragraph and the article title does not match the design (should be slightly less) (It looks very close to the design on desktop)

On all devices:
- The spacing between the article opening paragraph and the article title should be the same for both articles – currently the spacing is much more on the left side. 
- The spacing between the article title and the first author does not match the designs
![Screen Shot 2020-06-17 at 2.07.10 PM.png](https://images.zenhubusercontent.com/5bf307a69d595b459ec91bb1/53080151-4294-4b68-ab75-85fb2a48f361)
![Screen Shot 2020-06-17 at 2.08.28 PM.png](https://images.zenhubusercontent.com/5bf307a69d595b459ec91bb1/6c95b098-60be-43b5-b9ae-e99cc3c6068a)

On mobile: 
- The article title on the left is getting cut off:
![Image from iOS (4).png](https://images.zenhubusercontent.com/5bf307a69d595b459ec91bb1/49aadfb9-5e77-4b31-8c97-fe54cdc800e5)![Screen Shot 2020-06-17 at 2.08.28 PM.png]
comment
created
thatbudakguy
username_0
I can't get this to happen when emulating an iPhone SE. Not sure how to test a solution...
comment
created
gissoo
username_1
- yes, me either.
comment
created
gwijthoff
username_2
This looks fantastic, @username_0 — thank you so much for all your hard work. This is clearly the trickiest page of the entire project! Just two additional thoughts:

The "read more" link doesn't work after the preview of the issue abstract text

Is there any way at all we can make the article opening line text shapes accommodate just a few more words? I understand you've gone over this like a hundred times but I've been playing with some edits to the text locally and RM's literally perfect line is just 35 words but the last two words cut off on mobile, reading: `When I was growing up I liked to read about dying children. I’m not talking about the Victorian orphan kind of dying either, not the dying of storybooks, but children who were` I ask because 33 words are pretty restrictive when it comes to writing punchy opening lines. Allowing for 40ish words max would probably be enough. Or even simply finding a way to fit those last two words of RM's opening lines in, and having that limit determine the length of future contributors' opening lines. We could call it the RM rule.
comment
created
thatbudakguy
username_0
This is really complicated; if there are still problems we might need to zoom. Let me know how it looks to you with the latest changes.
comment
created
gwijthoff
username_2
@username_0 that fully fit RM's opening lines into the homepage preview on mobile for me. Nice work.
comment
created
gissoo
username_1
@username_0 This looks great!! Thank you so much for all of your work!!
comment
created
gissoo
username_1
- @username_0 I think this is happening on my phone because of the "The article title on the left is getting cut off" screenshot I had attached earlier, above, _I think_. It's fine on desktop and tablet.
comment
closed
gissoo
username_1
issue