Mobile First, Responsive, Tabs – not stacked

[colink]

Hi
Firstly I am a HTML/PHP/CSS hacker – in the old sense of the word. I can change existing code but could not start with a blank page.

I am looking for ‘general guidance’ to implement a simple site using ‘mobile first’ principles.

I am trying to understand what can be done to give an accurate spec to a competent html5/css designer.

I want simplicity with minimal clicks and minimal scrolling.

My application will essentially be a database driven page with 4 columns / tabs. Once designed content will not change and there will be few images. It will essentially be a web app. It will be primarily used on mobile devices but can obvioulsy be used on desktop.

This image shows the layout I would like for desktop and mobile.
http://i.imgur.com/GDSa96p.png

My design has 4 tabs / columns, each one optimised for 320px wide
Ideally on a wide screen I want the 4 tabs to sit side by side
on a narrow screen I want only 1 tab showing but all the tab titles showing so that user can click to view the tab they want.

The content in each tab / column will be fixed, responsive not required.

I have looked at many sites and cannot see a responsive design implemented in the way I want.

Virtually all responsive sites I have looked at simply stack the columns on top of each other giving a very tall page on mobile.

Possible solution 1

The closest I can find to what I want is the menu structure on this site.

http://transfinancieel.nl/#sponsor

I presume my design could be implemented in a similar way: On desktop show tabs side by side and on mobile stack them all on top of each other. Keep the menu at the top and simply scroll up or down as each of the four buttons are clicked.

Is this the best way to implement what I want, or is there a reasonably simple way to use media queries to implement my 4xtabs design

Possible solution 2

Is it practical to create 2 seperate sets of css – one for desktop and one for mobile then use media queries to determine which css section to use.

The following would be ideal:
At +1280px wide show all 4 tabs / columns
At 1024px wide show 3 tabs then click to open 4th tab
At 320px wide show 1 tab and click to open other 3

I know that Gmail, Facebook and Linked in now have mobile sites where the menu button is clicked at top left, page moves to right a little then second page is selected. That is too many clicks for me.

Any comments / suggestions appreciated.

ColinK

[Alen]

Here: http://codepen.io/alenabdula/pen/JbtrD

Just add some JavaScript to load different content when on mobile view. So when you click on Tab 1 it would load appropriate content and by toggling visibility, or you could use AJAX to load content.

[colink]

Thanks for the suggestion.

Does anyone have an opinion on usability or ease of implementation of the two presentations suggested:
1 Tabs
2 Stacked – as with most responsive sites with buttons to scroll to each section

Does anyone have any example sites using either method – I have looked and can find neither.

Thanks ColinK

[Author]

Posts