#

Magazine Layout for the Web

Date : 22. July 2017

On the return of a recent journey to Italy I was annoying myself on the airport and, thus, bought me quite an older book about Richard Avedon photography. Beautiful inspiring photographs, but what, by far, struck me most were some of those smaller pictures added on the margins of the pages: demonstrating how they were composed in Harper’s Bazaar magazine pages of the forties, fifties and beginning sixties by genius art director Alexey Brodovitch.

It was such a stunning way to divide and subdivide spaces between blocks of typography, white areas, finally, even in relation to the composition of the images themselves. I, at once, recognized dozens of obvious proportions referring clearly to the Golden cut, also blank spaces bordering text blocks within sober squares in a repeatingly degressive mode, thus beginning with big ones on the outer side down to smaller ones nested in their inside. Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.

A tendency to return exactly to that point from which we started. I am talking of explicit and distinctive magazine layout.

Now, what we can take over into our times of such splendid examples? I guess we have to talk about user interface (ui) design in the first place. It is since long the most important discipline to aim at for excellent typography as it gathers all what is displayed on electronic devices rather than using paper. In my web design beginner years at the start of this century I remember that we were so much fascinated by the new facilities which the monitor design gave to us, such as animation in the first place. We were tempted, and I think we were right at that time to do so, to try everything that brought us as far as possible away from static paper layout. Whereas for now there seems to exist a clear tendency of modern webpages and applications, at least in those of them trying to introduce some elevated style and elegance, to return exactly to that point from which we started. I am talking of explicit and distinctive magazine layout.

Moreover, I said to myself, these weren’t the results of a meticulous calculation but rather instinctive games of a superb layouter as he was.

And this is, by far, much more difficult as it may seem at a first glance! That is because we are confronted with a seemingly almost uncontrollable variety of devices and monitor sizes. Thus, modern grid systems developed refined methods to keep proportions (things that for many reasons before CSS3 were only very hard, if not impossible to achieve) neat and clear, and scale them up and down in a horizontal and vertical direction. Some pages as www.chanel.com base their concept on absolute positioning techniques employing Javascript recalculation. Meanwhile, almost unrecognized, there is another fine means to achieve similar things with pure CSS. Since CSS3 was introduced we have measures as vw and vh, instead of percentage and rigid pixel widths. That allows our elements to act relative (in all circumstances and independent of their surrounding containers) to our outer viewport size and proportion, in consequence, leaving us the choice to treat the latter like a magazine page.

What seems little and certainly not one of the most breathtaking news of the web (but in fact it is fairly much!) gives back to us designers the possibility to act just as those ancient brillant layouters. We regain control of the division of spaces between text, white room and photography, being free to do collages etc. And many of new cool and elegant applications will take advantage of this, I am convinced! On my own homepage (www.stefanseifert.com) relaunch I try to rely purely on viewport size relative measures. That is not only in horizontal sense, but also for rigorous vertical distribution of all elements keeping respective distances chained to page boundries, in both length and width.

To conclude, while I am dragging my browser window to control how my layouts adapt themselves harmoniously I enjoy a side glance at those adorable Bazaar pages in my new “old” book: being so proud of, at least, trying to get close to what those great artists had achieved before us and, thus, participating to pass it on to a demandful, exciting future!