How to get a story across in a beautiful way

Hi all,

tl;dr : I need advice how to use all the whitespace on a high resolution device, in a way that the design is still pretty and doesn’t mess up [=kill functionality on] smaller resolutions.

I want to make some sort of an online magazine, which is going to be a pleasure to read, but I cannot find a good form that fits all devices and is pretty at the same time. I want users to be able to select different topics through the menu and scroll down or up to read the content. I thought I could use percentage widths on div’s and sections, but displaying that on an iPad or Macbook with a lower resolution than my 27" monitor messes up the design.

The process started with a horizontal scroll, which is tricky to do right on multiple devices. Afterwards, I’ve made a navbar on the side, which is a pain scaling when looking in landscape mode on iPad, or on a smaller resolution. Now I’ve got this with a dropdown menu with interactions on the button.
https://webflow.com/design/bigvssmall?preview=07a53827c0d414e87eab24f8c53cf6d5

And it works perfect on Ipad and Macbook, but on my screen there’s almost twice the whitespace as there is content. Is there a way to use divs or sections in a way that I can use the whitespace, and avoid using containers too much (because they force content into the 1024px width)?

Any suggestion is welcome. Thanks in advance!

[by the way, text and content is just for dummy purposes, not styled yet]

For text formatting:
Create custom CSS snippet to include columns:
You may want to look at CSS columns as an option for text flow and to increase onscreen readability. CSS Multiple Columns

Design Inspiration:
I would also look for inspiration in traditional editorial design from newspaper to tabloid sized magazines as they have spent decades refining the craft of great page design and editorial flow and you can do some creative adaptation to digital. I can look up some of my bookmarks and pass along some of the stuff that inspires me if you like.

Full Screen Reflow:

The Flipboard app has an article on the engineering behind its app (will locate it and follow up with a link). I am not recommending you attempt to create something on that scale :wink: but the page layouts and the way they customize reflow is really inspiring from a page composition / responsive design approach. They have accomplished some genius in their design in my opinion especially to be remapping existing content into a new personal user curated medium. It is a beautiful app.

Moving content beyond the container:

Look into a wide screen media query as it can open up some nice options for larger headings and layout size rewrites for large screen desktops. You can rewrite (override) any CSS property for a class inside the widescreen media query) Lose the container and build your own. Using larger media queries in combo with fluid full screen layouts (percentage based widths) should add a great deal with a little experimentation. You will have to publish to preview the rewrites for larger sizes (as well as for the CSS columns above), but that is really easy to do.

This is something I am very interested in and am beginning to experiment with myself. Happy to follow up with some links. Nudge me if I forget @Diu

Here are some basic code options for CSS columns

  <style> 
    .txtcolumn-2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    
        -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
        -moz-column-gap: 30px; /* Firefox */
        column-gap: 30px;
    
        -webkit-column-rule: 1px outset #ddd; /* Chrome, Safari, Opera */
        -moz-column-rule: 1px outset #ddd; /* Firefox */
        column-rule: 1px outset #ddd;
    }
    
    .txtcolumn-3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    
        -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
        -moz-column-gap: 30px; /* Firefox */
        column-gap: 30px;
    
        -webkit-column-rule: 1px outset #ddd; /* Chrome, Safari, Opera */
        -moz-column-rule: 1px outset #ddd; /* Firefox */
        column-rule: 1px outset #ddd;
    }
    </style>

It may be easier to export your code to understand how to effectively rewrap for each media query in webflow. The code can then be added to the webflow custom code section.

I personally prefer to modify properties for the larger media queries using the chrome web inspector (temporary) and tweak values for any element to taste for a given width. Copy each tweak to a text doc and then add them to the webflow custom code head section when you are satisfied with how the layout responds.

Here are some bookmarks of publication design and layout:
http://www.pinterest.com/visionarylogic/publication-design/

Thanks @vlogic, very much appreciate it.

Especially the break-out container is worth it. Will incorporate it asap.
I had already made the columnize custom css for my paragraphs, so will comment them in again.

Thanks for your inspiration for publication design. Will post an update whenever ready.

1 Like