PDA

View Full Version : New Web Design tool



thx4yrtym
03-24-2009, 09:07 AM
From time to time we see folks asking about low cost web design tools.

Just got an email about a new one and I thought I'd share.

Now before you jump in, I have to say I have not even downloaded the thing yet, just watched a few videos. This looks like it would be for the person has few if any web skills but needs to have a presence on the web. There is a trial version to download.

Graphics Software by Xara (http://www.xara.com/us/) it's $49.00 or less if you own any of their other products.

I realize that this is not a perfect solution, however, there are situations where this might be a very usable solution.

Regards,

vangogh
03-24-2009, 12:59 PM
I watched most of the intro video and was thinking the software looked decent, then I checked the source code of a sample site they linked to and think the opposite. Looks nice on the surface, but spits out some really bad code. It would be a nightmare to edit later and I think it would hinder search engine optimization to a degree.

The software does seem easy to use and I'm sure some people would go for it, but to me it suffers from the same problems all design software suffers from, mainly bloated code.

thx4yrtym
03-24-2009, 02:21 PM
So for anyone serious about a quality web site, use of the package might best be limited to prototyping a site. Then once they have the look that they want, hand it off to a professional. Otherwise they are probably creating a site that will have to be completely rebuild at some point. True?

Regards,

vangogh
03-24-2009, 02:39 PM
I don't want to knock this specific program at all. I think your decision to use it depends on your goals. When I looked at the source code I saw a lot of inline css and some proprietary tags for the software. Both are bloat. The pages will load a bit slower, search engines will have to work harder to crawl the pages, and making site wide changes would mean editing all pages individually.

If your site is 2 pages so what about having to make changes twice. If your site is 100 pages you're wasting a lot of time. Maybe the software can make site wide edits, but my experience tells me it would end up leading to more code that doesn't need to be there.

What I see happening with design software is that they all tend to create code that later causes problems and in time those problems can end up breaking the site. Usually that means loving with a broken site or hiring someone to fix it. I can't speak for others, but how much time it takes me to find a fix is directly proportional to the quality of code. I've had people pay me a similar amount to make a few edits as they would have spent to have me design and build a brand new site. The difference is with a new site the next time some of those changes would take a minute and probably cost nothing. With the fix to the bad code the expense will be the same the next time as it was this time.

Again I don't want to knock this specific software. I haven't used it. I watched a video and looked at the source code of a sample page. I do know that if coded all sites like their software coded a site, I wouldn't be in business long.

thx4yrtym
03-24-2009, 03:14 PM
I own several of their other graphics programs so I got a email from the company touting their latest product.

After reading your initial comments I went and generated a page from one of their templates and viewed the code. I see what you mean. The CSS is a problem. 4 years ago this approach may have made more sense when CSS was not widely used yet. Now it seems like a step backward.

regards,

vangogh
03-24-2009, 04:38 PM
Yeah and again I don't want to knock the software. I haven't used it and that wouldn't be fair.

If someone was running a personal site and wasn't concerned with search traffic or say they were building a simple resume that wasn't going to change then this kind of software might be appropriate. Everything I said above I'd also say about something like DreamWeaver, which is still used by a large number of professional designers.

The css shouldn't be all inline. I think that kind of thing is a limitation of software attempting to produce code in general. Not specifically inline css, but poorer code in general.

I think for a typical business site there are better solutions. For example I'd sooner install WordPress and buy a premium theme. The cost would be more than buying the software, but I think in the end it would be a better value. That doesn't mean design software can never be the right solution. You do have to consider though that it's only a tool. You'd still have to spend the time using it and even then are limited to a degree by the design templates.

rezzy
03-24-2009, 06:06 PM
I think Ill chime in here. I agree the problem exists with any software that trys to make code. It would take the programmers extra code to make it work to peak efficiency.

Using a software to code a site is good for its time and place. When I first started out in school, I used FrontPage and believed the resulting page was fine. As I developed a sense of syntax, and code, etc. I have grown a need to hand code everything.

As previously mentioned some designers will use an image editiing software, Photo shop for instance, slice it and post it on the web.

But there are other solutions outside of Wordpress that can be used. Although it is the most popular, IMHO, and has a small learning curve.

vangogh
03-24-2009, 06:45 PM
I started out on DreamWeaver. I built one site with it and decided there had to be a better way, which led to me improving the way I hand code sites.

It's not so much that the design tools can't work, but rather there are better ways to build a site. I always think hand coding leads to the best quality, but for some maybe there's a time constraint and they can work better with the tool and maybe the quality of the code isn't quite as important.

With small businesses we generally aren't going to have the marketing budget and the connection of a larger company. We have it hard enough to build a business and to me it seems that cutting corners isn't the best approach. Being a designer I'm admittedly biased, but I think there are few things that will give you a greater return on your investment than good design. Good copywriting is another that comes to mind.

Paying $50 for a design tool certainly costs less up front. However you do need to factor in your time learning to use the software and the time actually using it to create your site. It doesn't take long before the money spent hiring someone to do it right pays off and that's not even counting the better results you'll likely get from the site.

cbscreative
03-24-2009, 09:26 PM
Since DW has been brought into the discussion, I thought I would defend it on a point. The older versions of DW generated bloated code just like other tools. The newer versions are getting better. I still use CS3 and haven't played with CS4 too extensively yet (enough that I mostly like it though). DW is now more like the best of both worlds. I work a lot in code view which is really nice because you still have full control. Unlike older versions, if you do a few things in design view, it usually does not mess with your code.

If you haven't explored the Code Navigator feature in CS4, it really has some nice function which can cut troubleshooting time dramatically. There is also a feature where CS4 automatically opens all associated files with any web page. I really like that. The product is definitely improving, especially in its handling of CSS, but it is for the pro. I wasn't sure what to expect with CS4, so my comments are to other serious designers to say it's a great product. There are only a couple minor things I found where I liked CS3 better, and that is strictly personal preference.

For the original points in this thread, I can't add much. For anything much more than a simple, 3 page, "here we are" web site, the DIY tools are usually a bad idea. Yes, I'm a bit biased being a web designer, but in my experience, there are just too many ways to shoot yourself in the foot with quick and easy tools. They have the merit of being cheap so there's not much to lose. The problem comes in when the hidden cost of lost potential hits. Most businesses have a great potential for profit from a web site. All too often, the lure of quick, easy, and cheap squanders that potential.

thx4yrtym
03-24-2009, 10:37 PM
Steve C,

I agree with you regarding Dreamweaver. I've used it for years nearly exclusively for my own sites on a very limited basis between programming projects. I've spent time getting very comfortable with CSS. Looking at upgrading to CS4.

I expect there is a market for the product which is the subject of this thread. For the individual that needs a web site so he/she can say they have a web site it may be just fine at least until they need something more.

regards,

billbenson
03-25-2009, 12:16 AM
cb steve / thx4yrtym - will the current versions of DW act as a good code editor for CSS?

I intentionally used the word code editor rather than text editor for the following reason: I am comparing it with Zend for php editing. With Zend, it flags errors like missing brackets, quotes pretty much any grammatical error. It will also give you dropdowns of parameters. Say you are using a function like "trim(). Trip takes off white space in variable's. It can also trim off special characters etc. Zend will provide a drop down with all the options for the trim function.

With DW, will it have similar capabilities for CSS?

vangogh
03-25-2009, 12:24 AM
I still say DW puts out less than the best code. I agree it's better than it once was, but still see code in DW designed sites that doesn't need to be there. I suppose I could be looking at older sites.

What's interesting to me is the idea that something like DW cuts development time. I'd bet I can hand code a page faster than most could create the same page with DW. Once you get good at coding by hand the design tools have little to offer.

thx4yrtym
03-25-2009, 07:56 AM
Bill,

regarding a css editor, all I've ever used is DW and have done relatively little development with it. Therefore I have nothing to compare it to.

To take you in a totally different direction - :) I recently watched a video where the coder was editing css from within firefox - firebug and seeing the changes real time in the browser. When done they did a copy and paste to save the edited css.

Hopefully someone well versed in DW will chime in with a relevent comment for you.

Regards,

cbscreative
03-25-2009, 01:47 PM
Gregg, I agree that a simple design tool will meet the needs of some web site owners. Like another comment above where you can build an online resume site, that's a good example of proper use. But I see a lot of sites built with such tools that are hurting the businesses that use them. That though is a decision every business owner needs to make for themselves.

To answer bill's question about using DW for CSS, you can maintain complete control using the code view. I tend to hand code almost exclusively, so I work primarily in the code view section. Prior to CS3 when I was still using MX 2004, I did most of my work in a $20 code editor called NoteTab Pro (now $30). I did this because DW had a nasty habit of reformatting my code. CS3 no longer does that for the most part, so I now use DW more than I ever used to.

Since I still mostly write my own code, I can't comment much about DW on its more automated features. In reviewing some tutorial videos, I did notice it does much better than it used to. They've been placing a stronger emphasis on standards compliance, so it is improving even though I'm sure we could still find flaws.

The best recommendation I can provide is to download a free trial of CS4 and test drive it. I did this a couple months or so ago because the new DW was the one I was most skeptical about. I was impressed with it. Even though I have not yet done the upgrade, I intend to in the not too distant future.

vangogh
03-25-2009, 02:17 PM
Steve what advantages do you see in the code editor of DW? Seems like a pricey code editor to me, though if you purchase one of the Adobe studios that price is negligible. Right now I use Coda (http://www.panic.com/coda/), which is still a little pricey for a code editor, but it has everything I want in one program. TextMate was my other choice and I may still purchase that as well.

DW does seem far and away to be the best of the WYSIWYGs. It's been awhile since I used it, but the last couple of times I saw it in action it was definitely improving. I still see it putting out too much inline and bloated JavaScript and I think all developers would be best served learning what all that code actually does. You've always used DW the way I think it should be used, but I have a hunch most who use don't. They just let the program spit out code without understanding how to fix that code when it breaks.

rezzy
03-25-2009, 03:28 PM
Bill,

I think you are referring to intelli-sense, where the program guesses at what you are typing and helps you along. DW is good for both HTML and CSS intelli-sense.

If you are going to be programming in PHP, Javascript or other languages, there are far (free) better choices.

billbenson
03-25-2009, 03:45 PM
VG, what does Coda do that you like?

Gregg, I think Firebug has come up here or elsewhere. I'm going to take a look at it.

Does DW or anything else pick up missing closing Div tags? When I write code, I comment them, but some times its hard to figure them out in CMS's or other code I haven't written.

cbscreative
03-25-2009, 03:58 PM
To be fully honest, I doubt I would have bought DW as a stand alone, but I do agree that it is the best in WYSIWYG's. Even before the recent improvements, it was the best one out there compared to the others. I use it now because it's in the Suite, but only with CS3 did I actually like it. My old MX 2004 was mostly unused.

As strictly a code editor, it is definitely over priced.

One of the features of CS4 I mentioned earlier that really sets it apart is Code Navigator. Combined with the new Live View feature, you can be working in browser mode and code simultaneously. Let's say you have a hover effect on text and want to adjust the hover color. It will split view your browser and code so you can make the change and see it live. Since it opens all the related files for any page, this works with CSS and JS files and DW knows what code controls every element on the page and immediately shows you that code no matter what file it is in so you don't have to hunt for it.

I went ahead and looked up a video that demonstrates this:
Adobe - Dreamweaver CS4 video tutorial : Working with Related Documents (http://www.adobe.com/designcenter/dreamweaver/articles/lrvid4044_dw.html)

Bill, as I recall, you are using MX which I believe has a code validator built in. Run the validator and it should pick up missing end tags and many other issues if they exist.

vangogh
03-25-2009, 04:31 PM
Bill when I switched to a Mac a few months back I had to look for a new code editor. I was using HTML Kit on Windows. I did find some free ones for the Mac that I used for awhile, but none really did it for me. Each was missing something and I was bouncing back and forth between a few. I figured since my work revolved so much about an editor I'd give in and buy one.

I looked through a lot of reviews and downloaded a dew trials and the choice for me came down to Coda and TextMate. One of the reviews I read mentioned how TextMate was probably better for programmers and Coda for web developers. I donwloaded the trial and within a couple of days I knew I would buy the program. It's pricey at $99, but for me it was worth it.

There are a few thinks I need in an editor. Syntax highlighting and built in FTP for live editing on the server. Most editors have the syntax highlighting, but I find the FTP support is never quite what I'm looking for. Panic, the company that makes Coda, already had an FTP app called Transport which they built into Coda. Once logged into a site it shows the usual folder navigation on the server. So I can open a file and save a change and it's there on the server. That saves me so much time from having to download the file, work on it, and then upload it.

I also like the way Coda lets me set up sites. There's a separate window to list all the sites I work on and I can set a screenshot of the site to find it easily. I can also set a site to be a local folder on my computer, which makes navigating to the files on my development server easy to find. I haven't taken full advantage of the 'Sites' setup.

There's a place within Coda to store snippets and I'm building a library of code to make development quicker. With a few clicks of keystrokes you can build the shell of a web page. It also does code completion. I type <p> and Coda fills in the </p> and places the cursor right in between the tags. You started typing something like font- and all the possibities (size, family, weight, etc) are right there to select. Choose font-weight and you'll see the options for bold, normal, etc.

Coda also has a built in terminal window, which I also haven't taken advantage of yet, but it'll let me run quick *nix commands on the server to run backups or manage a server. It also has a preview window which is nice, but I generally just use a browser to preview things.

Some of the above you can find in a lot of editors. They aren't unique to Coda. The FTP support and the design of the program itself are probably what sealed my decision. The design is beautiful. I still may buy TextMate at some point as well.

@Steve - makes sense. I figured you probably ended up with DW as part of one of the studio suites. I'm not planning on grabbing a suite at the moment, but if I did I know I'd end up with a few programs I wouldn't buy outright, but might end up using.

Like I mentioned about Coda, I prefer to view things directly in the browser. I never completely trust any apps live preview. They generally seem good, but since people are going to look at my sites in the browser that's how I prefer to preview them too. Similar with code validators I've learned to write valid code over the years so I don't feel the need to have a program check me.

cbscreative
03-25-2009, 05:21 PM
True about not trusting the live view too much. I found the one in CS4 to be amazingly reliable, but I would still not fully trust it. It's good for quick reference though like the example I used. One nice thing in DW is F12 is default browser which you can set to any browser you want, and you click on an icon that drops down a list of all your broswers and you can launch any of them.

I definitely use the shortcut keys a lot too. In DW, Ctrl+Shift+p creates a set of p tags with the cursor automatically betwen them. H tags are Ctrl+# (1-6).

That remeinds me of a technique I began using many years ago to avoid forgetting closing tags. Using bill's example, when I create a div, I begin by typing the brackets:
<><>
Then I use the arrow keys to fill them in:
<div></div>
Then I separate them before adding attributes so I can fill in content inside the div.

This way I never forget to close the tags and it's easy to build inside of them. DW is nice because if I add a space for an attribute, just typing c and Enter will fill in class and provide a drop down menu of all the classes with the cursor between the quote marks (i and Enter will bring up id). With an average of 4-5 keystrokes, the attribute is all filled in. Even though the CSS is external and the file is not technically open (except in CS4 with the new feature), DW still reads your CSS to make hand coding faster.

One other reason I like the integration of suites is things like creating a new graphic for a site you haven't worked on in a while and need a quick color match. If I know the h1 uses the color I need to use and I'm working in Photoshop, I can quickly sample that color in DW and use it in the PS file I'm working on. There are many situations where this integration is a big time saver.

vangogh
03-25-2009, 06:40 PM
The preview is similar in Coda and I can add default browsers. I always have at least one browser open and plenty of ways to open the same page on others.

With Coda (and other editors) you don't need to type the shortcuts. As soon as you start typing in the code the completion thing shows up. It's nice. Funny too. I used to do things the same way you did. I'd type <><> to make sure I had the opening and closing tag set and use the arrow keys to fill in between.

If you want to see Coda in action you can watch some of the video tutorials (http://www.panic.com/coda/developer/). The editor features video will show most of the things I've mentioned above. I just discovered through the video that it does have code validation.

billbenson
03-25-2009, 09:30 PM
Something above made me wonder if I'm a developer, programmer, designer none of the above or more than one of the above??...Ahhhhh.

CB Steve - you are correct. I use DW CS 2003. I only use it for tables or site wide search and replace. If I need a table that is 8 col x 25 rows, its quick to generate that table. I still use tables a lot for tabular links for admin programs I use. For example I have a table that has links to my cc processor, programs I use once a year for updating pricing etc. Probably 40 rows x 4 columns. For site design I only use tables for tabular data.

The problem I have with using the code validator in my version of DW as you suggested Steve, is as soon as I plop the code into DW from my text editor its going to add all the DW code I don't want as well, and would have to go back and delete that in an editor. It still is a viable option if you are chasing your tail over something simple like a closing tag.

Incidentally, FireFox has a color plugin that tells you what color is on a page via an eyedropper tool. It works reasonably well. It doesn't show the plugin name so I forget what its called. A search for FF color plugin should get you there.

VG, sounds interesting. I keep forgetting you defected to Apple.

One thing to consider, with the way it seems that most of us design, although using different tools, is to install Apache, php, mysql on your pc. If you do that, you can easily have open your css sheet, site in FF, IE, Chrome..., page you are working on, and a text editor of preference. Make a change and save and it will be instantly changed on your browser. I believe all of us pretty much only use php / mysql.

I did this but quit several years ago because I use a lot of Global variables and could never get them to pass from script to script properly. That was an apache setup issue, though. It's really a nice way to work on stuff with everything open and make real time changes. The other benefit is if your internet connection goes down, you can still work on a site as if you are online. I might investigate that again; if I do, I'll post what I did.

thx4yrtym
03-25-2009, 09:44 PM
Bill,

I agree about working locally.

For those who have not as yet setup locally for development, may I suggest WAMP. After wrestling with several different ways to create the setup locally, WAMP turned out to be the most trouble free. It in my startup group so I never have to think about it. When startup is complete, if the speeometer isn't totally pegged to the right, I have a problem ( seldom happens) otherwise you are good to go.

Hope that helps someone.

Curious , is anyone here using jQuery on a regular basis??

Regards,

vangogh
03-26-2009, 01:11 AM
Bill I did go Mac and I'm never going back. Been loving every minute on my Macbook.

Gregg WAMP is a great program to install. I installed everything myself on my old PC, because I wanted to learn, but it was something of a pain in the you know what. Apache, PHP, and MySQL were all installed by default on my Mac, though I did have to tweak it a bit to suit my needs.

For anyone on a Mac there's MAMP and linux has XAMP. All basically give you a server in one application. Very easy to set up and running your own development server is really a must.

Bill I hear you about whether to call yourself a designer, developer, programmer, or what. I used to wonder about that myself, but stopped caring years ago. I mostly call myself a web designer, but sometimes I add the /developer to the end. Guess I'm also a bit of a marketer/seo too.

Usually to build a site I start on paper to get a layout going and then move to Photoshop to flesh out the details. Then I hand code from the layered Photoshop file. I'll often refine the design a little further while coding. That's about my whole process.

billbenson
03-26-2009, 02:51 AM
So if you have the Apache / php / mysql installed VG, do the server globals such as $_SERVER['DOCUMENT_ROOT'] work locally as well as when you upload the script?

I've only done the manual installs in the past, but they always ended up being a day process. Primarily because I installed it with htdocs on D and I always ended up with path issues that were a pain to track down.

vangogh
03-26-2009, 02:20 PM
They work. It's really the same set up on my laptop that I'll see on the live server. I did jump into the Apache files some and tweak things to my liking, but you can configure Apache, PHP, and MySQL however you like.

Installing everything manually can be a pain. I managed it on my old PC somehow, but it was never quite how I wanted. Once I had it working well enough I never touched it. I had it installed by default on the Mac, though I did make a few tweaks and there are still a few things I'm trying to figure out how to configure.

Installing Wamp or Mamp or Xamp is much easier.

billbenson
03-27-2009, 12:10 AM
If all of that works, why don't you just do development on your pc rather than use Coda and work on an online site ftp ing everything?

vangogh
03-27-2009, 11:57 AM
Well first I don't have a working PC. :)

I do work locally, but I can't serve pages to the web from my laptop. Sooner or later the files have to get transferred to a server. If a client approaches me with a big project I'm going to develop it locally and when it's done move it online. But if a client just needs me to make a few minor changes to the text on their site, it's a lot simpler to open the file on the server and make the changes than it is to download the file, make the fix, and then upload it again.

Either way I'm still using Coda. It's my editor of choice. Even when I'm working locally I need to edit the files.

billbenson
03-27-2009, 02:09 PM
For anybody interested, I installed easyphp and it appears to work well. Pretty much a one click install. Its free easyphp.org is the site.

I can see your point on quick page edits VG. I was thinking more along the lines of new site development, but if you frequently need to show the site to a customer that doesn't make sense for you either.

One of the things I noticed when I upgraded my pc from my 5 yo desktop to a dual processor current pc with 3G of ram and win xp is how fast it was running local programs. I didn't notice any speed improvement connected to the internet. That makes designing locally more attractive for me as well. Like I said, I used to do it but I could never get Apache configured so it worked with globals. You had to pay for all the packaged programs back then, so I just migrated to working on line.

I'm going to play around with this and see how I like it.

vangogh
03-27-2009, 02:36 PM
It really depends on the project. A new site I'll always develop locally first. For existing sites it depends on the project. In some cased I'll mirror the site locally and work locally, but with other sites it's easier for me to work live. Usually I'll create a duplicate page or pages on the site and work on those so I can work live without affect the site itself. When I know things are working I can simply rename a few files.

For small things I'll edit the files directly. I wouldn't suggest everyone work that way, but I have enough experience to feel confident and will make backups just in case something does go wrong.