Wishlist for WDP/DPro: Responsiveness

Xara is the fastest and most intuitive (2D) design software I've ever used (since CorelXARA 1995)...and now it generates websites! Pretty cool.

With that said, it's time to "up the ante." -- make the best product...even better.

I began building websites "old-school," that is, I taught myself HTML, then, CSS and created them from scratch; a long and laborious process. Along came WDP and I could design *and* generate a working site in a fraction of the time.

However, the times they are-a-changing. Both Google and Bing now prefer that sites are designed to fit onto any screen size:

G: "Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration."

B: "At Bing, we want to keep things simple by proposing the “one URL per content item” strategy. For each website, instead of having different URLs per platform (one URL for desktop, another for mobile devices, etc.), our feedback is that producing fewer variations of URLs will benefit you by avoiding sub-optimal and underperforming results. It can help manage unwanted bandwidth usage as well."

So, my wishlist for WDP/DPro:

1. Dynamically resizing images (and therefore, pages--width and height).
2. Dynamically repositioning and swapping of page elements.
3. Dynamically flowing/resizing of text with "ems" based on percentage sized body text, i.e., body {text-size:100%;} h1 {text-size:1.5ems;}.

A simple example: http://d.alistapart.com/responsive-w...ite-FINAL.html (resize your desktop/laptop browser *and* view it on your smartphone).

It sounds like a tall order, but if anyone can do it, it's the Xara team. Also, you'd be the first; I have scoured the Web searching for a *visual* design tool to do this...to no avail. The closest solution is clumsy and still requires me to learn some Javascript and manually modify my CSS: Adobe Edge Animate. And, as the name implies, it's designed to create embedded animations, not _whole_ sites.

You would have to incorporate the @media CSS3 element and some Javascript for backwards compatibility (see: http://code.google.com/p/css3-mediaqueries-js/).

To the Xara design team: please consider this. I believe Responsive websites are the future...now.

Best regards,
Alex Wendell

I have moved your post to Dear Xara which is where members can post their wish lists and bug reports.

In the past few years, Xara has introduced the next versions of their products in the spring and late spring. So, who knows what new features will be added?

Alex, a good post.

The current page generation used by Xara is designed for pixel perfect placement of elements and uses precise positioning of elements in HTML to reproduce the designs created using Xara software. Responsive sites are designed for more fluid layouts that vary in size and content and rely on the rendering of HTML and CSS to adjust content according to rules rather than a fixed design. Often mobile sites prune content drastically to accommodate small screen sizes and different usage patterns.

As someone who is familiar with CSS and HTML and media queries, how do you imagine Xara could marry responsive design with the WYSIWYG nature of Xara software?

[The principle challenge as I see it, is that as per your list-apart link, responsive designs (and most HTML pages) specify placement in relation to other HTML elements on the page and also groups of elements in relation to other elements and groups. Those groups and elements can be sized dynamically by the browser and placement changed according to CSS rules.

Xara as it is now, does not have that dynamic relationship between elements and all layout is free-form and fixed size. Xara would need to add the HTML relationships to the designer, killing the free-form layout of elements and requiring a more sophisticated understanding of how browsers lay-out their content.

It's a difficullt thing for Xara to square the circle of easy-to-use with WYSIWYG and responsive with controlled layout and sizing.

I could see Xara building a responsive web tool, but I can't see it remaining the all-in-one WYSIWYG design solution that it is now.
]

Thank you pauland,

Yes, it would be a tall order, for sure.

Perhaps a switch could be added for viewing your layout, i.e., 955px (max width), 633px (first "step-down"), 400px (final step-down); these would be editable for width and quantity, and would generate the appropriate "@media" query CSS code.

You would then need to add new tools: "flowing" text tool, flowing (resizing) image tool and conditional "swapping" object tool (a "frame" tool that would hold what you tell it, for a given page width that you've previously defined)...using tabbed dialog boxes?

All images--graphic and photo--would be generated at the largest size that they would appear: img {max-width:100%;}, then dynamically resized based on percentages (if "told" to do so via a dialog).

So, "percentage perfect" as opposed to pixel perfect; define the grid, then resize by dividing the step-down pixels by the max size pixels of that grid area and you'd get a percentage. Adjustments to margins and gutters could be done with slider controls.

If you have some time, do check out Adobe Edge Animate, it generates HTML5, CSS3 and Javascript code based upon your max/min sizing settings and animation setups. I believe it's a free download if you sign up for their "Creative Cloud" (https://creative.adobe.com/). The only problem with this app, is that you have to have some knowledge of CSS and Javascript (minimal). I was hoping someone--Xara?--could make it easier via tools and dialogs.

I can dream...I love designing but dread coding (HTML and CSS are not really coding, but tedious none-the-less).

Apparently dreams sometime do come true. I'm very encouraged by the "Mobile Device Friendly" feature that Xara has included with both WD9 and WD9 Premium. Apparently they didn't think it was too tall an order! To quote from their website: "Websites made with Web Designer are ready for the latest iOS and Android smartphones and tablets. We‘ve invested significant effort in making all our templates and features work with mobile devices, so that you no longer need to spend time creating special cut down (and often ugly) mobile versions of your websites, with complicated redirects."

you no longer need to spend time creating special cut down (and often ugly) mobile versions of your websites

That's a load B***T

Just to expound on that: Just because Xara has fixed up their code to show websites full-screen on small devices, doesn't make it allright. All of the points mentioned before still apply.

What I particularly don't like about Xara's marketing blurb is that it gives very poor advice and suggests that making sites that suit the smaller form is not neccesary. Xara has moved down a notch in my estimation.

I agree, it's completely misleading.

that's ad-blurb for you - remember the fuss about PSD compatibility that was mentioned in blurb a while back.. to a PShop user it's limited, but only using the program/trial would have brought that fully to light

I can see from the trial programme that Xara is making an attempt in a very small way to reduce the amount of work that we have to do in producing an alternative layout but they haven't gone far enough. I also think that expecting WYSIWYG based programme to produce through CSS fluid grids is asking too much. What I think the approach should be is more akin to the way Adobe InDesign does it with its "Liquid Layout" taking at least 80% of the work of producing alternative layouts. You still have to plan, design and publish but really only have one master. A reasonable explanation of the work involved is given here: http://www.creativepro.com/article/i...ternate-layout.

Don't like comparing programmes with this amount of price difference but with Xara's DTP powers I think it should be possible.

Quote:

---

Originally Posted by Albacore

... I also think that expecting WYSIWYG based programme to produce through CSS fluid grids is asking too much...

---

Check out Adobe Edge Reflow. Just a "preview" app right now, but does a great job of assisting with flowing layout in a WYSIWYG way -- creates @media queries for you, just only with -webkit CSS right now; you'll have to fill in the -moz and "standard" CSS3 yourself.

I'm with Albacore.

Adobe has slightly more development resources than Xara, even so I doubt you'll get this WYSIWYG flowing layout. It's a contradiction in terms.