Custom domain and SSL for a Synology NAS with a dynamic IP

With faster internet access finally connected I wanted to see it will be a viable option to replace my Dropbox account in favour of my Synology NAS ‘Drive’ feature; It’s basically Synology’s take on Dropbox or google drive.

Problem 1: Dynamic IP

My internet access doesn’t come with a fixed IP address which made me think I was going to have all sorts of problems, but thankfully that became a non-issue once I found out that Synology offers a DDNS service for free. Problem 1: Solved.

Problem 2: SSL with a domain I don’t control

My Synology NAS will let me create a self signed SSL certificate which isn’t all that useful with all warnings that a browser will server up because of being self signed, but it also gives me the ability to create and use a free Lets Encrypt SSL certificate.

Let’s say I’ve connected my NAS with Synology’s DDNS service and I have a URL which will take me to my NAS login page. I can’t make that URL secured via https (SSL) as I don’t have access to domain, which means I’ll have to park problem 2 and deal with the new ‘problem 3‘. Problem 2: On hold.

Problem 3: Point a domain I control to my Synology DDNS domain

I already own a number of domains to pointing a domain I own (specifically a subdomain) to my DDNS domain was a relatively simple task. All that’s required was to login to the cPanel account where the domain zone files are managed and add a new zone file record that points to the correct DDNS domain like so:

  1. Hostname: nas-name
  2. Record type: CNAME
  3. Target host:

I set my TTL low-ish at 3600 (one hour) just in case I needed to make changes. Problem 3: Solved

Problem 2 version 2.0: SSL with a domain I control

Setting up a Let’s Encrypt SSL on the NAS was reasonably simple (read: I found a great walk-through, link below), but there was one little pain point for me on this one; closed ports. My router was blocking port 80 access to my NAS which is essential when creating a new SSL certificate, but after opening the port on my router and changing a couple of NAS settings, the set up was all done (or so I thought). Problem 2 v2.0: Solved.

Full walk-through:

Bonus problem: What?! why doesn’t it work?

I’m feeling a mix of achievement and smugness at this staging; I’m really starting to think that I am an I.T. hero (I am not). I punch in my shine new URL (with port number) and I am greeted with a super fun error in my browser: ERR_CONNECTION_REFUSED. Great… hero status removed. I cAN haz novice¿ ¯\_(ツ)_/¯

After much googling I found a comment in a forum thread saying that you can’t access your new secured URL if you are on the same local network as your NAS. A quick hotspot to my phone confirmed I was good to go. Bonus problem: Solved.


WordPress media upload error (and a strange fix)

Recently I was adding some images to a WordPress media library for a new post and I was greeted with the error message ‘Upload error – media failed to save to storage”, so off googling I went. Naturally I ended up at the WordPress codex and WordPress forums which pointed me in the general direction, but solutions offered didn’t fix my woes.

I worked my way through potential errors one at a time checking them off as I went:

  1. Odd characters in the file name – tested, altered, not the problem.
  2. Different file type – tried a .jpg instead of .png, not the problem.
  3. Plugins – turned off all plugins, not the problem… starting to get worried.
  4. Check uploads folder permissions with FTP app – yep, permissions set to 755, not the problem… apparently.

I found a few comments in the WordPress forums where people suggested changing the uploads folder permissions to 777, but I was a little nervous about basically reducing security to zero for that particular folder.

Try turning it off and then back on again

I thought I’d try changing the permissions for the uploads folder (and sub-folders) to 777, and then just change it straight back to 755 and it worked!

Seems like an odd quirk, but it worked perfectly for fixing the media upload error. Go technology!

At the time of errors occurring the site was running WordPress 4.1.0 with 6 very popular plugins and hosted on a Media Temple Grid account.

(Update 1: a week later)

A week after posting this article the same error occurred, but this time the FTP folder permissions trick didn’t work. In this particular case, changing the first character of the file name from uppercase to lower case fixed the issue (e.g. Example.jpg to example.jpg).


A Pardot Landing Page, Bootstrap & Browser Display Issues

As a general rule, hosting a marketing landing page that is crafted to create leads should be hosted on a company’s primary domain to maximise a google adwords spend. But there are a lot of situations that come across my desk where hosting a landing page on the company’s main domain isn’t necessary or perhaps even possible.

For our clients that are leveraging a marketing automation solution such as Pardot, we can use a well thought out sub-domain directed at their marketing platform.

It seems like a simple solution, just design a beautifully optimised landing page, code it up using your favourite framework or boilerplate (bootstrap in this case), store all of your assets and code on the marketing platform, and your good to go. “Pardot landing page is in the bag” you proclaim after checking the ‘finished’ product…

But then you open Firefox

Oh, great all of those lovely icon fonts aren’t showing. Instead we get a not-so-useful square. We better check Internet Explorer… and it is the same here too.

Time to hit up google!

Google leads to stack overflow (of course) that held enough hints to point me in the right direction.

Opening up Firefox’s developer tools and checking the console logs showed that there was a problem with the icon font loading. What seemed strange to me was that the google hosted font being used for the site body copy loaded perfectly.

Location, location, location

Today I learned, it matters where your fonts are hosted.

To be more specific, it matter where your fonts are hosted in relation to the CSS file that is calling them (at least in the case of @font-face method anyway).

It turns out that some browsers out there (I’m looking at you Firefox and IE) don’t like it when you hard link to a font file, especially when the CSS file and the font are stored on different servers.

For a moment, it felt like my framework dreams where collapsing around me. But then I had another sip of coffee and the world was beautiful again.

The mind numbingly simple solution

One line of code, replace one line of code…

Instead of hosting the four formats of the icon font, bootstrap.min.css and reworking the @font-face to point to the newly hosted fonts, all I needed to do was remove this line of code from my HTML file:

<link href="" rel="stylesheet">

And add this in its place:

<link href=""  rel="stylesheet">

Now we are loading the bootstrap CSS direct from their CDN, and in turn, loading in the icon font from the same server. Checking the updated HTML in Firefox and IE reveals crisp, resolution independent icons in all their glory.


Marketing Automation, The Brave New World.

In July 2013 I got my first taste of the complex world of marketing automation in the form of the now defunct Optify service. It was the clunky precursor to what would be ‘a brave new world’ of marketing automation that was to blast off (for me) in December 2013. With Optify getting itself into financial difficulty, being purchased and then shut down 30 days later; the Blirt team (wisely) made the shift to Pardot. Who or what is Pardot you ask? Well perhaps you have heard of the company who owns it… Salesforce.

What is Marketing Automation?

Marketing automation can mean different things to many people, but here’s how Pardot describes it:

Simply put, marketing automation works to automate your marketing communication programs. With a marketing automation platform in place, your marketing and sales teams can automate and optimise your lead generation and nurturing programs from initial prospect contact through the entire sales process.

Marketing automation makes it easy to integrate email marketing, reporting technology, and your lead generation and nurturing efforts to create a true sales ecosystem. Use it to create timely, structured communication programs with all of your prospects.


A good platform needs good strategy (and execution).

I’ve seen it several times now, a business is sold into a marketing automation platform on the promise of future full of increased qualified leads, opportunities and streamlined sales pipeline. For some businesses, walking the path to that promised future has been a just a few quick steps and they’re off.

But for others, getting moving along that path can a challenge. Difficulties can arise from a lack of technical or creative resources to produce the marketing materials needed, or no clear custom journey to build from. Sometimes it is just a simple case of team members resisting the change from a standard Commercial Email system to a full featured marketing automation solution.

Whatever the reason for a businesses struggle to get traction with their shiny new marketing automation software, I can assure you it is worth working out or pushing through all the pain points because the results can be amazing.

We’ve helped Blirt clients maximise their marketing suite with creative assets such as ad material, email templates, landing pages, and drip programs. Technical setup and customer journey work which leads into profiling, scoring and grading prospects. Targeted media buying that brings in leads on a cost per lead pricing model – offering a level of security to clients compared to other media buying models.

As a Pardot Certified Consultant I’ll often times run a full client implementation including technical setup, creative assets and training sessions.

And sometimes I have a stretch like this:

Not that I am complaining. Having an abundance of work is a quality place to find yourself in.

Did you say Art Director?

It’s official, after 5+ years of freelancing I’m back on the payroll again!

Spending six months with the good people at Blirt! in a freelance capacity it was clear that our fit was too good to ignore, so freelance asset has evolved into the role of Art Director. We have had some exciting wins at Blirt! with some big projects fast approaching public release. I’ll be sure to keep you posted here on selected projects from time to time.

If you are part of a SME, you’ll be inspired by our strategic marketing approach. Check out this Blirt! case study: 900 New Prospects Delivered in 90 Days.

What this means for those looking for ‘a piece of the freelance designer pie’ is, I will only be able to take on a very select few projects from this point on… sad, I know, but it has to be this way if I want to keep my sanity and enjoy life.


Doctor Who receives AIMIA nomination

The Doctor Who website celebrating the 50th anniversary of the show is nominated for an AIMIA award (Best of Websites & Online Services – Entertainment). A big congratulations to the R&B Creative team on the nomination and best of luck on the day!

To find out more about the project you can visit R&B’s excellent portfolio piece and see the part I was privileged to play in this fantastic project.


Award: Top Gear Micro Site

Top Gear Micro Site Award

One year on, the Top Gear series 18 micro site is recognised in an award from AGDA Australia! I’m fortunate enough to have my name immortalised in ink on the ‘Australian Design Biennale 2012 Professional Award’ presented to R&B Creative. Rather Chuffed.

You can view more on the project over here.

Font Find – Nanami

Nanami FontNanami Font SampleNanami Font Sample 2

I stumbled across this new font beauty over at behance, loved it so much I just had to buy it! Lucky for me it is on sale at until July 15 at a rather generous 90% off the normal price.

I had recently purchased Nexa and Verb fonts hoping that they would become my new work horse fonts but despite them both being great fonts they have a couple of letter forms that aren’t quite working for me. Nanami however looks like it is really going to fit the bill.

Saint Stephens College Website Wins Award

Saint Stephens College Website

Recently I had the pleasure of working with the R&B Creative as part of the design team on the new Saint Stephen’s College website, which won the national Educate Plus Award for Best Education Website.

The guys in the development team brought to life some really nice interactions that make the site really stand out from the crowed. R&B also created some rather nice advertising and print material that brings unity between offline on online media.

Head on over to the Saint Stephen’s College portfolio page at R&B Creative for all the details.


Saint Stephens house crystal

CueCard – Free Responsive HTML Newsletter Template

CueCard - Free Responsive Email Template

The CueCard responsive email template is mobile friendly and perfect for most campaigns. CueCard comes in 5 colours and 3 different content sections. This template features easy to read text and heading styles with a clean open feeling layout that makes getting your message across as simple as possible.



  • MailChimp template included
  • Campaign Monitor templates included
  • Custom colour can be made through MailChimp system (no need to code)
  • Sections can be added or removed without coding if you are using MailChimp or Campaign Monitor
  • Instructions for customising the colours with a simple find and replace
  • Valid and commented coded
  • Easy to duplicate or remove content sections (instructions provided)
  • PSD with well organised layers and slices
  • PSD for logo area (no need to slice, just save for web)
  • PSD for footer icon so you can make additional icons


Included in the download package

  • 5 HTML templates with styles inline
  • 1 HTML template with styles in the head (advanced users only)
  • 1 MailChimp template
  • 5 Campaign Monitor templates
  • 3 PSD files
  • Help Documentation


View LIve Demo   Download Template
Donate via Paypal  Like the template? Why not buy me a coffee as way of saying thanks? 🙂

Feel free to feature this template on your own blog but please link to this post and not direct to the download link.

Note: images not included in download. Photo Credits: Flickr users – atomicpuppy68, Chris Dlugosz, fletcherjcm. This template is offered free of charge with no warranty or guaranty. Use at your own risk. That said, it has been tested using Campaign Monitors inbox inspection tool and performs excellently on all major email clients, including: Outlook (all), Apple Mail, iOS Mail, Android Mail, Hotmail, Gmail, Yahoo, Entourage, Thunderbird, and Lotus Notes (v8 only).