What tools do you use for CSS design

software / browser plug-ins etc.

[steve]

I'm wondering what people here use for html and css page design and editing these days?

I started with FrontPage and upgraded to Expression Web. But lately I've been trying a 30 day evaluation version of Webuilder, and I prefer it!

I realised I don't use the WYSIWYG features in the MS offerings. All I really need is a decent html and css editor with a built in preview window which updates as I edit code and renders accurately.

For troubleshooting I use FireFox with the FireBug, WebDeveloper and HTML validator extensions installed.

Together these make for a pretty productive environment, but there's always room for improvement. So, what editors and browser extensions do you use?

[BeeDeeDubbleU]

I tend to stick with DW but it's probably not the best in west.

[simonuk]

I tend to use DW the most as the shortcuts and custom favourites make my life quicker.

Saying that I also use Notepad ++ a lot because I like the way it highlights the opening and closing of the elements you're working on.

I have used Visual Studio but only use it when I need to as I don't like the interface at all.

Firebug I couldn't live without!

I first site was created in 1997 on publisher :-) but I wanted to know how to build them myself. I started using hot dog pro and that was how I learnt to hand code.

[CSS_Kidd]

I am with Simonuk... I like DW mostly for the Code Hints and the actual css panel. Keeps the typing down to a min.

Notepad++ I like for the way it cleans up the code for you and also the opening and closing of elements thing that Simonuk said.

And of course everybody's pal... Firebug... I have become better because of it. I like it for the fact that if you like what someone else did, you can see how they did it and then you can approve upon it!

Oh yeah... My first site was created in 1997 as well when I was a graphic artist and I said yes to my boss that I could build a website for our client (LIES!). I did it in FrontPage... Which messed up the HTML so bad it caused me to buy an html book so I could hand coded the mistakes it made... I hand coded till 2001 then moved to dreamweaver and haven't looked back.

[steve]

Three votes for DW. Does it handle CSS layouts well?

I ask because one of the reasons I'm moving away from Expression Web is it's inability to display simple CSS layouts correctly.

For example, it has a known problem with displaying negative margins, which makes the visual layout bit useless. MS recommendation is to preview in a browser, but that doesn't help when you want to edit pages and a column has vanished!

[simonuk]

My main focus is cross browser compatibility and creative CSS layouts but that means all my sites look completly broken in the design mode of DW.

I am a hand coder and it is only the shortcuts and favourites that I like in DW. The design mode is next to useless in my opinion but others may disagree...

[Dsgnr]

I use DW. For me it handles CSS layouts well.

[CSS_Kidd]

I will disagree with you there simonuk. I have managed to get my designs to look the same in all browsers (minor issues ignored) as well as dreamweaver's design mode. As a matter of fact...If you can get your layout to look solid in both DW and in FF and IE (being the common two browsers) you have a Very Solid Layout. But then again... Are you on a PC or Mac... and what Version of DW are you running?

[simonuk]

Ok, when I say completly broken it is usually the Nav menu which doesn't sit right in design mode which then breaks everything below it. The menus are fine in everything down to IE5 but DW design mode just doesn't seem to like pixel perfect / drop down menus :-)

I use DW CS3 on a PC. You?

[steve]

Coming from FP and EW I've never used DW. But I've just been on the Adobe website and they offer a 30 day trial, so I'm going to give it a go and see if it breaks my design - I'll report back.

[swa66]

For html and CSS:

Just a plain old pure text editor (vi is my weapon of choice) and a bunch of browsers (FireFox 3 with web developer toolbar and firebug as a start, all others to finish it off).

Add in standard unix tools and things like perl to automate things every so often.

For graphics:

Adobe CS3 (I have the upgrade to CS4, but didn't get around to install it yet) for all graphical needs, but I've never touched DW (I do have a license for it though).

Add in libpnm, perl, etc to automate things.

I would never be able to trust a WYSIWYG editor at all.

[edited by: swa66 at 3:39 pm (utc) on April 2, 2009]

[CSS_Kidd]

Simonuk... Yeah when it comes to Drop down menus and hidden elements your right about that. Same with Spry stuff too.

Steve... If it's a WYSIWYG editor you want I am sure you will find out with your 30 day trial that DW does beat out FP and EW.

[steve]

If it's a WYSIWYG editor you want

I don't, I rarely, if ever use the WYSIWYG any more. But I do like to have a split screen so as I edit the html or css I can see what's happening to the page without having to switch to a browser.

This is what is what appeals to me in Webuilder, the preview pane just works!

[CSS_Kidd]

Steve. Your right. I think most web developers/designers only use the design/mostly split mode in DW just for the purpose to view the basic changes and flow. For the actual look of the site I always view in all browsers (safari, opera, ie(6-8) and firefox). The main reason for using DW is for the panels, shortcuts and code hinting. the site building function is not a bad extra as well.

[lavazza]

If it's a WYSIWYG editor you want

... then you're outta luck cos there aren't any on the planet

For html and CSS:

Just a plain old pure text editor ... and a bunch of browsers

Ditto for me