Archive for the ‘Tech’ Category

Four tools to make your website more accessible

Friday, August 25th, 2017 | Tech

Making your website accessible people who are visually impaired isn’t sexy or glamorous. But it is pretty easy. And given how prevalent visual impairment is, especially among the elderly (which, all e-commerce operators should note are the people with all the money), it is time well spent.

Here are four tools that will help you tune up your website.

W3 HTML validator

Assistive technology is already out there helping people. All you have to do is provide it with the correct input. And that starts with following HTML standards. And, where possible, using semantic HTML5 tags.

These work in everything except Internet Explorer 8 and the number of users who make use IE8 is now lower than the percentage of people with visual impairment. Plus, it’s very easy to add backward compatibility in.

Once you have done this, run it through W3’s HTML validator tool. This will check that your code makes sense and so everyone’s browsers (visually impaired or not) will be able to read it correctly.

Click here to go to the W3 Validator.

WAVE

WAVE stands for the Web Accessibility Evaluation Tool. It’s an online tool that has been running since 2001 and is considered one of the best ways to test how accessible your website is.

All you have to do is enter the URL of your website and WAVE will give you a full report, including helpful suggestions and things to fix. You get a copy of your page highlighted with the information to make it easy to find.

Like everything on this list, it’s free.

Click here to access the tool.

a11y.css

This is a bookmarklet that scans your page for problems. If you are not familiar with a bookmarklet, it is a magic bookmark: you save it to your favourites and then when you click it, it will run the report on the current web page you are browsing.

It highlights areas of the page with possible errors that you can then review. It’s quick and simple to use but doesn’t offer as much depth as WAVE.

Click here to check it out.

MDN documentation

The Mozilla Developer Network is the de facto authority on how HTML works. This includes documentation on the ARIA standard, which is a standard designed to make web applications more accessible.

Even Mozilla’s documentation is rather hard to penetrate, but if you bare with it, you can get your head around it.

Click here to read the ARIA documentation.

Summary

Making your website accessible is pretty easy: it’s all about following standards and best practice, and maybe adding a few HTML attributes if you have code doing fancy things.

Doing so makes your website much easier to access for the visually impaired, which will mean a better world for them and more traffic for you.

AppSpotr review

Tuesday, June 20th, 2017 | Tech

AppSpotr is a cloud-based service that allows you to make your own apps for iOS and Android.

I had a very brief play around with it so I won’t pretend this is anything like an in-depth review. It allows you to create apps using a drag-and-drop editor. You can add a number of different pages to the app, the basic ones are free and then there is a monthly price for the rest of them.

So, for example, if you want to add a form to capture people’s details, that costs $5 per month. Or the enhanced content pages which you need to add videos costs $1 per month.

It seems like a useful service if you are, for example, a restaurant or hotel that needs a little app with a simple menu and some content pages. But, for anything more advanced, it probably will not provide you with what you need. There is no logical, for example, it is just a list of pages.

You also need a developer account with whatever platform you want to publish to.

Grammarly weekly report

Wednesday, June 14th, 2017 | Tech

Either I have become the most prolific writer of all time, or Grammarly’s numbers are incorrect.

According to my weekly report, I checked over half a million words last week. Now, I do write quite a lot. And it picks up the spell checking I deliberately do for my articles, as well as most of the content I write in online forms.

However, I am pretty sure I did not make my way through over 600,000 words.

One explanation is that the numbers are simply incorrect.

Another is that the Grammarly for Mac app isn’t great: it freaks out when it loses internet connection and you have to reload the page. It could be repeatedly sending everything back to its server for checking.

Or, I’m sleep writing.

GetResponse review

Sunday, May 28th, 2017 | Business & Marketing, Tech

I use MailChimp for a lot of my projects. However, while it is awesome for most things, it does lack in automation. There are workflows, but they are pretty straight forward and linear affairs with no tagging: the only action is to send another email. There is no flow chart style interface, either.

So, I have been exploring other options. The first one I picked up is GetResponse. It is very reasonably priced in comparison to its competition with the basic package starting at $15 per month. Their site says, $10, but it’s actually £10 plus VAT, which is £12, which translates to $15.56 at time of writing.

Interface and workflow

I found the interface a little confusing. I was trying to edit my campaigns, for example. This is not in the menu. You have to click a little cog next to the campaigns drop-down. This shouldn’t be a big thing, but it took me ages to find it, and it was infuriating.

I also found the workflow a little confusing. You have to create a draft message. But then when you try and drag it into a workflow, it pops up a little box saying it has to copy it to the automation folder. Then I have two copies of the message. What is going on here?

And if you want to use Google Analytics integration, you can’t do that through automation. You have to use the newsletter editing screen and copy the message over to automation.

When you click exit on editing a message, you go back to the homepage, rather than the messages page. Again, not a huge thing, but it feels like the workflow for someone using it in the real world could use more attention (MailChimp isn’t brilliant at this, either).

The automation builder itself is really nice. You can drag and drop elements onto the page, such as messages or decisions, and configure the output easily. There are lots of options including tracking opens, clicks and specific link clicks, and re-arrange and add elements to your heart’s content.

Message editor

The editor itself is okay. It lets me edit the HTML directly, which I like. However, you have to generate a plain text version manually. There is a “Copy HTML” button, but this does not bring in the paragraphs, which you then have to fix manually. It doesn’t handle links very well either, in my opinion.

I could never get the inbox preview to work, but the test emails arrived soon enough.

User management and API

The user system and API are where I really struggled with GetResponse, though. You are unable to add tags to a user when you create them. This is frustrating when someone joins by making a purchase because you want to tag them with that purchase straight away.

You might think “oh, well I’ll have to create the user, then query for that user ID, then tag them, making three requests to the API. It’s not ideal, but it will work.” Except it won’t work. Because users are not added to your list in real-time. They are done via a queue. So if you query for a user immediately after creating them, they won’t be there.

They have a PHP library for the API, but it needs some work. It typecasts everything as an object. Even the arrays. So you end up with things like:

stdObject->0

PHP doesn’t allow this, so you have to JSON encode the object, and then JSON decode it to get back to:

stdObject->{"0"}

Even if you could add tags, there is no screen to allow you to manage them.

Support & live chat

They do offer 24/7 live chat. This was a mixed bag. The first time I spoke to them they confirmed there was no tag management screen and that they did not support the API, so would not be able to answer my question about that.

The second time I spoke to them was when their message editor was playing up. I was trying to edit the HTML, and every time it broke. It turns out that unless you select “HTML editor” when you first create the message, you are stuck. I had started with a template, and there is no way to switch. So I had to create a new message and copy it in. It was difficult to get the message across to the support agent, but eventually, we found ourselves on the same page and sorted out the issue.

Other problems

Copying things over is more difficult than it seems. GetResponse uses the session to track what message you are editing. This means that if you open one message, and then a second, it things you are editing the second message on both screens.

Let me explain this with a scenario:

  • I have message A, and I want to copy over the content from message B
  • I open message A
  • I open message B and copy and paste the content to message A
  • I click “save” on message A to save the new content
  • GetResponse thinks I am editing message B and overwrites the content of message B, ignoring message A

I lost a lot of content before I realised this. Luckily, I had backups on my computer.

And in case you’re thinking an easy way to avoid this would be to duplicate message B and then edit it, think again: there is no duplicate functionality.

Getting people into an automation workflow can be tough. You can filter what happens based on custom fields. However, this doesn’t work on the initial subscription: it only works when you go in and edit the custom field of the user. Which is not very automated.

Other features

GetResponse also offers landing pages, webinars and some other stuff. I watched a webinar about their webinars, but I haven’t tried any of these systems because I just want the mailing list functionality. It might be great.

Summary

I love GetResponse’s automation builder. The drag and drop interface makes it easy to create an email sequence that follows what people do and delivers them relevant messages. It is powerful and shows you how many people are at each point.

But that is where my love ends. Coming from MailChimp, where everything is beautiful and works well, GetResponse has a lot of issues. There are so many problems that working with it becomes infuriating, undoing much of the power that the automation functionality should be adding in.

Ultimately, you can launch a simple automation workflow that is more advanced than MailChimp. However, there are so many bugs, dead-ends and limits to what would otherwise be a great tool, that you don’t get much advantage.

How to open the containing folder in Mac’s Spotlight Search

Saturday, May 13th, 2017 | Tech

One of the irritating things about Spotlight Search in Mac is that you open want to open the folder that contains a file, but there is no obvious way to do this.

Luckily, there is a non-obvious way. And it’s pretty simple. Just hold down the Option key and double click on the file you want to open.

Integrating Apple Pay with your website

Thursday, May 11th, 2017 | Programming, Tech

Over at Worfolk Anxiety, we use Stripe as our payment processor. It’s very good; I highly recommend it to anyone looking to integrate a payment API into their website.

They also have support for Apple Pay. This seems highly desirable as while it is quite easy to enter my credit card details on a desktop computer, it is far more difficult to do on a mobile phone. Being able to click a big Apple Pay button and have it all taken care of is some good magic at work.

Unfortunately, while Stripe makes it super easy to do this, Apple do not.

The dreaded developer program

Most platforms want you to write amazing software for them, so they allow you to do it without much ado. Not Apple. If you want to publish something into the App Store, you have to register for their Developer Program. That is £79 a year. A lot of money, especially if you just want to give away a free app.

However, they also restrict test accounts.

So, for example, if you just want to test whether your website is properly integrated with Apple Pay, you have to pay Apple £79 for the privilege. No wonder it is called “Apple Pay”.

Two fingers to Tim Cook

Luckily, they don’t prevent you from using Apple Pay without the Developer Program. But it does mean the only way to test is to ship code to live and then pay with a real credit card before refunding the transaction.

It’s a total pain in the ass. But it is worth it to avoid giving Apple the money? That’s for you to decide (but yes, yes it is).

Viddyoze review

Sunday, April 9th, 2017 | Reviews, Tech

Viddyoze is a cloud-based service that allows you to create intros and outros for your videos.

If you are not familiar with what they offer, here is one of the promotional videos from their YouTube channel:

This is my review. There is no promo code at the end: I know a lot of the “reviews” end with here is an affiliate link, but I don’t have anything like that. It’s just my perspective.

Pricing

It is priced at a one-time fee of $47 for the personal licence (30 renders per month) and $67 for the commercial licence (unlimited renders per month and the right to resell the renders).

It is advertised as being discounted down from $97 per month and $197 per month. However, it is not clear where these figures come from. As far as I know, these prices have never been used. I first saw Viddyoze months ago and the prices haven’t changed, so this isn’t a short-term discount, either.

However, it is also an additional $37 per month for access to the “template club”. I will talk more about this below.

What do I think of it?

I signed up and got access within a few minutes.

However, The first thing I was presented with was an upsell for the template club. This was an additional monthly subscription that gives you access to most of the templates. So, for example, if you wanted their promotional video, you will have noticed there are loads of cool intros and outros. However, these are only available if you pay for the template club.

With my standard access, you do get a bunch of templates (I think it is about 85). However, that is spread across all of the categories. This includes intros, outros, titles, lower thirds, etc. In terms of the number of intros you get, I think there were about a dozen in there. Which sucks. There were only a few I would actually want to use.

Using the software was okay. It is pretty fast. However, there is no preview. So if you have to do it and see what the result is. Then, if you don’t like something, such as the logo or colours, you have to do it all again. This is a little frustrating on the unlimited plan. On the 30 renders per month plan, that would be very frustrating.

Is it worth it?

It depends on how much you will use it. But, for me, no.

Because there are only a handful of intros on the basic package, I don’t think I would get much use out of it.

The other option is to pay for the template club. But this means you are paying $67 up front plus $37 per month, which is approximately $42 per month. As they point out in their video, there are people on Fiverr reselling their stuff. For $5 each. So, you need to be doing at least nine unique videos per month before it becomes cheaper to use Viddyoze rather than just hiring someone on Fiverr each time.

Is there a money-back guarantee?

Yep, 30 days. When I requested my refund they sent me a form to fill out with various transaction IDs I had to dig out of my emails. After that, they refunded me two later, which all seems reasonable.

Building an online checkout with Stripe and React

Monday, March 13th, 2017 | Programming, Tech

Worfolk Anxiety recently launched its web store. We build this for a number of reasons. One is that it gives the customer a better experience because they can buy one eBook and get it in every format. Another is that it makes it a lot easier for us to offer upsells and tripwires.

Payment processor

We’re using Stripe as the payment processor. Stripe has become very popular over the past few years because it allows you to build an entirely integrated checkout process without any mention that Stripe is behind it.

How do they do this without requiring you to have PCI compliance on your server? It is all done client-side. You include their JavaScript library. This hashes the credit card details the customer enters and sends it off to stripe’s servers. Stripe then send you back a hash that you can then use to make server-side credit card charges.

Using React

Given so much of the work has to be done in JavaScript, React was a good choice for building the checkout. This allowed me to make it interactive and give the user clear and speedy feedback.

In the case of our checkout process, you are asked to enter your credit card details. Once you have done this, further fields are revealed asking you to enter your name and email address. This step by step approach is a better experience for the customer because they do not get overloaded.

Deploying with Webpack

The finally step is Webpack. This takes the JavaScript and packages it up for the browser. Because the JavaScript is written in ES6, and web browsers only support ES5, it first uses Babel to transpile it back to ES5, before loading everything into one single module and compressing it.

How to set up a web store with WooCommerce

Sunday, March 12th, 2017 | Tech

At the end of last year, I used Shopify to build an e-commerce store for Mountain Wallet. This worked well, but the costs quickly added up. The base Shopify subscription is only $30 but then there are themes and plugins that you will want to pay for on top of that. Last month, I ported it over to WordPress and WooCommerce, and I thought I would discuss my experience.

What is WooCommerce?

WooCommerce is a plugin for WordPress. Once installed, it provides you with a shop admin built into the WordPress admin, as well as front-end pages and a full checkout process. It installs like any other WordPress plugin making it very easy to get up-and-running.

Because of its popularity, many WordPress themes support WooCommerce out of the box. If not, you may need to play around until you find a suitable theme. I used a theme named Bento.

How easy is it to use?

As easy as Shopify. You add your products like you would add posts. It’s the same with adding product images: you use the media uploader. There was some messing around setting up shipping options and configuring payment integrations, but nothing too taxing.

Plugins I am using

As well as WooCommerce, I am using the following plugins:

  • Facebook Messenger Chat
  • Header and Footer
  • Instagram Feed
  • MailChimp
  • Social Media Flying Icons

There is nothing directly commerce related here. These allow me to add a chat link to the Facebook page, insert Google Tag Manager scripts, link the Instagram feed, add a mailing list sign-up form and some share icons.

I also have my standard array of security plugins installed.

Can Cloudflare speed up your website?

Thursday, March 9th, 2017 | Tech

Cloudflare is a CDN (content delivery network) that sits in front of your web server and speeds up your website. They have grown in popularity because they offer a set of basic features as part of their free plan. Therefore, you can get started for nothing and see what you think.

Setup

It is easy to get set up with. You start by entering your domain and Cloudflare scans the DNS records for it. It then sets up all of the rules in its own system and you update your nameserver records to point at their server.

You choose which hosts go through Cloudflare and which do not. You move all of your DNS over to their system, but only certain parts (typically www and any static asset subdomains you are using) will flow through the Cloudflare CDN.

Speed results

I am resistant to make any recommendations here. I ran a couple of tests for Anxiety Leeds. A sample set of one project with a few tests run is not representative.

I first ran a test while the site was still running on my server with no CDN in front of it:

I then ran the same test again once Cloudflare had been set up. I got the same results: the time did not change.

However, when I tried it the next day I got much faster results:

Whether this was because it took Cloudflare a while to cache everything, or whether it was because it provides no speed benefits but my server was just faster at the time I re-ran the test, I am not sure.

When I ran the test a few weeks later, things were really slow:

However, I ran the test again immediately after and got completely different results:

DNS management

It is also worth considering whether you want Cloudflare managing your DNS. For example, you could move all of your DNS management over to Cloudflare and bypass their CDN layer. I use NameCheap for registering my domain names and they provide free DNS hosting, also. How to do the two compare?

NameCheap is great: they provide a redirect server and email forwarding. Therefore I use them for a lot of the domains where I want to implement those features as I get them for free. Their email forwarding service reliably delivers emails to my inbox.

Therefore, I usually stick with NameCheap.

Cloudflare does have one advantage, though. They support CNAME flattening on the root domain. When using Heroku, you have to CNAME your domain to theirs. However, you cannot CNAME the root domain (www.example.com works fine, but example.com does not) as this disrupts all of your other DNS records.

Cloudflare (and a number of other DNS providers, but not NameCheap) solve this by providing CNAME flattening in which they allow you to enter a CNAME, but they translate this into an A record that updates automatically. Because of this, I tend to use Cloudflare when using Heroku.

DNS speed

Another concern is the speed of Cloudflare’s DNS server. First, let’s look at a typical response from the NameCheap free DNS service.

30 milliseconds. That sounds fine. Now, compare that to one of my sites running on Cloudflare’s DNS service.

It is an eye-watering 813 milliseconds. That is almost an entire second just to do the DNS lookup. I immediately re-ran a few more tests on various websites, including on the same website again. The second time, it was much better.

6 milliseconds. It is also a big difference to the first result. Such discrepancies are concerning.

Conclusion

Can Cloudflare speed up your website? Based on the available evidence, no. However, this is one website that I ran five tests for. That is not a large enough sample to draw any conclusions from.

Second, it may be that I need to spend more time playing around with the cache headers on Anxiety Leeds to get the full affect. The documentation suggests I should not have to do this, but I am not convinced that that is the case.