18 Jan 2019

...new feature!

New year, new feature... and this is a big one: downtime alerts to Slack.

As well as getting email and SMS alerts when your websites go down you can now receive alerts straight to your Slack workspace.

slack logo


What is Slack?

Just in case you've been living under a rock (no problem, rocks rock!)...

Slack is a hub developed to make communication between teams easier. It's really popular with web design and development teams.

There are a couple of features in Slack that make it a great fit for receiving downtime alerts:

1) When an alert is sent to Slack everyone on the team who has access to the Slack channel will receive it.

2) Slack is really fast - faster than email. Alerts are received almost instantly after being sent.

Features

Down Alerts

Choose the Slack channel to receive messages if a website goes down.



Up Alerts

Receive 'up' messages when a website comes back online.



Instant Alerts

Alert messages can be sent the instant a website is detected as down (default).



Custom Alert Timing

Alert messages can be scheduled to only be sent if a website stays down for a specific time: 1 minute, 2 minutes, 3 minutes, 5 minutes, 10 minutes, 15 minutes, 30 minutes and 1 hour are the options.



Repeat Alerts

Repeat messages can be sent if a website remains down for a specific time: every 10 mins, 20 mins, 30 mins, 1 hour, 2 hours, 3 hours, 6 hours, 12 hours and 24 hours are the options.



Rate Limit Alerts

You can set the maximum number of downtime messages that can be sent per hour. This is really useful for anyone managing lots of sites on the same server - if the server goes down it prevents you being bombarded with hundreds of messages. Note for every 'down' alert sent, you'll always receive an 'up' alert when the website comes back online.

downtime alerts to slack


Free & Pro

Slack alerts are available to everyone who uses Downtime Monkey - both Free and Pro users.

Free plan users can monitor up to 60 websites with default settings.

Custom alert timing, repeat alerts and rate limiting are advanced features available only to Pro plan users.

Get Started With Slack Alerts

This is really easy and takes about 2 minutes:

1) Login, go to Slack Settings and click on 'Add to Slack'.

2) Select the Slack Channel that you want to receive alert messages to, click 'Authorize'.

3 (Optional) Send a test alert to your Slack by clicking on 'Send Test Message' in Slack Settings - you should receive it in your Slack.

4) Update your monitors - you'll have the option to turn Slack alerts 'on' or 'off' for each monitor.

The App

To provide the functionality that enables website downtime alerts to Slack we developed a Slack App and integrated into Downtime Monkey.

At present the App is in a short period of beta testing - once this is completed we'll submit for review and endorsement from Slack.

If you're interested you can see details in the Slack App Directory: Downtime Monkey Slack App.

 

18 Dec 2018

In a recent blog post we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

In this post we show you how to do it in Mozilla Thunderbird by selecting the correct address book settings and adding the email address as a contact in your address book...

1) First you need to select the correct address book settings. Login to Thunderbird and select the menu (hamburger) icon:

Mozilla Thunderbird Menu Icon


2) Select 'Options' from the drop-down menu:

Mozilla Thunderbird Options

3) Select 'Account Settings' from the nested drop-down menu:

Mozilla Thunderbird Account Settings


4) In the Account Settings window select 'Junk Settings':

Mozilla Thunderbird Junk Settings


5) In the Junk Settings window there is the option: "Do not mark mail as junk if the sender is in". Make sure that this is checked for 'Personal Address Book', then click 'OK'.

Mozilla Thunderbird Check Personal Address Book


6) Next you need to add the email address that you want to whitelist to your personal address book. Click the 'Address Book' button in the top menu:

Mozilla Thunderbird Address Book


7) In the Address Book Window select 'New Contact':

Mozilla Thunderbird Create New Contact


8) Add the email address that you want to whitelist to the new contact, making sure that 'Personal Address Book' is selected for the 'Add to' option. Here we have added monitor@downtimemonkey.com to make sure that we receive email alerts if one of the websites that we monitor goes down. Once added, click 'OK':

Mozilla Thunderbird Add Email Address To Contact


9) When the address has been successfully added you can see it in your list of contacts:

Mozilla Thunderbird Contact Added
 

19 Dec 2018

...new feature!

UPDATE - 19 Dec 2018 - new graphs now showing response times every minute, hourly average response time and daily average response time! More info here.

We've just rolled out a brand new feature: response time monitoring.

As well as monitoring websites for uptime and downtime we now monitor the time it takes for each website to respond.

The response times are logged and can be viewed in graphical format. Read on to see some pretty graphs of response times...

monitor response time for website


Why Monitor Response Time?

1) If a webpage is slow the experience for the visitor is usually bad. Many users simply leave a site if it doesn't respond within a few seconds.

2) When a site has a high response time it is usually an indication that the server is struggling. Slow response times are really common when servers are overloaded and the information can be used to identify server problems or to explain that there is a problem when contacting a web host.

3) Slow response times and high levels of downtime are linked. A site that has a high response time is more likely to suffer from downtime than a site that is running quickly.

What Is Response Time?

Don't confuse page load time with response time!

Page load time is "the time it takes to download and display the entire content of a web page in the browser window". This very much depends on the size of the webpage to be displayed - heavy pages with lots of large images or video will take longer than light pages with just text and a few optimised images. This is not a good value of response time.

Response time is sometimes defined as Time To First Byte, i.e. "the time taken to receive the first byte of data" from the server. However, this is not perfect because it is shorter than the time taken for the first byte of data to actually appear in the web browser.

We use Time To Receive Headers as response time because this most accurately reflects when website users see a response... headers are received immediately before the first content is loaded to the web browser.

You can find more technical detail on defining response time at the end of the post: When is a website considered down as opposed to just slow?

Logs & Stats

All users now have access to response time logs and stats. If you are already a Downtime Monkey user you don't need to do anything - all accounts have been upgraded automatically to include this new feature.

Free plan users can see individual response times (monitored every 3 minutes) for the last 24 hours and daily averages of response times for 90 days.

Pro Plan users can view individual response times (monitored every minute) for the last 24 hours, for the last 7 days and daily averages of response times for 2 years.

Graphs

Here are a some response time graphs taken from real websites. You can see the difference between a fast website and a site that has problems:


Fast website: response times every minute for 24 hours

This website was running well with responses mostly around 100ms. There were a couple of periods of slightly slower responses but no major problems.

Response Time (milliseconds) vs Time (UTC)


Overloaded website: response times every minute for 6 days

This website was running slowly and was frequently overloaded by comment spam bots. Even during better periods the response times were approximately 1-3 seconds and during periods of overloading they rose to more than 15 seconds. This site also experienced regular downtimes with only 82.139% uptime during 7 days!

Response Time (milliseconds) vs Time (UTC)


UPDATE - NEW GRAPHS:

During beta testing it was noted that some of the graphs simply had too many points to be easily read: in the second example above there is a response time shown every minute for 6 days - that's over 8600 points!

To make the information easier to view there are now three graphs shown for each monitor: response times every minute for the last 24 hours (unchanged from the first example above), hourly average response times for the last 7 days and daily average response times for up to 2 years.


Fast website: hourly average response times for 7 days

This website was running well with response times consistently around 100ms.

Mean Response Time (milliseconds) vs Time (UTC)


Overloaded website: hourly average response times for 7 days

The same website as shown in the second example above - it was running slowly and was frequently overloaded by comment spam bots.

Mean Response Time (milliseconds) vs Time (UTC)


Fast website: daily average response times

This website usually ran well for most of the 20 days that it was monitored, with average response times around 120ms. However, over a 5 day period the response times slowed due to higher than normal load on the server.

Mean Response Time (milliseconds) vs Date


Free plan users can view graphs of response times every 3 minutes for the last 24 hours and daily average response times for up to 90 days.

Response Times for Your Monitors

To view the response time graphs and stats simply login, navigate to your website monitors and click on 'view stats' for the website in question.

If you don't have an account yet, you can sign-up for a free account and begin monitoring your websites in seconds!

Note this feature is in a short period of beta testing and there may some changes as testing progresses.

 

30 Nov 2018

Previously we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

In this post we cover how to do it in Yahoo! Mail by adding a filter...

1) Login to Yahoo! Mail and select settings by clicking on the gear icon:

Yahoo Mail Settings


2) Scroll down the menu and select 'More settings':

Yahoo Mail More Settings

3) In the left-hand menu select 'Filters':

Yahoo Mail Filters


4) Select 'Add new filters':

Yahoo Mail Add New Filters


5) Type a name for your filter - here we chose "Whitelist Website Downtime Alerts":

Yahoo Mail Set Filter Name


6) Under 'Set rules', select 'From' as the rule and 'contains' as the criterion for the filter. The filter will be applied to any email that comes from an email address that contains the text you add:

Yahoo Mail Select From Address


7) Input the email address that you want to whitelist - here we input 'monitor@downtimemonkey.com' to whitelist all emails that come from this address:

Yahoo Mail Set From Address


8) Under 'Choose a folder to move to' select 'Inbox'. This ensures that all emails will arrive in the inbox and never be sent to spam:

Yahoo Mail Move To Inbox


9) Click save:

Yahoo Mail Save Filter


10) Once the filter has been successfully created, you can view it under 'Your Filters':

Yahoo Mail Filter Complete


Whitelisting A Whole Domain

In 'Step 7' a single email address was whitelisted. It's also possible to whitelist all emails associated with a domain.

By adding downtimemonkey.com to the contains field instead of monitor@downtimemonkey.com we would whitelist every email address belonging to downtimemonkey.com.

 

23 Nov 2018

...and how you can too!

We've just spent several days improving the accessibility of the Downtime Monkey website. Last week we carried out an audit of the site with Google's new tool web.dev, which is currently in beta.

The tool returned high scores for three of the four aspects that were tested: performance (i.e. website speed), best practices and SEO (i.e. optimisation for search engines).

This was no surprise as we'd focused heavily on best practice and SEO when developing the site and in January we undertook a very thorough performance audit where we reduced page load time by more than half.

However, the accessibility score was just 48%, so there was plenty of room for improvement.

Here are the scores before:

Accessibility Score 48%

...and after the accessibility improvements were completed:

Accessibility Score 90%

Side note: all of the pages with embedded YouTube videos showed reduced performance scores. This has previously been covered in-depth in this post on improving page speed.

What Is Accessibility?

From Wikipedia:

"Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality."

In practice, this (mostly!) means ensuring that screen-reader software can access and interact with all the content that is in place on a website.

Why Improve Accessibility?

The web is possibly the modern world's greatest tool and good accessibility means that more people have access to this brilliant tool and all the benefits that come from it.

But that is not the only reason to improve accessibility...

If your website is inaccessible you are losing some users, which means that you are losing customers.

Improving accessibility is very straightforward, and we've provided full details of the optimisations that we made so that you can apply them to your own website.

Step 1: Run A Test

Our starting point was a website that had already been developed with accessibility in mind but had never been thoroughly tested.

Testing with web.dev is easy. Simply input the URL of the webpage that you want to test and hit 'run audit'.

The results include an overall score and a list of recommendations for each of the 4 categories. Here we're only concerned with the accessibility category.

Step 2: Act On The Recommendations

Following the recommendations is straightforward but it is time consuming as every page on a website must be tested and corrected individually.

This is because improving accessibility is about making all content visible to screen-readers.

It is easy to forget to add an 'alt tag' to an image or an 'input label' to a form field, and a few omissions can drastically reduce the accessibility of your website.

Here are some improvements that are easily made:

Alt Tags For Images

The error: "Image elements do not have [alt] attributes".

All images must have an 'alt tag' in place. This should consist of a few words that describe the picture so that a screen-reader can read out a description of the image.

For example:

			
<img src="images/blue-bird.jpg" alt="blue bird in forest">
			
		

Labels For Input Fields

The error: "Form elements do not have associated labels".

Most input fields should have an associated 'label' so that screen-readers can read out a description of the input field, letting the user know what to input into the field.

Note that labels are not required for hidden inputs, buttons or 'submit' inputs.

The common inputs that require input labels are:

			
<input type="text">
<input type="password">
<textarea>
<input type="radio">
<input type="checkbox">
<select>
<input type="tel">
			
		

It is best to apply the label 'explicitly', as in the following example. Note that the 'for' attribute should match the 'id' of the input:

			
<label for="name">Name</label>
<input type="text" id="name" value="">
			
		

Invisible Labels For Self-Explanatory Input Fields

The error: "Form elements do not have associated labels".

Sometimes an input field is self-explanatory for sighted users. One example from Downtime Monkey is the 'select your country' dropdown menu - it's obvious from the design of the site that the user needs to select their country. Adding a visible label here would actually decrease user experience.

But screen-readers can't read the design of the site!

The solution is to add a label that is visible to screen-readers but not shown on-screen. This is best done by creating a CSS class for 'screen-readers-only' and applying that to the label.

Here is the HTML:

			
<label for="add_country" class="screen-reader-only">Select Your Country</label>
<select id="add_country" name="add_country" onchange="this.form.submit()">
	<option class="country-placeholder" selected disabled> -- Select your country -- </option>
	<option class="country-option" value="1">Country 1</option>
	<option class="country-option" value="1">Country 1</option>
</select>
			
		

When creating the CSS class it is important not to use 'display: none' or 'visibility: hidden' because screen-readers skip content that is hidden like this.

Instead we positioned the content off-screen. This is the CSS:

			
.screen-readers-only {
	position: absolute !important;
	top: -1000px !important;
	left: -1000px !important;
}
			
		

Aria Labels For Image Links

The error: "Links do not have a discernible name".

Sometimes images are used as links - a common example is a logo that links to the home page of a website.

This poses a problem for screen-reader users as they cannot see the image and no text is in place.

The solution is to add an 'Aria Label' which describes the landing page:

			
<a aria-label="Home" href="index.php">
	<img src="images/downtime-monkey-logo-white.png" alt="downtime monkey logo">
</a>
			
		

Titles For iframes

The error: "frame or iframe elements do not have a title".

The cause of this error was embedded YouTube videos and it was something that we had missed completely.

Embed code supplied by a YouTube video comes without a title. Unfortunately this means that screen-reader users can't tell what the video is about or even that the iframe contains a video!

This can be rectified by adding a 'title' to the iframe:

			
<iframe src="https://www.youtube.com/embed/-SyWKnrECsc?ecver=1" frameborder="0" gesture="media" allowfullscreen title="Video on how to monitor a website"></iframe>
			
		

Allow Users To Scale The Webpage

The error: "user-scalable='no' is used in the meta name='viewport' element or the maximum-scale attribute is less than 5".

We have spent a lot of time ensuring that the website worked well across all screen-sizes from tiny phones to large widescreens. Part of this was making sure that the text is sized appropriately for the screen that it is shown on.

So it was really annoying when some phones (we're looking at you iphone!) override this, apply their own zoom and muck-up the beautiful text sizing!

To prevent this we had used 'user-scalable=no' so that the correct text sizes were seen on iphones.

Unfortunately a side-effect of this was that everyone was prevented from zooming - so partially-sited users who need larger text would be unable to zoom.

This was easily fixed by removing 'user-scalable=no' from the meta viewport (iphone users will just have to live with slightly less perfect text sizing!):

			
<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
		

Aria Labels For Icon Forms

The error: "Form elements do not have associated labels".

Sometimes when an icon is clicked a form is submitted. A common example is when a 'trash icon' is used to submit a form which deletes something.

This makes for a great user-experience for sighted users but there's no text present for a screen-reader to read.

The solution is to add an 'Aria Label' which describes what happens when the icon is selected. Note that in the following example the 'trash icon' is a Font Awesome icon which is supplied by its Unicode value &#xf1f8;

			
<input type="submit" value="&#xf1f8;" name="delete" class="fa blue" title="delete monitor" aria-label="delete monitor">
			
		

Aria Labels For Icons That Show Important Information

In this case there is no error from web.dev because icons only need to be labelled under certain circumstances.

When an icon is present purely to add style there is no need to add a label. For example, on Downtime Monkey when a user's list of monitors is displayed, every website that is up has a tick icon shown beside the word "UP". No extra information is provided by the icon so there is no need for a label.

However, when an icon provides additional information it is important to use an 'Aria Label' so that a screen-reader can provide the information to its user.

An example, again from the user's list of website monitors, is that the bell icon is shown when email alerts for a specific monitor are turned 'on' and the bell-slash icon is shown when email alerts are turned 'off'.

Here's the code for when a monitor has alerts turned on - again, Font Awesome was used for the icon:

			
<a title="email alerts on" aria-label="email alerts on" class="blue no-underline">email: <i class="fa fa-bell"></i></a>
			
		

Aria Labels For Icon Links

The error: "Links do not have a discernible name".

Sometimes an icon is used as a link. For example, a PDF icon is linked to a receipt document in a user's 'order history' so they can easily view and print their order details.

However, screen-readers need text to provide the context of the link.

Again, adding an 'Aria Label' to the link solves this problem.

			
<a href="invoice-pdfs/325.pdf" aria-label="Receipt 325"><i class="fa fa-file-pdf-o"></i></a>
			
		

Button Roles & Aria Labels for Linked Spans

In this case no error was caught by web.dev, however accessibility improvements were made.

In Downtime Monkey, modals are used as an alternative to dropdown menus because they provide better user experience.

The image below shows the modal that is used to display the 'user menu'.

User menu modal

Note that in the top right corner of the modal there is an 'x' which can be clicked on to close the modal.

This x is a span that acts as a button and this is potentially confusing for screen-reader users as it doesn't provide context for the link.

The solution is to add a 'role' to the link to tell screen-readers that it acts as a 'button' and also to add an 'Aria Label' to describe what the button does:

			
<span id="settings-close" role="button" aria-label="close menu" class="modal-close">×</span>
			
		

High Colour Contrast - Not Implemented

The error: "Background and foreground colors do not have a sufficient contrast ratio".

Low-contrast text can be difficult to read for partially sited users and high-contrast text is recommended to make text easier to read for everyone.

Most of the text on the site passed, but some blue, green and orange text failed.

However, implementing new colours is a big job. Simply upping the contrast of the current colours considerably reduced the user experience for most people. The high contrast text was either really bright (so bright that it hurt) or very dark (dark enough that it made it hard to distinguish between small headings and paragraph text).

It became evident that introducing high-contrast colours would involve redesigning the site. We thought long and hard about this and in the end it was decided that the benefits of keeping the colour scheme outweighed the disadvantages, although we may revisit this in the future when we have more time to spend on redesign.

Step 3: Re-run The Test

Running the test after making the changes provides a check to ensure that fixes have been applied correctly.

You should also see the accessibility score improve and congratulate yourself on a job well done :)

Accessibility Score 90%
 

15 Nov 2018

...for Office365 and 'Outlook for the web'.

In a previous blog post we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

Here we provide step-by-step instructions on how to do it in Outlook for Office365 by adding the email address to your safe senders list...

1) Check that you are using the web version of Outlook.

Outlook has had a lot of different versions over the years and Microsoft has managed to cause real confusion as to which version is which!

This article refers to the web version of Outlook which is known as 'Outlook on the web' as well as 'Office365 Outlook' and 'Outlook for Exchange Server'. Older versions were formerly know as 'Outlook Web App (OWA)', 'Outlook Web Access' and 'Exchange Web Connect'... we're not joking.

If the top left of the webpage that you are looking at is similar to the screenshot below, you are in the right place:

Office365 Outlook


2) Select settings by clicking on the gear icon:

Office365 Outlook Settings

3) Scroll down and select "Mail":

Office365 Mail Settings


4) Select "Block or Allow" from the Options menu, under Mail > Accounts:

Office365 Block or Allow


5) Add the email address that you want to whitelist to the 'Safe Senders and Recipients' field and click the '+' button. Here we have added monitor@downtimemonkey.com to make sure that a website downtime alert email is never missed:

Office365 Outlook create safe sender


6) The whitelisted email address will appear in your Safe Senders list:

Office365 Outlook safe sender added


7) When you click away from the page you'll be prompted to save your settings:

Office365 Outlook save changes


Whitelisting A Whole Domain

In 'Step 5' a single email address was whitelisted. It's also possible to whitelist all emails associated with a domain.

By adding downtimemonkey.com to the Safe Sender field instead of monitor@downtimemonkey.com we would whitelist every email address belonging to downtimemonkey.com.

 

08 Nov 2018

In the last blog post we answered the question: Why Whitelist an Email Address?

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

Here we provide step-by-step instructions on how to do it in Gmail by creating a filter:

1) Login to Gmail, click on the gear icon and select "Settings":

select Gmail settings


2) Select "Filters and blocked addresses":

select Gmail filters

3) Scroll past all your existing filters and select "Create a new filter":

create new filter Gmail


4) Add the email address that you want to whitelist to the "From" field. Here we added monitor@downtimemonkey.com to make sure that we never miss a 'website down' alert:

add email to filter Gmail


5) Check the "Never send to spam" box and click "Create Filter". The email address will now be whitelisted!

create filter Gmail


Whitelisting A Whole Domain

In 'Step 4' we whitelisted a single email address. It's also possible to whitelist all emails from a domain.

By adding @downtimemonkey.com to the "From" field instead of monitor@downtimemonkey.com we would whitelist every email address belonging to downtimemonkey.com.

Whitelisting Multiple Email Addresses

To whitelist more than one email address simply add each email address separated by the pipe symbol. For example, "monitor@downtimemonkey.com | verify@downtimemonkey.com".

The pipe symbol is a vertical bar '|' that can be added with shift and backslash on most keyboards.

 

31 Oct 2018

TLDR; "If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client."

Whatever email client you use, be it Gmail or Thunderbird, Outlook or Apple Mail, you can be sure that it comes with some kind of spam management built in.

Most of the time this works well - legitimate emails are delivered to your inbox and spam is either rejected or gets funnelled to your spambox.

whitelisting an email address


However, differentiating between genuine emails and spam is a notoriously difficult problem to automate and despite utilising sophisticated artificial intelligence, email clients intermittently fail to do this successfully.

This means you will occasionally see spam emails make it through to your inbox, or worse... legitimate emails may be incorrectly blocked and you miss them!

Whitelisting Prevents Overzealous Blocking

If you expect to receive important emails from a trusted email address it is worth whitelisting the address to make sure that emails won't be accidentally blocked by an overzealous email client.

You can do this for monitor@downtimemonkey.com to be 100% sure that you'll receive your email alerts if a website that you monitor goes down.

It's very unlikely that these emails would be blocked (we've never had problems) but whitelisting is straightforward and gives peace of mind.

How To Whitelist An Email Address

Whitelisting is completed in the email client and each email client is different.

So far we've written posts that give step-by-step instructions (including screenshots) on how to whitelist email addresses in Gmail, Outlook for Office365, Yahoo! Mail and Mozilla Thunderbird.

 

26 Sep 2018

One of our main aims when developing Downtime Monkey is to make the user experience outstanding.

With that in mind we've rolled out an improvement to the user interface that enables you to view the current status of all your websites at a glance.

Here's a screenshot of the new 'overview box' - this is now the first thing you'll see when you view your monitors:

website monitoring user interface


Down Websites Listed First

Every website monitor is still listed individually. Individual monitors now appear just below the 'overview box' and can be easily scrolled through.

We've also made a small change to the list of monitors - previously all monitors were listed in alphabetical order but now websites that are down are shown first:

website monitor list


Who Benefits?

These changes should benefit users who monitor lots of websites because they can quickly find any websites that are down without having to scroll through a long list of monitors.

Since Free Plan users can monitor up to 60 websites, Pro Plan users can monitor up to 1000 sites and Enterprise users have unlimited monitors, this could benefit everyone and we've rolled it out across the board.

To check out the new user experience simply sign up, add some websites to monitor and view your monitors. It takes less than 2 minutes!