In which we look at real-life cases where we have helped customers solve their problems and grow their businesses.

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:

What Makes a Great e-Commerce Site?

Homepage Layout

Which? Magazine have announced the top 100 best online shops according to their readers. There were some really surprising results. The top prize with a customer score of 91% was WexPhotographic.com – a supplier of photographic equipment.

You might expect to see the online behemoths at the top of the list but in fact Amazon.co.uk came in a number 15 and Apple at number 25.

We thought we’d take a detailed look at Wex Photographic to find out why customers seem to love them so much. Here’s what we found.

Lightning fast

We got the stopwatch out and did some timing tests. Over 10 tests the homepage loaded in an average of 1.8 secs, which is lightning fast, especially considering the amount of photography on the page. Doing some basic searches from the type-in search box was even more impressive with average find times of 1.5 secs. This site just whizzes along!

Easy to understand category browser

The main category menu makes good sense and is written using jargon-free terminology. We’re not photography experts but we understood what we were going to get when we clicked through. Again, clicking main menu options gave us page-load timings of under 2 seconds on average.

Product photography and video

You’d expect great photography on a photography web site wouldn’t you? It’s amazing how photography lets down so many online stores. Most product pages have several clean and clear photos. A minor quibble is that you can’t zoom in and look at the surface textures of products, and some products had only one photo.

Ecommerce Product Video

The store features product videos as well as photography.

Details and specifications

The technical details are important! Measurements and specs can mean the difference between a successful purchase and a return. On this site we found the specifications particularly clearly laid out, and each product featured detailed descriptions of features and benefits too.

Accessories, cross-buys and freebies

We were impressed by the number of recommendations we were offered. For example when buying a camera, we were presented with compatible tripods to go with it. This suggests real attention to detail.

On many of the products we added to our basket, we were offered, free of charge, a useful extra to go with it. For example an astronomy telescope comes with a free torch – rather handy when you’re in the middle of a field in the dead of night we suspect!

The purchasing journey

Checkout Buttons

Checkout was clearly signposted

Adding to basket and moving through the various processes to checkout was a breeze. The route was clearly signposted with large and obvious Checkout buttons.

At each stage we were offered phone and fax contact numbers which would be very helpful for a difficult purchase. We were also shown images of the different cards you can use.

When it came to creating an account we found the instructions clear and obvious. The signup/signin page was one of the clearest we’ve seen and setting up our customer details was also clear and straightforward.

Clarity of contact options

Wex display their phone number prominently on every page. This seems to encourage people to phone in and speak to a real person. Customers are looking for contact points such as phone numbers and opening times, even if they don’t actually want to use them. Wex’s site also features a live chat option – another handy way to contact them if you’re perusing the site and need advice.

Wex Login

Login and signup are crystal-clear

There is a strong social media presence with links to their Facebook, Twitter, Google+, Flickr and YouTube channels on every page. The 45,000+ Facebook Likes displayed certainly gives the impression of a sizeable fan base.

Community

It is rather rare for e-commerce sites to encourage on-site user-generated content such as community forums. But Wex have taken the plunge and offer a fully-fledged forum where photography enthusiasts can mingle and chat. The blog features hundreds and hundreds of product reviews, tips and advice posts.

Plus there are photography competitions and even seminars and events beyond the store. All this creates a really strong impression that Wex is super-keen on talking with their customers and sharing their passion for photography.

Post-purchase support

If you’re paying £2000+ for a camera you want great support. As well as the phone contact option, Wex helpfully offer a list of manufacturer helplines so customers can speak direct to the manufacturer.

Summary

All in all the experience of using the site was very good. Fast page-loading times and clear navigation mean you can get to what you want quickly. The generous add-ons and freebies make you feel valued and important. The vast amount of technical information, background knowledge and support really comes across. Delivery times and contact points were clear and easy to understand.

It’s not hard to understand why this site has come out number in the Which? Online Shops Satistfaction Survey.

PS: we are not connected in any way at all to Wex Photographic!

Related links:

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.