Building an engaging, creative website entails a lot more than typing strange characters into a text document or dragging and dropping pictures into folders, despite what some people believe. You wouldn’t build a house on loose soil or without a hammer, would you? You need the right tools to do any job, Web design included. Fortunately, hundreds of choices, free and paid, are available to you at any time. Let’s run through a few.
A Solid Code Editor
The most important and — hopefully — most obvious tool in your Web creation toolbox is a full-featured HTML and CSS editor. A lot of debate is taking place over what the “best” Web coding program is, but there’s really no specific answer; you just have to find the one you’re comfortable with that has all the features you need. Many people swear by WYSIWYG editors, but they’re not all standards compliant, so you’ll see the occasional formatting gaffe if you don’t run tests with all the browsers you want to support. The simplest solution is to download Notepad++ and code in that with the browser of your choice open and pointing to your file. Write a script (or download a plugin) to refresh the page automatically and you have a free, easy-to-use coding setup.
If you want a more robust development application that can check syntax, deploy Web apps, monitor servers and manage every snippet of code for your project, check out NetBeans. It’s a free, open-source integrated development environment that supports HTML, CSS, PHP, Java and dozens more markup, scripting and programming languages. NetBeans supports plugins, too, so you’ll be able to add almost any functionality you’ll ever need.
A Handy Set of Design Tools
You can have the most powerful, efficient development environment anyone’s ever seen, but if you can’t find the right font and your color palette is off, your site can end up looking like some kid’s Geocities page from the ‘90s. No self-respecting designer is going to make that mistake.
Pictalicious is a free Web service that creates complementary color swatches — complete with hex codes — from a picture you provide. It’ll also suggest palettes from Adobe’s Kuler Web app and COLOURlovers. For more inspiration, check out Dribbble, where you can explore designs by color.
Creative, free fronts are hard to find, unless you know where to look. Google Webfonts and Font Squirrel have hundreds of free font families to choose for commercial use.
To solve your layout woes, head over to the 960 Grid System site or, if your tastes trend toward responsive design, check out unsemantic. Both provide easy ways to configure tasteful, logical layouts for your CSS, saving you hours of work on every site you create.
Before you start writing the code, you need to create a solid design. Doing it any other way is like winging a presidential speech: it’s too important and complex to jump into without thorough planning. Start with a wireframing Web app, such as moqups or Mockflow, or do your work in Chrome with Google Drawings, a browser extension that lets you draw wireframes and saves them to your Google Drive account.
A Stable Web Host
In the early stages of developing a website, you can stick to a local Web host. For a simple WAMP stack, check out Easy PHP. Just install and configure your dev server, and then code to your heart’s content. Of course, when you need to deploy the site, you’ll have to find a reliable Web hosting service. Domain name registrars that delve into Web hosting are seldom up to the task, so stick to a company that specializes in hosting. If you’re deploying an ecommerce site, check out cloud hosting, especially if the business sees regular spikes and lulls. Cloud hosting’s ability to quickly scale up to meet increased demand, then scale back down when the surge passes, will prevent customer headaches and keep costs down.
Unlike other items in this article, cloud hosting isn’t free, but no free Web host will give you the uptime, support and resources you’ll need to keep a business site — ecommerce or not — online. The adaptability, customizability and power behind cloud hosting will let you trim your budget and still get a drool-worthy list of features, whether you’re managing one site or dozens.
This post barely scratches the surface of tools and services you can use when building websites, so by no means should you consider it exhaustive. Maybe you prefer working with Dreamweaver or Bluefish; that’s great! The tools you use don’t have to do anything but help you code great websites. You can find inspiration and help from the most unlikely sources, so keep your mind open to the possibilities.
What tools or services would you recommend for Web design?