Next iteration, based on comments and designs in Second pass, bug 865262.
We are currently figuring out updates on image dimensions for thumbnails, how that works with breakpoints/responsiveness, and figuring out a dynamic way to load content using Packery that will leave minimal gaps in the layouts, particularly once content is loaded in dynamically, and the gallery loads additional non-featured content. Re. stamped content (content fixed within the page): ednapiranha says: 10:17 it doesnt matter if you dont care about the gaps that packery will create 10:17 if you do care 10:17 we have to have restrictions So that may limit the number of tailored messaging boxes to one. Cc'ing Humph to be aware of potential thumbnail changes; cc'ing Brett and Erica to be aware of potential content restrictions.
So it makes better sense to have two breakpoints for the layout - 1020px wide (desktop) and 640 wide (for retina mobile). In most cases we're looking at: 1. mobile is for scanning/viewing 2. desktop is for actually signing in and working on projects Chances are nobody is going to work on projects in mobile and are likely to be on desktop so there is no reason to try and hit every width possible. This also allows us to control the grid for the gallery to avoid gaps.
Created attachment 751876 [details] Homepage v4 Adding another iteration of the homepage. Updates include: * default (robot) thumbnail as signed in view * thumbnails at 16:9 ratio * updated copy and new look in the "Stamp" ("make history. Or, um, cat videos") * "More makes" button now positioned at the top of the ctas box, so content should scroll underneath it. Ideally, would like this button to appear only once the user has scrolled down the page, similar to Pinterests "scroll to top" button * updated CTAs copy. Images are placeholders for now but these can go ahead and be cut as I'm not sure we'll have time to return them. * Updated footer design that now includes partners. This functionality is described (and ongoing process will be recorded) here: bug 873532 * In the psd, I've highlight a folder yellow, which is the on-state for the backside of the small thumbnail (an arrow with "make details") Will file this into bug 870475 Think that's it for now. Jen/Dale, let me know if there are any questions!
Created attachment 754148 [details] Homepage v6 This is a redesigned homepage giving more space at the top of the page for an intro headline and a bit of text. Filter is also visible from first load. The previous search functionality that popped down the search/filter bar is no longer going to happen; instead we'll have a separate page for Search (as per conversation with Brett, Kate and Jen). This page also has a slight colour change; the teal is working much better for me than the red, which seemed too much like a warning. So the current thinking is that all text links should be blue/cyan, and all button links should be white on a teal block. Kate/Chris, feel free to play with this decision, but we should make this consistent throughout the site, whatever is decided. (We'll need to follow up with Amoeba who is building the Events section). You'll also notice a new icon on each thumbnail. So the two there are "Details" and "Remix" – Details will take you to the make detail page, and remix will load the make into the appropriate tool so it can be remixed. The tutorial banner should also appear when a tutorial is available. The frontend for the thumbnails is being implemented in bug 876160.
Created attachment 754149 [details] Homepage v6 thumbnail backs This shows the reverse sides of the thumbnails. This is being implemented in bug 876160.
Created attachment 754150 [details] Homepage v6 Load More and back to tops button This shows what the page might look like when the user "loads more" makes into the gallery. Speaking with Jen, when this action is taken we may need to move from varied width columns to 4 equal columns, hence the more uniform look of the content below those that were in the initial page load. I think it would be cooler if this was actually more consistent; either always 4 column equal, or always varied, but I realized we may have to make do for MVP. Kate, if you want to figure something else out please do! Also notice the "Back to Top" button appears once the other content has been loaded to make the page a bit longer. Would be nice for this to pop up as the user scrolls down, so they actually notice it. Am thinking it should work funcationally very similar to Pinterest.com.
Commit pushed to master at https://github.com/mozilla/webmaker.org https://github.com/mozilla/webmaker.org/commit/7931cc88b639c0cab43022654ac3baa27d214539 Merge pull request #33 from ednapiranha/bug868591 [bug 868591] css updates on homepage
Just reviewed the revised layout above with Jen. Seems to strike a nice balance between resizing well and avoiding gaps, while still maintaining a sense of randomness on initial view.
Commits pushed to master at https://github.com/mozilla/webmaker.org https://github.com/mozilla/webmaker.org/commit/7bff88d090a1921bc49aa994efb344b78dc32e1d [bug 868591] carousel footer fixes https://github.com/mozilla/webmaker.org/commit/961bdfbf3d972a16f59155804b59d99bbd6eb825 Merge pull request #34 from ednapiranha/bug868591 [bug 868591] carousel footer fixes
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.