QuarkXPress comes with a selection of carefully constructed templates to give you a rapid start on creating a responsive website when time is short.
But you can really showcase your creative power when you leave the templates behind and start to build your own pages. You can do this by using the Flex tool to create containers, by converting existing elements into containers, or perhaps most usefully, by dragging blocks and elements into the layout from Window>Flex Layout Blocks.
The root container
With a fixed layout, you can literally take a print page and turn it into a fixed HTML5 page. If you just need to get up a print document and give it some basic interaction, that could be the right solution. For Flex though, the structure of the page is important. Getting your mind around this is the most difficult conceptual thing about Flex.
Essentially, for the web browser (Safari, Chrome, Explorer, etc.) to correctly render the page responsively, everything has to be inside something else, with a root container containing all other things. Use the Window>Flex Object Browser to see how this works. It’s worth exploring this using a template first.
If you just make a few containers using the Flex Tool, then they won’t be inside each other. It may look fine on the page, and it may look fine on some websites, but when it’s displayed on a different device, it will be unpredictable and almost certainly not what you want. However, this doesn’t have to be a problem because you can just cut them in the Flex Object Browser and then paste them into the container you want.
Containers can be inside other containers, and you then have the hierarchy of rows, columns and objects. Things can be inside other things, provided that they are all in the Root Container.
Measurements panel: container and flex
If you check the Measurements Panel with a Flex object selected, then you’ll see two new tabs: Container and Flex. The Container occupies the whole width available to it—if it’s the Root Container, then that’s the width of your device or the browser window. If it’s inside another container, it’s the width which has been made available to it by how that Container is divided.
The Container tab on the measurements panel determines how it contains. For example, ‘horizontal’ means that the items inside it will be placed in horizontal order; ‘vertical’ means they will be placed in vertical order. Wrap determines what happens when the container becomes too small for the things inside it. The Container also can have padding that acts as an internal margin.
The Flex tab determines how it responds when the container that it’s in changes its size. You are essentially setting rules for what it should do—what’s its maximum width, what’s its minimum width, and so on.
You can set all of these properties independently, but there’s a quicker way.
Flex layout blocks
Window>Flex Layout Blocks gives you blocks you can drag onto containers to quickly create the page. Remember that, after the initial Layout, you always have to drag something into something. If you miss, just cut it and paste it in using the Flex Object Browser.
These blocks are essential flex items which have already been prepared with all of the Container and Flex properties that will make them work. These have been done to web standards, so you don’t have to be asking yourself ‘what is a good amount of padding?’
There’s a helpful breadcrumb trail at the bottom of this panel so you can see where you are in the hierarchy.
Off the grid
You will notice that when you create the layout, it allows you to specify a grid. This will have a lot more columns than you would typically use in a grid-based paper layout. Flex uses this grid to determine how things respond. But that leaves you with the question: how do I make my website look ‘designed’ rather than simply being a blocky, lumpy table?
The answer is that your graphic elements don’t have to be rectangular. You can have this by using transparent background PNG files and SVG files (or vector graphics from other sources which QuarkXPress will convert to SVG for output).
Within the hierarchy of containers, each container can have its own picture, as well as whatever the things inside the container do. In other words, you can have layered images on top of each other using transparent backgrounds, so that the layers animate differently from each other, and move differently when the browser window is resized. It takes a couple of tries before you realize how powerful this is. After that, you have to stop yourself from making it too fussy.
Keep it clean
Most of the animations available on Fixed layouts are available on Flex as well. Before going overboard on these, remember that the layout is intrinsically self-animating because elements move in relation to each other as it’s resized. Too much movement is just going to confuse the human being who is actually trying to make sense of your website. So keep it simple, keep it clean.
Suggested flex workflow
When experimenting, it’s fun to try all kinds of things, but at a particular moment you want to do some work with Flex, and, at that point, you need a good workflow. Even more than for print, it’s easy to get lost in the possibilities. So here is a workflow that may help you:
1) Purpose
Determine what the functional purpose of this site is. Everything flows from this.
2) Target audience
Who is going to use it: 15-year-old gamers or 60-year-old bank managers? Not just the style, but the method of interactions and the degree of playfulness will change.
3) Message
The site needs to take the user to the key messages. This means that, as it flexes, they still have to prominent.
4) Thumbnail
Sketch out a thumbnail of what it should look like on a piece of paper before you start.
5) Elements
Have your graphic and text elements ready. Often, these will already exist because of print or branding work. If you want to use transparent objects, make sure you have these save with transparency as PNG files.
6) Build on the reference window
Build the page using the Layout Blocks so that it matches your thumbnail. Do this at the default size, and test it by using the HTML5 Page Preview.
7) Flex it
In a desktop browser, reshape the page and observe how it responds. Make notes about how it should respond differently. Then go back to the Flex tab in the Measurements panel to make changes. You may need to go to the Container above it as well—remember that changes you make to the objects own container settings will affect the objects inside it, not its own behavior.
8) Link and animate
When the flex is working as expected, add in links and animations, such as rollover buttons. This is also the point to add special HTML code that you may have picked up as code snippets. Any object can operate as a mini-website within the page, serving up whatever that code does.
9) Set alt-tags and metadata
Every graphic element must have its alt-tag set, in order to be HTML5 compliant. Set these one by one from Item>Export Options. For objects that don’t have content, such as padding graphics, you can click the ‘artefacts’ checkbox. Set the metadata in Layout>Metadata. This will be crucial for search engines.
10) Deploy and test
When the site—or this part is ready—deploy it to a web server, and test it on smartphones, tablets, smart TVs and different browsers on Mac and PC. With the web, assume that if you haven’t tested it, it doesn’t work.
Watch the tutorial on Design-Led Websites.