Horizontal list of blog posts for small touch screens

8 Responses

1. Pro Joni Korpi

   I tried making the list of blog posts in my upcoming redesign horizontal for mobile sizes. In theory, it's is a beautiful way to fit large amounts of browseable content on small screens.

   In practise, only iOS5 users would enjoy it, and even for them it would be quite buggy (http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error). On every other mobile OS/browser combination, the experience would be awkward at best, since most browser makers still don't seem to care about making horizontal scrolling actually work.

   (The situation is equally bad with desktop browsers: many non-Mac users have mice that can't scroll horizontally at all.)

   Lesson learned: horizontal things on the web are still incredibly goddamn awkward to pull off. Stick to vertical things. :(

   over 1 year ago

2. Jeremy Swinnen

   That's a shame!

   over 1 year ago

3. Ethan Marcotte

   Hrm, that’s a shame. Maybe present those blocks as a grid by default, but enhance up to the scrollable view via a lightweight test (à la Modernizr) to see if -webkit-overflow-scrolling is supported?

   over 1 year ago

4. Pro Joni Korpi

   @Ethan I wouldn't be able to fit a large amount of posts in the list then, since they'd fill the page and make it stupidly long, which is exactly what I tried avoiding by using this solution.

   I really need to come up with one good and robust solution. Designing and maintaining two would be too awkward. :/

   over 1 year ago

5. Pro Joni Korpi

   Then again, to do anything even remotely interesting in web design, I guess there's no choice but to maintain several such solutions. :/

   over 1 year ago

6. Dave Whitley

   Also, the Sleipnir mobile browser uses left and right swipes to switch between tabs I think.

   over 1 year ago

7. Pro Valtteri Karesto

   I actually tried this same approach last week to create responsive navigation. I had a long horizontal navigation and I wanted that users could horizontally scroll navigation links so it wouldn't take so much vertical space. It worked quite well on iOS 5 but I faced problems with other mobile browsers. So I had to ditch that idea.

   This would be such a great way to make sites shorter. I'd love to use this design pattern especially with long navigation lists and long lists of blog posts.

   12 months ago

8. Pro Joni Korpi

   @Valtteri Karesto I ended up scrapping it for the same reason. Device support is just too lousy. Would have had to create alternative navigation methods for those other mobile browsers.

   12 months ago