The tools of the trade

by

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?

A Family Business

by

In January Susan and I decided to leave our current employment and go freelancing as iFamily. At around the same time Andy Clarke and Anna Debenham started a new podcast focusing on the business end of web, design and creative industries; Unfinished Business.

Unfinished Business

Unfinished Business has been invaluable to us. Even though there are two of us running our Ringwood based web design company it can get a little lonely. It is so refreshing to hear two well respected web professionals share their experience of working freelance. There are of course lots of resources and podcasts on the creative side of web design. I particularly enjoy Jeffrey Zeldman’s, The Big Web Show. But aside from Unfinished Business have found very little else about the business side of web design and development. The problem with this industry is that we are all more than happy to share our techniques and tricks but we are often a little bit more secretive about the pounds and pennies. So I thought I would chime in about some of the points and products discussed on their show, from iFamily’s perspective and also mention some of the ones we use.

A message from our sponsors

One of the highlights of their podcast for me, is when they share some of the tools of their trade. They find some really great sponsors. I am quite astonished by how much stuff I have bought as a result of listening to their show! Two have become indispensable to me already; FreeAgent and Perch. I know Hammer for Mac will also be adopted by iFamily soon also.

Perch

Perch was the first sponsor of Unfinished Business. I had heard good things about this CMS system before. But after hearing the praise that Anna and Andy reaped on it, I tried the demo. I have since bought two licences and created two websites with it. In both cases Perch has been a perfect fit. I could have used WordPress but sometimes Perch does just enough and is wonderfully easy to work with. WordPress although very capable is a behemoth. The learning curve on Perch is a lot less steep and even after a relatively small time I was really enjoying working with it.

FreeAgent

We knew we needed to manage our invoicing and finances well. We didn’t want to generate invoices in Pages. Like Perch, I had heard some good things before about FreeAgent, but Anna Debenham was very positive about it in the podcast. I then coincidently picked up a flyer from the Altitude web conference and promptly signed up. It is brilliant. You can hook it up to your bank account and it’ll auto-magically feed into it. Invoices are easy to generate and it also works with timer apps too so you can monitor exactly what you have been doing. Accounting might never be fun, but FreeAgent is invaluably so.

Sign up to FreeAgent and get a 10% discount with referral code: 42v393mf.

Hammer for Mac

Hammer for Mac is another really clever and interesting app that the dynamic duo have introduced to iFamily. To be honest I haven’t bought it yet. (Edit: I have now) I have just been using a demo. But it really is a great new way of working on front end development. So I will probably buy this real soon as it looks like a very useful tool. I have also tried Rock Hammer Andy Clarke’s new mobile first boilerplate, which is beautifully executed and is a great template for any new project. As you might have guessed it plays nicely with Hammer for Mac. I predict a SASS, Hammer for Mac and Rock Hammer learning session will be something I will be doing very shortly.

Home Work

We have been working professionally on the web since 2000 but have only been working freelance for a few months. Susan and I incorporated iFamily Web Design Ltd in March 2013. Leaving a regular pay cheque is never easy. We hadn’t even planned going freelance. So we had to hit the ground running, and fast. The following are some of iFamily’s most valuable and useful tools and resources that may or may not have been featured in Unfinished Business.

Time after time

I wanted to track my time. It is very easy for web workers to procrastinate and get distracted. No, I am not talking about porn. Working in this industry means there is always something new to learn. It is like painting the Forth Bridge. On crack. Nowhere near as dangerous or physically challenging but it is a continual process. As soon as you learn something, some other clever Dick has created a new way, and we start again.

Eon

Eon seemed like it might help me keep a close eye on my time. Eon is a simple little desktop app, and you can buy a plugin for it that hooks right into FreeAgent. If you leave your desk on your return it asks if you would like to knock the time back. Which I do religiously. If I start learning something new which will benefit me after the project, then I turn the timer off. If this will only benefit my client’s project I might keep it on.

Doing the time warp

What is totally surprising though is that after you might have been toiling at your desk for 8 or 9 hours a day; I am only totting up 5 or 6 hours of paid work. Maybe the timer is wrong? I don’t think so. I am sure I will find this app more and more useful in future especially when quoting for new projects. I can always look back at how much time I have spent on something and price accordingly.

Show me the money

I was introduced to Cole Henley whilst attending Andy Clarke’s Hardboiled Web Design workshop a couple of years ago. Andy suggested to us that we all follow Cole on Twitter as he is hilarious. Which is an understatement. But Dr Cole has a serious side too and he produces and curates the most excellent Freelance Rates Survey and the great Freelance Rates Calculator. I now use these as yard stick in order to calculate a day rate for our work.

Good company

We decided to register as a limited company and at the same time bought a mailing address from Registered Address. So now our official address is in London. We also use this address to hide any domain name registration addresses from the world. We are only an hour and a half from London so could easily do client work there. But for the most part we are going to try and work a little bit more local than that. We want our local economy to benefit from our expertise too. However it seems getting a registered London address is cheaper than getting one in Ringwood.

Design is a job

If you are not easily offended, and are not particularly religious you have to follow Mike Monteiro on Twitter. He doesn’t pull any punches. Neither does his book, Design is a Job. This is really great. I particularly like the chapter on “Choosing the right clients”. This suits are philosophy here at iFamily. We don’t want to battle with our clients. So, from the outset we find only the best people or businesses to work for.

Stop! Thief!

In Unfinished Business, Andy Clarke revealed how someone has used his artwork on their website. He has explained how he has tried to politely ask for the content to be removed, but it seems that this is falling on deaf ears. My old employer, iChauffeur used to suffer from this all the time. Pictures of our cars, text copy and more were often pinched. I have even seen people advertising for developers who can clone the entire iChauffeur site! I used to spend a lot of time asking people to take down this content. I used to actually enjoy calling them, asking if I could hire the actual Rolls-Royce shown on their website. Could I have that actual car? They would soon fall to pieces into a stuttering mess when I told them that it was actually my vehicle. One resource I started using, and which gets immediate results is the Removing content from Google tool. You have to be sure you own the copyright, and you have to report each url individually. I often would use the WayBack Machine in conjunction with this to prove that we had published something first. But boy does it get results. I know Google are not the only search engine. But their dominance means you can effectively stop the thief in their tracks. Sure, they can keep publishing your stuff but their pages will be hidden from the Google index.

I had one large competitor call me complaining about what we had done when we reported several of his websites. He even suggested that I call him first before we reported any more sites, just to make sure it wasn’t one of his first! Some of this plagiarism actually worked well for us. They would often link back to us inadvertently, and sometimes we would not take any action against them because of this. But most of the time it is just one more thing to eat into your day.

Useful resources

[unordered_list style=”star”]

  • Contract Killer
  • The Three Wise Monkeys NDA
  • Growing your design business
  • Getting Clients

[/unordered_list]