2

We have a blog on our Shopify store which we are pulling into our marketing site via RSS. It will display the articles' titles, date, and full content. We're using a Bootstrap 3.x template and are trying to find a way to show the information to our users. The site is mobile-first (focused on iPhone 5, as most of our customers are on that) but doesn't ignore desktop users.

Currently, we have very few articles, but eventually the blog will have hundreds of posts. The RSS will be fetched via C# server-side code and displayed in a Bootstrap tab on the page that will be full width. The articles will contain text, photos, and videos (hosted on YouTube).

Here's one way to show snippets of articles to users (http://webapplayers.com/inspinia_admin-v2.0/blog.html):

enter image description here

Another way is to add pagination to the bottom of a predefined number of posts, displayed in sequence in either their entirety or as snippets (http://thenextweb.com/apps/2013/08/16/best-blogging-services/):

enter image description here

If thumbnails are used, the user gets a general idea of each article's content, and knows from the UI that there's more to see by clicking to expand. When clicked, the thumbnail can expand/pop up (though not sure what's best for this).

Pagination will be used regardless, as there will eventually be hundreds of posts. What's a clean and intuitive design for these blog posts?

Improve this question

1 Answer 1

Reset to default
2

I would go for the first option.
Showing blog posts on a "post-it" style seems to be a better option as you can show more information on a smaller screen and the user has the access to the full information at a distance of one click (or touch).
I would suggest you to also put a thumbnail or a bit transparent version of the main image or video of the post in the snippet (on the posts wich has images/videos), because the user memory works better with images than with post titles and because images attract more attention than texts. Something like this:
Thumbnails (remember to keep the red play button in case of YouTube videos)

Other advantage of this approach is that the users will note less difference between the mobile and desktop version of the website, as the layout will be exactly the same, the unique difference is in the number of posts displayed.

When clicked, the thumbnail can expand/pop up (though not sure what's best for this).

About this, I think the best option is to expand the thumbnail to use the whole row to display the full content. I don't like the use of pop-ups to display much textual content... An image gallery is the perfect use of a pop-up style like this, but I think it's not nice for blog posts.

eventually the blog will have hundreds of posts

So, don't make pagination and load the posts on the fly, as the user scrolls the page. This way the users will have a better experience and you will reduce your loading time, as you don't need to count the posts (to make pagination) and have to fetch only a few posts each time. Also, avoid loading all the post content and putting it hidden on your HTML... Instead, make an ajax request and load the whole content of the post from the server when the user clicks on it.

I hope I helped.

Improve this answer
1
  • 1
    Thanks, @Dinei. Very good suggestions. Now to locate a good Bootstrap way to do expandable thumbnails to take up the whole row and hide the other thumbnails.
    – Alex
    May 22, 2015 at 13:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.