What is your "XARA for Websites" workflow

Hello,

I have been using Xara Xtreme for all of my web graphics for about a year now. I love it for that type of work. Now I have been doing some research on actually designing complete web templates/layouts in Xara which would then be converted to valid XHTML and CSS templates. I have found quite a few tutorials on doing this in Photoshop, but I was wondering if anyone was using Xara for this type of thing and if so what your workflow looks like?

Basically, I would love to be able to use Xara (with its speed and user-friendliness!) to design a mock up of a website which is exported as an image or PDF file. I'd like to be able to take that exported file and either turn it into an HTML file myself (if that is relatively straightforward) or send it to one of the many online companies out there who for a small fee will convert the mock-up to HTML and CSS for me. Is anyone doing anything like this with Xara? Any tips you could provide me with to get started on this?

Thanks in advance.

Kurt

Quote:

---

Originally Posted by Kurt8

I would love to be able to use Xara to design a mock up of a website which is exported as an image and turn it into an HTML file myself (if that is relatively straightforward)

---

If you export a bitmap (PNG, JPEG) of your design you can set it as a 'Tracing Image' in Dreamweaver - that sets it as a 'background' which you can then build your design around.

Xtreme does not convert layouts to HTML/CSS, and nor should it: people are better at that than machines. Fireworks/Dreamweaver CS3 can do it, but as the Adobe presenters on their roadshow say, "please do not use that feature".

Hi Kurt8,
Here´s some things you can do:
1 - Create a basic template from where you can always start without setting up the workspace over and over again.

2 - (In the template) You can configure the grid and ruler spacing. Go to Utilities ->Options -> Grid and Ruler and fill the Major Spacing with 20 pixels and the Number of Subdivisions to 20 (Of course you can change those values to your taste, however i sugest to keep them the same value so you can have "pixel perfect" control over your design.

3 -Go to Window (menu) and activate Snap to grid. This ensures you will get the best anti-aliasing possible, by forcing all you objects to "fit" in whole pixel values. You can have some visual feedback of what´s going on if you activate the Show Grid in windows menu.

4 - Select a paper size (Utilities -> Options / Paper Size) that better illustrates your target audience screen resolution and make sure that the origin point of the grid in set up on the top left corner of your document page ( just drag the "cursor symbol" where the rulers cross themselves to the top left corner of your page). Consider the whole page the total browser area. The picture below is an example of a template created for users with a target browser resolution of 1024px/(1280px). The paper size chosen was 1280px X (1500px height).

5 - Make sure you set up the coordinate Direction in Utilities -> Options / Coordinate direction this way:
X increases to the right
Y increases downwards
This help to mimic css coordinates when using absolute positioning in CSS.

6 - Inside the page document draw a rectangle and consider it the webpage itself (the area where all the content lives). Everything that lays outside this rectangle will be the background of the site (or the body´s background of your page if you prefer) and should fill the rest of your document page (the page size you setup in point 4). Draw guides around the content rectangle as well as other guides, like the horizontal center of the content rectangle area for example, to help you visualize and align objects easily.

7 - You may want to set up the text unit to pixels if you use pixels to define your font size in CSS.



This is the way i work. Hope it helps.
Cheers,
Miguel

Daniel and Miguel B,

Thanks so much for sharing your ideas with me. This is already more information than I had expected to receive!

Miguel, after you have optimized your settings in Xara to make the transition to HTML structure and CSS for styling easier, what is your final export format? Once I lay the site out in Xara and am happy with it, how do I go about getting it in the right format so that I can pass it on to someone who can convert it to valid XHTML and CSS for me? Are you doing that yourself or sub-contracting that out? My end design will actually be in the form of a Wordpress template, but I need the basic 2-file XHTML and the CSS templates before I can convert them for Wordpress.

Thanks again. The generosity of Xara users with descriptions of their workflows continues to amaze me.

Kurt

It all depends on what you use to create your website. If you use a WYSIWYG editor like dreamweaver then you workflow will be different than if you sling the code yourself. I design based on the customer demographics. Older folks use a lower resolution than young folks. I take my design, slice and dice it and put it into a web page.:) I try and design for smaller, faster loading graphics. I use solid color where I can and tile everything that can be tiled.

I can create a page 10 times larger that loads in half the time as other sites. :)

Most folks here in the forum use a WYSIWYG editor and they swear they are the best. So I will let you choose. :)

My first steps are exactly the same as Miguels.
Additionally I perform following steps to provide a style guide to the customer.

1. I create a page with Colors used. I usually create squares, fill them with the appropriate color and write the hex value for that color next to it.
2. I do the same with fonts used. Create a textline with the attributes and write the used css next to it.
3. I create a layer where I draw the outlines of all block elements for the page with the necessary associated css values.

Juergen

PS: Instead of creating a rectangle to symbolize the page you can use a layer with an empty browser window to display your results. If I recall correctly there is even a .xar file with IE in various resolutions somewhere at TG.

John,

Quote:

---

Older folks use a lower resolution than young folks.

---

That's a very sweeping statement :confused: On what research do you base this on?

In my experience I'd say that 90% of users use the default resolution their set-up set as default. (Based on BramSlam research into resolution standards 2007).

I base my research on the fact that many more older folks wear bifocals. It is a fact of life that as a person ages, there eyes are not as good as they once where. Do you have research saying the opposite?

Most folks don't know enough to change their resolutions and they get used to seeing the screen that way. For 90% of the folks, if you move an icon on the desktop they starts throwing fits...

You can buy em a 'puter but ya can't make em learn...:)

Easiest test of a persons computer knowledge... Reassociate an icon on a desktop. Most will have a work stopage. Reassociate the programs on the start menu and you will catch 5% more. The last 5% can run anything from the command line...:)

... And they use their walking sticks to hit the keyboard! :D :D :D It's going to be a long weekend.

Quote:

---

Originally Posted by raynerj1

I base my research on the fact that many more older folks wear bifocals...

---

Quote:

---

Originally Posted by raynerj1

Most folks don't know enough to change their resolution...

---

Quote:

---

Originally Posted by raynerj1

If you move an icon on the desktop they starts throwing fits...

---

Quote:

---

Originally Posted by raynerj1

You can buy em a 'puter but ya can't make em learn...

---

Who are these EM and THEY...

Bifocal, clueless (senior citizens) that throw fits that can't learn?

What age group would that be? How can you generalize people like that?

I find your claims quite repugnant.

Risto

Quote:

---

Originally Posted by raynerj1

I base my research on the fact that many more older folks wear bifocals. It is a fact of life that as a person ages, there eyes are not as good as they once where. Do you have research saying the opposite?

---

But we haven't seen your research yet John..?

Of course it's undeniable that as we age certain things become impaired.
For some, their sight begins to fail, for others it is the progressive decline in cognitive function.
For those who need glasses, the relationship between screen resolution and the wearing of them surely can only be of the skill of the optometrist.

However, it has to be recognised that there are very many young people who also need optical assistance. Sales show that this doesn't prevent them from buying larger (& even dual) higher resolution screens.

As for the percentage of older 'folks' having trouble after moving an icon or other basic PC operations - well, I think there is more relationship between dementia than failing sight in this regard (along with a fair amount of "can't be botheredness to learn")

Of course, I acknowledge that your experience may be quite different in your rural area..

I'm wearing TRI-focals and I LOVE my resolution at 1280x1024 and it's crystal clear!

I wear bifocals and run 1024X728 on a 17 inch screen. So I am in the same boat. I know when I create a website for an organization that is comprized of older folks they really have a problem with 10 pitch and thank me for using 14 pitch as a default.

I am not trying to start a fight here or anything. If I offended anyone I apologize.

My research is based off of observations I have seen through my life. If you need a research paper, sorry I don't have any. If your experience leads you to believe that all folks can see just the same and know everything there is to know about computers, then I will gradly retract everything I have said. I was just trying to help.:)

Quote:

---

Originally Posted by juergen

...
Juergen

PS: Instead of creating a rectangle to symbolize the page you can use a layer with an empty browser window to display your results. If I recall correctly there is even a .xar file with IE in various resolutions somewhere at TG.

---

Yes Jurgen, that is correct - look here: http://www.xaraxone.com/html/templates.html