The challenge of moble vs. desktop screen resolutions

Just a general subject for anyone that wants to comment...

Recently I've had some time to try to make my Composr website look better. One of the challenges I've been confronted with is how to make a website look good on both mobile devices and desktops. A year ago I suggested to Chris that above all, Composr should be mobile friendly. Somehow, I got the idea that no matter what elements, widgets, or objects a website owner puts anywhere on a site, it was up to Composr to make it look good. I thought that it was the code and css behind the software that was responsible for making everything look good, not the website owner. This is completely incorrect, I've learned. To make a website look beautiful or ergonomic, it requires thoughtfulness and intentional design. Believe it or not, I just now realized that.

Let me share the crux of the problem that I've encountered. Feel free to comment if you have a methodology for solving my quandary.

I think the advent of the left and right side panels (for full screen devices) was popularized by PHPNuke, probably. That's my memory of it, anyway. Back in those days, web design was just beginning to figure out how to display content on mobile devices, as I recall. CSS came along and things "evolved". Today we have the expectation that websites can be viewed on both desktop and mobile devices, and we expect the experience to be comparable. In other words, we expect the information transferred to us while looking at a website on a mobile device to match that of the desktop experience. Enter: the left and right side panels.

I want to suggest here that the left and right side panels (on a desktop view) are the bane of web design. On a desktop, the left and right side panels are wonderful, but they pose an awful problem for design on mobile devices. I think today we don't consider the left and right side panels much, but I believe that if we step back and look at the big picture, it will turn out that side panels are a curse we have to deal with, specifically regarding mobile design.

As you all know, the left and right side panels become a center panel on a mobile display, because on mobile, there is only a center panel. So the challenge is to create content that look/displays "correctly" on desktops as well as mobiles, especially considering if there are side panels. My question is: how the hell do we do that, and what rule of design should we adhere to that govern good mobile design, so that content looks good on all viewports?

Things would be so much simpler if there never existed side panels. But here we are. We have to (somehow) design content for side panels that also displays well on desktops. For instance, if I have an image that is generally square in dimensions, it will look fine in a desktop's side panel, but it will consume the entire screen of an iPhone SE as it is scrolled by. It doesn't feel right, it doesn't look good, and it feels like a waste of screen real estate. So how do we "fix" that, or is it even a real problem?

Anyway, I want to toss this out there and see if there is anyone else that has encountered this challenge, and to hear your thoughts on the matter. It feels like there could be established a set of (very) general design rules for side panels, taking into account the desktop view. As of yet, I have not discovered them.

Your thoughts?
 

Everything you said there is true.

Panels are not good for mobile design.

For many years now minimalism is really how people usually solve it. What are the very basic things you need to convey, and design how it will look on mobile, and then embellish on desktop if you so wish.

Generally a screen will do one thing, rather than have that portal-like feel.

As for specific designs, it's best to just look at what others are doing. "Great artists steal" (well, get inspiration from others and build from it). Look at Instagram or Reddit, for example.

Work continues on v11, with better defaults.