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

Hi everyone,

I have been using Freeway Pro for a while to build websites and I am now working on making my designs fully responsive across different devices. While Freeway Pro’s flexible tools are great, I am wondering what best practices or tips you all use to ensure a seamless responsive design: ??

Here are a few specific questions I have:

  1. Do you prefer using breakpoints in Freeway Pro: ?? If so, what’s your go to setup: ??
  2. How do you handle mobile first designs, especially with Freeway’s layout tools: ??
  3. Any tips for optimizing images and other media for different screen sizes without sacrificing load time: ??

I would appreciate any insights or resources you could share. I have been looking through past threads but it’d be great to get some fresh perspectives or updates on the latest techniques with the current Freeway Pro version. I have also searched on the forum for any solution to my query and found this thread https://discourse.softpress.com/t/pro-responsive-graphic-rpa/ but couldn’t get any solution.

Thanks in advance !!

Derek Theler

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).

Can’t wait to see it, Jeremy!
And just so everyone knows, the Flexbox Actions were only ever a temporary fix like a plaster on a sinking ship…definitely a patch job…much better to start thinking in a different … way… from the FREE-way to X-way so to speak :slight_smile:
yep bad pun

1 Like