creating a basic column layout


@HeatherKay
 

Hello everyone! It's been a very long time since I raised my head above the parapet, and haven't things changed!

I've had a complete change of career, no longer dealing with design much at all. Nearly a decade ago, amid the financial crash and all that stuff, freelance work ran out. Thrashing around for anything I could do to earn a bit of cash, a hobby got turned into a business. I now build scale model railway stuff for commissioned work. While I'll never be rich, I have some great clients, and have worked on some interesting projects. 

Now, obviously, I created my web site using Freeway. I still manage to maintain it with small updates, and it does me well enough. I am aware that the web world has moved on, quite a long way, and I'm being left in the weeds. Freeway is going to go away eventually, and so I've started to try and come to terms with Xway, purely as an amateur and hobbyist web designer. On the whole, I like it, but...

It ain't Freeway. I'm having to learn new things that my old brain can't quite grasp, and it's frustrating and annoying and ... I wish I was ten years younger!

Anyway, I am trying to recreate my current Freeway web site in Xway. I realise it can't be recreated exactly, and I am happy to redesign accordingly, but I like the way my current site looks and I want to try to match it if I can. You can have a look at the site here: http://www.heatherkay.co.uk

It's a fairly simple multi-column layout, made with inflow boxes. In the old skool Freeway method draw an HTML box, click to get the text insertion bar, and insert two more HTML boxes in the text flow. They can then be made to float left and right, with margins to keep them spaced nicely. How do I do that in Xway? It should be simple, right?

I've tried, but I simply can't get the right hand box to float alongside the left hand box. It insists on floating to the right, but below the left box - the next "line" down, if you like. I've tried everything I can think of that doesn't involve getting the spanners out and hand-coding to get the darned right hand box to float alongside its friend. Nothing works. Any ideas?

(I even actively considered hand-coding the page at one point. I know. I don't DO code! That's why I was a Freeway user. But it's a measure of how frustrated I was getting!)

Anyway, if there is a way to do what I want, please let me know in plain language. If it's not currently possible with Xway in an idiot-proof way, then I will have to accept the site redesign will need reconsidering more fully.

Cheers

Heather


Jeremy Hughes
 

Hi Heather,

Good to hear from you again!

1. Xway doesn't currently have built-in support for floated items, although it's possible to use extended properties: 1. Select the item you want to float, 2. Add an extended property in the Extended Properties section of the Box Inspector: name="float" and value="left" or "right" (without quotes).

2. A much better way of creating a column layout is to use CSS flexbox. We plan to support this directly in future, but it's possible to use extended properties once again. We used flexbox on our Xway page. See this thread for more details: https://softpress.groups.io/g/xway-talk/topic/75298839

3. Consider whether you really want to have a multi-column layout. This works well on desktop browsers, but it doesn't work so well with mobile browsers where there's limited horizontal space.

Jeremy


@HeatherKay
 

Hi Jeremy!

I've been lurking for a while, but only decided to give the latest beta a run this week. I don't get to spend a lot of time at the computer desk, being much more hands on at the workbench now.

I have been considering the layout of the site, and take on board what you say. I like the columns as a way to get a fair amount of info visible in one page, but accept it doesn't work well on phones. I shall have to have a think about how to present the info better in a single column format.

I realise there's still a lot Xway doesn't do, but it's very capable so far. Well done! Where Freeway's USP was hiding the underlying code, Xway has to reveal the inner workings. I am in two minds over this, but I suspect it can only be a Good Thing in the long run. Incidentally, being able to see the code within the program is nice. Are there plans to allow the user to edit the code directly, feeding back to the WYSIWYG style layout?

I'm still getting my head around the umpteen different ways to interact with objects, so I'll have a go at the extended properties thing in a minute. Ta.

I found a reference to the CSS flexbox and had look. It would do what I want, I think, but I'm afraid I couldn't actually see how to apply it to Xway. One day, perhaps.

Cheers

Heather


grantsymon
 

I found a reference to the CSS flexbox and had look. It would do what I want, I think, but I'm afraid I couldn't actually see how to apply it to Xway. One day, perhaps.
If I can do it, you can do it Heather. 😊

It's actually very simple once you get your head around it.  Read the thread I started, that Jeremy pointed to where he holds my hand and walks me through it and also just plod through the flexbox guide.  It's actually very simple in the end and works in a similar way to FW.


Jeremy Hughes
 

Hi Heather,

I realise there's still a lot Xway doesn't do, but it's very capable so far. Well done! Where Freeway's USP was hiding the underlying code, Xway has to reveal the inner workings. I am in two minds over this, but I suspect it can only be a Good Thing in the long run. Incidentally, being able to see the code within the program is nice. Are there plans to allow the user to edit the code directly, feeding back to the WYSIWYG style layout?
Xway's document model is closer to HTML/CSS than Freeway's, but features such as Extended Attributes and Extended Properties were also in Freeway (slightly hidden within a modal dialog). We added them to Xway at an early stage so that people can use them for features that aren't yet supported directly (e.g. floats and flexbox). The HTML view is there for people who are curious or who find it useful, but it's not an essential feature. It's possible we might allow some form of code editing in future, but that's likely to be some way off.


@HeatherKay
 

Hi Jeremy

Understood. I suspect it would be quite some effort to feed edits to the code back into the WYSIWYG layout!

Anyway, I've managed to put together a variant on my current web site. 

http://heatherkay.co.uk/test/

There are rough edges, bits missing, and things still to be resolved. It does sort of do what I want it to do, and it's been a fun exercise in getting to grip with Xway. I'm not fishing for comments, really, but feel free!

The biggest problem I'm encountering at present is more an Exhibio issue. Getting the slide shows to display nicely on mobile phones is proving trying. The current theme I've used really isn't happy on a mobile smaller than an iPad. Still, it's something for me to play around with.

Cheers

Heather


Jeremy Hughes
 

Hi Heather

It works for me (iPhone 12) if I switch to landscape orientation for the slide show.

If you wanted, you could centre the images that you click on to see each slide show: 1. Give the component box a defined width (e.g. 200 px) in the Dimensions section of the Box Inspector and resize it so that it is the same width as the image, 2. Choose Center from the Align popup in the Margins and Alignment section of the Box Inspector.

Unrelated to the design, but you might want to ask your web provider for an https domain. People may be wary of visiting "insecure" (http) sites.

Jeremy


@HeatherKay
 

Hi Jeremy

Don’t you ever sleep? =oD

An SSL certificate is something I’m looking into, funnily enough. 

And thanks again for the pointers. I’ll have a fiddle about with positioning in a bit.

Cheers

heather