Introduction
QuarkXPress supports two different types of Digital Layouts
1. Fixed Layouts
2. Flex Layouts ( new in QuarkXPress 2019 )
Fixed Layout
• Fixed Layouts are developed by keeping in mind the pixel-perfect nature of print designs
• These are better suited to bring print designs over to the web
Fixed layouts are designed to create HTML 5 outputs optimized for specific device form factors - such as cellphones and tablets. But because the web can be consumed through different devices of different sizes, so the designs that we publish might not work as expected for all devices. Fixed layouts allow, and require, users to create multiple layouts - one for each device, and device orientation.
Different layouts for phone and tablet devices
Flex Layout
• Flex layouts, on the other hand, are target device-independent layouts
• The single layout can be designed to target different devices
Once the layout is designed, it will adjust itself to different device sizes without sacrificing legibility and relevancy of your content
Single Layout to target different devices
What’s new in Flex Layouts
To create responsive web publications, there are two additional key concepts that a designer has to account for in their layout design:
1. Containment hierarchy
2. Rule-based layout-ing
Containment Hierarchy
Responsive Web Pages are intended to be opened on devices whose available display area, and aspect ratio will vary. A device with a narrow display will require the content to be displayed in a narrower space; to retain legibility – and keep text readable – as the available width decreases, the depth of the content display area will need to be increased. This will impact content which appeared below – which will now need to also be moved downwards. The correct order of content affected by this "ripple effect" can only be determined if there is a defined hierarchy of elements which can be used to define the reading order of the page.
This is quite different from what we do for Print Layouts as it does not impose any element hierarchy and every element on the canvas is generally relative to page origin.
HTML by nature has a hierarchical structure. Where a typical HTML document has a head and a body, the body typically has divs for header,  footer,  navigation, main content area, etc. Main content area div can contain divs like sections, each section div further can contain other divs sub-containers etc. So to create true HTML which is both developer and web-friendly, containment hierarchy has to be introduced for flex layouts.
Rules-based layouting
Unlike fixed layouts – where multiple different layouts are manually created for each expected display size – in a responsive layout, you cannot predict the display size or aspect ratio at design time - it is only known at display time when the HTML is rendered onto the user's device. This means that a designer is no longer defining exactly where on the fixed size page a piece of content will be displayed, but rather defining the logic that will be used to determine how to position the content on the page. This is not an unfamiliar logic for graphic designers; when creating a style guide that they expect members of the production team to execute when creating layouts, the designer will define the rules and logic they expect the production designers to use when laying pages out. The process of creating flex layout rules which are applied by the browser on the device is similar, in principle.
Container Box
To support Flex layouts, a new box type, named "Container Box", has been introduced to QuarkXPress. A container box can contain other boxes, and allow rules to be applied to the boxes within that container.
• Container Box can contain picture, text, none and group boxes.
• Container box is responsible for maintaining its layout based on various rules defined on it.
• A new tool is available on the tools palette, to allow the creation of new container boxes.
• The rules that can be applied to handle responsive behavior for these containers are available to designers through the measurement palette.
• Container boxes support nesting one within the other.
This ability of nesting other container boxes allows us to create deep layout hierarchies, which helps view our design as a collection of mini layouts.
Therefore we can solve our design problem by dividing it into smaller pieces focusing on a single piece at a time. These mini layouts can then be stitched together to create a complete layout. We can also create a library of mini layouts to be used later in other layouts.
Container Box implementation is based on W3C’s CSS Flexbox specification, which is supported by all current browsers. For further information about Flex Box please refer W3C specifications at https://www.w3.org/TR/css-flexbox-1 . You can also refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Fixed Layout
• Fixed Layouts are developed by keeping in mind the pixel-perfect nature of print designs.
• Better suited for bringing print designs over to the web.
But because the web can be consumed through different devices of different sizes, so the designs that we publish might not work as expected for all devices; which means we will have to re-design our publication for different target devices.
Typically when we design a fixed publication, we create different versions of publication each for desktop, mobile, and tablet. Further, the design has to be developed for both orientations of tablet and mobile devices.
<< Previous