Template feedback: Homepage!

[kissane]

Sooooo I was technically "out" yesterday so in other words incapable of reading pull requests, and I missed the delivery of ZE TEMPLATES NEW and then that PR got closed and gah, sorry to be late.

The new ones all look absolutely lovely to me, but I need to spend a little time discussing homepage stuff and letting it sink in for a minute, so with apologies, I will have to do that in the morning. Thank you so much, @beep! I'll put collected feedback here asap.

[beep]

@kissane Hey, feedback whenever you have it would be most welcome! I’ll be around next week, if that’s easier; just let me know when you’re ready to discuss. Thank you!

[kissane]

Thank you for your patience, @beep! Feedback was still coming in when I had to check out on Friday, so I've just now got it wrapped up.

So the main thing is, this is loooooooovely and we love it. Homepages are so weird and hard and this is awesome, THANK YOU.

Our other notes are brief:

• the context-providing text interstitial under the lead story is awesome, but we all tripped over it a little bit because it feels so much like a footer if you fail to scroll aggressively enough—I really like the context it provides, but I think we need to play with its placement or height to make sure it's clear that there's more stuff underneath it, so I'd be v grateful for any thoughts on that
• I wasn't expecting to see Guides and Jobs mixed in with the article tiles on this page, but I actually quite like it—two notes/questions, though: do you have a sense of how we should handle the image for the Jobs posts? and do you have any suggestions on how we might visually goose them a little harder to make sure they don't get lost? maybe it's part of the image treatment itself and something we can so 100% on our own, I'm just hmmm-ing and holding my head on one side like a bird

Laaaaaastly, Erika got this view when she previewed, which I assume was triggered by something about her connection or mobile setup?

home.php.pdf

She writes:

I closed my browser and went back and it looked like this. Maybe i caught it in the middle of some changes? A few minutes ago the menu instructions weren't there and the list of articles had the picture next to the text

That's probably an artifact of something that won't crop up in production, but I liked seeing the fallbacks here and was curious about what situation exposes them.

THANK YOU ETHAN THIS IS BEAUTIFUL I CANNOT WAIT TO USSSSEEEEE IIIIIT.

[beep]

@kissane This is all great and wonderful and good. Thanks to you and the team for pulling all this together!

the context-providing text interstitial under the lead story is awesome, but we all tripped over it a little bit because it feels so much like a footer if you fail to scroll aggressively enough—I really like the context it provides, but I think we need to play with its placement or height to make sure it's clear that there's more stuff underneath it, so I'd be v grateful for any thoughts on that

You know, those are stellar points. Let me tinker with that, because I agree it can feel like a blocker. One quick fix would probably be to reign in the bleed, and lengthen the lines a bit:

But I’m happy to explore more significant tweaks, too!

I wasn't expecting to see Guides and Jobs mixed in with the article tiles on this page, but I actually quite like it

Oh, ha—that’s on me, I think. Sorry! It’s possible I misinterpreted the wireframe as asking for a mosaic of stories, guides, and jobs in one unified grid.

two notes/questions, though: do you have a sense of how we should handle the image for the Jobs posts? and do you have any suggestions on how we might visually goose them a little harder to make sure they don't get lost? maybe it's part of the image treatment itself and something we can so 100% on our own

So! A few random ideas/thoughts on these questions:

• Could company logos go in those image blocks? (I suppose that’s a model question.)
• If images are available for job posts, then I could see making the category labels a little more prominent. Maybe something like this, for example?

With all that said: given that I misinterpreted the wireframe, and if images are going to be difficult to come by for jobs, we could easily go back to a sidebar treatment here. That is, we can put guides/jobs on the right, and a grid of stories in the main well on the left. That might be more consistent with the rest of the site. (Not that we need to be consistent.) (Hi.)

What do you think, @kissane?

I'm just hmmm-ing and holding my head on one side like a bird

erin it me

Laaaaaastly, Erika got this view when she previewed, which I assume was triggered by something about her connection or mobile setup?

Possibly! Do you happen know if she was on an especially slow connection when she snapped that screenshot? Or what kind of browser/device she was using?

That's probably an artifact of something that won't crop up in production, but I liked seeing the fallbacks here and was curious about what situation exposes them.

Absolutely. And thanks for asking!

The templates are designed to load as little code as possible at first, to ensure that there’s something usable in the user’s browser/device as quickly as possible. Once that bare minimum’s been downloaded, the page then downloads the extra code needed to power the rest of the design.

But! The page downloads that extra code only if it’s being rendered by a “modern” browser. So older phones will get something akin to what Erika noted, as will IE7 or IE8. This ensures they’re given something usable, even if it doesn’t look like the design you and I would see.

Now, there are two situations when a good, “modern” browser would see that baseline experience: if there’s an error in the JavaScript code, or if the user is on a very, very slow connection. In the latter case, the “good” design should show up eventually, but slowly. But in both cases, the user will be given something usable as soon as possible.

Does that clear things up, @kissane? I’d be more than happy to hop on the phone to discuss this further, if you’d like—either to discuss this strategy, and/or to get to the bottom of the bug Erika saw. Let me know!

THANK YOU ETHAN THIS IS BEAUTIFUL I CANNOT WAIT TO USSSSEEEEE IIIIIT.

this makes me so happy ern thank you for letting me work with you allllllll

[kissane]

This is all wonderful and that is totally helpful, re: What Erika Saw, which is also a potentially terrifying children's book.

You know, those are stellar points. Let me tinker with that, because I agree it can feel like a blocker. One quick fix would probably be to reign in the bleed, and lengthen the lines a bit:

I think that works well, and I suspect compressing the indigo interstitial a bit, in conjunction with this change, would probably do the trick…unless you feel like the interstitial's height needs to remain as-is, in which case we might want to explore getting a couple more stories above it, or something else I haven't considered that likely works better.

Oh, ha—that’s on me, I think. Sorry! It’s possible I misinterpreted the wireframe as asking for a mosaic of stories, guides, and jobs in one unified grid.

My fault for making an unclear wireframe! So sorry, and honestly, I like this a lot.

Could company logos go in those image blocks? (I suppose that’s a model question.)

@ryanpitts, we do collect those for companies now, but I don't know how fussy it would be to include them here—do you think we could do some kind of very aggressive crop on the far left of the logo or something? Most of the logos are very short and wide. If it's too much trouble with the new Jobs model to import the logo from the org page, I could come up with a photo that's related…I'm not opposed to using a standard image for jobs, which would help group them together.

(I note also that the wireframe definitely suggest that we're using images for jobs, so this is on us for not spotting that potential problem until now, @beep.)

If images are available for job posts, then I could see making the category labels a little more prominent. Maybe something like this, for example?

I love those. I feel like we can solve the image problem one way or another and use this, but let me check in with @ryanpitts.

[kissane]

THAT BIRD THO

[beep]

I think that works well, and I suspect compressing the indigo interstitial a bit, in conjunction with this change, would probably do the trick…unless you feel like the interstitial's height needs to remain as-is, in which case we might want to explore getting a couple more stories above it, or something else I haven't considered that likely works better.

Oh, I am definitely not wedded to the height, @kissane! I like the thinner version, myself.

And just to reiterate this point: we can definitely drop the block altogether. I think a little orienting text could be helpful, but I don’t think it’s critical.

I love those. I feel like we can solve the image problem one way or another and use this, but let me check in with @ryanpitts.

Yay! I’ll hold off on making template edits until we decide the image question. (And a sidebar would be tooooootally easy to drop in.)

THAT BIRD THO

srsly

[kissane]

And just to reiterate this point: we can definitely drop the block altogether. I think a little orienting text could be helpful, but I don’t think it’s critical.

OK, awesome. I think we could keep it but enshorten it a little bit, then, so it's less blockery.

Yay! I’ll hold off on making template edits until we decide the image question. (And a sidebar would be tooooootally easy to drop in.)

@ryanpitts and I hashed through some of this and went back and forth a bit and if it really is easy, we'd like to flip to a sidebar—we can get the image thing worked out, but it's going to involve a bunch of manual stuff that we're short on time to crunch through, and Ryan also brought up some user concerns in favor of a sidebar that I think make sense, sooooo if we may, could we have a sidebar?

The specs would be: Jobs, with three recent jobs, text only. Guides, also three items please, could have images or not, whichever is easier literally I do not care.

[ryanpitts]

Just filing a few quick thoughts from various points and questions upthread!

• on the technical side, it's super easy to pull the organization logo into anywhere we want it. No problem at all.
• on the editorial side, Erin's comment about most of these logos being short + wide really resonates. I think it's going to be really hard to come up with an auto-crop solution that doesn't make most of the logos feel super awkward in that 300x200 slot. Which probably suggests revisiting the logos, and uploading versions with enough white space that they can just naturally hit a 3:2 aspect ratio.
• I do worry about people having to work to see whether there are new jobs and/or new guides when those tiles are mixed in with articles. (I really dig the little tags at the upper corner of the thumbnail, it would be cool to figure out ways to use those)
• I do love the simplicity of just tiles, and so I'm slightly pained to say this, but I find myself on Team Sidebar. Being able to glance with muscle memory at a particular spot on a page and quickly tell if it's changed or not ... that feels valuable to me? Might be overthinking, research might not support this, I'm not sure. That's my lean for now though, I guess.

[beep]

@kissane @ryanpitts Okay! Here’s an updated homepage:

http://sourcedev.ethanmarcotte.com/home.php

How’s that feel to you both? (If the answer is “good,” then #52 is ready for mergin’.)

[kissane]

I think this is awesome, with one question, @beep: If we want to tweak the text in the Indigo Interrupter, the height will change accordingly, yes? So we could theoretically make this text longer or shorter without it causing trouble?

[beep]

@kissane Great question. And yes, the height of the box is defined by the amount of text inside it. We can tweak the font size and the padding, of course, but the length of the text is the main factor.

[kissane]

Yay, thank you. @ryanpitts, all good to merge?

[ryanpitts]

@kissane @beep yes! will do.

[kissane]

THIS LOOKS SO GREAT