Anissa and Laura started a wolf-pack at Identimo joining forces together.

Client

Anissa Jakoury is an independent freelance designer and art-director. Her neighbour happened to be Laura Stamm who is also a freelance graphic designer. Instead of competing for clients as they are both based in Diemen, the Netherlands, they decided to join forces.

Tech

Because of the previous experience with Bolt on Jakoury.nl I decided to go with it again. The CMS has now reached version 2.0 which adds an amazingly well thought out Extension system.

Because Identimo wanted to have a responsive website I decided not to go with a homebrewed HTML/CSS but look for a framework to build on top of. After some searching I happened to stumble across Skel which is a very lightweight responsive framework. It uses a grid system based on 12-columns. By defining multiple classes on your DOM elements you can define what should happen to the object on different screen sizes.

The Image Slider did not change compared to the last time, again using the Flexslider which is a jQuery Plugin so that fit in nicely.

To ensure that a site loads fast and using simple CSS tricks to hide images that are not needed on smaller screens I had to look for a lazy-loading image library. I found Unveil and have been very happy using it. Also works together with Flexslider, but needs a trick:

      $(window).load(function() {
    $(".firstimage img").trigger("unveil");

    $('#slider').flexslider({
        before: function(slider) {
            $(slider.newSlides).find("img").trigger("unveil");
        }
    });
});
   

Because of the Responsive nature of the site I wanted to use a SVG for the logo. Also because it would be loaded twice on the page, but inverted, it would allow for CSS manipulation. This caused some fun problems. One of which was cleaning up an SVG file provided from Adobe Illustrator. Admittedly these have become a lot better over time but still are left to be desired. Using the tool Sketsa you can view the image and edit the XML right away. Very practical tool. However I still had to do some other edits and eventually used the in-browser SVG-Edit to make final adjustments.

However to prevent browsers without SVG support not seeing any image I used SVGeezy to first insert a PNG into the page which gets replaced by the library to SVG if it’s supported. Best of both worlds.
To actually get the SVG rendered inline instead of an include img object I used the following Javascript snippet from this Stackoverflow post:

      $(document).ready(function() {
    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
    
        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');
    
            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }
    
            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');
    
            // Replace image with new SVG
            $img.replaceWith($svg);
    
        }, 'xml');
    
    });
});
   

This was actually once of the first projects where I used SASS extensively as the Skel has been written in it. However I didn’t want to compile it by hand everytime. There’s a pretty sweet application called Compass.app out there that watches your project directory for file changes and recompiles for you. It was like working with CSS without the hassle. If you’re feeling skimpy for the paid application you can pick it up for free from their Github Releases page.

Like last time, implementing a contact form was a breeze. However this time it was not a hidden extension but provided through the Extension system. Again I used SimpleForms.