A good web worker never blames their tools. I love mine. From computers, to software and everything in between here are the tools we use everyday at iFamily, to make websites.
Hindsight is a beautiful thing
A nostalgic look at early 21st century web design tools
When I first started making websites in 1998 I used an Apple Mac computer. Even when I seemed to be the odd one out, and sneered at by the vast majority who used Windows machines, I kept on using my Mac. In 2000 I used to take my then ageing Mac into work rather than use the works’ state-of-the-art Windows machine. Nowadays if you go to a web design or development conference you will see a sea of illuminated Apple logos with a handful of Windows or Linux users dotted between. I still find it extraordinary how this change has happened. Back in 2000 I would have never dreamt that Windows would have lost it’s dominance over this influential group of people. Back in 2000 I also became a big fan of Macromedia’s Flash app. At the time this seemed like the right way forward. Hindsight is a wonderful thing. But this history lesson is one that I always try and reminded myself of. I feel sorry for Windows users in this industry, because I know how it feels to be the “odd one out” to go against the flow. Now that I am swimming with the flow I benefit from the fact that most tutorials, examples and demos are done on a Mac nowadays. I also know that over time this could change again to who ever is flavour of the month. Whatever you use, it is your choice, but what ever you do; do not blame your tools…
Here are my current tools of my trade:
Apple iMac 27″ aka “The Workhorse”
I have a 27 inch Apple iMac which is a great machine. It does everything at a good pace. It is a 3.4 GHz Intel Core i7 with 16GB memory. I also have an old 13 inch MacBook Pro for conferences, workshops and meetings along with an iPhone 5 and iPad 2. The iMac does all the heavy stuff. I use MAMP Pro for local development work and run VirtualBox to keep my ageing copy of Windows running IE8. Just to make sure things look as they should on this browser. I backup to a Firewire drive and also wirelessly using Time Machine to my Time Capsule. I also use DropBox for sharing stuff and for additional client work backups.
Coda 2
Over the years I have used various code editors before, namely; TextEdit, BBEdit, Dreamweaver and TextMate. Now my main editor is Coda 2. I really like Coda 2, it’s not perfect but seems to suit me. One thing in particular I like is what they call the Golden HTML + CSS + Live Preview Setup. This is just how they describe it: golden. A really nice environment to work in.
Diet Coda
Diet Coda is an iPad app which you can use to edit code, but for the most part I just use to preview work on the iPad as I am developing something in Coda 2. You link it to Coda 2, and you get real time previews on your iPad. This is really cool. It’s like getting a second monitor. Also, as I work off such a large screen, I find these small screen previews make you focus on that content. It’s so easy to lose context and forget that most people are not going to see the web site on such a large screen when just working off one large monitor. However for me it does seem to be a little bit buggy, but I just restart it and it normally works fine.
Transmit
I love Transmit, it is my preferred ftp tool. I really like the synchronise option. Although Coda 2 can ftp, I have never worked out how to synchronise files with it. So Transmit is still very handy.
TextMate
TextMate was the new editor on the block when Ruby on Rails started getting noticed. I tend to use TextMate for all sorts of things now. Quick and dirty edits, and even just to copy and paste code into when working in Coda 2. If my edits don’t produce what I want, I just copy and paste it back from TextMate. Hardly state of the art, but hey, it works.
DropBox
I use DropBox to share stuff with Sue and also as an online backup solution for client work. I only have a free account at the moment. I might need to splash out on one of their pro packages soon, when we run out of space, but I won’t hesitate to do so.
xScope
xScope is one tool that I don’t know how I got by without. It is an incredibly useful collection of hovering rulers, guides and screens. I generally use it to measure and align items. There are guides and rulers in Photoshop for example, but they can only be used within Photoshop. These work across all of my apps. Even my VirtualBox PC screen. Great for designing in the browser.
ColorSchema Studio 2
The ColorSchema Studio 2 app allows you to grab colours from any of your running applications. It can be really handy to create a colour palette for a project. I also like the way you can import a picture into it and create a palette from the colours in the image.
MAMP Pro
Mac OSX has always had great support for PHP and MySQL development. But in my experience these often break when a new version of the operating system is launched. I am not one who enjoys the arcane language of terminal, so I find MAMP Pro particularly useful for setting up multiple local development environments. Learn how I setup MAMP Pro and VirtualBox.
1Password
If you work professionally for clients or even if you don’t, you need a decent password vault. 1Password does this beautifully. There are also 1Password iOS apps available which sync between each other nicely. This is one of the best things about 1Password. No matter where I am, as long as I have my iPhone or iPad, I can easily recall my strong passwords. One thing I particularly like is that it can generate passwords for you. You can set passwords with a length of up to 50 characters.
Web Hosting
For most of my personal sites and for a couple of charity websites I have made I use 1and1.co.uk web hosting. They have been pretty reliable and reasonably priced. However these sites are hosted in Germany. Nothing against the German nation, but if you are providing a UK focused service or business it is probably a good idea to have a UK based host. I know as long as you have a .co.uk domain name you are a UK company in Google’s eyes but this geographic location of your server can count against you if for example you had a .com domain name. Recently I have just started using Domain Monster hosting as well as using their registrar services. These are affordable and they do pick up the phone if you need help. Their control panel may not be the best but they do host in the UK. I tend not to host any of my clients if I can help it. It is not something I specialise in so am not comfortable taking on that responsibility.
FreeAgent
We use FreeAgent for our book keeping and accounts. It is an online service with a very intuitive interface and some wonderful touches. Let’s face it. Who likes doing their books apart from book keepers and accountants? Well we do now! Susan has distinctions in Sage training, but then you need at least a distinction to actually use it. FreeAgent does all that we need to: generate invoices, syncing with our bank account, record project budgets and most importantly for time tracking. It can work with various desktop and mobile apps to record time spent on tasks. For this I use Eon.
Sign up to FreeAgent and get a 10% discount with referral code: 42v393mf.
Eon
Eon is a little desktop accessory that records how long you have been working on a task. You can also buy plugins to work with other programs such as FreeAgent. This is exactly what I do. It connects with my projects in FreeAgent and adds new time slips for any work I record. One nice feature is that if you stop working on your computer and return to it later it asks you if you want to roll back the time on the counter to when you stopped being active. This is great if you need to take a phone call or visit the bathroom. I know there are apps that take screenshots of what you have been working on but I don’t need that. The red timer is a great reminder to stay focused on your clients work too. If anything this app has probably cost me more than the client. I am fanatical about only charging for work I have actually done. Because of the FreeAgent integration it also allows me to give the client very detailed invoices. They may or may not be interested in this, but I think this transparency is extremely important. The client knows exactly how long and more importantly for them how much each part of the build has cost them. It also reinforces how much value we are to the client. By recording every little nuance of the work my clients can see that we are doing more than what we actually said we would, which makes us more valuable.
Adobe Photoshop
Photoshop (CS3) is my default image editor. I don’t do a lot of vector work. I can do pretty much all I need to do graphic wise using it. I don’t love it though. It is a very expensive investment, but for me essential and I have over time developed admiration for it. My version will hopefully keep on going for a few more years before I need to look for an alternative. I have started looking though. I have bought Pixelmator which is very interesting. Still lacking in a few ways compared to Photoshop but I am keeping an eye on its development. I used to love Fireworks but somehow Photoshop has taken over as my default graphics tool. It is a shame that Adobe are stopping any future development on Fireworks. I also am not a fan of their new subscription licensing method.
ImageOptim
ImageOptim is open source image optimisation software. Drag a Photoshop’d “Save image for web” image onto it (or any other web graphic) and it will shrink it size wise. Sometimes incredibly so. Very useful and easy to do. It replaces the original image with the diet version.
WordPress
I have been creating WordPress powered websites since 2004. Today, it is a very polished piece of kit. The lustre is due to the fact it is open source software. Hundreds of contributors have made it very capable and it has regular updates. It can create some very powerful web applications or a basic blog. The diversity of the plugins helps take it where ever you need to go.
WooCommerce
WooCommerce from WooThemes is an open source plugin for WordPress that allows you to setup a WordPress powered eCommerce store. Very powerful, though some features when you start developing a site are offered at a premium, but that is fair enough in my view.
Perch
Perch is a little CMS system that is very intuitive for designers especially. It doesn’t have the global community which WordPress benefits from but what it does it does very well, and it has great support from the developers.
GitHub
For version control Git is amazing and even better when used with GitHub. For those like me who get a little bit overwhelmed when they have to enter the command line, the GitHub desktop app is a great way to avoid becoming a bonafide geek, but still manage a repository.
Confessions of an Apple fan boy
I am a self-confessed Apple ‘fan boy’, I started a Mac music community, MacIDOL.com back in 2004, at one time if you typed “iPod music” into Google, MacIDOL.com would be no.2 just behind Apple. But the times will always change, which is good. My point is I am not saying any of the tools I mention here are the best. They are just what I use. No one pays me to use them. I have invested a lot of money on them. These are just the ones that work for me, at this time.
In the relentless ebb and flow of the web, these preferences will, I am sure change. I might even buy a Windows machine in the future. Hell won’t freeze over. In fact I use Windows every day, to test my websites. But please remember this: If you do use Windows I don’t hate you, far from it. I know how brave you sometimes need to be to do something different. To go against the grain engraved by the legions of the majority is not always easy, but it essential that we have a choice! Competition is healthy. Monopoly is not. Now get back to work. The web needs you.
What tools do you use?