The Liip.ch accessibility certification: a quick look back

Liip entered 2017 with a big success: liip.ch [1], our main website, has been certified as WCAG 2.0 AA compliant by the Access for All foundation.

Where it all began

Historically, Liip has always put great care into web content accessibility. We consider it as an important feature of any web project, for all kind of users, regardless any disability.
Of course, most of the time, customers are simply not aware of the topic at all and this is where we try to first make them know about it and then actively participate.
Depending on the sensibility of the customer, this may take long. But in the past, we have already helped a few of them to achieve the certification.

Ironically, though, our own website was not certified so we decided to start the official certification process in 2014. Without starting from scratch but using our freshly revamped website as a base.

Who did it?

Let me get this out of the way: the accessibility process is never a one-man show.
In order to achieve anything, it’s paramount to involve all the “actors” of a web project: from the end users to the editors, and, of course, the people involved in the implementation.

In fact, as an informal team, designers, UXers, marketing experts and developer, all contributed to the final implementation.
I may say that everyone both brought and took away something from working on this project.

For instance, marketing people and UXers, but also developers, were surprised to discover that the accessibility improvements that they made, in the end, benefited also them, as regular website users.
Furthermore, they’ve been forced to see things from a different point-of-view, which is always a good thing.

Challenges on the way to accessibility

So, it took us three years and, as you may have guessed, it’s not been a pleasure cruise and I am saying this for two single reasons.

Customer projects first

Customers’ work has always had the priority, as it’s normal for an – albeit mid-sized – agency since this is what makes us pay our bills.
We worked on the accessibility certification whenever we had some “spare” time to dedicate, basically between projects.

No worries, we can fix it

We had completely relaunched our website a bit more than one year before, so we could not afford to completely rebuild it from scratch.
We decided to apply the necessary changes to achieve the certification to the existing website.
Unfortunately, it wasn’t the wisest decision.

We faced quite a few issues that simply would not have been existed in a website designed and implemented with the “accessibility in mind” from the first day. One example is the colors contrast which was not enough for most parts of the website. We wouldn’t have needed to fix this if the design had addressed the issue since the beginning.

What we actually achieved

Our main goal, what pushed us to get the official certification, was (and still is) to show that we can make visually appealing websites (or web applications) accessible, removing all kind of barriers to the benefit of all users.

It was pretty obvious, in fact, that the previous design had a few “flaws” that impacted “normal” users too.
For instance, the page header elements were barely readable for non-visually impaired users too.
So we fixed that issue for everybody.

Page header before the accessibility fixes

Page header before the accessibility fixes

Page header before the accessibility fixes

Page header after the accessibility fixes

Nevertheless, also thanks to the great collaboration with the “Access for all” foundation, we managed to fix everything and achieved the AA certification in January 2017.

What’s next?

The weak point of all the certification processes is to keep up with the high standard achieved.
This means that even greater care need to be taken in keeping the website accessible both from the design and content editing point of views.

The main “weak point” is content editing. Usually, the presentation stays pretty stable during the website life cycle but content can become “dirty” and hinder the accessibility.
One of the most effective ways to prevent this is to enforce the production of accessible content through carefully thought-out UIs and editing processes. I am thinking, for instance, about requiring the editor to enter a value for the “alt” attribute for images.

Over the years, the sensibility against the content accessibility topic has grown a lot within Liip so I am pretty confident that everybody will contribute to keeping the website as accessible as possible.

[1] the accessibility certification only applies to the main liip.ch website. Related websites like socialwall.liip.ch or blog.liip.ch are not concerned.

Tags: ,

The Data Stack – Download the most complete overview of the data centric landscape.

This blog post offers an overview and PDF download of the data stack, thus all tools that might be needed for data collection, processing, storage, analysis and finally integrated business intelligence solutions.

(Web)-Developers are used to stacks, most prominent among them probably the LAMP Stack or more current the MEAN stack. On the other hand, I have not heard too many data scientists talking about so much about data stacks – may it because we think, that in a lot of cases all you need is some python a CSV, pandas, and scikit-learn to do the job.

But when we sat down recently with our team, I realized that we indeed use a myriad of different tools, frameworks, and SaaS solutions. I thought it would be useful to organize them in a meaningful data stack. I have not only included the tools we are using, but I sat down and started researching. It turned out into an extensive list aka. the data stack PDF. This poster will:

  • provide an overview of solutions available in the 5 layers (Sources, Processing, Storage, Analysis, Visualization)
  • offer you a way to discover new tools and
  • offer orientation in a very densely populated area

So without further ado, here is my data stack overview (Click to open PDF). Feel free to share it with your friends too.

Liip Data stack version 1.0

Liip data stack version 1.0

Click here to get notified by email when I release version 2.0 of the data stack.

Let me lay out some of the questions that guided me in researching each area and throw in my 5 cents while researching each one of them:

Continue reading about The Data Stack – Download the most complete overview of the data centric landscape.

Tags: , , , , , ,

Swift Alps Conference – experimentation and collaboration

The Swift Alps Conference has a special format focused on experimentation and collaboration. This is my report of the conference and the workshop Kilian and I held. The slides are available below.

Last month my colleague Kilian and I were pleased to attend the Swift Alps Conference, an experimental conference about Swift taking place in the Swiss Alps. This conference had a different format from what one can expect from a typical software development conference. In this case the format was more focused in experimenting and collaborating with other attendees with the goal of learning something new.

Experimenting with strangers

Continue reading about Swift Alps Conference – experimentation and collaboration

Tags: , , , , , ,

Why bother with User Testing? Part 2 : Answer 5 common objections

User Testing is essential, just like I explained it in my last blog post. But your client / boss refuses to pay for this option. No, sorry, this is not an option. At all. They will argue that there is no money , that there is no time left, that the product is super simple, they already know the users…

1. Why bother with user testing? We perform well!

Client: no need for this, our product is great, we’re not leaders for nothing.

fatboyslim_greatest_hits_cdcov

Designer: Oh really? If you never test it with users, how can you be sure that they don’t struggle regularly on your product?

Continue reading about Why bother with User Testing? Part 2 : Answer 5 common objections

Tags: , , , , , , , , ,

Accessibility: make your website barrier-free with a11ym!

Accessibility is not only about people with disabilities but also about making your website accessible to search engines robots. This blog post shares our experience with making the website of a famous luxury watchmaker more accessible, an important e-commerce application. We have built a custom tool, called The A11y Machine to help us crawl and test each URL against accessibility and HTML conformances. Less than 100 hours were required to fix a thousand of strict errors.

Issues with unaccessible application

Accessibility is not just a matter of helping people with disabilities. Of course, it is very important that an application can be used by everyone. But, have you ever considered that robots are visitors with numerous disabilities? What kind of robots you may ask, well: Search engine robots for instance, like Google, Bing, DuckDuckGo, Baidu… They are totally blind, they don’t have a mouse, they don’t have a keyboard, they must understand your content only with the source code.

Whilst it is easy to consider a man or a woman with a pushchair having a bad time in public transport, someone color-blind, a widespread disability, could also have issues browsing the web.

Continue reading about Accessibility: make your website barrier-free with a11ym!

Tags: , , , ,

A fairly complex Drupal Commerce site: freitag.ch

Freitag logoOur latest site with Drupal Commerce 1.x went live in July 2016. It is Freitag. Since then we’ve been adding several new commerce related features. I feel it’s time to write a wrap-up. The site has several interesting solutions, this article will focus on commerce.

First a few words about the architecture. platform.sh hosts the site. The stack is Linux + nginx +  MySQL + PHP, the CMS is Drupal 7. Fastly caches http responses for anonymous users and also for authenticated users having no additional role (that is, logged-in customers). Authcache module takes care of lazy-loading the personalized parts (like the user menu and the shopping cart). Freitag has an ERP system to which we connect using the OCI8 PHP library. We write Behat and simpletest tests for QA.

We use the highly flexible Drupal Commerce suite. 23 of the enabled Freitag contrib modules have a name starting with ‘commerce’. We applied around 45 patches on them. Most of the patches are authored by us and 15 of them have already been committed. Even with this commitment to solve everything we could in an open-source way we wrote 30.000+ lines of commerce-related custom code. Still, in March 2016 Freitag was the 3rd largest Drupal customer contributor.

Continue reading about A fairly complex Drupal Commerce site: freitag.ch

Tags:

Five Steps to define your perfect Digital Learning Environment

Sometime ago, I ran into a quote about learning that sticks into my mind. There are a lot of quotes hunting the social media networks, but this one just didn’t want to go away. It was the starting point of a reflection on how to create a great learning experience for today’s learners. I end up with five simple but essential steps that I will share with you in a series of posts. We will start today with a short overview of these steps.  

Digital Learning Environment in 5 steps

 

This quote from Albert Einstein resonates to me like the perfect antithesis to most of the Learning Management Systems that I’ve seen up to now. In terms of technology and functionalities they are perfect, but there is no experience, no emotion when you use them. They deliver the exact opposite of what learners expect: they deliver just information.

Learning is an Experience

Continue reading about Five Steps to define your perfect Digital Learning Environment

Tags: , , , , , , , ,

How to reduce your development and maintenance costs with APIs?

An API-based solution has many advantages. The biggest one is the significant spare on development and maintenance costs, thanks to a modular infrastructure. With the example of a recent work for a watch manufacturer, this blog post explains you in 4 points what added value an API can bring to your IT environment.

Context: a manufacturer’s production line without a central server

We were recently involved in the digital transformation of a manufacturer’s production line. The main issue of this manufacturer was control-desktops that were not centrally managed. In consequence, for each code change, an update was required on each control-desktop. It was an expensive and time-consuming process.

Production line - A

This image represents a production line with standalone control-desktops, and their costly maintenance routines.

Continue reading about How to reduce your development and maintenance costs with APIs?

Tags: , , , , , ,

User Testing Part 1/2 : Why you should perform them – The risks you avoid

If the team working on a project is competent, why should it be bothered with user testing? Because user testing does not mean that anyone is not competent enough. User testing is about avoiding risks and improving a product.

Great teams sometimes deliver wrong products

Yes, why?  We perform WELL, we are talented designers, Product owners, Product designers, we know our business, we are good enough so that we don’t design unusable stuff… Therefore, our clients can rely on us for delivering simple, intuitive and cutting the edge experiences through great products…

However, there are terrible websites online. There are terrible products on the shelves, there are garments that just don’t fit what they are supposed to, there are tools supposed to simplify our lives, but they are just bringing more complexity to our lives.

Continue reading about User Testing Part 1/2 : Why you should perform them – The risks you avoid

Tags: , , , , , , , ,

Easy Storyboard translation in Xcode with Swift3

In this post I explain how we created a modular library. Today we are happy to release and open source this lib. You can find the code on GitHub. Our objective was to have one set of translation files that could be used in the storyboard and Swift.

In our multilingual iOS projects, we always struggled to translate storyboards in Xcode. We checked all around CocoaPods, but couldn’t find any efficient solution so far. Every time, we ended up with multiple versions of the storyboard along with multiple versions of ‘Localizable.strings’. It was hard to keep everything under control, specially when translations needed to be updated throughout all files.

Continue reading about Easy Storyboard translation in Xcode with Swift3

Tags: , , , , , ,