Perhaps I speak for designers everywhere when I say that website responsiveness is such a PITA. There are a plethora of viewport sizes X form factors and creating designs which shine across the spectrum from mobile to tablet to desktop is difficult.
One may imagine that designing for mobile is difficult - how much does one cram into that small portrait real estate? But I tend to believe that designing for larger and larger screens is even more difficult - simply because there is so much real estate, and sometimes filling it is a tough ask!
This may be one of the reasons that Instagram has always resisted a non-app approach. Also the reason why a great many services have an app-only approach - because thinking large screen for consumer oriented sites is rather difficult.
Note that there are a lot of cases where larger screens are obviously great eg busy dashboards, design tools, etc.
One of the elegant ways in which this has been solved in the consumer internet world is a multi column, cardified approach. One can see this design paradigm everywhere - on social media sites (Facebook, Twitter, LinkedIn...), community sites, tools like Slack and Teams, etc.
So keeping with that approach, I'm quite happy to release to production our 3 column layout for larger screens, and with this we have 3 distinct designs for the 3 classes of devices:
Mobile - single column
Tablets - 2 column & 3 column
Desktop - 3 column
We've had a 3 column layout on one of the Network Sites build on MainCross for a couple of years now, and I was quite delighted to see the new Twitter design copy this shamelessly.
Here's how it works
At a width of <1200px, the earlier 2 column layout is used, with a navigation bar at the top.
When the viewport width is >= 1200px, we switch to a 3 column layout, and the navigation bar at the top is removed, in favour of a navigation column at the left.
The maximum width of the site can now go up to 1366px which is a sweet spot for how far the eye can traverse sideways on larger screens.
As a side note, Facebook does this all wrong - it occupies the entire screen edge to edge with humungous ugly swatches of grey in the middle. Twitter and LinkedIn correctly use a centered view. LinkedIn goes upto 1128px, while Twitter goes upto 1200px. Both show 3 columns at these viewport sizes (while we show 2 columns).
Powerful navigation column
The navigation column at the left now works on the basis of fixed destinations with an allotted icon for each. It automatically creates menu options depending on what's available on the network site – marketplace, hashtags, story arc, statutory pages etc.
The navigation column will be enhanced in subsequent releases with dynamic menus, ability to pin frequently used destinations, etc, and will become quite useful for power users.
