How we developed “The Missing Piece”

Jaka Gačić & Mario Novoselec

Budi dio koji nedostaje” (The Missing Piece) is a type of website that tries to mix modern technologies with goals it needs to achieve. Here are some of the technical challenges we had to overcome during the development phase.

Paralympic athletes’ passion for the sport, their ambition to achieve their goals and the ability to believe in themselves is remarkable, yet they lack the presence and support of the general public. So, leading up to the Paralympic Games in Rio, Allianz Croatia decided to invite the public in order to support the Paralympic athletes on their biggest sports journey. With this website, we presented athletes’ stories to the public and enabled them to show their support.

First step – design challenges

One of the most important roles of design is to give a solid representation of challenges that need to be solved, to the frontend developer. While iterating over design versions, our frontend and design department were able to quickly create prototypes of different ideas and see possible technical limitations. Before you begin coding, it’s a good idea to exclude different design blocks and to focus on typography and some “specialties”. In this phase, just try thinking about possible tools or libraries that could be helpful in the future.

In this case study, we will analyze a part of the design from our Dribble case.

Homepage is one of the crucial parts of the website because it has the “love at first sight” effect on the end user. Our design is fairly straightforward, you can see three athletes (who are the center of the campaign) and some call to action elements.

civ-b

When it comes to design challenges, the easiest thing to do is to put them all on a single list. That way you have a great overview of all technical challenges and you won’t lose a lot of time. With that idea in mind, we created a list of possible design challenges for the homepage with these five main items.

  • Background blending mode (support, polyfill, performance)
  • Athlete images (preloading, performance, optimization)
  • Switching between athletes (transition flow, speed)
  • UI elements like arrows and links (user interaction, mobile look and feel)
  • Overall homepage interaction (animation duration, focus on specific areas)

These five items represent the most important design challenges. Next to every item, we placed possible technical limitations. We create a list like this one for every site, as it allows us to conduct a more modular approach, even in this early phase.

Another type of design challenges consists of typography challenges. Here, you have to answer these questions:

  • What typographic elements are on the website (h1, h2, paragraph etc…)?
  • What types of fonts and font weights are on every page?
  • How will font scale on different screens?
  • Are there any specific problems with font base-line or line-height?

Answering these questions consists of analyzing every PSD file and converting them to reusable SCSS components (classes, mixins etc.). Only after this part of design analysis is over, you can start with the real “slice”, because the frontend developer can define the right approach and workflow to tackle defined challenges which makes him more efficient.

Making the web come alive

In the previous step, you could’ve easily noticed that this type of a website has enormous potential for user interaction, and that can push entire “look and feel” of the website to a completely different level. So before you start animating every button and every link, it wouldn’t hurt to get a few reminders about animation theory, as you can achieve a more natural look by understanding basic motion principles and element relations. For this side education, I recommend an article that blends modern CSS animations with classic design principles.

The most important fact you need to remember is that bigger elements move slower and have bigger ease, while smaller elements have a shorter path to travel and their speed is bigger. Also, keep in mind that every hover out movement must be faster than hover in.

In web animations, there are some performance tricks you need to follow. You need to consider to force load on GPU as much as possible. There are some articles on that subject, you can find them on CSS Tricks and FrontendMasters Course Presentation.

Animations on “Budi dio koji nedostaje” are based entirely on GSAP TweenMax library. It provides great performance, great support and an easy to use API. After determining core library, we found a problem in overall animation direction, which is very important for maintaining natural website flow. The end decision was (after experimenting with various possibilities) that transitions will go from left to right.

We’ll try to recreate some website elements on Codepen, with ease, duration, direction and flow being completely the same as on the original website.First of all, there is a preloader element. It was introduced to “beautify” the website loading and to hide image and font flashes from end users. Preloader needs to follow the website load process, but for this post, we’ll focus on the overall animation technique. On Codepen, you can find the complete source code of the preloader example. (rerun required)

See the Pen Preloader – Fill effect by Mario Novoselec (@mnovosel2) on CodePen.dark

Next, let’s focus on other interesting website element – “mouse tracking parallax”. Some may say that parallax is overused, but I think that, if used carefully, it can add another layer of depth to the website. While developing parallax, the main focus should be on the ease and duration, as it needs to be subtle and it must have that “soft” transition.

See the Pen Parallax mouse tracking concept by Mario Novoselec (@mnovosel2) on CodePen.dark

Lastly, there are some smaller UI elements that I’d like to point out. Their role is to give users another level of website interaction. They need to have a bigger speed and a more subtle ease.

See the Pen Arrow and hamburger hover effects by Mario Novoselec (@mnovosel2) on CodePen.dark

These animated website elements can give another dimension to a default static website. But all of this is second to performance. Loading speed and overall website performance are the main things that bring the best UX to the end user, so let’s check that out.

Optimizing performance

On this type of website, performance optimization can be divided into two main segments:

  • Initial website load
  • Transitions between pages

Making the website load faster for the first time is very hard to achieve. There are a lot of blocking resources such as JavaScript libraries, CSS files, images etc. JavaScript and CSS code can be combined into a single file to reduce the number of request between server and client, and this is a valid technique for standard HTTP protocol, but things will change when HTTP2 goes mainstream.

The biggest blocking resource on “Budi dio koji nedostaje” are definitely images. The technique we decided to use to increase the loading speed is to lazy load images that are below the fold (top part of the website that occupies entire screen). Thankfully, there is a great JavaScript library called lazySizes for achieving just that. Browser will, according to default behaviour, try to download and render every content inside “src” attribute of an image tag. By using lazySizes, “src” attribute remains empty and all sources are written in additional data attributes. They give you the option to specify width of the screen on which specific image will be loaded.

With this, some images will be completely excluded on mobile and will not consume any bandwidth.

Since the database is expected to have a few hundred images, it would be silly and slow to load them all at once. We have experimented with several different combinations of numbers of photos to put in the front and in the back of the gallery, and in the end we agreed that the best ratio is 15:8. After the initial load of the gallery page, all photos are loaded asynchronously, and user can see all the messages in the database by using the controls pad on the left, which actually implements the pagination through saved messages in chronological order. With each click on the plus control, the photos from the background are brought to front and new photos are fetched from database to the background. Once the minus is clicked, new 15+8 set of photos is loaded.

Now that the initial loading speed is relatively good, transitioning between pages still has that long delay, and we needed to fix that in order to achieve a smooth user experience. We did it with instant switching between pages.

The technique used on “Budi dio koji nedostaje” is called “push state ajax” or PJAX. There are a couple of plugins that try to solve this problem. Older plugin (gist snippet) commonly used for PJAX is called ajaxify, and it was our first choice for this website, but we soon ran into a couple of problems. The most notable one was the inability to control animation flow. That means we couldn’t easily control when and where will specific animation trigger. Also, some crucial events were not supported in initial version and the latest Github commit is 2 years old. We then considered using jQuery-PJAX, but it had problems similar to Ajaxify. In the end, we chose Barba.js.

Don’t let this funny name trick you, Barba.js is a very powerful and a very well documented library with examples that are easy to understand. Internally, it uses promises, which are very easy to handle. It also uses concepts of views, which means you can create a new view for a specific container and trigger different ones when appropriate. Most importantly, Barba.js enables a much easier interface for animating stage in and stage out of different containers.

But even though it sounds great, Barba.js also caused some problems with our typical development workflow.

Validating user input

One of the most important parts of this site are user input forms.

You can see one in the footer, on most parts of the site. This is the subscribe form and it’s used to collect users’ email addresses, which are then saved to our Mailchimp list of subscribers. Each address on this specific list receives our very special newsletter, informing the user about the ongoing events on the site. This form was introduced to visitors during our campaign’s teaser phase – the only page visible in that phase was a modified homepage. It had the same photos of our three athletes and a call to action inviting users to leave their emails in order to find out more about the campaign.

civ-b2

Users from that lists were the first ones to be notified when the whole site went live. The email they received invited them to visit the page and leave a message supporting our athletes. Using the advanced analytics tracking, we separated the users who did leave a message from those who didn’t, and after some time, we sent them a reminder about the campaign. This tool helped us spread the word and get even more messages for our athletes!

The other form is the one on the support page. Here we have two flows (hence two different forms), depending on a user’s choice whether to login with a Facebook account or leave the data themselves. If users clicked on the Facebook login, their data was fetched using the Facebook SDK. We only used the available public information like name and profile picture, so no additional permissions were needed. The picture was stored in our database along with the name and a user’s Facebook id, and we used that information to render the gallery showing all support messages.

Conclusion

What is so special about this page? Aside from the great design, vivacious animations and fast loading, it is the goal of spreading the word about the Paralympics and the lack of support for athletes. We want everybody to know of our athletes and their success. We want the visitors to read their stories and get to know them a bit better – what keeps them going and what pushes them to go beyond their limits in their pursuit of success. We wanted the users to see them as the world’s greatest athletes.

Having that in mind, we put the gallery into the focus. Unlike many others across the web, the target of these photos and messages are not the visitors of the site. They are for our athletes, whom we want to show our support to. They must know just how many fans they have among us and how proud we are at their pertinacity, inspiration and courage! That is why we went an extra mile to make this site as good as it can be. You can also help us, so hurry up and leave a message of support if you haven’t already. Let our athletes know how much we care!

Author

Jaka Gačić & Mario Novoselec

Jaka is a backend developer and is very passionate about exploring new tools and technologies. Mario is a frontend enthusiast. This duo goes along well, except when playing board games.

All stories by Jaka Gačić & Mario Novoselec

SIGN UP FOR OUR MONTHLY NEWSLETTER

Get more digital stories directly in your inbox.
Your email is saved
Join the discussion

No Comments

Share your thoughts

Let's work together  →
Go to top
css.php