Tailored interactivity and animation to elevate your website

Our team blends creativity with technical expertise to deliver fluid interactivity and animation to your website that leaves a lasting impression on your audience.

Unlike other design to code conversion services, we take the time to think, plan, and visualise the animation and interactivity, ensuring that we achieve a balance between static and animated content.

As a minimum, we do the following on every site for interactivity/animation. Custom and complex animation work can also be offered upon request.

• Rollover effect applied to all links and buttons
• Custom fade in, out, easing effects (see example: comexposium.com)
• Image and content parallax where appropriate
• Custom slider transition effect

Our team has a wealth of experience with animation libraries – including GSAP (GreenSock), wow.js, animate.css. We even have our own standards for tuning cubic-bezier values and animation delays. Isn’t that great?

Rigorous standards for frontend coding </>

                                                							  /*
  ** Font variables
  */

  //Primary font
  $font-primary: 'HelveticaNeue';

  //Other font
  $font-secondary: 'Arial';

  /*
  ** Color variables
  */

  //Primary colour
  $color-primary: #000000;
  $color-highlight: #ffa4a4;

  //Secondary colour
  $color-white: #ffffff;
  
 
                                           								

                                                							 
  @mixin large-text {
    font: {
      family: Arial;
      size: 20px;
      weight: bold;
    }
    color: #ff0000;
  }

  .page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
  }
 
 
                                           								

                                                							 
  //Global styles  
  @import "variables";
  @import "font";
  @import "mixin";
  @import "reset";
  @import "nav";
  @import "header";
  @import "content";
  @import "footer";

  //Components  
  @import "slider";
  @import "sidebar";
  @import "call-to-action";
  @import "animation";
 
 
                                           								

                                                							 
  .banner{···}

  .news{···}

  .events{···}

  .media{···}
 
 
                                           								

                                                							 
  #main {
      @include primary-text;
      @for $i from 1 through 3 {
        .item-#{$i} { width: 2em * $i; }
      }
      h1{
          font-family: $font-primary;
      }
      .element{
          @include content;
          .title{
              @include title;
          }
      }
  }
 
 
                                           								

                                                							 
  //If there are multiple selectors for a style block, we seperate them onto their
  //own line rather than having them on one line. This helps readability and
  //preventing long lines.

  .appForm .formContainer .appButton,
  .appForm .formContainer .appButton,
  .appForm .formContainer .appButton {
    background-color: #fb94d2;
  }
 
 
                                           								

                                                							 
  //Semantic and well-nested heading levels

  <section class="call-to-action">
    <h1>Authenticity</h1>
    <p class="callOutText">Combining expert craftsmanship with state-of-the-art technology.</p>
    <h2>Events</h2>

    <h3>Mint industry</h3>
    <h3>Conference 2020</h3>
    <h3>Mint industry coin award</h3>

    <h2>Contact information</h2>
  </section>
 
 
                                           								

Rigorous QA process for browser compatibility

We test each and every page of your website on different devices and browsers to ensure they have a consistent browsing experience across all web browsers.

Testing with BrowserStack

One of the preferred testing tool is BrowserStack (www.browserstack.com). Our team uses this to automate testing and quickly pin-point compatibility issues.

Testing on real devices

We don’t just test the pages on simulator. Each and every page is strictly tested on real devices to ensure nothing is missed.

Every little detail counts

We go into tremendous details when crafting frontend (HTML/CSS/JS) pages. Click on the bee to find out 🐝.

Semantic HTML

We focus on creating high quality semantic HTML content. For example, using correct heading levels <h1>, <h2>, <h3>, unordered lists <ul>, ordered lists <ol>, blockquotes <blockquote>, and much more. This results in high quality HTML and it improves search engine score.

Built with Accessibility in mind

We build frontend pages to have a standard level of ADA and WCAG 2.0 AA compliance, including keyboard index, form labels, image alternative text, and many more. Upon request and for an extra fee, our team can ensure that your site is fully ADA and WCAG 2.0 AA/AAA compliant.

Optimal image compression

Imagery plays a big part in the loading speed of your website. We use TinyPNG and JPEGmini to reduce the size of your images without the loss of quality.

Smart and intelligent layouts

We build layouts to be smart and not just static. For example, when you have a four column block layout, you can expect the layout to still work nicely when you add or remove columns.

Modular breakdown of SCSS and template files

Styles are modularised into separate files based on their purposes. For example, variables such as colours are specified in _variables.scss. Typography related styles are specified in _fonts.scss, components are coded in _header.scss and _footer.scss, and specific page styles are specified into each page template.

Build process

During the build process for production, the styles are combined and minified into single CSS file. Upon request, we can also use build tools to compress JavaScript to separate files.