Drivers’ website redesign and development

Drivers Ltd website design
Drivers Ltd approached us to create a new website for their driving and warehouse recruitment agency in Southampton. Their old website was not easy for them to update and they were keen to make their online presence reflect their exacting standards plus make it more interactive and useful for both their clients and staff.

Since 1983 Drivers have been Southampton’s leading driver recruitment agency. Their principles and excellence have earned the respect of professional drivers as well their clients, many of which are household names. We are delighted to able to add their new website to our work portfolio.

To get to know Drivers and discover how they would benefit most from a new website we did some interviews with their staff. We also looked at some of their competition and found some noticeable holes in the market which we felt Drivers would benefit from.

As well as driving and warehouse staff recruitment, Drivers provide JAUPT approved CPC periodic training training courses. They run these training courses from their Southampton office and on-site.

So the key goals and objectives of the web development were:

  1. Develop a content management system (CMS) so that they could easily update their content.
  2. Replace the table-based layout with a modern responsive, mobile and tablet friendly HTML5 design.
  3. The website needed to be fast, which is important for not only SEO but just as importantly to give their clients and driving staff a nice online experience.
  4. To allow them to publish new jobs quickly and easily.
  5. To encourage new driving, warehouse and industrial staff to register for work.
  6. To help prospective clients find Drivers.
  7. To allow registered drivers to post time sheets, update their profile, status and work availability.
  8. To publish dates and times of their CPC training courses and allow candidates to book online.
  9. To allow easy sharing of content with social media sites like FaceBook, Twitter and Google Plus.
  10. Security was never to be compromised.

RWD example from Drivers LTD website design
We knew that WordPress would be a perfect fit for their CMS requirements. We set to work and designed and built a bespoke website built using the Genesis WordPress Framework.

Using high-resolution display friendly icons and other graphics where we could to make sure the site looked good, on Retina displays as well as more modest screens. We also coded some animations which add a level of interest but more importantly highlight the calls to action.

Overall we are happy and we know that Drivers are delighted with the results. We have had people signing up during our beta testing and while the DNS was busy updating. So we are confident that this website will deliver great results for Drivers Ltd. Again we chose to host this with WP Engine. Security and speed are always important. So WP Engine’s WordPress expertise and UK based server location made them the perfect host, once again for our WordPress clients. The staging server will prove invaluable as we continue to work with and refine Drivers new website over the coming months.

Drivers jobs feed

How to: Hammer out the ideal front-end development setup

Setting up Hammer for Mac, Rock Hammer, MAMP & Coda 2 using DropBox is super sweet and rock solid. The ideal front-end development setup? I think so. I may have finally found my holy grail…

I was introduced to Hammer for Mac from listening to the most excellent Unfinished Business podcast. I played around with the demo and have finally forced open my reluctant wallet and paid for the full version. Which truth be told is a steal. My wallet is still sulking though.

Super-charge your web development with Hammer
Still using PHP includes for HTML? You’re going to love Hammer.
~ hammerformac.com

After setting the exquisite Rock Hammer, Andy Clarke’s curated project library for Hammer for Mac as my default template. I prepared to do a Sass learning session on my MacBook. I put the Hammer project file on Dropbox. Then set MAMP to point to the /Build/ directory within the project. Remember, it is the build folder where you actually preview your work. So now everything is sweet like cinnamon. This really is ultra simple and a solid way of working.

Coda 2’s superb iCloud syncing feature allows me to resume working on this on my iMac too. All I had to do was select “Add Existing Project” from the file menu in Hammer (or Command O if that is too much work). Choose my project on Dropbox, et voilà! I now believe I have the ultimate front-end development environment. I couldn’t be happier. Well maybe if Hammer synced with iCloud too… but hey, I can live with this.

If you don’t have MAMP you could give Anvil for Mac a try too. I haven’t tried this though as I already have MAMP Pro. But it does look very cool.

The tools of the trade

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.

.

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

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.

.

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]

Web design: Propex Leisure Accessories

A brief overview of some of the challenges we faced and how we overcame them when building a hot new WordPress powered website with eCommerce facilities from WooCommerce for Propex Leisure Accessories.

We were delighted to be chosen by Propex Leisure Accessories to rebuild their eCommerce website. They offer spares, fittings and accessories for camper vans, motorhomes, caravans and boats. Their sister company Propex Heatsource specialise in air & water heaters and these accessories help people install from new or repair their existing vehicle heating systems.

Propex are a particular favourite of the VW community. As long term VW fans ourselves; we built and owned a beach buggy, several air-cooled Beetles of various vintages, a lowered ‘Cal Look’ VW Fastback, today drive a VW Beetle Cabrio but last but not least, owning a VW split-screen camper is on our bucket list. Hence, we were very happy to work for a British company who are so well respected within the Volkswagen scene.

Another factor that really made us happy to work for Propex was that they got eCommerce. They are experienced internet retailers and they ‘get’ the internet. This helps a lot. This made the project fun to work on, and cleared the path for us all to focus on our joint vision of creating a great website. The feedback we received was insightful, and thoughtful and helped steer us to creating the final product. Not that anything on the web should ever be finished totally, embracing that the web is fluid and that a website should always be evolving and hopefully always aligning behind the users goals is a fundamental of the world wide web. So have planned to continually refine and improve the user experience and make it even better in the future.

Propex Leisure Website

Content strategy & personas

Imagining someone huddled inside a cold camper van trying to source spares using a phone was one of the personas we used to help develop the site. Having this clear vision helped us concentrate on the content. Using different background images to reflect the category the user is looking at helps them feel at home and also helps reinforce the fact that Propex offer quality products and solutions that are tailor made for their needs.

Website goals

[unordered_list style=”tick”]

  • Improve customer shopping experience
  • Encourage good customer interactions
  • Mobile first
  • Tablet friendly
  • Social network integration

[/unordered_list]

Tech

From our initial discussions it became clear that the new Propex Leisure Accessories website would be a perfect fit for WordPress and WooCommerce, which are both open source applications. Version 2 of WooCommerce had just been released and offers an intuitive dashboard to manage orders, keep customers informed, manage inventory and stock levels. More importantly it is great for customers. Being open source software means that Propex did not need worry about licensing, which is always nice. Because their customers are always on the move, we wanted to make sure that the site worked well on mobile devices and in particular phones and tablets.

Technology Used

[unordered_list style=”star”]

  • Responsive Web Design
  • HTML 5
  • WordPress
  • WooCommerce
  • WooThemes Resort theme

[/unordered_list]

Communication

Safety is always a priority for Propex. They were very keen to ensure that their customers can easily contact them via the telephone number positioned on every page of the website and also using the contact form. In fact their great customer support is one of the reasons why they are so well liked in the community. So we wanted to show this aspect of the company in particular. We created a testimonials feature so that people have got the opportunity to tell the world about how much they love their products and support. We also felt it important to allow customers to review the purchases too. So all products have a review and ratings system.

Social work

It’s not just enough to build a pretty website though. We wanted it to be able to drive their Twitter, FaceBook and Google + accounts too. So all news posts will automatically feed into Twitter and FaceBook. Helping drive social media traffic to the website but also help their customers stay informed and engaged.

Google love

We have also paid a lot of attention to SEO on the new site. This is never something you can just bolt on at the end of a project. With a clear content strategy from the start. Every item on the site be it a product, product image, product text and also the taxonomies used was carefully considered. All focused on the unique selling points of their products. Their products are known for their efficiency and reliability and we were particularly keen to show this off.

We set up Google Analytics and configured the most excellent Yoast SEO plugin to work well for not only single product pages but also for the category and tag pages to try too specifically target potential Propex customers.

Backups

Because of the dynamic nature of the website and in particular because it is an ecommerce shop we wanted regular scheduled backups of the website and database files. We tried out several backup solutions before choosing UpDraft Plus. A great plugin, making it a breeze to securely backup to the cloud. Hopefully we will never need these backups but at least we can all sleep well without worrying about having to complete the mind-numbingly dull task of manual backups.

Gallery

The website features a gallery to showcase some of the vehicles and installations they have done including their superb VW T5 heater demonstration machine. This has more gadgets than a Bond car. Even Q would be impressed with the remote controlled heater switches. No ejector seats though.

Product search

We wanted customers to be able to search for products by SKU. Which is sadly lacking in Woocommerce. So we installed Matthew Lawson’s excellent plugin, which does exactly what it says on the tin.

Order numbers

We came across a problem in testing with our payment gateway. Our order numbers which WooCommerce generated had previously been used in Propex’s old system. There was no easy workaround, so instead bought the Sequential Order Numbers Pro WooCommerce extension which gave us the ability to set the order numbers sequentially and avoid repeating old order numbers.

Happy campers

Overall we are extremely happy with the end result. WordPress has just celebrated it’s tenth birthday and is continuing to get more polish on each iteration. Similarly WooCommerce has come of age with this release. The user experience is great both on the front end of the website and also behind the scenes.

Your calm and reassuring demeanour is much appreciated in all this hokum pokum black magic stuff

~ Richard Kitchener, Propex Leisure Accessories

Most importantly Propex Leisure are pleased with the end result. They will be announcing a lot of new and exciting products in the next few months and they will now be able to easily add these to their new ecommerce platform. We are also privy to some other new developments in the Propex world, which unfortunately we can’t announce yet, but stay tuned, you will be hearing alot more about them over the coming months.

Propex Leisure Accessories

How to: VirtualBox, Windows and MAMP Pro on a Mac

A brief guide to setting up MAMP Pro, VirtualBox and Windows on a Mac for web designers and developers.

Working locally is always a good thing. Nothing beats designing and developing on your local machine. What I mean by local is not where you live or work. In my case in Ringwood, in the New Forest. Locally in this instance means on your local machine.

Using MAMP Pro it is easy to set up a new server on your Mac. However I often get stumped when trying to test my designs in IE. I use VirtualBox which is fantastic. Running IE8 on a vintage Windows NT install within VirtualBox I can see how my new site design looks and works. BrowserShots and other similar services are good for giving you a static picture of your website running on various flavours of Windows and IE. But to develop quickly you want to be doing this locally.

First things first, create a new server instance using MAMP Pro. I use the standard Apache and MySQL ports so I don’t need to append anything on the end of the local url. My Apache port is 80.

  1. So once you have created a new virtual host in MAMP Pro, let’s call it: mywebsite.local
  2. Load this address in your browser of choice and you should see your website. If so you can then then get this working on your Windows install.
  3. For this you need to open your Terminal app. Gulp.
  4. Open Terminal, then enter the following command: ifconfig

    If you get a command not found message, enter this: export PATH=”/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin”

    Then enter ifconfig again.

    You should then see a whole load of stuff appear. Scan through it and you should see an IP address. In my case it is after the “en1:” paragraph. My IP address is: 192.168.0.5

  5. Then fire up Windows and find your hosts file: C:WINDOWSsystem32driversetchosts
  6. Open it in Notepad. And enter your ip address and the name of your local site at the end of the hosts file:

    ie: 192.168.0.5 mywebsite.local

    Save the file.

  7. Then open IE and type the name of your local site in the browser address bar and BANG! You should see your website.

Now comes the real tricky part getting your design to look great in IE. But that’s another story…