Can I add Responsive Web Design feature to existing Xara sites?

I have 2 questions. First, my website at www.veritygraphics.com was created in Designer Pro X9, using the Design Theme. I purchased Web Designer 10 Premium, hoping to be able to convert my site to include a Responsive version, but haven't figured out an easy way to do this - even though a "Design Theme (R)" does exist in Web Designer 10 Premium. How can I do this?

Second question: I have several sites created in Xara Designer Pro X9 whose templates in Web Designer 10 Premium do not have an "(R)" next to them (e.g. www.elmeriselersingers.com which uses the Music Theme). How can I make Responsive sites for these?

Peter Hobbs peter@veritygraphics.com

Sure. Open the site, right click on the pasteboard and select Website Variants then Create. Determine the width you want (480px is the default for mobile sites but you can make this any size you want).

A new site is created with the correct page size. You do need to resize and scale your content to the new width. This is not automatic.

But this is better than automatic because you can redesign your content to work better in the smaller space instead of merely scaling it down.

Hi Gary,

I did what you said and told the program to create a 480 px wide site. But the mobile page it created was the same size as the original.
When I open the Design Theme it displays both page sizes correctly. I don't knowwhat to do to correct my problem.

Peter

The page size will be 480px but the content will be the same size.

This is what I meant about it not being automatic. You have to reduce the content to fit the smaller page and do things such as make the text larger, remove all but the most important graphics, etc. Remember that a mobile phone is not the same as a desktop browser. The network connection is usually slower and so bandwidth is a big consideration.

In my opinion, trying to make a mobile site the same as a desktop browser site is a big mistake. These are two very different experiences. A mobile site should be much more direct and too the point. If your visitor is using a network connection (not WiFi) to view your page, if it takes too long to load because you have a lot of photos, etc. your visitor will be long gone by the time your site loads. Keep mobile sites simple and focused.

Make the type easy to read on a mobile device. Use a single button menu with a drop down menu for the pages.

Look at my First Look http://xaraxone.magix.net/XDPX10/index.html first on your desktop browser, then on your smart phone. These are the same websites and yet each has been designed for a specific viewing experience.

Thanks so much for your suggestions, Gary. I did it! I actually created a Responsive version of my website, and successfully viewed it on my Samsung Galaxy S3 smartphone, in vertical orientation, at http://www.veritygraphics.com . I even borrowed your bottom-of-the-page navigation arrows idea (hope you don't mind). But it was a lot of work, and I can see how some people advise us, as website creators, to be sure to allow enough extra time if a customer wants a quote on a Responsive site.

Quote:

---

I even borrowed your bottom-of-the-page navigation arrows idea (hope you don't mind).

---

I'm honored. :)

I just tried this,(WDP 11) ..but the results were quite off putting. So while working in the Mobile GUI, I adjusted the sizes of the elements (graphics, text, lines and photos) to fit the mobile version,..and it screwed up the main version!!!! Luckily I didn't save it as I was working. What's the point of this if you cannot isolate the Responsive and Main versions while working? I mean when you work on the Main page it doesn't effect the Responsive version so why does it do this in reverse?

Quote:

---

So while working in the Mobile GUI, I adjusted the sizes of the elements (graphics, text, lines and photos) to fit the mobile version,..and it screwed up the main version!!!!

---

Hi TDolce, I think you're missing the point re variant sites. Don't just resize in this manner. For example an image on the Main site may be 800px wide. On a 480px variant this will overlap the page size. Resize this to 480px or smaller. This won't change the Main site image size.

For text, select part of the mobile text content, increase the font size to say 24px and in the Style drop-down, select Update Text in this Variant. Change the location to fit the page.

See if this helps. If not, attach a single page xar/web file so we can point you in the right direction.

Ok,...Basically I cleared out the mobile page entirely and manually copy and pasted each and every element from the full sized page. I was able to do this successfully without negatively impacting the master.

td

Well that's up to you but it's really not necessary.