Tailored interactivity and animation to elevate your website

With every project, we devote our efforts not only to ensuring that the site aligns with your design and functions responsively but also to placing significant emphasis on animations that leave a lasting impression on your audience. When we receive a project, we carefully plan and visualise animations and interactivity that best complement the design concepts, ensuring seamless integration of animations with the static content.

As a minimum, we incorporate the following interactivity and animations in every project:

1. Rollover effects applied to all links and buttons.
2. Custom fade-in, fade-out, and easing effects to suite the design (refer to example: comexposium.com).
3. Implementation of image and content parallax where appropriate.
4. Other custom effects that we think would help lift the overall presentation of the site.

Our team also possesses extensive experience with animation libraries, including GSAP (GreenSock), wow.js, and animate.css, should you require us to take your project to the next level.

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>
 
 
                                                   

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

Rigorous QA process for browser compatibility

We use a blend of automated and manual testing to ensure your website works great on various devices, browsers, and screen sizes.

Testing with BrowserStack

Every page of your website undergoes automated testing via BrowserStack (www.browserstack.com). Our team leverages BrowserStack’s capabilities to efficiently automate these tests, allowing us to swiftly identify and address any compatibility issues.

Testing on real devices

We go beyond mere simulator testing. Each page is rigorously tested on real devices and various browsers, ensuring comprehensive coverage and that no detail is overlooked.

We don’t just test the pages on simulators. Every page and functionality is rigorously tested on real devices and various browsers to ensure thorough compatibility and performance, leaving no room for oversights.

Every little detail counts

We delve into exceptional detail when developing front-end (HTML/CSS/JS) pages. Discover more by clicking on the bee 🐝.

Semantic HTML

We focus on creating high quality semantic HTML content,and always using correct tags to best present the content. For example:

• <h1> – <h6> for heading levels
• <ul> and <ol> for lists
• <blockquote> and <cite> for testimonials and citations
• <figure> and <figcaption> for figures and image captions
• and much more

Built with Accessibility in mind

We craft frontend code with ADA and WCAG 2.1 AA standards in mind, encompassing features like keyboard focuses, aria-labelling, and alt text. Additionally, our team possesses the expertise to achieve full ADA and WCAG 2.1 AA/AAA compliance, ensuring the highest level of accessibility.

Optimal image compression

The size and compression of imagery plays a big part in the loading speed of your website. We uses lossless compression tools like TinyPNG to efficiently reduce the size of the images, ensuring they retain their quality while contributing to faster page load times.

Smart and intelligent layouts

We use grid systems and flexbox layouts to build layouts with flexibility in mind. This ensures that the layout maintains its integrity and appearance, even when columns or content are added or removed.

Modular breakdown of SCSS and template files

Our SCSS files 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 production build process, styles are combined and minified into a single CSS file. Additionally, upon request, we can use build tools and task runners to compress JavaScript into separate files.