Readers' Polls

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


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!

Related Posts
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Code
    Code Generation Using T4Dotnet wide retina preview
    Learn the advantages and disadvantages of using code generation via T4 templates.Read More…
  • Computer Skills
    App Training
    How to Make a Better Presentation Without PowerPointPres alternates
    Traditional presentations are boring, and a quick effort to spice things up in PowerPoint or Keynote will only give you a cheesy presentation with far too many animations. There's far better options out there that'll make your presentations actually be interesting. Here's the best ways to take your presentation beyond the basics, without wasting all your time trying to learn how to make the most of a presentations app.Read More…
  • Web Design
    Web Design 2014: What to Watch Out For014 retina
    This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.Read More…
  • Game Development
    Working Remotely: Building an Indie Game Development TeamWorking remotely building an indie gamedev team 400px
    It's difficult to work with employees you've never met face-to-face, but because the average indie startup doesn't have a base of operations, you'll often be reliant upon working with people who you can't keep tabs on, and using the Internet as both a source of finding potential candidates and as a communications hub. In this article, we'll examine the delicate process of hiring a new team member, including how to prepare for the process and potential traps to be aware of, and conclude with a list of (mostly) free resources you can use to find your next all-star team member.Read More…
  • Code
    WP101 Training
    Beginning With WordPress: Preparing to Customise Your Theme Using a Child ThemeBeginning with wordpress
    Ok, so your site is up and running and you're probably starting to get itchy to make some changes, and not just changes to the content, right? You may well be wanting to change some elements of what your theme actually looks like, and maybe even change how it behaves. So, as we keep moving through these tutorials we're heading towards being able to better customise your theme and we'll actually be getting more into what goes into theme tweaking and development. However, before we go there we've a couple of last things to do to finish off the site set up then we'll set up so you can begin to make some code changes.Read More…