Reader’s Poll! How Do You Code Designs Into HTML/CSS?

Reader’s Poll! How Do You Code Designs Into HTML/CSS?

on Apr 14th 2011 with 122 comments

We recently made the big announcement that we’ll be publishing PSD > HTML tutorials here on Webdesigntuts, which has prompted a bit of debate over most web designers are coding nowadays. There are actually a wide number of options that any web designer/developer has to pick from: Dreamweaver, Coda, and Notepad++ are just a few of the options…

The Poll: How Do You Code Designs Into HTML/CSS?

Before we dive into the poll and discussion, let’s get one thing straight: This isn’t about the right way to code, it’s about what works for you. What we’re specifically asking is how you get it done on a daily basis. You may have tried out 3 or 4 different methods, programs, or workflows… but chances are that if you’ve been coding HTML/CSS for any length of time, that you’ve settled into one way of doing things by now.

Writing frontend coding for a website is just as personal as the design phase itself… and there are a bunch of different considerations that you might make before settling on what’s the best method for you. I’ll list this considerations in detail below, but in general, they span from cost to ease-of-use.

Answer the poll below, read the detailed considerations, then join the discussion in the comments section to help explain why you code the way that you do. We’ll be using your feedback as a grounds for creating tutorials in the future, so if you’ve got an opinion or request, be vocal.

The Considerations

We’re actually going to be running a comprehensive article on the state of coding programs (like Dreamweaver) later this month, so this should be a good primer for anyone who’s interested in reading that post later on:

  • Cost: This may be the first thing that you consider if you’re just starting out. Ironically, the programs that are best suited towards beginner coders also happen to be the most expensive. Dreamweaver will run you about $399 on it’s own, or $1799 as part of the Web Premium Creative Suite. Adobe also offers a new monthly subscription service for as little as $19 a month, but that’s still gonna add up to about $240 a year.

    Coda runs for $99, which is significantly more reasonable. The E-Text-Editor runs for $47. CSSEdit runs for $40, but is limited to a specific set of tasks. The Notepad++ is 100% free and open source. There are also a number of other basic text editors that are free as well.

  • Ease of Use: This is a more personalized category than the others… but some programs just feel more usable than others. It’s all relative though – for instance, if you’ve been around the Adobe Creative Suite for years now (or you’ve recieved formal training), you might gravitate towards Dreamweaver; Conversely, Dreamweaver might seem like an over-grown beast of a program to other people that are unfamiliar with it.

    On the other side of complexity, some designers/coders really feel comfortable in a plain old text editor. What works best for you is, ultimately, up to you – but at some point you should consider first what program you feel comfortable with.

  • Feature Set: The feature set that your particular tool(s) of choice come packed with is another important consideration. Do you need a built in FTP program? Do you need code-hints and pre-built snippets available at your fingertips? Do you need a preview-view of the code that you’re working on? Do you want a different “view” for each language that you’re working with? What about the ability to retrack to older versions of your code?

    Features are often a double edged sword though… in fact, many people fault Dreamweaver and other big WYIWYG editors for being too feature-heavy to be usable. Again, this is a highly personal consideration… some people want it all at their beck-and-call; others want to pack light and write everything from scratch.

  • Collaboration: Another consideration that I’ll throw out is the collaborative nature of your project. Think of it this way: if you’re designing a project where you are likely the only person who will ever touch the code, you can probably pick whatever method feels right for you. BUT, if you’re working in a larger team or a studio, you need to consider whether or not they have their own way of doing things. In these cases, heavy (and expensive) programs like Dreamweaver might not make the most sense if not everyone on the team has access. Likewise, complex features like SVN and version tracking can be more of a hindrance than a benefit.

Discussion: So, How Do You Code?

There’s No “Right” Answer, obviously, but it’s great to hear the reasons why other designers do things. Like the other posts in our “Reader’s Poll” series, this is meant to be a jumping-off point for discussion amongst our readers… so don’t hesitate to chime in with your own thoughts.

Oh – and if you missed our poll on whether or web designers should know how to code, check it out here!

Brandon Jones is MDNW on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Brandon Jones is the old Wptuts+ Editor. From sunny Southern California, Brandon has been designing, drawing, photographing, and coding the world around him for the past several years. Not content to pick one media and stick with it has left Brandon with a broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune 500 software prototyping. He loves design, but even more, he loves the passion and creative spirit that embodies the design community. Check out Brandon's work at ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://themeforest.net/user/jvanoel/portfolio Boba

    The full post is shown on homepage.

    • http://themeforest.net/user/jvanoel/portfolio Boba

      Nevermind you already fixed it.

      About the poll, i use Notepad++. But not sure if it should be called “advanced”, it’s like Notepad just has syntax highlighting :)

      • http://www.distractedbysquirrels.com Sebastian

        That’s exactly why I use Notepad++ :) It’s so lightweight. I also used the integrated FTP Client in the past, but switched now to FileZilla. Although sometimes I miss the power of some advanced Editors like Eclipse.

        I also have Dreamweaver but never considered to use it.

      • Jack

        Notepadd ++ all the way!

      • http://www.visual-blade.com Daquan Wright

        My programs of choice are Aptana 3.0 beta, Notepad ++, and E – Text Editor.]

        Aptana is more powerful than other editors, but light weight (you can add to it with plug-ins) and it’s not as slow as Netbeans. I use Notepad++ to edit files.

        When it comes to creating projects, I’ll go with E (my beautiful, favored editor) or Aptana. Also, notepad ++ has code hinting, which is awesome, it just needs to be enabled.

  • Connor Turnbull

    Surprised there was no mention of Microsoft Expression Web. I prefer that over Dreamwaver.

  • http://stephensauceda.com Stephen

    Textmate + Zen Coding = Win!

    • Spreng

      I’m currently using that combo and it’s the best!

  • http://mindsharestrategy.com Eric Mann

    I used to do everything in Dreamweaver just so I could justify the original expense of Macromedia Studio (now part of Adobe Creative Suite). But I never once used the WYSIWYG editor because it was too bulky … I’d code the HTML and CSS markup in code view and preview in Firefox.

    After switching through several different IDEs, I finally settled on using Notepad++ and Firefox with Firebug. You can code the initial design, preview in Firefox, play “what if” using Firebug, and backport the changes to Notepad++. It’s a pretty smooth development system, but you have to be in the code/markup mindset (so having a PSD of the finished design to work from helps immensely!).

  • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
    Author

    I’ll chime in with my own workflow – I happen to use the E-Text-Editor right now… along with FireFTP as my in-browser FTP client. E happens to have it’s own FTP system built in, which rocks, and the coding just feels smooth and easy.

    Way back in the day, I learned on Dreamweaver though (about 10 years ago!). I also took a class on FrontPage if anyone remembers that old monstrosity of a program ;) Times were definitely different though, and I quickly moved away from WYSIWYG editors simply because I felt like they caused more problems with shoddy coding than they solved.

    I am curious to hear from current Dreamweaver users though… how has the code that it spits out been lately? Has it been cleaned up or is it still gnarly? Just like Fireworks, I suspect that the program has probably grown leaps and bounds since I last used it about 5 years ago.

    • http://themeforest.net/user/jvanoel/portfolio Boba

      I used E-TextEditor a while ago, but ended up getting back to Notepad++, it simply suits me the best.

      And i remember Front page too, that was my first encounter with webdev (actually there was no dev, i was just dragging and dropping stuff). 5 years after that i started learning real webdev.

      About Dreamweaver, i did try it few months ago, but after a day or two wasn’t really happy with it so got back to Notepad++.

      • http://www.aliabdaal.com Ali Abdaal

        I prefer to use the Code view of Dreamweaver, simply because the built-in FTP saves a lot of time. The WYSIWYG is too bulky and broken to be of any use.

    • http://route19designs.com Dan Excel

      I use three programs; Dreamweaver CS4, Komodo6 and WeBuilder. Dreamweaver is still a solid and viable program. I cannot tell you about the WYSIWYG part of it, I’m not sure I remember how to use it anymore. I also use Komodo (free version) by Activestate for it’s HTML5 and CSS3 code hinting which Dreamweaver does as well. My goto tool is WeBuilder 2008. It’s lightweight, does an amazing job of code hinting and can perfect for me. I cannot justify upgrading since version 2010 does not support HTML5 or CSS3.

  • http://www.brake-down.com Matt Beischel

    What if I use Dreamweaver as a coding platform and not as a WYSWIG?

    • Don

      Exactly what I do, I use DW in code mode only and it’s ability for code completion is nice. Much better in CS5. I love Dreamweaver’s ability to organize sites. If Coda could do a better job at site organization I would switch. DW can upload/download files with it’s path, so many code editors will not do that. You have to workaround it.

    • Brett

      I use dreamweaver in code view as well. I like the way it color codes items and how it auto completes closing tags.

      Helps out a lot. Then it’s nice being able to switch to design view real quick but I design it all based off of the code view.

    • http://abrightconcept.com Gabriel

      Ditto. My first thought when reading through the poll list was, “Dreamweaver is a WYSIWYG?” Dreamweaver color codes, checks syntax, allows you to call up lists of existing classes for code completion, allows hiding of code segments for readability, adds and removes comments automatically, and more. I’m gradually finding that for complex programs, I want something more robust, but I’ve never had any issues using the code view to hack away on most websites and I’ve never touched any of it’s WYSIWYG features.

      • http://www.brettjankord.com Brett

        I use Dreamweaver in code view too for all the above reasons. I also use the code snippets feature a lot with custom quick keys for my code snippets. It’s nice to see their are some other advanced alternatives for coding, yet Dreamweaver still takes the cake for me.

    • Paul van der Heyde

      I too use Dreamweaver in the code editor. I bought the design premium CS5 and figured I’d already spent enough money so use it as much as possible.
      But I’m thinking of switching to Coda, just to use a more lightweight program… Any suggestions?

    • Adarsh

      sam here. i really like the auto complete and the built in http://ftp.also its site management features.(
      dreamweaver)

    • http://www.yvonne-tang.com Yvonne Tang

      That’s exactly what I do also. Dreamweaver with the help of Firebug.

  • Connor Crosby

    When I first started out, I used Microsoft FrontPage. Thankfully I’ve graduated to just coding using Coda.

  • Matt

    I’ve taken a liking to using Coda and CSSedit together. I used to like Dreamweaver for the split screen so I could see what I was doing after I did it without constantly refreshing the page, but once I installed FireBug I didn’t need that anymore and I ditched Dreamweaver altogether.

  • ATL

    Dreamweaver has an advanced text editor IN it. Plus More.

  • http://alicia.wilkersons.us Alicia

    I started out using notepad and using IE to view the page. I’ve tried many things from Dreamweaver to Notepad++. Dreamweaver because I’d purchased it with a bundle to get Flash and figured it’d be good to know. Notepad++ is a nice simple and intuitive but I missed the php function information. I’ve yet to find something that I like that is free/open source. I currently use Codelobster and Chrome to view my initial designs.

  • http://www.connecticutwebsites.com webguygary

    after trying the WYSIWG nonsense, I’ve returned to simplicity: Notepad ++

  • RyanS2

    I use a combination of Dreamweaver, Notepad ++, and Eclipse for PHP Developers. The workflow *really* depends on what I’m doing. Dreamweaver is the default and it is great for rapid work from scratch. Unfortunately, it really sucks with CMS based layouts and is almost useless for that. The HTML/CSS code is clean, the Javascript is clean except for the ungodly rollovers and use of .FLV format into Dreamweaver. It will then spit out some sheer gibberish. The php code is pretty clean that it generates. In fact, the ability Dreamweaver has to use php is pretty impressive once you learn it. Best thing is that it code hints link directly to the pages on php.net, so you know exactly what a class does.

    I only use Fireworks when I need something done like a basic button or a tab. It has good control over basic shapes and textures, but I’m not a fan of the code output. When you put it into CSS, it turns everything into absolutely positioned divs and it uses ID elements for each piece. I can understand why, (it really wouldn’t work any other way), but it ends up being just as much work to use it as not.

    If it’s a CMS, then it’s Google Chrome to the rescue. Inspect element, mix in the web developers extension, get live updates for how the CSS will look using Chrome, and then put the code into Notepad ++.

    Eclipse gets brought out when doing serious debugging in php code, but I don’t use it that much. Unlike dreamweaver, it does not hook directly up to the php.net pages, so the code hints aren’t particularly great.

    Microsoft’s Web Expression is actually really nice now, but since I don’t develop on Microsoft platforms, the proprietary .NET framework codes don’t help much, and I don’t think Silverlight has a serious chance of competition against Flash as a platform.

  • http://Tttconsultants.com Terry

    Notepad and FTP. Unless I am doing pup, then I’ll dump it into dreamweaver to check my code before I upload.

  • anon

    I use aptana Studio 2.0 but I’m good with anything similar. It just needs auto-completion and highlighting.

  • http://www.joaoluis.co.cc João Luís

    I use Dreamweaver, and use both the Design View and the Code View.

  • http://arconixpc.com John

    I use NetBeans as my IDE and Mercurial as my version control. I combine that with Firebug and Firefox to have quite the development environment. I really like how Netbeans will auto-copy the files from my trunk folder to my XAAMP test bed on save.

  • http://www.appjon.com AppJon

    I use a combination of Espresso/Coda/RapidWeaver for my web-editing needs.

  • http://www.xalking.com Xalk

    Was using macvim for a while, moved on to Textmate + Zencoding, terminal, transmit

  • http://acutesquare.com Lou Holsten

    I currently use Sublime Text Editor, which I’m surprised doesn’t have a stronger following. I used to use Dreamweaver. I didn’t use the wysiwyg though, I coded by hand and used the split screen. I switched because the live preview wasn’t always a help plus Dreamweaver was a big program for what I was doing in it. I’m much happier in Sublime with a web browser open for previewing.

    • danjessen

      If you like Sublime, you should try and move to Vim or (gvim / macvim) it’s a step up, a bit weird to get used to, but for me it’s been the right move :)

      • http://acutesquare.com Lou Holsten

        Thanks for the suggestion. I’ve actually been meaning to give Vim a try.

  • Rogier Borst

    I use Dreamweaver as an advanced text editor all the time. It’s got the syntax highlighting, a built-in FTP client, code hinting and, since CS5, basic support for frameworks and cms’s like WordPress. I can’t remember the last time I used the WYSIWYG functionality, though.
    For previewing I generally use Firefox with Firebug, with an occasional check up on the other browsers.
    I’ve been eyeballing Coda for a while, but I’m working on a PC and don’t think I’ll be switching to a Mac soon.

  • Jermaine

    I use notepad++ with zen coding extension and NetBeans IDE for hardcore application coding.

  • http://mikhailkozlov.com Mikhail

    Aptana IDE as it has FTP, WYSIWYG and you can use it as full blown IDE where needed

  • http://whenimnotsleeping.com Bryce Howitson

    While I don’t personally use Dreamweaver any longer (I think its gotten way to bloated when it takes as long to load as Photoshop) I’ve noticed a strange phenomenon about the program.

    The small amount of very non-scientific research I’ve done seems to indicate that many new designer/front-end dev types gravitate to Dreamweaver while as the experience level increases people tend to move toward Coda/Eclipse/Text Editors with a browser preview. Now please don’t assume that I’m saying this is a requirement with experience or that Dreamweaver use makes you a noobie. My opinion of Dreamweaver is simply my own, however I’m wondering if anyone else is observing this process and I’m curious if there’s a reason why.

    As senior designer/lead front-end dev, I frequently end up giving student groups tours of our studio and I almost always receive a question that goes something like this: “So when you guys build websites, you use Dreamweaver right?” Now this is especially humorous in our case since we’re a .Net shop and the devs are usually rocking Visual Studio but I’m still always a bit surprised by that question.

    I feel like this is exposing an issue at a very basic level in the process of design education. Comments like the one above make me think that students are being told to learn Dreamweaver so they can make websites instead of being told to learn HTML/CSS/Javascript to make websites. In my mind this is similar to telling someone to learn inDesign to make a brochure, or learn a Canon 5D to take portraits. In all these cases we’re telling people to learn the tools and not the theory. How do we help people understand that comfort/familiarity with a program doesn’t equate to technical competency in a given medium?

    • http://jonprestonstudios.com Jon Preston

      I cantotally agree with you there. I’m finishing up my associates now, and I actually taught myself XHTML and CSS in the 2 week span before my web design class… and it was invaluable. Dreamweaver was so much easier knowing those two languages.

      Only issue with learning the languages though, is it takes a lot of time. Something that students don’t really have.That’s why I haven’t really gotten to crack javascript yet.

    • http://route19designs Dan Excel

      RE: Bryce Howitson

      For me it has to do with comfortability; I still use dreamweaver to do video tutorials when I have time. For production, I don’t have the patience to deal with the code hinting. the code view just does not put me in that zone. Several months ago I tried using the Spry library that it offers and found myself transferring files to my preferred text editor for various reasons. Komodo and WeBuilder suits me much better.

  • Eduardo Barros

    I use vim.

    It’s actually not a big deal at all; I’m more of a developer (both web and desktop), trying to learn design.

    • danjessen

      +1 I’ve moved to Vim aswell :)

    • Jeremy Michel

      I tried lots of editors, DW, E, Notepad ++ and so on. I settled for a while for Aptana Studio, which is a nice IDE built on Eclipse, but the one that I hate beyond everything is lag, every single editor that I used lagged, loaded slowly or just completely crashed. So after watching the Vim tutorial series on Nettuts, I use it and love it, fast, customizable powerful, it’s the editor.
      Of course this is my personal opinion, I know lots of talented designers and developers who just go with Dreamweaver or Notepad ++.

  • http://www.rentalsbariloche.com Bariloche

    Dreamweaver, used it for years and it does what I need.

  • Joel

    I use Dreamweaver in my work, because i work on windows. But i prefer Textmate.

  • http://sharpwebsolutions.com Damon Sharp

    Ditched Dreamweaver for Coda about 3 years ago and never looked back. Dreamweaver always crashed or somehow would add junk code that would always need to be cleaned up.

    Coda is perfect for me. Code completing and hinting and well as split views and function lookup with books, plus you really never have to open the browser, just another tab. It really is as close to an all in one app as you can get. Cannot wait for v.2! It’s definitely due for an update!

  • Barry

    BBEdit here.

  • Brock Nunn

    I do use Dreamweaver, however, I have found that Aptana Studio 3 is an even better option then Dreamweaver when it comes to advanced CSS3 code hinting. However, I go back to dreamweaver whenever I am working with any frameworks like 960.gs, the code hinting there on the HTML side is invaluable.

    Also, I will note that I would never use the WYSIWHG features in DW, they are not nearly as far along as they need to be and the code gets really messy.. No ability to make CSS notes when you are using the Design mode.

    • http://route19designs.com Dan Excel

      RE: Brock Nunn

      Aptana Studio 3 is still in Beta that is why I went with Komodo. Dreamweaver still has its purpose, but from day one my college instructor advised the entire class to stay away from any authoring tools and get very comfortable with a text editor. He also assured us that anyone caught using an authoring tool will fail the course. That was in 07 and he was a using a relic of a program for even back then called HomeSite by MacroMedia.

  • edwinhollen

    Espresso and it’s live preview window is bliss.

  • http://jonprestonstudios.com Jonathan Preston

    I use Dreamweaver. I like seeing what I’m doing as I’m doing it. I don’t workin the design windows, I type my own code in and build from there, so having site validation issues is becoming less and less of an issue with me.

    I do like that I don’t have to memorize command after command using dreamweaver either. Sometimes it can be a chore to be going through school with a full time job (and 2 side jobs) and memorize everything while trying to lead up to a freelance side job. Dreamweaver makes it all simple for me.

  • Claudia

    I use Notepad++, its simple, its free and it works.

    I dont think using Dreamweaver as a WYSIWYG is a good idea, because all the extra code it can produce and it would be harder to maintain. And I dont like the idea of using only for coding, because it is a really big program for doing only that. The only time I open it, is when I have to code with tables for mailings.

    Way back when I started learning (8 years ago) I used a software called Coffecup. And then switch to Dreamweaver (when it was still part of Macromedia), then switch back to just a plain editor, when I learned that tables were a big no.

  • http://www.xpellshop.com ricardo

    Notepad++ with embedded FTP plugin that uploads on file save, + Firefox

  • http://www.moonthemes.com/ Moon Themes

    First i started using Microsoft Frontpage, than for long time i was using Dreamweaver, but now for long time i am been using the notepad++ its best and works perfectly for me.

  • danjessen

    I’ve been around the block, and tried almost everything:
    Notepad(++), Stones Webwriter, Dreamweaver, Netbeans, Eclipse, Aptana IDE, Espresso, Coda, TextMate, Kode, Sublime Text Editor … you name it. But right now I am using Vim (gvim/macvim), and i think I’m gonna stay with it, for now atleast it seams like the right editor for me. It has all I need.

    It should be said, that i use my editor for front-end & back-end.

  • Rasmus

    I use Coda for sure, but I dont think I will be using it anymore.

    It seems like the development stoppe almost 2 years ago…

  • http://www.nionwebdesign.com Niels Pilon

    I use Coda. Probably not using all the features as I design more than I code but I like the ‘all in one’ mindset of Coda. Editor and FTP-client all in one program.
    Really like the ability to add all my projects to Coda and then being able to edit the files live on the server or easily transfer edited files from my Mac to the server.

  • http://newarts.at Drazen Mokic

    Windows is driving me crazy, there is no good looking Text Editor that i could find.

    Usualy i work on Mac and use TM and Coda but sometimes i am on my PC and don`t want to unplug and plug my TFT into the Macbook for some quick changes.

    Can someone suggest something for Windows which has FTP functionality built in and looks just OK?

    • http://arconixpc.com John

      check out netbeans

  • Aitor

    NetBeans and Firebug

  • http://www.monochrom-fotoart.de mono

    I use notepad++ for my own work and if I work freelance. Notepad++ has great syntax highlighting, it’s fast and slim but has no real file or project manager or script libraries. Thats something i really miss in notepad!!

    At the company I work for at the moment I got Dreamweaver for coding, I never use the WYSIWYG. But well, that’s how all started in the early 2000s, using MS Frontpage! ;)
    Dreamweaver is good tho, nice file management and script libraries. 2 things I don’t like about Dreamweaver: poor syntax highlighting and no project management.

    Zend Studio is quite good for dealing with larger projects I guess, but I stick to Notepad++ when it comes to my own projects. As already mentioned several times: fast, slim, free and good syntax highlighting :)

  • Steve

    Im just starting out as a freelancer but have been developing web applications for 10 years although not my primary role.

    I started out back in the day using Dreamweaver but fairly quickly moved onto an app called TextPad. I simply felt more in control of the code that way. Brandon mentioned Frontpage…..ewwww. Frontpage seemed to do all sorts of strange things and seemed out of control.

    For the past few years I’ve been developing in a .net environment using Visual Studio (code view only) I love the intellisense features (although it probably made me lazy).

    As said previously. My role currently isn’t a web design / developer role but that’s what I love to do so I’ve bought a Mac, have learnt php and am setting up as a freelancer. I’ve been trying various apps.. Dreamweaver, Coda, Espresso, TextMate, PHPStorm….. etc.

    I eventually settled on TextMate and made the purchase. Syntax highlighting, bundles, a supporting snippets app, some browsers and cool plugins like FireBug. What more do you need. (apart from Photoshop Illustrator etc.. :) )

  • sedum

    Gedit

  • http://jmh-visual.com Jonathan

    I use Netbeans IDE and when I’m just quickly jotting something down vim (MacVim in this case).

    I need something that is platform independent, like the mentioned above, as I both work on Mac OS and Linux. Netbeans comes with a lot of comfort while writing JavaScript and PHP, but is also useful with the HTML&CSS.

    As I mostly also to server or client side scripting, I’m really happy with Netbeans internal syntax checking.

    Greetings Jonathan.

  • Brian Jones

    I use Dreamweaver as it is part of my Web Premium Creative Suite. I hand code and find the live design feature valuable.

  • Attila Kerekes

    I just switched to PHPStorm from Aptana Studio 3.0, and i use Firebug a lot too…
    Love phpstorm now, with the git support, and scss, nice deployment and debugging, etc…

    I started with vim, switched to Netbeans for a few projects, since then i’m addicted to some IDE, with advanced features…

    To edit configuration files local or on servers, i still love vim, big NO for nano or mcedit :)

  • renan

    I am new to all this. However, I’ve learned that it is a good thing to focus on your work flow as you learn something new. Therefore I am always trying something new.

    On windows, I find Aptana(free software) with its FTP capability and zencoding just awesome! Add to that the less.js, get the output from firefox, and its perfect for front-end! I have done no back-end, therefore have no opinion on that matter. Also, build your own Boilerplate and thats it, you’re ready!

    However, because of the need to use git I am trying to move to Ubuntu. In Ubuntu I am using Vim with zencoding as well, and doing the same with the less.js, and filezilla for FTP. Honestly my workflow was a bit faster on the windows scenario, but I feel like that can change a bit within a couple of weeks. Add to that the fact that Ubuntu has literally all you need for web-development for free and you got a winner! Sure gimp is not considered, by many, comparable to photoshop, but especially for web development it should suit you JUST FINE! Plus, if you’re really good with it I bet you could do everything that you do on photoshop on gimp. Also, if you use these open source software, don’t forget to donate!

    PS: it would be really cool to see some web-development on gimp, I have not seen it anywhere!

  • http://www.adipurdila.com AdiPurdila

    I started coding on NuSphere PHP Editor back when I was using Windows. After I switched to Mac tho I got Coda so now I’m using Coda + Zen Coding + Snippets and it’s just great. I love the minimal interface of Coda and that I can edit remote files without having to constantly re-upload em.

    Also, been playing around with Espresso lately simply for the great CSS editor and it’s attached preview window so it’s easy to edit the CSS and watch the changes in real-time.

  • http://der-wendt.de/ Olaf

    I tried several WYSIWYG editors like Amaya, Nvu and others. Coda was the best, but I finally switched back to good old text editors. For productivity reasons, I rely on ZenCoding and siblings. Every computer I own runs Firefox / Firebug.

    For my Mac machine, I have not found any better program than TextWrangler yet, the keyboard shortcuts are very straightforward, and there is a decent file system / FTP client built in. Also learning MacVim these days, but have not tweaked the same productivity out of it so far.

    For Windows: Notepad++ and FTP. For both, about design: I like Inkscape, the scalability of vector graphics is nearly unlimited. It’s a time safer, I can use the same logo file for a favicon as well as for real big plotter file (e.g. vehicle wraps)

  • Wei Yee

    Outsourcing is your friend, friend.

  • http://kieraninnes.com Kieran

    I hope someone can help me with this: I use dreamweaver, however I don’t use any of the WYSIWYG capabilities. I just use it because I’m use to dreamweaver’s syntax colouring. However it’s a bit bulky for what I use.

    Is their an application out their with the same syntax colours as Dreamweaver, or with the ability to make your own colours?

    Kieran

  • http://www.lastrose.com LastRose

    I use an IDE or notepad++ to get the overall framework and fine tune the details with chrome’s inspect details.

  • WyattRiddle

    My editor of choice is Coda on Mac, and Komodo on PC. For FTP I’ve just been using Filezilla since it’s simple and gets the job done.

    In addition to those, on Windows I use Texter (seen on Lifehacker) for quick macros instead of having to retype tons of code. I haven’t really seen any good snippet programs for Windows

  • Phil

    I use G-EDIT & Firebug.

  • http://dinvaders.com Laura

    I got used to code in WordPress, with no highlighting what so ever, so when I need to code outside WordPress I prefer basic text editing software (often notepad) because I feel more comfortable and easy on the (my) eye.
    No need for fancy colors or corrections, I like to verify all the code myself.
    But, just a humble opinion

    Greetings from Uruguay :D

  • Nike

    I kind of jump between Dreamweaver and notepad++. Although, when i use Dreamweaver i never use the wysiwyg editor, so i voted for “advanced text editor”.

  • http://blog.jesusyepes.com Jesus

    Netbeans. I dont know why you dont mentiont it

  • Pablo Mendoza

    I use CodeLobster PHP. Sometimes Notepad++ :)

  • http://www.rahulparekh.in Rahul Parekh

    I voted for advanced text editor as I use Dreamweaver in only code mode. FTP options are really good and the auto code completion really helps. Do occasionally use Notepad ++.

  • Preston

    I mainly use Aptana 3, and can only complain about some random bugginess. I generally start a layout in Inkscape, and just use Aptana and Chrome/Dev Tools.

    What I like most about Aptana is that (for the most part) it’s an all-in-one kind of thing. With a slicker interface it could become the standard for many developers.

  • http://www.modernooze.com sam – dorset web design

    I use dreamweaver however i don’t enjoy it. It believes it no better and really it doesn’t. It often chooses to update all my links so that they are local to my computer and then i get a mess when i upload.

  • http://kontain.com./timshanley Tim

    PSPAD!

  • Mudassir

    I use Notepad++ on windows and the very new and vastly underrated Geany on Ubuntu. Notepad++ is quite powerful, but Geany is way faster, especially since it’s on my old laptop. I know they have a windows version, but it’s just a straight port, and requires GTK+ for windows, I am a little trepiditious.

  • http://www.model-kartei.de/sedcard/bildbearbeiter/197278/ cythux

    I use eclipse, netbeams and for the moment aptana 3 Beta for testing

  • http://trimoleksono.com Trimo Leksono

    I just use Notepad++ or Sublime Text 2 for scripting or editing files. For development from scratch I recomended use Sublime Text 2, easy management, split view, syntax highlights and many more :)

  • http://www.kreatech.net Ejaz

    I use Dreamweaver but I don’t use WYSWYG feature.

    Building a page and building a complete website is very different.

    I use notepad++ for page development (for PSD to HTML) but I love to use Dreamweaver for complete website/application development (although I don’t use DW’s WYSWYG feature).

    Many people make a mistake when they say DW is a WYSWYG editor, actually this is wrong. Yes, WYSWYG is a feature which DW has but It has too many other excellent features as well. I like code-completion, built-in FTP, website management the most

  • http://martealdesigns.com bob marteal

    Recently got sick of waiting for DW CS3 to do something for the last time and decided it was time for a change. Tried on Textmate, really liked it but didn’t want to have to use another application for ftp. Tried Espresso (Mac) and loved it but it doesn’t have WebDav support, so still needed two application flow. Went back to Coda again and really enjoyed it. It has a couple quarks i find annoying but it’s personal. Will probably still use DW for the WYSIWYG to edit big blocks of content that i want to clean up before pasting into CMS editors.

  • Mikzael

    Holly sh*t most of the people here work just like i do xD

    what about the process?

    because im a single guy working, i skip some steps like wireframing and go directly to mockup in photoshop, then i use dreamweaver (just a bit) to create a general model of the site then i make the details in notepad++ while working with html, css and php

    then i upload with filezilla and take care of any last minute chnges with notepad’s ftp module.

    i wonder how they do it when they work in team.

    does PSP/TSP, use cases, UML and so… are ever used in developing websites? or are they only for software development?

    • http://tommybrunn.com Tommy Brunn

      Use cases are definitely used for web development, both back- and front-end. That’s pretty much 30-50% of my job right there. I don’t use UML diagrams for front-end only work, but they’re used quite heavily for the back-end stuff.

  • http://www.gherve.eu.pn Herve Gbedji

    Well ,Dreamweaver +Fireworks ,, i can have exact dimensions and make a things pixel-perfect , code hinting of dreamweaver , keeps me from wasting time coming to search for a semi-column in the sea ,, …. ,,

  • Pingback: Start right your passion — CreativeCrib

  • http://www.digitalhandyman.com.au Mick

    Notepad++ on a commercial basis at work, TextWrangler at home… though I think its clumsy and if anyone something closer to Notepad++ for Mac I’ll post them a heart shaped box full of chocolates!

  • Serge

    I use Coda on the mac site.

    On the windows I use notepad++ for main html structure/css/js and from there continue in visual studio 2010 to make my web applications.

    Also I know this wasn’t mentioned which design software we prefer to design in.

    My picks are Photoshop (it does pixel perfect stuff) and illustrator.
    For 3d work I pick Modo :)

  • http://mineops.com dustin

    usually what i will do is use photoshop to do a mockup. Images i am not capable of re-creating in css (such as complex patteren backgrounds) i will save as a png image. Generally, there are only 3 or 4 core images in my designs. I will apply shadow in photoshop just to get a visual aid, but when i start coding up in notepad++ css3 shadows take its place. Basically i do whatever i can in css and use photoshop if necessary.

    with this workflow, i am able to achieve some pretty organized code.

  • http://www.gavinflood.com Gavin

    I tend to use Dreamweaver when I’m editing most HTML and CSS, but Notepadd++ for almost everything else.

    I find Dreamweaver very comfortable to use apart from when it comes to JavaScript or PHP, for some reason I seem to drift away from it then.

  • http://inversepenguin.com Julian

    I think using Dreamweaver is a right of passage for virtually all designers–but at some point, we all develop past needing “auto complete” and “WYSIWYG” editing.

    +1 for Sublime Text; Sublime Text 2.0 has proven to be an amazing editor… gotta love that Ctrl + P!

  • http://dorianpatterson.com Dorian Patterson

    I’ve been using Vim almost exclusively for about a month. If you have the patience, it’s worthwhile in my opinion.

    • Andy

      Same here. After a handful of half-attempts to learn Vim here and there, I finally gave it the time it deserves and have really fallen in love with it. I was able to exceed my previous speed after learning just the basics. Now everything is just icing on the cake.

  • http://mirac.me Miraç

    I use E-Text editor and Textmate =)

  • http://tommybrunn.com Tommy Brunn

    These days, I use either Geany or Komodo Edit for the coding. For remote file management, I simply add an ssh connection to my file manager (nautilus), so i can browse over SCP just like if they were local directories. I haven’t used FTP in years.

  • Niam

    I use two programs: Dreamweaver and Notepad ++, I find that on my PC (crowded with other development software) Dreamweaver takes a long time to load. I start a project off on Dreamweaver, with HTML and CSS and then with anything else, I use Notepad ++

  • Ramesh Vishwakarma

    I am using dreamweaver last for 3 year. It’s good form me but after reading these all comments I want to use notepad++ to see what is the pros & cons between these two software.

  • arnold

    Notepadd++ plus Zencoding = coding will be fun….
    I like notepadd++ because its easy to use , lightweight, and I can zoom on my code so easily..

  • http://www.dromada.com Vladimir

    Espresso with Zen Coding and TextMate with mHTML/mCSS. Used to use Dreamweaver but its too bulky and doesn’t support PyObtC plugins like Espresso and TextMate do.

  • http://www.aneslinonline.com Aneslin

    Here are some freeware Editors with its cons and pros from my bokmark.

    http://www.techsupportalert.com/best-free-html-editor.htm

    Hope its usefull for all.

  • http://hisubash.com Aneslin

    But I alwasy use Dreamviewer CS3. thats my favorite.

  • http://thefragilemachine.com Logan

    Its funny, when I tell people (Mostly Developers) that I use Dreamweaver, they automatically, assume i use it for the WYSIWYG editor, the fact is i love using it to code a good portion of my sites, and I never use it for the visual editor. I have heard its the Industry standard. another program i also like to use is Coda, when I’m not using DM of course.

    • http://freedcamp.com Angel Grablev

      I agree with Logan, i have not once used the WYIWYG functionality of dreamweaver but the code autocomplete makes me a 10 times faster coder than any Coda/Notepad++/etc coder. Unless they use ZEN… but I do that in DW so tough. DW will find all my image files so I don’t have to spend time copying names and paths, and so much more.

  • Madisyn

    Long time Dreamweaver user, but I’ve converted. Its just too bulky and does weird things with the code sometimes. I use Coda at work on our Mac’s and love it. Any similar alternatives for my PC?

  • jman

    since I come from an oop (object oriented programming) background and have familiarity using big clunky ide’s like visual studio I would tend to turn to Dreamweaver for writing. I never ever use the design view though.

    Sometimes if I just need to quickly see a file with good syntax highlighting i will open it in Textpad for some basic editing.

    ;)

  • http://craighooghiem.com Craig

    I always used Notepad++ exclusively – it was my baby. However, at a recent employment, my co-worked gifted me a copy of phpDesigner. Never have I loved anything more than notepad++, but this software took the cake. As a PHP developer, it added loads of functionality and time-saving functions for working with large PHP projects.

    I also use FireFTP, Firebug and an auto-reload script on Firefox so that my second monitor constantly reflects my changes as soon as I hit Ctrl+S in phpDesigner.

  • http://www.myradon.nl myradon

    I’ve started with Dreamweaver several years ago. Changed to CSSedit, Textmate, Eclipse, coda, notepad++, but every time I come back to Oracle NetBeans IDE (php version).

    NetBeans is free, has code collapsing, very good highlighting, completion, error highlighting, very easy to check opening and closing of curly braces. NetBeans 7.0 also supports html5. Saving immediately to remote server by SFTP, which is what I also like about Coda. Saving to backup path also possible. I’m only using a small portion of al it’s features (version control, php debugger, ……). along with Firebug, Oracle virtualBox and ubuntu virtualguest on my Hackintosh it’s al I need.

  • https://designshare.wordpress.com/ Michelle

    I’ve been using Dreamweaver since version2-it, along with code view in the browser, are how I learned html and css. DW has come a long way. It used to produce some scary code. The newer versions are way better. CS5 is a very mature, feature-packed program. I work mostly in code view, and use the new live view to see my design working as it would in the browser-very cool. I have also used Expression Web and it is a viable alternative. When I use Notepad I feel too separated from my design, I need to see it constantly, which is why I prefer DW.

  • Pingback: A Web Designer's Guide to Coding Apps | Webdesigntuts+

  • Pingback: A Web Designer’s Guide to Coding Apps | Shadowtek | Hosting and Design Solutions

  • Pingback: A Web Designer?s Guide to Coding Apps | Jetcat

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoombug

  • Pingback: A Web Designer?s Guide to Coding Apps | Camixo

  • Pingback: A Web Designer?s Guide to Coding Apps | Bubbleworks

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoodoo

  • http://www.andrecavallari.com.br André

    Dreamweaver, it has sync with ftp and a very powerfull editor… so it´s my choice

  • http://www.charlesinsurance.co.uk Mark Botfield

    Looks like a two horse race between Dreamweaver and Notepad++.

    I love Notepad++ and it is my text editor of choice on Windows for text,csv etc, but i don’t use it for website code, not since I discovered Bluefish.

    Windows version is missing remote file access so no ftp at the moment, but has some project management features that Notepad++ lacks and is great for handling lots of files at once.

    In a perfect world, there would be a text editor that combined the best of Notepad++ and Bluefish, with integration with version control and smooth local/remote file handling (ie mange local copy, test server and production server copies together) on all OS platforms while avoiding the bloat that many tools suffer from.

  • Pingback: A Web Designer?s Guide to Coding Apps | Geboo

  • Gemma

    I used to use Topstyle 4 but now I use Notepad++ with a few plugins and WAMP for doing the actual coding on my local server, then upload to a production server with FileZilla. :-)

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoomfly

  • Pingback: A Web Designer?s Guide to Coding Apps | Skippad

  • Pingback: A Web Designer’s Guide to Coding Apps | All of Cyber

  • Lorraine Marie

    I had to learn Dreamweaver for my college web design class. The frustrating thing was that most of the class was explained in the design mode, and a lot of my classmates didn’t understand the code at all. But I have learned html and css since I was in highschool, so I find it faster to use the code view in Dreamweaver. Before I started college, I just used notepad to learn html. Now I use Dreamweaver but I’m thinking of trying something more light.

  • http://thedevdot.com Khalid Magdy

    Aptana Studio 3 ( FREE ) + Zen Coding (FREE) = very fast and free coding !

  • IJas

    ST2 ! Faster !

    • http://twitter.com/StephenFJohnson Stephen Johnson

      You know that right!

  • http://twitter.com/StephenFJohnson Stephen Johnson

    Sublime Text 2 for local and Coda 2 for ftp!