User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm designing three column layout website where all columns scroll independently. There is no problem on large displays, if header(I have large header) is fixed, but on smaller screens (1366x650 px) I have left small space for content.
If header is not fixed it performs strange when scrolling.
Are there any rules what to do with headers when using 3 column layouts? And if fix header what to do with small space for content on smaller screens? Thanks in advance
Three column layout is kind of tricky and shall be used only, if there is running text similar to newspapers.
Further, scrolling makes it worse because user will lose the connection b/w header and its content.
On smaller devices you should present only one column at a time.
BTW, why don't you share screenshot?
People give suggestions when they see things clearly.
Test it! Seriously, your layout sounds quite uncommon and I am willing to bet that your problem is not frequently encountered. My suggestion would be to A/B or user test the two methods and see what works best.
As for a fixed header: Fixed headers are used (especially in mobile view) to allow the users access to navigation quickly without having to scroll back up.
You mention three different columns and all of them have scrollbars. I also imagine that the header sits outside of these three columns. This sounds quite jarring already. Provided your layout actually works (test it) then a fixed header seems to be necessary.
Things to consider:
1) On mobile, if all three sections are scrollable how will the user scroll to the top by touch alone to find the header?
2) Is there access to the navigation through another way besides the header?
3) Is the mobile view big enough to accommodate 3 column layouts? Should those perhaps split into three individual pages?
4) Do you need all the content you have in the header in the mobile view? Are there things you can remove, move around or hide inside an off-panel navigation?
In all honesty, without a visual, your layout sounds confusing and quite hard to use by thought alone. I cannot really have an educated opinion without knowing any more details.
I can't emphasize enough how important it would be to test your layout and of course the fixed/unfixed header with your potential users. You might be surprised with the results.
