Update homepage design #433
Comments
ghost
assigned 
|
@PitonFoundation/developers any specific suggestions here? my initial thought:
so this would result in only one controllable slider on the front page with the whole arrows-and-pagination-buttons treatment. |
|
I'd still suggest we discuss my initial designs for the home page... I think I've addressed most of the issues and we can get rid of all of the superfluous sliders (https://docs.google.com/file/d/0B7ipktENBWzTY0RNYW5oWmN1aFU/edit) |
|
hey @bpawlak — i wasn't on the discussion for the general homepage redesign so didn't realize there was a larger effort afoot. just saw this issue assigned to me. on the standup call we're discussing folding this issue into the larger effort. |
|
Here's an updated homepage sketch. It basically has the same elements as Bill's design:
There are also more notes about this here: https://docs.google.com/document/d/1eBYGQJJ9G0sWBQS2QNPYD1bP6fC3LxTQGIODfSYT-qw/edit |
|
Updated title from "Need to address home page sliders (too many, inconsistent layout and interaction)" to reflect larger home page redesign needs, moved to Iteration 9. |
|
Here's a wire frame that synthesizes the mock-ups that @bpawlak and I did earlier: Some notes:
@PitonFoundation/developers suggestions? |
|
Couple questions about the banner: • Do we have a mockup/sketch of the presentation and the link behavior? This layout could conceivably better direct users to further/more deeply explore the site but it would help to know a little more about how the banner story tiles are being integrated into that larger goal. Thanks! |
|
In Iteration 9, we won't have the banner. But we talked about implementing
On Fri, Dec 14, 2012 at 9:01 AM, tekhneCO notifications@github.com wrote:
|
|
Thanks Jordan! I wouldn't recommend any new presentation element that requires the user to On that, too, I'd reconsider the lack of titles with the thumbnails. Sorry. Gotta run. More later. On Friday, December 14, 2012 x-apple-data-detectors://1, Jordan
|
|
@bpawlak would you feel better about it if "Featured News" and "Featured Projects" were just one item, instead of sliders? |
|
One small suggested update to the wireframes: Below the "Create Your Story" BAB, let's have a text link that says, "New to Floodlight? Create a free account to get started." |
|
I think they're ok as being separate sections (news is very different from projects), but I don't necessarily think they need to be in sliders... why not just simply list the 3 latest news stories (with a link to view more) and 3 featured projects (again, with a link to explore more projects)? Putting them in sliders just makes extra work for users that I don't think is always justified. They're not inherently bad (and in some cases can provide a nice aesthetic) but having 3 different sliders makes more work for everyone and doesn't really differentiate any of them from the others. And as for the button, one thing I suggested was potentially a button that looked like |
|
@bpawlak How would you suggest we show the top 3 items without a slider? Just in a list format? |
|
Yep. See the "What others are saying" or the "latest contributions" list in the footer on our earlier wireframes (https://docs.google.com/file/d/0B7ipktENBWzTY0RNYW5oWmN1aFU/edit). Just a suggestion... |
|
Here is a synthesized and updated homepage redesign wireframe, based on the comments in this thread:
Questions for @bpawlak and @PitonFoundation/developers:
@patternleaf Given the complexity and nature of the homepage updates, do you think it makes sense to keep them all in one GitHub issue/user story, or to break them out so we can prioritize/schedule them easier? |
|
Even if we simply had a small bit of text that said "Story" or "Project" or whatever above the link: And as to the Latest Stories... I think a small thumbnail image from the story reinforces the fact that we're encouraging visual storytelling and adds "life" to the page. I agree that blurbs/excerpts might be too much text. |
|
@jwirfs-brock - I was looking at how Cowbird handles images and it gave me two ideas for handling images in our layouts:
In general, we can autocrop uploaded images, which seems to be the most frequent case, which is probably a good idea, but we still have to account for the case of embeded images where we can't easily autocrop. |
How hard would it be to mock this up for the explore page? (We could have a fixed image width, and then let the height be dictated by the aspect ratio, and the tiles would still fit, right?) For the homepage, the horizontal alignment doesn't have any meaning (at least not as it is designed now). The information is stored in the vertical hierarchy. Here as well it might be interesting to have a fixed horizontal width and variable height. Sometimes, it's easier to make that look nice when you have text to wrap around it, which we won't have because we won't be displaying summaries. Again, how easy would it be to mock this up so we can see what it looks like with real images?
|
|
Are we talking about the Explore page or just the 3 small thumbnails on the "latest stories" container on the home page? Because if it's the latter, then the thumbnail is already going to be kind of small (which is ok)... I don't think it's worth the effort to expand/grow the thumbnail - it's just a visual reference. |
|
@bpawlak, the mouse-over scroll effect was just an idea for a way to make images fixed height but still making it possible for users to see the entire image in a way that is subtle. The image wouldn't expand and grow (that would be visually noisy). Instead, it would slowly scroll within the fixed-height frame. I think before I mess around with that idea, I want to do some experiments with auto-cropping images which seems like it would be a better fit for most situations where we want a fixed-height image. |
|
Yeah, I saw that after I posted to github... I meant to go back and edit my comment but forgot! FWIW, I think the auto-cropping is probably all that's really needed (esp. on the home page) |
|
I'm going to investigate automatic cropping strategies as a way of making the images for the featured items (upper right hand corner of proposed design) and thumbnails (lists in lower row of new design) can have a more consistent height. I don't think this is blocking at all for you, @patternleaf. I also think we should take this opportunity to make news items a content type that can be edited in the Django admin. I can handle this part of things. One important consideration is that with the new layout for the homepage, the featured item list will contain 4 different types of content: stories, news items, projects and organizations. This makes selecting and ordering these items a little more complicated. For a first pass, @jwirfs-brock and I decied that we should show content items in this order: story, news item, project, organization. Right now, the featured blocks show the 4 most recently edited items with the featured_on_homepage flag set. Rather than imposing a limit in the code, I think it's easiest to just show all items with the featured_on_homepage flag set and leave it up to the admin to deselect items that should no longer be shown on the homepage. @patternleaf, check in with me before you get started on this part of the homepage if this is unclear. |
@jwirfs-brock, for now i think the single issue is good. as the nature of the task becomes clearer, we can break things out if it seems appropriate.
when i get to this part, i'll check in to make sure i'm on the right page. |
|
@patternleaf, FYI, I'm removing the hard-coded news items from the homepage template as part of #567 just to think about any considerations I'm missing to show news. |
|
Also, I find the line-height of the "Everyone's got a story to tell ..." title to be a bit much. Bumping it down to 1.2em or 1em (from 1.4em) looks better to me. |
|
I've always said I'd like to see us lose them site-wide, so making that a new issue works for me. |
|
I agree on making the "Everyone's got a story to tell..." text a bit On Fri, Jan 18, 2013 at 11:18 AM, bpawlak notifications@github.com wrote:
|
|
The center-justified title doesn't bug we on the Explore page, but we can I've opened an issue for it, #576, and put it in Iteration 11. On Fri, Jan 18, 2013 at 2:31 PM, Jordan Wirfs-Brock jordanwb@gmail.comwrote:
|
|
Well, the main page titles are center-justified (i.e., Grow Your Skills, About, Resources [http://floodlightproject.org/en/grow-your-skills/resources/], etc.). |
On the homepage, wire in latest stories, projects and organizations lists at the bottom of the homepage template. I created 3 new template tags to do this: latest_stories, latest_organizations and latest_projects. The heavy lifting is done by storybase.utils.latest_context and the storybase/latest_objects.html template. I chose 100px for the thumbnail width, because that's the narrowest thumbnail size offered by Flickr, our most frequent oEmbed provider. To accomodate this, I added 100px-wide default images as well. Closes denverfoundation#575, Addresses denverfoundation#433
… and margin of homepage header. (denverfoundation#433)
|
@bpawlak @ghing @jwirfs-brock could i get a quick review of the homepage title spacing/size: |
|
Works for me. |
|
The only thing that I noticed is that in the slider, the boxes indicating which item you are on still appear at the bottom, of the box, no matter what the length of the individual item is. With shorter items, you end up with a lot of white space. Not sure if that bugs anyone else. The titles look good to me. |
|
Also, should we have a length limit on the text that appears in the slider? We could just truncate anything that is longer and have a "...read more" link. |
|
What about something like this (making the main title much larger and bold) |
|
@jwirfs-brock We could do that, but it's not trivial. How long should the text be before it's truncated? Also, does the read more link reveal the hidden text in-place, or is it just a link to the detail page for that item? I'd argue that automatic truncating should only happen for stories and projects and that you should just take care with the news items that you edit manually. Finally, is the motivation for this to keep the featured box a relatively fixed height? |
|
And to @jwirfs-brock, yes I think we should truncate the amount of text used for the slider. Also, to eliminate the amount of white space that happens at the top (esp. with icons like the microphone), perhaps we could put the Story title and byline/date above the photo? I would think we could find a plugin to truncate the text to 100, 150 characters and clicking on the more "more" link would take the user to the story detail page. |
|
@ghing Yes, the motivation is to keep the slider at a (somewhat) fixed height. I would suggest a "read more" link just go directly to the item, and I agree that we should manually make sure news items are short. |
|
@ghing @jwirfs-brock @bpawlak re: white space. even with the text area a fixed-height, the homepage still appears imbalanced as it is. there's a bug for this specific issue: #573. also i just commented on that issue with a crazy idea for what to do with that white space. |
|
@bpawlak With the larger title, what would it look like if it were all on one line? |
|
|
|
If no one has any objections, I'm going to close this. Doc for discussion (with most decisions included) is here: https://docs.google.com/document/d/1GlEbrx7-sl4soh0pspTnQxs3Rgtj8oh5lsIgtRIcU-8/edit# Also, I've made issues in iteration 9 for the remaining items—at least those assigned to me, which I think is all of them. |
|
Closing! Geoff is planning to stage the latest later today. |
Admins can now create news items with a status of "staged" and see them on the home page. These will not be visible to non-admin users. In order to do this, I created a new status of "staged" and modified FeaturedManager.on_homepage to return these items as well as "published" ones. I then added a 'view' permission, implemented through user_can_view and anonymoususer_can_view methods on the various model classes (actually implemented in mixins). Finally the featured_items template tag uses has_perm to check that a user has the permission to view the item before passing the item to the template. I had to pass the context to this template tag in order to give it access to the user. Closes #593 Addresses #433, #567
The Organizations thumbnail link was pointing to the Projects list. Addresses #433
No description provided.
The text was updated successfully, but these errors were encountered: