What software/IDE do web designers use?

Coldblackice

Coldblackice

[H]ard|Gawd
Joined
Aug 14, 2010
Messages
1,156
I'm in the process of learning web design (front and back ends). But I'm stumped on what software/IDE route to take.

Of course, as a programmer, I understand that the best way to start is through Notepad++ (or similar), coding by hand, and that's how I've been doing it. But is that how most (proficient, employed) web designers go about creating sites?

I feel hindered by not being able to "visually" see what I'm doing -- instead, having to switch between Notepad and the web browser, constantly refreshing to see how divs/imgs/etc are aligning. As I'm new to the trade, I don't have a good feel for measurements/widths of layouts.

Is Dreamweaver the de facto standard software? Or do most web designers really just code the things entirely in an editor like notepad, and then just look at their output through the browser?
 
Last edited:
If there's any kind of de facto application for web development, it's TextMate. Notepad++ is probably what you would call its Windows counterpart, though I prefer Notepad2.

The 'switch' is mainly how things are done in most cases, yes. Write code; refresh browser. Some frameworks, like Rails, are designed for this, and will reload all resources on page refresh in the development build. There are other apps, like Espresso (Mac), which combine a code editor and a web browser in one app and run the browser component 'live', usually via script-based DOM manipulation. Then there's the full WYSIWYGs like Dreamweaver: no one I know use these. The complexity of the application itself and of its interface is greater than the complexity of HTML and CSS, so there's little point in using it.

I think you'd be crazy to write, say, a C++ or Java app without the aid of a full IDE, but for web dev, the text editor is king. Knowing your markup is essential, as knowledge of markup is what will fuel your ability to write style sheets and do DOM manipulation with scripts, so writing it by hand simply makes sense.
 
Yeah I use Notepad++ when I'm working with PHP, HTML or CSS.
 
Cool, thanks.

So with that being said, how do you (or proficient one) go about building a site, as far as div sizing/alignment/placement/etc? Do you rough sketch it on paper, and then start tinkering with the rough pixel sizes, and then "alt-tab" between the two until it looks right? (which judgment skill and ability obviously get better with time, requiring less guess-timation)

What's your (or most proficient web developers) rough outline of how you take an idea and flesh it out into an up and running (and decent looking) site?

I'm trying to get a rough, overarching idea of the process and steps that proficient web developers take and go through in the creation of a site, from idea, to div's, to finish.
 
Some people create a template in something like Photoshop

Are you using a grid system like 960 to lay your stuff out?
 
Yeah, I do mock-ups in Photoshop, but I may end up using Illustrator in the future for the sake of making it less painful to produce HiDPI/Retina graphics. Once the mock-up is complete, I write the markup, which is usually a fairly quick process. Once the 'template' is solid, I break into the server-side end of it and write server-side and client-side code pretty much simultaneously.
 
I do all web development in visual studio, of course it generally also involves C# too. It is a really great IDE, for lots of things. Then again if you've no interest in ever doing anything in asp.net or silverlight and whatnot then it may not be for you.
 
Sublime is slowly taking over TextMate in the Mac world and Notepad++ in the Windows world.

I prefer to use gvim.
 
I've been using Sublime Text 2 more and more, but I'm still a vim guy.
 
BBedit for Mac is my poison.

As far as CSS/HTML edits, who alt-tabs still? I feel sorry for you.

Try firebug - it's saved me on the magnitude of days during the grueling task of tweaking layouts.
 
Maximus825 said:
You can use Vintage for vi mode in Sublime Text 2:

http://www.sublimetext.com/docs/2/vintage.html
Click to expand...

Oh yeah, I tried it. The thing is, after running the plugin I ended up spending hours more to make Sublime 2 act more like Vim. I then gave up, because it occurred to me - why spent countless hours converting one editor to behave like something else? Sublime 2 will never be Vim. And making Sublime 2 act like a hybrid isn't too good of an idea.
 
For most things I already have templates that I use over and over. Building a web site is something like art, most people tend to build similar sites over and over, so I just follow my basic design that I happen to like and alter/edit it.

I also run more than one monitor, so I don't need to alt-tab, I simply work on one screen and preview on the other.

Though most of the sites I design aren't really from scratch, they are php software such as wordpress and phpbb that I simply edit.
 
We use Aptana for almost all of our projects. Photoshop CS6 now handles pixel snapping, too.
 
Maximus825 said:
Sublime Text 2 is the best right now.
Click to expand...

It's awesome

6AqQ0.png
 
Wow! Never heard of Sublime before, but after installing it tonight and playing around with it -- it sure has a lot of magic under its hood!

Sleek, smooth, with loads of functionality. I've found a list of fantastic add-on packages that others have recommended (if anyone's interested).
 
kcmastrpc said:
BBedit for Mac is my poison.

As far as CSS/HTML edits, who alt-tabs still? I feel sorry for you.

Try firebug - it's saved me on the magnitude of days during the grueling task of tweaking layouts.
Click to expand...

I use Firebug once the majority of my markup is written. It comes in really handy when fine-tuning and tweaking.

Skillz said:
For most things I already have templates that I use over and over. Building a web site is something like art, most people tend to build similar sites over and over, so I just follow my basic design that I happen to like and alter/edit it.
Click to expand...

This is mainly true for me as well. If the project is not using a CMS or some other framework, I almost always build off of a code base I've been using for years now. It started as a set of included SHTML files, moved to ASP, and is now in PHP and damn near a CMS unto itself.

As far as visuals go though, the code base doesn't mean shit. It's all in the stylesheets.

I know of no WYSIWYG editor that actually works worth a damn. They all output absolutely horrible code. To even consider using one is... horrifying.

With enough experience, you'll very much be able to look at the code and, generally speaking, be able to understand visually what's happening with it.

To answer the original question though, personally I use UltraEdit for my usual day-to-day work, and VIM for projects I have in Linux environments. While my code base stays the same, I don't strictly speaking "start from code" first. Instead I'm supplied PSDs by design agencies and then write the necessary HTML.

Skillz said:
I also run more than one monitor, so I don't need to alt-tab, I simply work on one screen and preview on the other.
Click to expand...

This is absolutely necessary. Or a larger monitor, at least 24".
 
Am I the only one using Visual Studio? Now, of course I only work with .NET based projects, but still...
 
Depends on the project. My dev is varied, so yes I use VS2K10 for my ASP/MVC3 stuff, but even then I have my .coffee files set to open in Sublime Text 2. If I'm building an app not dependent on MVC3, I just use vim.
 
Whisperfang said:
Am I the only one using Visual Studio? Now, of course I only work with .NET based projects, but still...
Click to expand...

Several of our teams use Visual Studio for the .NET projects as well. Our corporate web dev teams typically use Dreamweaver + VS depending on what area of the site(s) they are working on. Our legacy teams use Dreamweaver when working on the ColdFusion sites.

There really isn't any standard, as each dev gets to set up their environment in the manner they are the most comfortable working in.

Personally I demand code coloring, auto-format and some sort of code complete, debugging is nice as well. I use Dreamweaver and Visual Studio.
 
VS11 is quite nice, especially the CSS editor which will indent child blocks - it works very nicely. The beta isn't dead stable (so don't use it for anything you care about), but it is valid until Jan next year.

Also, VS is more targeted towards developers, MS also has Expression which is aimed at designers.
 
Migrated from Dreamweaver to Notepad++ about a year and a half ago... never looked back.

NPP + NppFTP + QuickText(all pimped out with my custom code igniter, html5, and css templates) = heaven.
 
Aptana Studio was already mentioned.

I've been using WebStorm (and its big brother PHPStorm). They're not free, but they have syntax highlighting and surprisingly good intelli-sense for JavaScript which is neat given the dynamic nature of the language.

The JavaScript debugger in the Chrome browser is also pretty good.
 
backend:

I like netbeans for java servlets/jsps. I can keep my project's organized in their folders/packages; plus I could go back and forth between multiple open docs. I used Netbeans for my java servlet class. After I was done building and testing my file, I did an ant build on the command line. relatively easy.

Otherwise, for just text, I like textwrangler on the mac for basic editing, working with Ruby/PHP. I am planning on using text wrangler for my C programming classes this summer.

Im going to check out sublime text as well.
 
i've used notepad++, scite, textpad, phpdesigner.. This sublime one is new to me and looks pretty good.
 
I primarily use Visual Studio. Sometimes I'll open up Expression Blend. Other times I'll use Notepad++. I've still got Eclipse installed for some projects, but (when some free time is found) I will be looking into the various other language integrations from VS's NuGet package list to add intellisense support for PHP, Ruby, etc.

Beyond Compare is associated as my diff'ing app of choice while using VS, Eclipse, etc.
 
I use Aptana and I recently purchased Coda 2 because it was cheap during the first few days. I have Dreamweaver in CS5.5, but I've never really tried it.

BBEdit and Espresso are also popular on Mac. Sublime and TextMate are also popular options.

I also have Codekit for automating compilation of less and coffeescript. LiveReload is an alternative.
 
I use emacs, but then again I'm a paid LAMP developer. I really like the kitchen sink effect (oh and I'm sure you could operate your kitchen sink using emacs too, M-x kitchen-sink) I started with notepad++ back in college but that's back when I had to run windows, which I ditched years ago for work. Once you get past the slight learning curve a powerful text-editor will go along way and work just as well as a full fledged IDE, especially for web development which is an entirely text-based endeavor anyway. Just my two-cents, which is more than I paid for all my software :D
 
I use Dreamweaver, Aptana and Visual Studio. Dreamweaver for design, template creation and maintaining static content. Aptana for PHP projects. Visual Studio for .NET/C# projects.
 
I use 3 or 4 different programs.

DreamWeaver CS4
Microsoft Expressions Web
Visual Studio
Notepad ++

I do alot of ColdFusion, PHP, HTML, CSS, Javascript so I mess with those 4 editors alot.
Visual Studio I use mainly for CrystalReports that I link in with ColdFusion.
 
I'm really happy using a combination of vim, tmux and a few standard unix programs together to form what can only be described as a decoupled IDE. It's nice because everything is ran inside of putty (local linux VM which I ssh into) and it didn't take too long to get used to not using a mouse for 99.5% of my development time.

I mostly do web development.
 
I am a .NET and SharePoint developer. I am always using VS 2010 and do not mind it. I look forward in using the next version of it :)
 
I do a lot of C# projects, but when doing general web ui dev I also use visual studio 2010 because the HTML side of the IDE is still pretty intuitive compared to notepadd++ which just offers colored markup. The VS IDE offers element tag closing automatically, intellisense, HTML formatting (similar to Tidy in np++), debugging for HTML5/CSS3 ect...it's pretty robust.
 
If you're on the .NET stack, Visual Studio 2012 is definitely the best bet for a web dev IDE since it has deployment, testing, etc included. Text editors like Sublime are good, but they're not really a full fledged IDE.
 
You must log in or register to reply here.
Back
Top