Update blog layout
Closed this issue · 25 comments
Hi @Prid13
Here's a new one for ya.
Our blog today features a column to the left where all historical posts are listed. This is starting to look a bit messy now. When you click a post to read it, the column follows along.
Can you experiment with:
1. Removing the left column from posts, e.g. like this:
2. Rearrange the content on the blog front page ( /blog) to look more like a news site.
It could be something like this:
https://preview.themeforest.net/item/nimbo-personal-wordpress-blog-theme/full_screen_preview/22867641?_ga=2.167439932.384548502.1674744908-1135655641.1674744908
Please note: We don't have a lot of images for all our posts, so it's important that IF we choose a news site layout, we need to not rely on having images. Some posts don't have images at all. Wanna have a look at some options? Put your designer to work! :)
This was fun 😇⭐
Tested 2 layout designs:
- 3-Grid Column Cards
- Single Column News Feed
3-Grid Column Cards
- Removed some of the icons and info to minimize the content
- The main problem is that the Titles are tooooo long for this to effectively work 😅
Here's with everyting still intact:
Videos:
brave_DjxB8HKyEB.mp4
brave_RwsNNvowGd.mp4
Single Column News Feed
- Looks cleaner with all the info still there
- Harder to get an overview of all the recent posts
Video:
brave_2Bn5xDa4vU.mp4
If the multi-column card layout is desired, then what "unnecessary" info can we shave off to make it look cleaner? :)
really good work with this, @Prid13 !
(hey, @jorunfa, you should take a look at this, too).
Zain, I think we should try to figure out a way to use the 3-column grid system for the /blog front page. What if we made a rule that a headline basically cuts off after XX characters? So a longer one will be cut off by (...) ? That's one way to solve it, at least.
I don't think we need the sharing buttons or tags in the 3-column grid.
Do we need the content above the truncate in the 3-column grid? Maybe, it does look fairly good.
Thoughts?
Ellipsis are an option. FYI, that would be something like:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
(i just happened to have that in my clipboard, actually)
But I'm slightly torn between 1 and 3 column card setup. 3 looks better, but 1 serves the content (and our long ass headings) better. Would be interested in seeing how it looks with the ellipsis.
Maybe up to 5 lines of heading on cards without header images?
I think I'd limit tags to one line as well, and align-items: baseline on the container holding tags and the read more button, so they're aligned, maybe.
For me: I think we most def should have the teaser text in the cards. The use case/important thing is not to have an overview of all articles, but rather that you find a recent one that's interesting and catches your interest.
If the tags are chips, do you need the Tags: label? I'd like to see how it looks if you remove that and clamp the tags to one line, and align it with the read more button.
For me: I think we most def should have the teaser text in the cards. The use case/important thing is not to have an overview of all articles, but rather that you find a recent one that's interesting and catches your interest.
I'm with you on that one. Agreed.
Love the layout! Great improvement to the existing setup! 💯
I like the grey background with the white article like in the image. Would it make sense to also make this the new default layout for viewing a single blog post in full page?
So when clicking "read more" it would just expand downward keeping the grey background
@jorunfa Super coincidence :D! Thanks for all the handy tips and tricks, appreciate it ⭐
@jonny-wg2 Awesome, thanks 😇! I'm guessing you want the 1-column layout for the Blog overview as well? What are your thoughts on the 3-column grid? When clicking on "Read more" the user could be directed to the new single post layout, perhaps?
I gave it my all with this one:
brave_jUPqgG4RCi.mp4
Thoughts? :)
I think it looks quite good!
I'm no designer, so take this with a grain of salt, but I'm wondering how it would look with more things aligned on a single vertical line on the left side of the card, or two at the most (i.e. eliminating gap 1 and perhaps 2):
I also like that the read more buttons are easy to spot. Small concern: how do they look like hovered/with keyboard focus?
@jonny-wg2 Awesome, thanks 😇! I'm guessing you want the 1-column layout for the Blog overview as well? What are your thoughts on the 3-column grid? When clicking on "Read more" the user could be directed to the new single post layout, perhaps?
I think we can use both layouts, 3 columns when on web and on mobile we switch to the 1 article.
Great work!
+2 on @jorunfa 's suggestion with the alignment - small fix.
Great improvement though from what currently exists!
Good comments, @jorunfa and @jonny-wg2 ! Thanks
Zain, I think we should go for the 3-column layout on desktop. How about keeping all headlines in the same font size and just cut them off as you do it here? We can start using shorter headlines as a general rule.
Wanna make these changes and go for the PR?
@jorunfa thanks for the feedback. Here's a quick mockup, what do you think? :)
@torotimes I'd really like to start implementing this, but I hit a roadblock not knowing how to deal with a blog card with image next one without (screenshots are from before the changes above were made):
Does it look ... good enough?
I tried making evening out the heading levels like this:
But that looks weird, and it's going to be chaotic with these mixed in with the normal-sized image-less cards in other rows, not to mention hard to pull of programmatically. Thoughts? :)
My opinion: I'd go for a placeholder/generic image, maybe just some gray-to-gray gradient or a wgtwo logo for the cards without pics
I like the new cards better!
just one naughty boi here
My opinion: I'd go for a placeholder/generic image, maybe just some gray-to-gray gradient or a wgtwo logo for the cards without pics
I agree with that. What do you think @torotimes ?
I like the new cards better!
just one naughty boi here
Thanks 😅🌟
I agree with the placeholder/generic image. Let's go for that. 🔥
Wanna issue the PR?
Wanna issue the PR?
So, those images were just design mockups, pure "photo editing" 😅 Turns out there's a lot more pain involved trying to implement the layout changes, hehe. Gonna have to need some more time for this :)
Woooot! It wasn't real code?
😅 Haha.
Maybe I should have figured that.
How many hours do you think you need for this? Thanks so much for helping us out!
Tor
@torotimes It's DONE :D
Live Demo | PR
Woooot! It wasn't real code?
Technically, it was live editing on Wgtwo's page by using Chrome Dev Tools (F12, or CTRL+SHIFT+I), but who knew actually implementing those changes in the source code would be such a pain in the behind 😅 The library used to generate wgtwo's website had a complicated setup for the blog layout scattered across dozens of tiny components, and had me manually override each and every single one of those components to make this work. That wasn't a fun experience, haha, but I'm soo glad it's actually done and it's working TuT
The only thing missing is mobile responsiveness, so pls check for bugs and give me feedback on what needs improvement :)
regarding /blog
One more thing: Can we get "infinite" scroll instead of having to click to the next page after only 9 posts? Alternatively, double the amount of posts before you have to click for older posts?
"infinite" scroll
I thought about that, but as it stands, the library being used to power the website and the blog is a bit limited on that front. I've already "hacked" it a lot visually to get that blog layout redesign to work, but infinite scroll will unfortunately be a very difficult task, and I don't know what the SEO implications would be 😅 I hope page buttons are okay for now :)
I can double the amount though 😇👍
PR: #255