To flex or not to flex when building a website
Flex is a technology that automatically scales and repositions web items so they work on any size device with any shape. This is called responsive web design, using a built-in feature of HTML5 called ‘flexbox.’ You don’t need to know this to use it. Almost all websites these days are ‘responsive,’ and the majority use Flex.
You probably see one of the pitfalls of this immediately: if the device rescales and reshapes the website, how do you know the integrity of your design will be preserved?
There are two answers to this. The first is by testing, testing and retesting on a variety of devices. Sometimes you may want to draw a line and say, ‘just smartphones, tablets and computers.’ The second is by not using Flex but rather the older method of creating a series of fixed layouts. You can create these in QuarkXPress using ‘fixed’ rather than ‘flex,’ to insert script into your website for the device to automatically choose the closest size. This is also a form of responsive web design.
Ultimately, if you want absolute control over your website, creating a set of layouts using ‘fixed’ will give you the best possible result, but it will also take more time to create and update.
Most websites opt for Flex.
How do you use Flex on QuarkXPress 2022?
When you create a new layout, if you click ‘digital’ rather than ‘print,’ you get the option of Fixed or Flex. Choose Flex. You can jump straight in by creating things and specifying them as Flex, but it’s better to work through in stages. Flex does it best to look like print, but it isn’t print, and it behaves in a fundamentally different way.
Essentially, with Flex—and most things in HTML5—everything is contained inside something else, as opposed to being placed on the page as it is with print. If you keep this in mind, your Flex journey will be easier.
The easiest way to see this is to open the Window>Flex Object Browser and Window>Flex Page Builder, and drag one of the templates onto the main document. Though these templates may seem a bit specific or even fussy, they are actually very powerful and can be customized using the Quark tools that you know in a way that WordPress templates (for example) generally cannot.
Click on any box, and you’ll see the Flex Object Browser change to show you where it is. At the top level you have the Root Container, and then a series of containers, rows, columns and objects.
Right now, you don’t need to play with them, just know they are there. Customizing the template will take you a long way to produce a quick website when it has to be done not only fast but also correctly.
Flex basics in QuarkXPress
Two kinds of website design are popular right now. One is the traditional structured layout with several pages. The other is a single page that you scroll down. This type is actually easier to create because you just design a very long page with elements placed sequentially. Using QuarkXPress Flex templates, you can drag additional templates after each other. If it looks or behaves oddly, check that you haven’t dragged one inside another—the Flex objects browser will let you see this.
For the multi-page layout, you create several pages in QuarkXPress, and then, using the page layout panel and right-clicking/ctrl-clicking, use the Page Properties to give them a web name and a display name.
Your homepage must be called index.html for its web name. Otherwise, the browser won’t find it. You can give other pages whatever names you like, but stick to letters, numbers, dashes and stripes. Most webservers distinguish between capital and lower case, but it’s best to stick to lowercase.
When you create hyperlinks, using the hyperlinks panel, you choose ‘page’ rather than ‘URL.’
For the rest, you can apply any interaction you like from the Window>HTML5 palette—but be careful. The days of multimedia interaction on websites are long gone, and people are used to a ‘less is more’ philosophy. My personal recommendation is to stick to buttons and YouTube videos, and leave everything else.
Previewing and publishing
You can move the handle on the right of the layout to see how it will change as the shape changes, but you really need to check in a browser. At the bottom of the screen, there is a little ‘globe’ that offers you HTML Page Preview. This will open up the page in your default browser, and you can see how it will appear. Links will not work—it’s a single page. To check the links, open up the Layout Preview. This will actually open it as an HTML5 publication rather than a website, but it will be fine to check with.
To publish, you will need some webspace, a URL (i.e., a web name) and an FTP uploader. For the uploader, you can try CyberDuck, which is free for a donation. It’s then just a question of File>Export As>HTML5 and then dragging the files onto your website via CyberDuck (or whatever you use). As long as your URL was already functioning, you should be able to see it immediately. If you can’t, check that your home page is called index.html, and not Index.html or any other variation.
If you’ve only just bought the URL, or only just pointed it at your webspace (ask your provider for instructions) it generally takes 24 hours to become available.
When to use Flex?
QuarkXPress’s templates enable you to create a simple, stylish website quickly.
For more control, you can create the site from scratch using the Flex Layout Blocks panel, and the Container Tool, which is in the Tools palette. More control, of course, allows more things to go wrong. It’s probably best to experiment with the built-in templates first. When building with the Flex Layout Blocks and the Container Tool, use the Flex Object Browser to ensure that everything is in the right place.
However, when you’re developing beyond a simple single scrolling page or small structured website, it’s often time to rescope the project. Tools such as PineGrow can turn a QuarkXPress layout into a WordPress layout (one-third of all websites, and half of all content management system websites, use WordPress). At this point you are getting into a big project, and it’s probably no longer effective to create the final code in QuarkXPress.
This is the stage at which QuarkXPress may be better used to develop a prototype (large websites go through months of prototyping before they are ready to code). Prototypes often are done in PowerPoint, but that approach only produces flat wireframes, and there can be a big gap between expectation and reality. By allowing you to prototype a Flex website with interactive elements, QuarkXPress can be your secret weapon in communicating effectively to the coding team every time.
Watch the tutorial on how to create a “10-Minute Website.”