What is your "XARA for Websites" workflow

[Kurt8]

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

[Daniel]

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".

[MEB]

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

[Kurt8]

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

[raynerj1]

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.

[juergen]

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.

[Egg Bramhill]

John,

Older folks use a lower resolution than young folks.

That's a very sweeping statement 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).

[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?

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...

[Egg Bramhill]

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

[RTK]

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

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

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...

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