Introducing the idea
It’s well known that the amount of mobile devices in use has grown significantly in the recent times and it looks like it has no plans to stop anytime soon. More and more people are browsing the web on their phones and tablets while traveling, sitting on the couch or even lying in bed. With this in mind the demand of a mobile-friendly version of Pathé Thuis grew and it was time to introduce it to the largest user-group; Apple iPad users. In my mind responsive web design doesn’t do the trick when you’re planning to deliver top notch UI, interaction and performance. So the front-end had to be built from scratch, feel like a fancy native app even though it runs as a web app and act intuitively on the iPad.

UI Prototyping
After the design was done it was time to do some prototyping. This was the first big - read: gigantic - iPad-only website that we would build thus we needed to figure out a way to port our Supersteil smoothness and feel to this tablet. We started with creating the UI, which was a great move. This way we could define the overall UX. As it was known before we started, the interaction of menus, buttons, sliders, input-fields, etcetera was completely different compared to web. We were used to define mouse events such as scroll, hover and click and ended up using a combination of multiple touch-events.

"If you think you can use events 1:1 on the tablet and get the same level of interaction - think again!"

Starting with the CSS, we discovered we could use the active-state instead of the hover-state and use some nifty Javascript functions to port the desktop ‘hover’ event to the tablet. This simple fix enabled us to use CSS like we were used to and let us give the user feedback when touching the element with just CSS, which was great for performance because there’s no JavaScript involved during rendering. Another small function we wrote is focused on the interaction and feedback speed. When browsing with a mouse, users are used to instant and snappy feedback. The ‘click’ on a touch device is slightly different and we actually disabled it by replacing it with our own function involving touch start, move and end. We made huge improvements, measured in milliseconds, and the interaction became just as snappy as a simple mouse-click.

Mouse and touch events

This small JavaScript library gave us a solid base to start developing and evolving the UI elements. One at a time we tried to reproduce the UX as seen on the desktop version of Pathé Thuis and optimized it for iPad where possible. Adding custom swipe events, combining ‘swipe - scroll - taps’, displaying retina sized images and using build-in Safari features makes a great journey.

"In the end we delivered a complete UI library which is fully built & optimized for the iPad, with the high level of interaction and immersion the users are familiar with from our studio."

The great thing about the library was that we already had an overall feeling of the project and we could easily change and tweak elements. We only started developing the product after we were completely satisfied with the UI. After several developer-designer chats, we made some minor changes and checked the todo with a smile.

Developing the product
In the development stage of Pathé Thuis for iPad our back-end and UI libraries were fully available so we already had two out of three stones to build this digital experience. The last stone was the biggest and certainly the heaviest one: the front-end. We worked on two screens; on one we had the specific iPad design, on the other the current pathe-thuis.nl website. The iPads lying in front of me had a blank Safari tab waiting to get filled bit by bit.

"A last walk through the interaction documents & PSD-files and we’re off!"

Developing the pages and combining the UI elements was only one part of the job and not even the biggest. After building several pages, writing lots of CSS-lines and compiling multiple JavaScript functions, the separated pages needed to blend into one another when changing the URL. Luckily iPad supports many HTML5 features, including the History API. This gave us the opportunity to push - add - an url to the history and change the location bar of Safari without refreshing the entire page. Instead of loading an entire new page, including all library-files and parsing the framework, we could just load a new page through AJAX and overwrite our content holder within the framework. This results in better performance, less loading times and no blank or even flickering Safari pages. Considering the amount of current visitors, it’s always good to cut on requests and bandwidth.

During development we kept in mind that the site needed to feel as native as possible. While going through many native iOS apps we made a list of patterns which we fancied to implement in the Pathé Thuis project. One example is the smooth scrollable content - both horizontal and vertical - which is partly supported by Webkit. While developing the homepage we ran into several bugs caused by Webkit scrolling, so we needed to expand our JavaScript library and included a custom version of iScroll. This external library didn’t completely do the trick for us so we extended it according to our needs and also fixed some minor bugs. Check this iScroll page for more info if you’re into mobile development.

Mobile Webkit support

Webkit also offers great CSS properties we used to optimize rendering and smoothen things up. Since we’re only developing for iPad we could use all the Webkit elements we wanted and didn’t need to make adjustments to support other browsers as well. Some examples of the properties we used are ‘-webkit-backface-visibility’, ‘-webkit-transform-style’ and ‘-webkit-transform-origin’. A combination of clean CSS and Webkit is a great performance optimization which raises the FPS and lowers the amount of re-painting and its paint-time .

You could write gigantic and fancy scripts and erase every single whitespace in your CSS, but the fact is: the product has to look and feel like the designs and the UX we had initially planned. So after we finished the beta, we sat down and discussed the product as it was on that day. It was a beta, so there was still space for changes, add-ons and feedback - which we all noted down and prioritized in lists.

"These lists became the planning of the coming weeks and at the end of the lists was the deadline a.k.a. the launch day."

The last todos was adding natural feeling visual feedback for the user. This means all interaction, effects and animations had to be as smooth and intuitive as possible. If a user noticed anything on any kind of interaction, this means it’s not 100% natural / logical and we could optimize it. That said, the user should be anyone else but the designer and the developer. These changes were sometimes hard to manage but we fixed them eventually. Another case was the error handling. We made sure to remove as many error cases as possible and if they still existed - because of external influences are specific user hacking - we just made them as pretty as possible and enabled the option to retry the action. In case of 4xx and 5xx errors we included an option to continue browsing in a different direction.

In the end we managed to finish a great product which is widely tested and almost ready for launch day. I’m specifically saying ‘almost’ because it’s actually never finished - which I’m glad of.

Optimizing the product
The bigger and fancier a product, the more there is to optimize, this was also the case with Pathé Thuis. Lots of CSS, Javascript, PHP and images were used and gathered in folders. Furthermore, each folder contained many files which were ready to be optimized. Starting with the images, we combined several images and used the tool ImageOptim to reduce both PNG and JPG file size, which resulted in less requests, bandwidth and loading times. This was a huge saver and if you never optimized your images before launching nor heard of this tool: it’s about time! Second in line was CSS, numerous lines of classes, data-attributes and properties which were about to get stripped, optimized, merged and even deleted. It was a great thing to run through the files and Chrome Inspector again to see if we could reduce the number of CSS lines and merge some properties.

Browser console and paint time

At last there were these PHP and JavaScript folders, both gigantic collections of functions extending one another and calling each other’s names. I think it’s always a good thing to check your functions after a build and rethink if it’s the best way of handling the data & objects. Realizing this site might be visited many, many times a day it just had to work fast, smooth and correct. Also element-selection had to be as fast as possible, data leaks avoided, errors handled correctly and objects cached when possible. Simply put: it had to work like a charm! This resulted in combining functions or even exporting them to reuse it within others. We ended up with many logical files with functions globally implemented and easy to configure. This is great for quick tests and changes.

Launch day
At the end of this great journey it was time to launch the product, a product that we’re really proud of and stoked to show to the users. We also made some minor tweaks and polished some rough edges just before launch. After all we are perfectionists at Supersteil. We gathered up the people we needed and setup a conference call, we were used to have these calls on a regular basis. This way we could communicate, test and switch quickly during launch. When everything was running online it was time to enable the great redirects so the iPad users would automatically visit the new Pathé Thuis for iPad environment. It isn’t a launch day without bugs & chaos, but I’m proud to say we managed to fix everything really fast!

"The day after the launch we celebrate the event properly; gathered as a team and popped some champagne."

What’s next
Like I said before, this product is actually never really ‘finished’ because it has great potential and many possibilities for new features and even optimizations. It’s time to sit down and watch the crowd play with it. After some weeks it’s always great to check out the user stats and responses. Small bugs need to be fixed and minor tweaks need to be done to both CSS and JavaScript. We might even change some pixels, who knows? The fact is that we’re proud of this product and we think it’s a great add-on for Pathé Thuis to have a place where the iPad users can easily browse and enjoy a fancily built environment.

What are your thoughts?
After reading such a long post you might have thoughts you’d want to share or questions you’d like ask. Don’t hesitate and let’s get in touch right away. Check the bottom of this page!

Visit Pathé Thuis via Web or Touch now →