Responsive blog design w inline expandable posts
If you saw any of my previous four blog/short-story template posts from the past week, then you may remember that they preview a truncated amount of content and the user needs to click a “Continue Reading” link to finish the article.
This sort of interaction is pretty familiar, but so too is an expandable cell that lets a user read within the very same page (no jump to a new page!). The trouble is, who wants to wrangle a software engineer into their small template obsession? Well, thank goodness, today I discovered that I could build this expandable cell myself thanks to jQuery accordion!
So, I’ve built another version that is still responsive, and employs the on-page expandable post! Woohoo!
Here is the page, full-width:
The text provided below the Story Title is the first couple of sentences of the story, or a summary of it.
When the reader scrolls to the end of the story, she can click on the story post (either image, title or text area) to expand the post and see the rest of the story:
She can either leave the story open and select another (multiple accordions can be open simultaneously) or she can close it by clicking the same area as before. This is a possible area for improvement - are people confused about how to close a story? Is that frustrating for them or is it okay because they can still expand other articles?
Now for the mobile view! The jQuery accordion works on mobile - even the animation is smooth and gorgeous:
and the post expands:
Check it out yourself!
And here’s a link to the jQuery UI collapsible accordion:
jQuery collapsable accordion: http://jqueryui.com/accordion/#collapsible