So can you have 2 or 3 columns on larger smart phones, like a newer iPhone or Android?
Put another way, at what width is 2-columns acceptable?
What about 3-columns?
Who says you canât eat mac and cheese and shoes? Itâs widely accepted to be a terrible idea. Only nutty people think otherwise.
Then it sounds like you just have bad content if the user scrolls through 3 columns worth of content and doesnât find anything useful to click on.
Anyone care to second that?
Who said click?
If a user has to scroll through one long article and another long article and on and on to get to the last article (or summary) which would have been at the bottom of the right column, that is a lot more work than just going diectly to that last article in a 3-column layout.
It is a serial search versus a dynamic or indexed search⌠(Serial searches are so 1970sâŚ)
Perhaps then you shoudl consider providing 250ish character previews of each article (with a read more link) so users can get a gist of the article, and go to a full page version of it? Just a thought.
1 Like
Yes.
Yes you can, but js works better.
Yes.
Yes.
It is down to your own discretion where you add breakpoints. In a desktop-first approach, you would design the page as normal, with multi columns if you wish, but using % widths to make it stretch and compress as the browser width changes. You can drag your browser edge in and out or use a simulation mode to watch how it behaves as the screen narrows. You just have to watch where things go pear-shaped, or columns become too cramped. This is where I find simulation modes useful, they display the size in pixels, so you know where to add a break point.
1 Like
Thereâs usually an option in the simulation mode to set custom sizes, so if you know your site breaks at a specific width, then you can create a custom size for easy access back and forth whilst testing. Generally speaking though, the simulation mode will have a bunch of common sizes built in, as well as a simulation for throttling bandwidth
I have had a go at mocking up a simple example of a responsive page based on a three column layout.
Itâs not the best looking page you will see, or the best example of RWD, Iâm sure others could do better. But it should illustrate some of the basic methods you can employ for a site of this type.
It only breaks at about 280px which isnât bad, and thatâs only the menu, that does not fold or go hamburger in this example.
Take a look at the css and comments, maybe copy the code and view in simulation mode to see it working.
1 Like
This is another version using show/hide rollouts for the secondary content. These are pure css, no js involved.
1 Like
Would you expect to get the same experience listening to a 5.1 surround sound recording on a portable radio, or watching an IMAX movie on a tablet? Different mediums have different limitations and itâs impossible to give the same experience to all users regardless of the limitations of their device.
No, you misunderstand. Mikey has trained himself so one eye will read one column, while the other reads the next one. His brain is multi-threading, taking in both stories at once. Pretty smart donât you think! 
Ha ha! Another SitePoint comedian!
My point was that going from surround-sound stereo to transistor-radio mono is silly.
It seems to me that at over 550px, you could possibly have a main content column and then a small right or left column with simple content. (I thought I saw this in a video last week, but would have to go back and check.)
Thatâs possible.
One of the most annoying smartphone habits for me is: people who listen to music on them, using the âloudâ speaker. It sounds awful. USE YOUR EARPHONES! I donât want to listen to that ****!
Sorry, donât want to send this off-topic and set you off on another anti-smartphone rant, itâs not productive.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.