News and views on new and emerging technologies and how they affect businesses today.

Add HTTPS to Your Website to Help Search Rankings

Browser toolbar with SSL certificate

In 2014, Google announced that HTTPS would be used as a factor in search rankings

At first, webmasters saw little difference in search rankings and at that time only around 7% of page-one Google results used HTTPS. That figure has climbed dramatically in the intervening two years, and now around 30% of top-level Google websites are using HTTPS.

What is HTTPS?
HTTPS secures web traffic as it passes between the user and the web server. The traffic passes through an encryption process, meaning it is less easy to hack. This is particularly important when the user is sending confidential data such as name and address details or credit card data across the web.

How do I get HTTPS on my website?

To secure your website, you need to install an SSL certificate. This is a document that can be read by your web browser which is signed by an authoritative source, and giving a guarantee that the website belongs to who it claims to be, and ensure that traffic is encrypted as it passes through.

You’ll recognise the presence of an SSL certificate because:

  • The URL of the webpage will begin with https:// rather than http://
  • There will be a padlock icon near to the URL in your web browser
  • In some cases the padlock icon will also display the registered owner of the website

Is there more than one type of SSL certificate?

Yes. There are at least three levels of SSL certificate, and they vary widely in price. Here’s a handy reference guide:

Extended Validation (EV) Organisation Validation (OV) Domain Validation (DV)
Encryption Yes Yes Yes
Level of validation Thorough vetting of the organisation Some vetting of the organisation No company vetting
Right for e-commerce sites
Financial sites
Gaming and betting sites
Online banking
Membership sites
Forums
Social networks
Sites which collect customer data via forms
Static informational sites which collect no data
Price High Medium Low

What else needs to be done apart from installing the certificate?

Whilst your main task is to purchase and install the certificate, you’ll also need to do some housekeeping on your website to keep things working correctly and ensure you don’t lose any search engine rankings.

Firstly you’ll need to ensure that any requests on your site that come into the old http:// version of your site are correctly diverted to the new https:// version. How you do this will depend on the way your website is built. As all of your URLs will change, you need to ensure that the diversion is set up correctly otherwise you will lose search rankings. We can advise on how to do this.

Secondly you’ll need to ensure that all images, fonts, videos and other page elements that are contained in your web pages are also served via https://. Otherwise the padlock icon will appear broken or greyed-out. Again, this is a web development task that we can help with.

How much do SSL certificates cost?

The price will vary according to the strength of the certification. For DV certificates, expect to pay between £40 to £50 per year for your certificate. For EV certificates, expect to pay £150 – £200 per year. Installation costs will be also be required. Why not contact us for a quotation on the cost of adding security to your site?

Get SSL Quotation

BBC News Moves to Responsive Design

BBC News WebsiteToday the BBC has announced that after several weeks of A/B testing it will move all users to it’s new responsive website design.

Responsive design means the same site present itself differently according to the kind of device that it’s being viewed on.

Usually this means having more horizontal content on desktops and on mobiles using bigger text, and fewer or just one column of content, with content stacking up vertically instead of horizontally. This means less pinching and zooming on mobiles, links that are easier to click, and forms that are easier to fill in, while at the same time delivering the rich user experience that desktop users demand.

We’ve been using the responsive design for a few weeks and we like it. It focusses the user on the content not on the presentation, which is Rule #1 of great web design. We didn’t much enjoy being directed to a separate website when viewing the site on mobile, but now we’ll stay on the main bbc.co.uk/news URL.

The BBC news team have said that up to 65% of their traffic is now via mobiles and the old desktop site was built four years ago when the conventional wisdom was to build different sites for different devices. They also have a great mobile app which is specifically designed for mobile and there are no signs that will be withdrawn.

  • Visit the new BBC News website
  • UKcentric build all new websites as responsive as standard.

 

The Challenges of Accessible Website Design

What is website accessibility?
Website accessibility is the process of designing websites which have no barriers to access for people with disabilities. Consideration must be given to blindness and low vision, motor disabilities and the widest range of cognitive abilities.
For most customers, the primary concern in web design is reaching the largest-possible audience. Sadly, accessibility is often the last thing on the customer’s mind, and we have to gently steer the customer towards accessibility considerations.

Recently we had a web design project that turned this on its head. Chris McCausland is a stand-up comedian who is also blind. Our commission was to build a site which would be attractive and professional-looking to his sighted fans, as well as his fanbase of blind people.

We had to design accessibility-first, and this threw up some fascinating challenges.

Screen-readers

There are many screen-readers including browser plugins and operating system level readers. Chris uses VoiceOver on the iPhone and we also tested using Jaws installed on our development PCs.

The challenge

The main challenge was to strike the right balance between looking great for the majority of users whilst still being 100% accessible via screen readers. Meanwhile, it was vital that Chris could edit the site himself – adding blog posts, editing pages, adding images etc.

Chris McCausland

Chris McCausland

After research into the latest accessibility advances with Content Management Systems, we chose WordPress.

We then needed to find a WordPress theme that was as accessible as possible out-of-the-box. Many themes have too many bells and whistles to allow easy browsing with screen readers. After trialling many themes, we found “Raptor”, which has a great balance between semantic HTML and good looks.

Semantic HTML

HTML is first and foremost a semantic language, and design and visuals should be separate from the core HTML.

Semantic HTML means that menus, page titles, div sections and images can be described by the screen reader and make sense sonically as well as visually. In other words the HTML should convey the meaning of the page, not the visual appearance.

We had to customise the design so each block of text was positioned in the right order semantically, even if positioned in the “wrong” order visually.

Accessibility in WordPress plugins

While WordPress itself is designed with accessibility in mind, the same cannot be said for plugins which are developed by third-party developers.

We had to make significant customisations to the sharing plugin AddThis, the MailChimp signup form plugin and Contact 7 forms to get these working easily using a screen reader.

Putting it all together

This was a really interesting build which put accessiblity top-of-mind. Meetings with the client took place using screen-readers and smartphones. Testing involved shifting div blocks around, customising plugins, and trying our best to move away from our visual bias and think “audio” at all times.


See also:

Integrating Google eCommerce Tracking with WorldPay 2014

Google Analytics WorldPAyAs many developers know there have been issues for a long time integrating Google eCommerce or Google Analytics tracking with WorldPay hosted payment solutions.

The problem arises because both of these tracking systems use JavaScript to read the shopper’s cookies, tracking customers from clicking on an ad in AdWords all the way through payment. This JavaScript must be placed on the merchant’s site in order to read the tracking cookies that Google has placed there.

Unlike other payment providers, (SagePay, PayPal etc), WorldPay do not provide a way to return a customer to the merchant site complete with their payment information. Of course WorldPay supports callbacks, but these callbacks are called from WorldPay, not the customer, and therefore the customer cookies are not available to pass to WorldPay as part of the callback. Instead, WorldPay provide a way for merchants to show custom pages on payment completion via their own servers – but these custom pages are called up from WorldPay and sucked into a WorldPay-delivered page. 

These custom pages cannot currently contain JavaScript due to the risk of Cross-Site Scripting (XSS) attacks. It’s a reasonable security precaution but it stimies the use of Google Tracking codes.

Over the years various solutions have been proposed, including showing an iFrame within your response page. These solutions work for a while but WorldPay always seem to shut them down after some time.

As of the time of writing Google eCommerce tracking is not supported via WorldPay and although they say that new payment pages will be available in Q1 2015 which may support such functionality, we are not holding our breaths! Solution: switch to SagePay!

Case Study: Creating PDFs From ASP.NET Automatically

We completed another interesting project using technologies that we don’t normally use – creating PDFs from ASP.NET.

Our client supplies materials around the world to research institutions. For decades, every year they produced a paper-based catalogue – an impressive heavyweight document – which they send to all their clients and anybody else who wanted one anywhere in the world.

This was a successful marketing strategy and great customer service, but extremely expensive and very time-consuming.

They approached us to find out if we could automate the production of their product catalogue and make it downloadable from their web site. We said “Of course!” Then we had find out how to do that.

PDFs from ASP.NET

Since their web site technology stack includes ASP.NET, C# code, and Microsoft SQL Server, it made sense to source a software library that would easily fit in. We looked at several PDF libraries for ASP.NET and found the  most popular to be iText – but when we received a license quotation from them we realised it would not be financially viable to use this software. In the end we plumped for PDFSharp and MigraDoc.

Getting the data

Once installed, these libraries allow programmers to create PDF documents, add pages, images, paragraphs, tables of data, tables of contents, headers, footers, page numbers – exactly what we wanted.

First we created software classed that would extract the relevant data from the database, using the specified currency – our clients sell in GBP, Euros, US dollars, Japanese Yen and Swiss Francs.

Then we created classes using PDFSharp that would inject the product data in the right format and right currency into the document.

Once that was done, we focussed on building a table of contents.

Tables of Contents

Seemingly simple, the table of contents turned out to be one of the most challenging parts of the project. The client wanted two nested levels of contents – the main material and within that, the form of the material (sheet, rod, wire etc). All these had to linked to the relevant pages in the document, but of course it’s impossible to know which pages those products might appear on. Fortunately PDFSharp provides a way of setting up a bookmark and taking care of the page numbers itself – a very handy feature which makes internal linking easy.

Finishing touches

Finally we added a full-page cover image with the company’s logo, a terms and conditions page and introduction pages. We added headers and footers to the product pages with the company’s logo as a watermark to add polish and panache to the finished product.

Automatically generating the catalogue

The last piece of the project was to get the catalogue to be generated daily in each of the five currencies. To do this we set up a .net page which generates the catalogues and saves to the server’s filesystem, making them available to be linked to for download. We set up a scheduled task to allow this to happen daily at 5am. Finally, we added links to the catalogues from all the relevant points of the web site.

Good outcomes

This automatic system now does away with the heavy, expensive and out-of-date catalogue. Now our client can point their customers to a brand new downloadable catalogue that is produced every day so has the most up-to-date prices. They will save considerable amounts by not having to send the paper-based catalogue around the world. And customers can now download the catalogue in their preferred currency at any time from anywhere in the world.

Visit the client site

Case Study: Geolocation and Automatic Currency Detection

Globe
Photo credit: Kevin M Gill

Our client has a thriving e-commerce site which we built a few years ago. They sell all over the world and accept payments in a number of different currencies. The challenge with this project was to ensure that customers outside the UK were presented with prices displayed in their home currency.

For this we implemented a geolocation lookup using the reliable ip2location service. This takes the user’s IP address and performs a lookup against ip2location’s database, returning the country the customer is in with extremely high levels of accuracy. The service is fast enough to be done on-the-fly without any noticeable slow-down in accessing the site.

Performance – speed is king

Geolocation

The process of identifying the geographical location of a person or device by means of digital information processed via the Internet

Performance in any web application is key, so instead of performing the lookup every time a visitor arrives at the site, we cache the lookups in the database. We first perform a check against the database to find out if we have already done a lookup on the IP address within the last few days. If so, we don’t need to call ip2location for the country, and we retrieve it from the database. This makes things even faster.

Testing

One of the challenges of web development is finding out what your site/pages look like in countries outside the UK. To do this we employed several techniques. We tested using many web proxy services, and also utilised a great service called GeoPeeker to get a view from the USA, Brazil, Singapore, Ireland and several other locations.

Success

Now the service has been launched, so customers around the world are presented with their “home” currency. This is great customer service and is a handy time-saver for customers who no longer have to change their currency from UK pounds to their home currency.

What is Responsive Web Design?

iPhone UKcentricHave you ever wondered what all the fuss is about “responsive” web design?

Responsive design aims to present a site that’s tailored to the device on which you are viewing it. For example, on the web, screens are generally wider than they are tall (landscape format). But on mobile, screens are usually taller than they are wide (portrait format). So a site that looks great on the web probably won’t look so good on mobile.

On the other hand, if you turn your mobile sideways, you’re back to landscape format again!

Responsive design aims to solve all these problems by delivering a different layout according to your device. The general aim is avoid the user having to scroll in more than

Mobile web traffic now accounts for about 28% of all web traffic 1 – so if your site is not mobile-friendly or responsive then you risk alienating an entire quarter of your audience. No business can afford that.direction (up and down scrolling is fine) and to avoid pinching and zooming.

The task of the web designer is to ensure that sites can detect the device (known as browser sniffing) and deliver a user-friendly format in response.What’s more, mobiles have much smaller screens, meaning web-size fonts are going to be difficult to read without pinching and zooming.

If your site is looking nasty on mobiles, then get in touch with UKcentric – we can redevelop your site in a responsive way to ensure it is fit for purpose no matter what devices your users prefer.

http://marketingland.com/mobile-traffic-now-28-percent-of-total-report-64218

Collection of smartphones

UKcentric’s ever-growing collection of test phones

 

 

 

Use HTML5 for Killer Cross-Platform Graphics

PrezzieFrames screenshot

We’re pleased to announce the launch of a graphically intensive site developed in HTML5 using the Canvas technologies.

PrezzieFrames is a site offering customers the ability to customize a photo which is delivered anywhere in the world in a top-quality silver presentation frame.

On the surfac

change the background image;e the idea is simple – a user can upload a photo from their phone or computer, and this is placed in a virtual frame. The user can then manipulate the photo in a number of ways:

  • move the photo;
  • rotate;
  • zoom;

Users can also add text to the photo image and choose fonts and colours for the photo. The aim of the user interface is to ensure the user is guided intuitively through the process at every stage, using skills they already have (point, zoom, rotate).

Under the hood, some complex JavaScript and HTML5 Canvas coding has been developed, to allow the manipulation and saving of the image from the screen to a JPEG file of high enough quality to be printed and delivered within the presentation frame.

We used the fantastic Kinetic JS engine to deal with complex image manipulation routines.

WordPress Hosting

WordPress logoWe’re delighted to announce we have added a great new service to our repertoire. WordPress is a fantastic blogging platform that is powering thousands of sites all around the world. Now you can have a WordPress-based web site on your domain for just a few pounds a month.

No technical hassles

It’s so easy to build a new site on the WordPress platform, a child could do it (many have!)

We will take care of installing WordPress onto your web site, so you don’t have to worry.

Choose from thousands of free and premium themes to make your site look incredible, in just minutes!

Support is just around the corner

Based in London, we’re proud to offer a UK WordPress hosting service that’s local to you whereever you are. Just drop us an email or pick up the phone and we’ll be able to offer advice and support.

And if that’s not enough, there’s a thriving community of WordPress addicts out there who have answers to just about every WordPress question you can think of!

How do I start?

Simply contact us and request WordPress to be installed on your site. We’ll do the rest!