Degordian web from a developer’s perspective

Slaven Vincetić

Software Developer

Degordian corporate web is different, innovative and most important – award winning! Now you have the chance to see the magic behind its development.

What is the worst nightmare of every developer? Enthusiastic designers who don’t believe in creative boundaries when it comes to their work. They can think of anything, and I really mean anything, because they are limited only by their own imagination. And who needs to implement everything they come up with? Me and my colleagues – Developers.

Still, we love our designers here at Degordian. They push the limits of their creativity on every project and, to make their vision a reality, we constantly need to innovate.

While working on the concept of Degordian web, the designers came up with the idea of contextual navigation. This means that the opening and revealing of every web section is in the context of hierarchy. How does it work?

utm tracking

Simply put, this suggests that the entire web should be made to function without refreshing the page after the click. All the navigation and all the pages needed animation of appearing, as well as animations of different elements fading, sliding, ect.

Also, everything should be as fast as possible, pixel perfect, responsive, with as little compromises as possible to keep the main design idea.

A big list of features that need to be implemented, don’t you agree?

One pager or loading pages with ajax?

The first big question was should we create a one pager or load the content with ajax? We thought about the pros and cons.

One pager would be easier in handling animations and there wouldn’t be any delay in page navigation. However, the maintenance of a big one pager is a developer’s worst nightmare and the loading time at the first arrival is huge. Additionally, there would probably be a huge mess with HTML and JavaScript. In one pager web we need to include all of the web pages in a single html file and display only the parts of it as user scroll. This means lots of html code and javascript code on the same file. It’s messy, ugly and very hard to debug problems.

As you might guess, we decided to go with the ajax approach because it’s more semantically correct and we have more control of the asynchrony which should make it easier to maintain. Also, we thought ahead and created a plugin, so we could use it on the rest of our projects.

We used history API to enable back and forth navigation within pages, and at the same time changed the main content container with the content we’ve got from the ajax request as well as title and the meta tags of the page.

The things that reflected our point of view are at first glance subtle, but very important for a great user experience.

We abstracted animations for preload and postload to create different animations that are in the context of the page hierarchy. For example, if you navigate through the main menu, you will see fade in-fade out animation. However, if you open any service, you will see that new content appears from the bottom.

Another cool thing is that you won’t be brought back to the top of the page when you go back and forth between pages; you will be redirected to the exact part of the page you were initially browsing. Users can navigate between services and cases by keyboard only (left and right arrows) and that’s very cool too, you should try it out (after you read this blog, of course:)).

There were some issues, of course. We used require.js for dynamically included dependencies, and we experienced a lot of strange behavior that we couldn’t investigate properly, so eventually we decided to exclude it.

Optimization

After we’ve implemented everything our designers imagined, we’ve ended up with 20+ request on all sorts of JavaScript files and a big bunch of requests on big photos. Also, as we did ajax requests on new pages and the images took a lot of time to load, it looked very unprofessional.

First, we put all the required JavaScript library in one file and compressed it. We saved about 20 individual requests on the server for files that page was waiting to load. This step may seem trivial, but it isn’t. Every plugin or library has it’s own way of working and using jQuery, so we had to adjust some parts of the library to be able to work from the same file.

utm tracking

The next big bottleneck we noticed was an abundance of large images. We used a great service called tinypng to compress most of our .png files and managed to compress images up to 70% of their original size. This optimization improved the loading time, so user can get three images at the same time.

To further cut down the loading time for images, we started by defining a set of images placed on the covers of the main pages. We then used a bit of JavaScript to asynchronously load the needed images (even if they are not displayed) after the page loads. In that way, if a user opens any new pages, he will already have the image in his browser cache and everything will look great.

Code for asynchrony loading header images looked something like this:

var main = ({
            headerImages : {
            	// '.bg-home' : '/static/img/home/home-header.jpg',
            	'.bg-about' : '/static/img/about/about-header.jpg',
                '.bg-services' : '/static/img/services/services.jpg',
            	'.bg-careers' : '/static/img/careers/header-carerrs.jpg',
            	'.bg-home-2' : '/static/img/home/home-careers.jpg',
            	'.bg-design-ux' : '/static/img/services/design-ux.jpg',
            	'.bg-development' : '/static/img/services/development.jpg',
            	'.bg-analytics' : '/static/img/services/analytics.jpg',
            	'.bg-content-creation' : '/static/img/services/content-creation.jpg',
                '.bg-digital-advertising' : '/static/img/services/digital-advertising.jpg',
            	'.bg-products' : '/static/img/services/products.jpg',
            	'.bg-social-media' : '/static/img/services/social-media.jpg',
            	'.bg-strategy' : '/static/img/services/strategy.jpg'
            },
            headerLazyDelay: 1000,
            lazyLoadBgImages : function(){
            	setTimeout(function(){
                	var headerImages = main.headerImages;
            	    var addedImages = new Array();
                	for(var selector in headerImages){
                    	addedImages.push(new Image());
                        addedImages[addedImages.length-1].src = headerImages[selector];

                	}
            	}, main.headerLazyDelay();

            }
});

You can use it by calling lazyLoadBgImages method after the page is fully loaded to make a request for images.

$(window).load(function(){
	main.lazyLoadBgImages();
});

For animating most of the elements, we used the great GSAP library. It provided great control over animations, as well as good browser compatibility. The biggest advantage for GSAP library is its superior performance. You can compare it with Query and Zepto in a small test.

In order not to bloated the JavaScript file with custom animations needed for every dom element, we created a small helper to help us write animations in HTML. You can see an example and try playing with it on codepen.

This approach doesn’t require all elements to be moved or hidden from the start. We can begin from the pure HTML and then add animations. It’s cleaner and easier to maintain and make changes as we don’t need to scroll entire javascript file to find the line responsible for a single animation.

There is a lot more micro optimization that was done, but we’ll get to it at some other time. What’s really important is that we learned a lot through the process of creating this web and we’re very proud.

Next time your design team propose ideas that are hard to implement and you know it will cause massive hair pulling, embrace it because in the end it will probably be one of the best thing you did! :)

Our Development team have a lot of knowledge to share, so if you wanna learn with them find out more about open job positions!

Author

Slaven Vincetić

Software Developer

Inspired by creative technology. Loves to control things that are meant to be controlled with a mouse, without a mouse. Almost always returns true.

All stories by Slaven

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