How to protect your website from hackers and viruses

Nearly half of all businesses in the UK reported cyber attacks or breaches in the last 12 months, with that figure rising to seven in ten for large businesses. With social media giants Facebook, the NHS and even governments falling victim to hackers, the question might not be if your website will be hacked, but when.

Hacking in the News

Hacking attempts, successful or not, feature more and more in our everyday news. High-profile hacks have been blamed for data breaches, digital vandalism and even vote rigging. Here are some of the most prominent news stories in recent years.

Facebook

In September 2018, 50 million Facebook accounts were compromised in what is thought to be the company’s biggest security breach to date. Attackers used three flaws in the system’s software to gain access to user accounts, exposing customer information and also potentially affecting third-party accounts. The source and purpose of the hack are still being investigated.

NHS

The NHS was one of the thousands of organisations affected by what has been described as ‘the biggest ransomware outbreak in history’, in May 2017. Thousands of companies in nearly 100 countries were infected with malicious software demanding payment for access to critical records. NHS trusts and services were forced to cancel appointments and operations. With staff reduced to using pen and paper to record information and no access to essential medical histories. With a crippled health service potentially costing lives, the NHS and the government faced questions over why systems were left so vulnerable to attack.

Yahoo

Three billion Yahoo user accounts were affected as part of the largest data breach in history, in August 2013. The scope of the damage has only recently been revealed, the figure having tripled from previous estimates. With a huge loss in value, resignations and a number of lawsuits against them, the company has suffered greatly as a result of the attack.

Some other big names

The names and the numbers are almost never-ending – here are some you might recognise: Equifax, eBay, Sony PlayStation Network, Home Depot, Uber, LinkedIn, MySpace, British Airways, Instagram, MyFitnessPal, Snapchat, TalkTalk, Tumblr, Adobe, Twitter…

Some Definitions

So what is hacking?

Hacking is the ‘gaining of unauthorised access to data in a system or computer’. The person gaining access is referred to as a hacker. Many hackers exploit vulnerabilities within a computer system in order to steal, manipulate or destroy information. For businesses, this could mean:

All of these consequences would lead to serious damage to a company’s reputation, loss in customer base and revenue. It could even result in further cost from legal action following a breach.

What is a computer virus?

A computer virus is malicious software designed and used by hackers to replicate itself and spread from host to host, altering a system’s operation and potentially causing detrimental effects such as corrupting or destroying data. Viruses can remain inactive for some time, and even once activated can go unnoticed, recording, stealing and altering a system and the information it contains. Viruses spread usually in the form of attachments and downloads. Signs that your computer or website has been infected include:

While some viruses may be considered jovial and cause minor damage to a company’s reputation, others are created solely to cause extensive damage, often for the financial gain of the hackers.

Common Misconceptions

I don’t have anything worth hacking

With so much personal and company data stored and shared online and on computers, there is always something worth stealing. Disparate pieces of information can be brought together to form a useful profile for criminals to exploit.

Hacking requires skill and high-tech equipment

Hacking is mostly portrayed in film and television as the pursuit of highly intelligent, skilled individuals, attacking big, complex targets. However, the majority of cybercrime is low level and opportunistic, taking advantage of multiple targets of limited value but with weaker security.

Big companies are more secure

As you can see from the names above, bigger companies with more resources do not necessarily have the best security. Human beings are actually one of the biggest risks for cyber security – increased bodies and increased complacency mean increased avenues for the criminals.

There’s nothing I can do to stop hackers

There are many simple and routine ways to make your website and system more secure. See below for our tips.

Hacking and SEO

Hacking can affect a company’s revenue and reputation in more subtle ways:

What Can You Do?

In an increasingly networked marketplace, companies must do more to protect themselves from cyber attack, as well as protecting their customers, particularly in light of recent GDPR regulations. The logic is simple: you lock your house, you should lock your website. There are several easy steps companies, and individuals can take to increase their website security.

Increase password strength

One of the most common ways for criminals to hack into your computer or website is by guessing passwords. Increasing the strength of your password makes you a much less easy target. You should:

Stay up to date

As mentioned above, hackers can use vulnerabilities in a system to gain access. There is no such thing as a perfect system: every system will have weaknesses and loopholes that could eventually be discovered and exploited. Manufacturers will update software that has been found to have a fault, so it is best practice to update software, themes and plugins in order to avoid preventable breaches, as knowledge of a fault will spread. Older software will also eventually stop receiving security updates, making it even more vulnerable to attack. Once a website has been hacked, it is vital that you make changes and advances in software and security, as hacked URLs can be shared among hackers and then bombarded from numerous sources.

What We Do for Our Customers

As well as advising our clients of the security measures above, at ExtraMile we perform additional tasks to protect the websites we design, develop and manage.

Software

When building a website, we install security and anti-virus software and plugins responsible for stopping attacks and login attempts. Here is an example from a medium-sized website of the number of attacks blocked, and their country of origin, within one week:

anti-virus plugin example

Customers can also ask us to update software as and when required.

SSL security certificates

ExtraMile adds SSL certificates to all of the websites the company creates. An SSL, or Secure Sockets Layer, offers security in the form of data encryption when sent over a server, giving protection for the transfer of sensitive information such as credit card details. Websites collecting credit card information are required by the Payment Card Industry to have SSL certificates. For other companies, there are several advantages to having an SSL certificate, such as the example given below:

Secure Connection

Further Recommendations and Useful Links

As in medicine, with website security, prevention is better than cure. It can take time to realise that a website has been hacked, a long time to determine how and why, and then more time to fix and prevent further damage. While 74% of companies in the UK said that cyber security was a high priority for them, only 27% have a formal policy in place to cover risks. In a never-ending game of cat and mouse, companies, and individuals should do as much as possible to protect themselves from attack by hackers. Here are some useful links to help you:

Sources

Animating SVG images using nothing more than CSS

Today I am going to demonstrate a few SVG animation examples using nothing more than HTML and CSS. Manipulating SVGs is really simple and is a hassle free way of adding interactivity to a website.

But, before we get started with the fun bits, lets talk a little bit about SVGs. Their popularity is growing throughout the world of web due to their ability to scale without losing clarity and the ease in which they can be manipulated using CSS. What’s more, browser support of SVGs is extremely good and no longer can be used as an excuse to not use them.

All examples covered in this post work with SVG code inserted directly into the HTML. This allows class names and ID’s to be added to the individual SVG paths, providing a way of manipulating the image for animations or hover effects.

With all of the examples you can view the code used to create the animations by clicking the HTML and LESS buttons on the Codepen box.

Animation 1 – Bar Charts

This is a simple animation, that uses CSS transforms to adjust the scale of each path along the Y axis. The addition of CSS transitions makes the transform smooth and happen over a set period, rather than instantly.

See the Pen SVG Animation – Hover by Andy Taylor (@tylrandy89) on CodePen.

Animation 2 – Clock Hands

We are getting slightly more complicated now and introducing CSS animations into the fold. Each hand (SVG Path) has the same linear keyframe animation applied to it, which rotates the hands around an origin on an infinite loop. The difference between the two paths is the duration time applied to the animation.

This example is purely for display purposes and the animation timings of the minute and hour hands are not accurate.

See the Pen Clock SVG Animation by Andy Taylor (@tylrandy89) on CodePen.

Animation 3 – Rocket

This animation uses similar techniques to the clock animation, however, we have combined various keyframe animations to provide a more realistic animation.
The cloud paths have been grouped together and animated using a single keyframe rule. This rule simply moves the clouds from position a above the viewing window, to position b below. The rocket flames use two different keyframe rules to change the colours, this has been set to loop infinitely. Finally the rocket keyframe scales down the rocket and moves it up the page to mimic the effect of taking off. Adding the ease-in animation property slowly speeds up the take off.

See the Pen SVG Rocket Animation by Andy Taylor (@tylrandy89) on CodePen.

Written by Andy Taylor, Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people’s creativity. Each post in this series is one staff member’s take on the world of web, design and things online. We hope you enjoy it.

Need for Speed – Google launches Accelerated Mobile Pages

Did you catch any of the Super Bowl this year? What about any of the most expensive ads on the planet? According to Search Engine Land, “ads drove more than 7.5 million incremental searches for Super Bowl advertisers.”

This year, 82% of Super Bowl Ad searches were made on mobile phones, up from 70% last year. Mobile search is still growing at a staggering rate year on year – and Google is launching new features left, right and centre to keep up with the demand. Want to hear about the latest?

Did you catch any of the Super Bowl this year? What about any of the most expensive ads on the planet? This year, 82% of Super Bowl Ad searches were made on mobile phones, up from 70% last year. Mobile search is still growing at a staggering rate year on year – and Google is launching new features left, right and centre. Want to hear about the latest?

Today (Wednesday 24th February) Google has launched Accelerated Mobile Pages.

What are Accelerated Mobile Pages (AMP)?

Accelerated Mobile Pages are basically stripped-down versions of mobile pages that can load anywhere between 15-85% faster than normal mobile versions of a page.

The AMP version of a mobile page (below on the right) removes the majority of elements that cause the page to load slower.

 AMP version of a news page (left); the normal version of the page (right) Photosource: Search Engine Watch

Do Accelerated Mobile Pages perform better on Google?

Since the Mobilegeddon Google algorithm update last year, we know that site speed is an important ranking factor. So it’s inevitable that AMP sites will be high performers in the search engine rankings.

AMP sites are also highlighted with a green lighting-bolt icon (indicating the lightning speed of the page!) which will improve the click through rate of the result surely.

 Photosource: Search Engine Watch

What to take away?

• Google is taking the increase in mobile search very seriously and so should you if you rely on organic search for your online marketing.

• The mobile phone is invading more and more of our work and non-work space and it’s likely that you’ll see more and more of your website visitors accessing your website via mobile.

• Keep an eye out for AMP pages in the news carousel on Google and start enjoying a better and faster mobile internet!

Does my company really need a multilingual website?

“My business is doing really well. 70% of our orders come from overseas and we have agents and distributors in every country who do all the talking in local language for us.

We’re in the top three of Google results for our product and business is growing gently. So why would I need to spend money on a multilingual website? I don’t believe I need one – my English one is doing the job.”

There are probably around 3 billion Internet users in the world – or there will be by the time you read this.
Of these, 641 million are in China, 279 million in the US, 243 million in India, 109 million in Japan, 107 million in Brazil, 84 million in Russia, 71 million in Germany, 67 million in Nigeria, 57 million in the UK and 55 million in France.

The potential revenue from these Internet users – consumers, businesses, public services and more – is a staggering £27 trillion, worldwide. But with your English language website you can only address one third of that. If your business relies on the possibility that someone in deepest Bulgaria can speak a bit of English and therefore will be able to pass on your carefully-crafted key messages to non-English speakers, then your company’s future there is in very uncertain hands. How much better, how much more authoritative and welcomed would a Bulgarian version of your website be? Accessible to all, your website will not only be relevant and clear about your product offerings, it will also be findable on local language search engines – your Google ranking in the UK? Completely irrelevant in Bulgaria.

The problem is that many companies feel that English is spoken universally to a greater or lesser extent. If you’re doing business in Scandinavia, Germany, India, USA, Australia then yes, your English site will be usable (although again, not necessarily findable on search engines) by most people. However, in Europe, the further South and East you go, the less accessible your site will be. Are you addressing business to business in Spain or Italy for example? You may think that they are all fluent in English, if you judge from your holiday conversations with hotel and restaurant staff. Get out of the tourist areas and into a small chemical company in the industrial estates of Barcelona and you’ll find that English is a lot less used.

And what of your competitors? Do they rely on this “hopeful” approach to web content penetration? You can be certain that they are thinking about exactly the same things as you are:

If the answer to any of these questions is yes by any of your competitors, then watch for a shift in the balance of sales between you and them.

If your content is only in English then you are reaching 26% of global Internet users with it. Add in Chinese and that zooms up to 51%!

Another question you should ask yourself is, how many products have you bought from China recently – oh, I mean, from Chinese language websites? I’m betting not many. Why? Because you cannot read the website. They could be one of the best potential partners for your business out there, but you’ll never find them … now turn it around. People buy from people selling in their own language.

Of course, it’s not cheap to have a multilingual website. And when I say a multilingual website, I’m calling it that advisedly. A copy of your website in another language is a whole different ball game. Make a Chinese website and publish it and the Chinese world may well beat a path to your door. However, wait until you add a new product range, need to restructure a section or simply want to add new content. You’ll need to do it once, twice, three times – once for every language edition you have. You have multiple websites to maintain instead of a single one with language overlays – why is this approach better?

Your content is always published in a base language – usually English – that forms the foundation of the website. For any given section of the website, overlay a translation and the English will disappear when you have chosen the alternate language. If you add new content and have not added a translation layer, then the English version shines through. Therefore your website is always complete with content, never has multiple varying structures and appears consistent to the user, to the extent that you can change language at any point in the website and the page will remain the same, just presented with the new language.

And of course, a multilingual website shows your customers and prospects that you are thinking about their needs. If they feel that you care about them they are more likely to trust you and therefore to buy from you. People rarely buy online, for example, from a store which is presented in a language they do not understand – and if you think about the reasons for this, it becomes obvious why you need a multilingual site.

If you want an edge over your competitors, if you want to have clients overseas who trust you, if you want to show the world how international you actually are, then you really need to go multilingual.

Nick Evans from ExtraMile

The content of this article formed the basis for a lecture given at Staffordshire University for North Staffordshire Chamber’s Staffordshire e-commerce expo during July 2014.

Creating a web for everyone

Hello world! Today I’d like to talk about an aspect of web that is often overlooked, accessibility.

Most of what I’ve written about here are basic principles and common knowledge, my aim is to bring it to your attention.

Let’s get started.

The percentage of people with a form of disability is estimated at between 10%-20%

Sure, not all of these are necessarily web users, but by ignoring the needs of this group of users, we’re not creating much of an even playing field, much like the graphic above (hehe).

The largest portion of users with disabilities affecting the web are those that are visually impaired or blind.

They rely on assistive technologies such as magnifiers and screen readers to help them get around.

There’s a lot that we can do as designers and developers to make this easier and ensure that all users can access all information on our websites.

The W3C covers accessibility extensively and there are plenty of other great resources out there from the BBCRNIB, WebAIM and more.

Here are a just a few items to include in your checklist:

If you’ve made use of the wealth of helpful resources out there and feel you’ve done a good job at making your website accessible, you might want to test it out.

WAVE’s Web Accessibility Tool can play a key role here, highlighting what you can improve on and also what you’ve done well. No errors? Take a moment to give yourself a pat on the back. There are also a number of great add-ons for browsers like the Accessibility Toolbar and Wave Toolbar for Firefox to help you perform some additional testing.

Of course, we shouldn’t rely on these tools to determine whether our website is über accessible, so some feedback from real users of your site would be great. We could gather this by including a request for comments or suggestions on our accessibility statement, situated somewhere on our website.

Here’s one I made earlier. Man, I miss Art Attack. Blue Peter, I was never a big fan of 🙂

Accessibility statements are useful to let your users know what you’re doing for them (and what you’re not able to do) as well as ways that they can improve their user experience, whether it’s through their choice of browser or adjusting some settings to make the site more usable for them. Worth an include.

Farewell, friends!

Written by Anita Mander, developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people’s creativity. Each post in this series is one staff member’s take on the world of web, design and things online. We hope you enjoy it.

Multilingual Madness: An insight into one of our biggest projects to date.

If you’ve been keeping up with the latest tweets from extramilecomms, you’ll have seen that the website development for our EU funded multilingual project is well underway.

What’s it all about?

SPiCE³ (Sectoral Platform in Chemicals for Energy Efficiency Excellence) is a project designed to enable the European chemical industry to improve their energy efficiency, particularly aimed at SMEs as they make up a substantial part of the industry.  It aims to bring together a range of expertise, tools and knowledge from partners representing 11 countries and expert organisations within Europe.

What part does ExtraMile play in the project?

It’s our job to create an online platform which will act as an information hub, allowing for expertise to be shared and the aim of improving energy efficiency to be met. No pressure then!

Just some of the key requirements of the website:

What were our design considerations?

Once the navigation structure had been finalised and with the above ideas in mind (and many more), our designer Matt got to work on the design. He created a corporate yet modern concept with bright splashes of colour, which would work well with the large navigation structure and create the user friendly feel that we were aiming for. At this point, the layout of the website elements was also carefully considered.

Building a multilingual website meant that we had to be aware of language differences and how they could affect the visuals and overall user experience. Our ongoing work on multilingual email marketing campaigns may have helped a little with this!

For example, a menu item “On site training” when translated into German is “Unternehmensinterne Schulungen”… almost twice as long! We decided to go responsive too so this added another layer of complexity meaning that the design needed to be capable of adapting elegantly to a range of screen widths in any language.

We opted for a left hand vertical menu (to the right) to ensure that our navigation was easy to access on any device and looked near identical, regardless of the language it is being viewed in.

Another important aspect of the design for us was to place a large focus on the the key areas which users of the SPiCE³ website would benefit from. We placed Key Resources front and centre on the home page. Above this, quick access tiles to the assessment tool and user registration area. The top section of the home page was filled with a colourful geometric banner, scrolling through to guide users to useful areas of the website.

What were our design considerations?

I’ve been tasked with building the SPiCE³ website and bringing the design concepts to life. I began by researching the various technical solutions that we could use to achieve our range of requirements. The first decision was an easy one. I opted to build the site using the Joomla! Content Management System. It’s native multilingual support has been around for a while and is definitely impressive, extending to 3rd party components too.

Joomla! supports many languages, using translation packs (all Open Source and contributed by the Community) which contain the core translations for CMS elements like login buttons, system messages etc. Each translation pack places a folder in the back-end with its own language files for a developer to work with. This principle is followed for 3rd party components and plugins too, so each of these can have associated language files for any installed language, which you’re also able to create yourself if they don’t already exist.

The language/country codes you see to the right form part of any URL for the website. So if you’re on the About page and viewing it in English/UK, then switch the language to French/France, you’ll see the French version of the About page. Only the language code will have changed while the rest of the URL stays the same. This is great for SEO and helps maintain a more organised site.

The Apple Online Store provides a good example of this:

Here’s the iPod Touch page for UK – http://store.apple.com/uk/buy-ipod/ipod-touch
Here’s the iPod Touch page for France – http://store.apple.com/fr/buy-ipod/ipod-touch

After researching and comparing a number of 3rd party translation systems for Joomla!, I chose one which met our requirements nicely and used this within our site. It acts an interface for users to input their own translations for each language, managing the structural elements of the website (menus, tiles, headers, footers) as well as the main article content. So essentially, it allows us to duplicate our main elements and make the necessary modifications for each language we wish to translate in to.

The site has been built fully in its base language of English and I’m now working hard at implementing the multilingual functionality and translations, which we sourced at an earlier stage of the development. Attention to detail at this point is critical as you’re dealing with 12 times the amount of menus, modules, language files and variables you would normally have when building a single language site. Any non standard functionality must also be considered. Our site has a calendar, a forum, an article tagging system, social feeds and contact forms to name a few, so we’re making sure that each of these elements are available in their fully translated form for any of the participating languages.

Take a look at the shot of the forum below to see how it is viewed in German:

Watch this space for the final product, it’ll be worth the wait!