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. :(
almost 2 years ago
That's a shame!
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?
@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. :/
Then again, to do anything even remotely interesting in web design, I guess there's no choice but to maintain several such solutions. :/
Also, the Sleipnir mobile browser uses left and right swipes to switch between tabs I think.
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.
over 1 year ago
@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.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter