XWD as professional tool?

[J2R]

I'm wondering about settling on XWD as my main application for use in web design, having largely hand-coded in the past. I've looked at a lot of websites mentioned in this thread, and it is apparent that XWD is a powerful and flexible tool for website design, at least for doing mockups. An awful lot of these, though, seem very slow to load, probably unacceptably slowly for many purposes, and I don't know whether this is something to do with the use of multiple PNG images or is some other quirk to do with how browsers render the HTML with its very large number of styled DIVs. If it's simply a question of the images, that's easily enough resolved for me (either by being more careful about the output, or by processing the result afterwards to replace the PNGs with JPEGs). Are there any examples of sites out there which load very quickly, using JPEGs?

Even if it is not really viable to use the output for published websites (which I'm sure it is), I imagine that XWD is still going to be extremely useful for generating mockups, which can then be cut up for HTML coding. This is what people generally use Photoshop/ImageReady for. Is anyone doing this, having replaced Photoshop with XWD?

[Drwyd]

Hi J2R

I believe the main target for users of XWD are self builders with little knowledge of HTML/CSS and professionals who require a tool for rapid prototypying. Having said that, I and others have found it to be very versatile. Most sites on the web can get by without server side scripting, even some e-commerce sites, and the placeholders are ideal for snippets of code (javascript/html) when needed.

As for loading speed you have to keep an eye on image sizes. www.goldenarrow.me.uk is a site I built recently with nothing else but XWD. Loading times are between 0.4 and 1.2 seconds. I have yet to optimise it.

Drwyd

[J2R]

Thanks, Drwyd. I'm pretty well versed in 'real' web stuff, the hand-built HTML/CSS and all that, but XWD does strike me as potentially an invaluable tool for rapid prototyping, and could speed site development up considerably for certain sites, particularly if the resulting output could be optimized to produce fast loading pages. I imagine your already quite snappy site would load rather faster if you were to output all the photos as JPEGs (presumably part of the optimization you mentioned you hadn't yet done).

I would just like to be certain that the sites which do lend themselves to the XWD approach will work just as well from the end-user's point of view as proper hand-crafted jobs.

[Boy]

Download the trial and give it a shot. Use some of the template pages (only limited on the trial version), link the pages, add some pictures, optimize (i.e., force-save to .jpegs) where necessary, publish and see if the load times are what you need them to be.

Xara Xtreme 5 & Xara Xtreme Pro 5 have just been released and contain all Web Designer tools plus many others. You can download 30-day trial versions of these programs as well.

[J2R]

Download the trial and give it a shot.

Actually, I already bought XWD a few weeks ago, I just haven't got round to using it much yet. As regards load times, they're fine when I'm serving the pages locally, which suggests the issue is simply to do with the size of the images. I'll try sticking a mocked up site on some remote server somewhere to see how it fares with the photos exported as JPEGs.

[ChrisBro]

Hi J2R

I believe the main target for users of XWD are self builders with little knowledge of HTML/CSS and professionals who require a tool for rapid prototypying. Having said that, I and others have found it to be very versatile. Most sites on the web can get by without server side scripting, even some e-commerce sites, and the placeholders are ideal for snippets of code (javascript/html) when needed.

As for loading speed you have to keep an eye on image sizes. www.goldenarrow.me.uk is a site I built recently with nothing else but XWD. Loading times are between 0.4 and 1.2 seconds. I have yet to optimise it.

Drwyd

Hi sorry in advance for hijacking

How are you planning on optimising it, I ask because I have a problem with a similar site built in WD but am unsure the best way to approach speeding things up.

Sorry again

[slavelle]

I think it's just an image size thing, as well. I have partly optimized the latest site I did, but had to make a few compromises that will need to be revisited. For example, on the "about" page for the site, there is a large image of the business owner with text flowing around him. With jpeg, it just makes it look terrible, because part of the text becomes graphics. It's up that way now as a png with a large (157k) file size. Way too big.

I'm addressing that by redoing that page with less text and converting the image back to jpeg, and having the text in blocks that more roughly follow, just using an odd-shaped jpeg behind it that has the same background color as that of the page (which is thankfully a solid).

I do wonder, however, what the point of the "Let Xara decide" option is. Is there a case where xara would choose jpeg intelligently? I don't think I've seen a jpeg show up unless I asked for one. <edit: ok...so I just tested this and in the case of a full color photo with no wierdness done to it, it automatically exports jpeg, but if you do certain things to it, like adding shadow or some other sort of effect that causes transparency to be needed, it will change to png - you have to experiment with this to see what choice it makes>

Here's another tip from elsewhere in the threads: If you want an object that is the "same" as another object (like buttons for nav bar or the background behind text for a header, or whatever) to use the same graphic, you need to make sure they are "pixel aligned", otherwise, Xara doesn't know that they are really the same image and will create multiple images for the same looking object on export.

One place that you gain speed with classic programming is in the way that background are represented. Where you may traditionally code a background color on a <div> and it would get that color programmatically, if you want to do the same in xara, you crate a rectangle in the background the color and size you want. Obviously, this can be a really small file, but it's still "one more file" and "one more web request".

So I think there are some things that you can do something about (format, though I think it should be smarter about the contents as it exports to get the best option), and there are some that you can't just by nature of the way graphics have to be created for everything to keep with the WYSIWYG design of the application.

I too am struggling with where this tool fits in my toolbox. Some days I want to ONLY use it, and others I get a little frustrated with these sorts of fiddly things. It is WAY faster in XWD/Xtreme5 to get a web page design looking good, even with multiple different looks quickly. It's faster to get certain things done, like creating navbars and dropdown menus without having to think about browser compatibility and other time-consuming coding problems. It's also easier to design things that have more advanced popup features and things that can set the pages apart from the standard website stuff that a lot of folks are creating. But at the end of the day, my handcoded sites are certainly faster loading. I'm spoiled with a fast (sometimes 20mb) internet, so published or not, they usually open pretty fast, so I have to be aware of the sizes, clear my browser cache often, and use my Verizon wireless card to check how they work, since that represents just a bit worse than a low end DSL line.

I'm babbling, so I hope this has been useful to someone.

[slavelle]

One more thing - if anyone has a tip to make the "snap to grid" work when set to ON and the grid spacing is set to have each marker at one pixel - so that I can drag things around and expect them to snap to even pixels, rather than 31.4pix or whatever, that would be helpful to me. I hate having all these copies of the same button littering things up when the solution is somewhat simple, but a bother to have to type the values in every time to get them to line up, when that's what the grid and snapping is supposed to be there for.

[J2R]

I'm babbling, so I hope this has been useful to someone.

It's extremely useful, thanks. It's invaluable to hear the experience of an experienced web designer, who is used to other approaches, using the software. I am more confident now, having played about a bit, that XWD can be used to actually create working websites and not just mock-ups. I tried exporting and uploading to a remote server one of the example pages containing a photo gallery, and there was no problem at all with speed of loading (and that's just with low-end ADSL).

I think it's a case of learning what to do and what not to do with it. I won't be using it for sites with any dynamic content, nor large multi-page sites (particularly ones suited to a CMS approach), nor sites where accessibility is an issue. But it seems the perfect tool for rapidly creating small brochure-style sites, which is great. I also love the idea that I can actually create a working proof-of-concept in maybe less than the time it used to take to create a static graphical mock-up. As long as I use it judiciously, I should avoid the slow loading problem.

[steve.ledger]

One more thing - if anyone has a tip to make the "snap to grid" work when set to ON and the grid spacing is set to have each marker at one pixel - so that I can drag things around and expect them to snap to even pixels, rather than 31.4pix or whatever, that would be helpful to me. I hate having all these copies of the same button littering things up when the solution is somewhat simple, but a bother to have to type the values in every time to get them to line up, when that's what the grid and snapping is supposed to be there for.

I have my page units set to Pixels, Grid and Ruler spacing 10/10, Nudge to 2px Window>>Snap to Grid enabled.

In this way, 10 copies of an object on a single page outputs only one PNG unless one of the copies becomes unique.