Looking for Best Practices for Responsive Web Design in Freeway Pro?

Hi Derek,

  1. I think it’s better to create a flexible site that doesn’t depend on breakpoints, and use breakpoints sparingly. It’s possible to adapt an existing (possibly inflexible) site by adjusting widths etc. in breakpoints, but it’s less work in the long run if you create a site that is inherently flexible.

  2. The key to creating a flexible site in Freeway is to use inflow boxes. In Freeway, inflow boxes are boxes that are inserted at a text-insertion point. Unfortunately, Freeway doesn’t allow you to convert non-inflow (absolute-positioned) boxes into inflow (relative-positioned) boxes, except by cutting and pasting them back as inflow boxes.

  3. There are some flexible Freeway templates that can serve as a guide to creating flexible websites. Because these were created some time ago, they tend to use old techniques (e.g. float layouts with clearfix hacks) for displaying horizontally adjacent content (such as multiple columns). But it’s possible to use more modern techniques (such as flexbox) by adding extended style properties, or by using Max’s flexbox Actions.

  4. Mobile-first is a school of thought that believes it’s better to design websites for mobile devices and adapt them so they also work on larger devices. Most users view websites from mobile devices, so it’s important that websites should work well on these devices. But I’ve also seen websites that have become awkward to use on larger devices. Ideally, a website should be easy to use on any device. A good way to test is to use Safari’s Responsive Design mode: check that a website works and looks good with any device from 320 pixels wide up to 1600 pixels or wider.

  5. It’s better to use pass-through images than non-pass-through images. Non-pass-through images are inflexible. You can use third-party tools to optimise image sizes. E.g. Pixelmator Pro has an Export for Web command that will create smaller images.

  6. If you can run macOS 10.14 (Mojave) or later, consider using Xway rather than Freeway. Xway (unlike Freeway) is designed to create flexible websites. Xway has been available as a public beta for the past few years, but we will be releasing Xway 1.0 before the end of this month. Xway 1.0 can import Freeway documents, and it’s possible to run Freeway and Xway side by side under 10.14 (Freeway will not run on later versions of macOS, and Xway will not run with earlier versions).