Peat Creative Blog

Blog

What Tools Do We Use To Build Sites?

What Tools Do We Use To Build Sites?

While basic websites can still be built using a traditional layout program and uploaded to your server from a computer, we build database driven sites. The benefit of this is once we've created the structure, changes can be made through a web interface. But that structure does still require some tools. Here are a few of the tools we use.

Coda 2.5 

Because we're all Mac based, this is our go to file editing tool. It includes an ftp (file transfer protocol) tool for uploading, but also lets you edit files right off the server. This means we can literally work on the live site and see changes almost instantly. We use this mainly to edit CSS files, but also to edit various php files if need be. Coda can also be used to connect to a server via SSH allowing you use the command line interface to make calls to the server. We also love Coda because it lets you load multiple documents side by side if you need to do a bit of comparison. It can also work with tools like Git for tracking changes to documents.

Learn more about Coda

Adobe Fireworks 

This aging program has now been discontinued by Adobe, but it does still work and we continue to consider it the best tool for a few specific tasks. We use it to generate jpg and png images for sites. It combines vector and bit mapped images and works great for mixing text and images. As the web gets better at doing this with css, we'll use Fireworks less and less, but for now, it works great for creating certain images for websites.

Learn more about Fireworks

Adobe Photoshop 

What can we say, this tool needs to be in every web designers arsenal. We use this mainly to prep photos and to do heavy photo manipulation. It's just a must have when dealing with anything that contains pixels.

Learn more about Photoshop

Icon Slate 

We use this tool to create favicons for our sites. It makes creating multi-size favicon icons very simple. Drag into the boxes and click Build.

Learn more about Icon Slate

Squash 

This is a one trick pony. You drag jpegs onto the window and it squashes them as much as it can. Jpegs file sizes are reduced without losing any quality. There are other tools similar to this that work just as well (such as JPEGmini). Just another small but handy tool to keep file sizes to a minimum

Learn more about Squash

Photo Batch 

While you can use Photoshop to batch resize images, we find this tool just easier. Drop a folder of images on the window, adjust the settings (for things like max width and height, compression level, cropping) and it spits out finished images. Many times we'll run images through Photo Batch and then drop them on Squash. It makes for much smaller photo galleries that still look great.

Learn more about Photo Batch

MAMP 

Sometimes you just need to work on a site on your local computer instead of a web server. MAMP lets you literally run a web server on your local Mac (and now PC). Everything is isolated to the MAMP folder so it's easy to manage. We tend to use this tool when we're migrating a client site from an older version of Joomla to a newer version. We clone the site, pull it into MAMP and migrate it. Then we test, and upload back to the server. The free version works fine for most things, while the pro gives you more options.

Learn more about MAMP

Parallels Desktop 

When you work on one platform (in this case Mac/OS X) you need a way to preview sites on other platforms. Parallels Desktop lets you run Windows in a virtual environment. This makes it MUCH easier to test a website in various browsers. Microsoft even makes pre-packaged disk images for Parallels that contain a limited version of Windows and a specific version of Internet Explorer. These images are free, so once you purchase Parallels, you don't necessarily need to purchase Windows if you just want to test websites.

Learn more about Parallels Desktop

Other tools in our kit

Safari, Chrome, Firefox
Adobe Dreamweaver (sometimes you do need a heavy html tool)
Adobe Illustrator (for creating vector logos and other designs)
Evernote/Skitch (for saving project notes and also taking screen shots)
TextWrangler (raw text editor)
Tumult Hype (an html 5 building tool. Great as a replacement to flash)

Other tools we find interesting

Espresso (similar to Coda, but different enough that you might want to test both)
Sublime Text (text editor made for coding)
BBEdit (another text editor made for coding)
Sketch (working toward being a replacement for Fireworks)
Webcode (very cool app that lets you draw shapes and spits out CSS instead of images)
JpegMini (jpeg image compressor)