Such is the nature of my role that I find myself working not only with colleagues in the United Kingdom, but with those in Australia, Europe and the United States. These multiple timezones could easily hinder the planning of conference calls; I need a way to work out a convenient time for any team to get together on a Skype call.
In this tutorial, I’ll show you how to create a Dock icon that gives you ready access to the timezones that are important to you — and more besides. Whilst there are menubar applications that do this, in the Mac App Store, my method avoids adding another icon to your (already crowded) menu bar and it does not cost anything.
Before We Begin
Before we begin, we will need to ensure that we have the following:
- An internet connection to access to time.is via a web-browser
- A suitable clock icon of 512x512px, or 1024x1024px for HiDPI (retina) displays
- Fluid app
How We Create Our World Clock “App”
To create and customise our timezones is very straightforward. This is the process:
- We are going to be using a website called Time.Is where we will customise a web page for our own personal requirements.
- We will create a custom clock icon.
- We will then create an “app”, for OS X, using a handy little tool called Fluid app.
- We will locate our new app in the Dock.
1. Creating and Customising our Timezones
This part of the process is quite straightforward, involving little more than visiting a website and customising it to your particular requirements.
Step 1. Visit Time.Is
Visit the time.is website, in a browser of your choosing, and time.is will default to the current time in your timezone.
Step 2. Removing Timezones
In addition to your current timezone, the time being displayed in large letters, the time.is website will also display the time in some other timezones. If the suggested timezones don’t meet your requirements, click on the one you wish to remove to change to that time and then click on the Remove from favorite locations link. Repeat this process for all timezones that you wish to remove.
Step 3. Adding Timezones
Envato is headquartered in Melbourne, Australia. I often need to know what time it is, down under, so this will be the first timezone that I need to add.
Adding timezones is very simple. Use the search box at the top of the webpage and enter the city for which you need to know the time. As you type, time.is will suggest cities and will narrow these down as you continue typing.
Select the correct city and then click the Add to favorite locations link. Repeat this process for all the places that you need to know the time. Each time you add a city to favourite locations, a small box with the place and time will be added to your web page.
Step 4. Customising the Displayed Information
Given that I am in the United Kingdom, the way we display our dates and times will be different to the way in which, say, an American would be familiar. The time.is site defaults to a format familiar to my American colleagues, but I would like to Anglicise it a little.
To do this, click on the More >> link at the top the page to reveal an extended menu and then select Customize to reveal the settings that can be changed.
One of the first things I’m going to do is correct the spelling by selecting British English. I am now customising things.
I can continue to change the way the date is displayed to the rather more logical DD-MM-YY. European users may wish to choose the, even more logical, ISO format of YY-MM-DD. You can choose whichever suits you best, or just stick with the default American MM-DD-YY format.
Choose whether you wish to retain the social buttons and whether you wish to invert the colour to white on black. When you are happy with your customisations, right-click on the link that says right-click on this link and copy it to your clipboard (CMD C). You may wish to paste your customised link into a text document for safekeeping. That said, as long as you permit browser cookies (which is the default behaviour of all the major web browsers) then your settings will be stored for next time you visit the time.is web page.
2. Create a Custom Clock Icon
It is not imperative that you perform this stage, but if your intention is to put an icon on the dock, you might want it to fit aesthetically, too.
In order to create my icon, I took a screenshot of the Mondaine Swiss clock icon in the iPad Clock app. I then transferred this screenshot to my Mac.
Opening the screenshot in Pixelmator (you may use a different graphics editing app), I trimmed down the screenshot into a suitable image for an icon. For the purposes of OS X, your icon will need to be 512x512 pixels, or 1024x1024 pixels for a retina display.
Export your final image as a .png (Portable Network Graphic) file, ensuring that it has a transparent background. Make a note of the location to which you exported your newly created icon.
Tip: If you do not have the time, or the inclination, to create your own custom clock icon, feel free to use the Mondaine Clock that I created for this tutorial.
3. Create an “App” With Fluid App
Next, we are going to bring our customised web page and our custom icon together into an “app” which we will create using a handy app called Fluid, from Celestial Teapot Software.
Fluid allows us to create a Mac app by turning our web site into an OS X desktop app.
Step 1. Creating Your Custom App
Download and open Fluid app. Locate the customised URL string that you saved from Step 4 in customising the time.is website.
Enter your customised URL and an appropriate name for your app.
Step 2. Attach Your Custom Icon
To create your app with your custom icon, select Other in the Icon field and browse to the location where your custom icon is saved.
Step 3. Create Your App
When you have entered the required information, click the Create button and then Launch now.
Your app will be created, placed in the Applications folder. An icon will be created on the Dock and the app will launch.
You may drag the app icon to wherever you want it to be located in the Dock. You can even drag it from the Dock if you prefer it not to reside there. If you wish to keep your time app in the Dock, right-click and check that it is pinned to the Dock (this should be the default behaviour).
Using Your Custom App
You now have ready access to your customised time.is app giving you the current times in different timezones of interest. Knowing whether it’s OK to Skype call colleagues in Melbourne, Mammoth Lakes or Manchester is now just one click away.
Whether you choose to locate your time app in the Dock, or not, is up to you. Either way, remember that you can launch it very quickly if you use Spotlight or Alfred. Use the CMD Spacebar or Option Spacebar keys, respectively, to launch these apps. A great solution for people who find the keyboard more productive.
All Done!
Yes, there are apps out there that do a similar thing by putting access to global timezones into your Menu Bar, but they usually cost money and where’s the fun in that? Fluid app is much more flexible, so why not set up your global times zones, and more besides, and support Fluid app by purchasing a licence, if this works for you.
In this tutorial, I have shown how to customise a web app and create an "app" within OS X, using a tool called Fluid, to give quick and easy access to timezone information from the Dock. My approach frees your Menu Bar from additional icon clutter and it does not even require you to locate the app in the dock - you can use your favourite quick launcher to fire up access to global timezones whenever you need to know what time is it somewhere else.
Let us know, in the comments below, how you set up your timezones, or if you have any other tips or tricks.
