iPad splitview layout as a website layout?

Question

Im in the process of making a website where people can sell or buy pets/animal books/pets accessories. I was thinking about doing a very diffrent layout. And that is an iPad splitview application. What are your thoughts about implementing this layout as a web layout? Personally I love it. I think it is very easy to navigate and find stuff. The only cons is that there are few items displayed in the left sidebar.

The other layout that I was thinking is this one. A simple gridview with no sidebar. However when you move the mouse to the search text field on top a search-filter-box will fades in giving the using to specify category and so on. When mouse goes out of the box then it will fade out.

The last layout is this one. A sidebar with filter options and a result view displayed as a gridview on the right. When clicking on an item a whole new view is appeared with no sidebar. as seen below.

What are the cons and pros of using ipad layout as a web layout? I really cant decide which layout is the best option for this website. Please help me choosing a layout. Also an extra bonus question: I really want to make it responsive. If I decide to choose the first layout, how would I implement the responsivitiy on it?

This application is both for pc, phones and tablet.

Answer 1

For a web layout, you should combine both 1 & 2.

Generally when searching, or going through categories, you want to show the user as many products as possible. This is where you grid layout in #2 would make sense.

For a single product page, you should use #1. It puts the fucus on a single product and has a sidebar for related items.

Answer 2

Any of those 3 layout types can be very usable on a screen with enough size (i.e. iPad size, or maybe 7 inch tablet size) but the ones with sidebars can be problematic on smaller (phone size) screens, often in transition to the smaller screen the sidebar is removed or moved to a top bar. This might be a problem.

Your 2nd layout type can transition easily to any size screen simply by changing the number of columns, there's no sidebar to deal with.

You need to decide if having a sidebar is worth the problems it brings to in transitioning screen sizes and orientations, e.g. if the sidebar disappears on screen orientation change it might be a usability problem.