Creating responsive "template" pages for CMS websites

Peter_Falkenberg_Brown wrote on 2/17/2022, 10:33 PM

Hi All,

I've been trying out Xara Designer Pro X v18 (with the website subprogram) and watching videos about making responsive web pages. I create sites using a CMS called ProcessWire (processwire.com), and need to make 4 different responsive templates: a home page, a multi-section page, a section page, and an article page. I'm under the impression that I could simply create those pages in Xara as if they were standalone web pages, and then insert my PHP code into the various spots on the page that would have CMS data inserted.

For example, an article page would have text, saved by Xara, that I would then replace with PHP code to dynamically fill in article text for each article displayed.

Does it sound like this would work? The CMS looks for individual template files to display various pages and those files can have all the necessary calls to CSS / responsive elements, etc. The CMS coding is simply grabbing the page, and inserting the headline, author, text, etc, where the coding is set up.

It's my impression that the Xara will make mobile variants and place all of those definitions into the same .html file, which I would then convert to my template format.

=> A related question is how to use Xara's menu widgets so that they can be dynamically filled in based on data from the CMS -- i.e. section names, etc.

Has anyone used Xara Web Designer in this fashion? As a template design system?

Thanks for any advice on this.

Peter Brown
 

Comments

Peter_Falkenberg_Brown wrote on 2/18/2022, 11:26 AM

Xara tech support answered this, via a ticket I opened. It looks like Xara creates fixed position sets of pages that are not actually responsive, but are instead one or more sets of fixed css versions of pages that are pulled up based on breakpoints.

Therefore, adding text to a page dynamically, inserted by a cms, breaks the design, and the text runs off the page.

I liked what I saw of Xara, but I need a tool that actually creates divs that are responsive and expandable at run time.