+

We rock frontend and WordPress development

Trusted by boutique design, marketing, and digital agencies worldwide, MockupToCode build exceptional frontend code and WordPress sites. We invite you to take a moment to learn about our process below.

FRONTEND (HTML/CSS/JS/React) DEVELOPMENT

More than just pixel perfect and responsive

In addition to achieving pixel-perfection and responsiveness when coding your design, we ensure that it is well-animated, interactive, and easy to maintain.

Ultimately, it’s the fine details that make a website truly stand out.

LEARN HOW WE DO IT

WORDPRESS DEVELOPMENT

If it’s WordPress, we know it inside out

We’re here to meet all your WordPress development needs, whether it’s developing a custom theme, configuring WordPress plugin, or resolving a WordPress site issue.

We code clean, functional WordPress websites using Advanced Custom Fields (ACF), ACF v6, Gutenberg editor, and Custom Post Type (CPT). Not to mention, we have a wealth of experience with WooCommerce and a many WordPress plugins.

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 </>

Clean and well-written code is essential for better website performance, and it’s especially crucial for developers maintaining the site.

At MockupToCode, we write high-quality, clean code and ensure that your site looks as good on the inside as it does from the outside.

Here are some of the standards we follow when coding your HTML/CSS/JS frontend project:

  • Using SCSS Variables
  • Using SCSS Mixins
  • Breaking down modules into separate SCSS files
  • Modular styles
  • Clean & Nested code
  • Using multiple selectors
  • Strict use of heading levels
                                                							  /*
  ** 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.

Left Antenna | Icon graphics

We'll create favicon, Facebook openGraph image, and Apple/Android app icons for your website even if you don't supply them.

We also use iconFont for coding SVG icons so that nicer hover effects can be applied.

Right Antenna | Pixel perfection

We code your pages to be pixel-perfect and exactly matches the way it's intended.

We also use our best judgement to fix design issues during development.

Compound Eye | Accessibility

Our pages come with a minimum level of WCAG 2.0 AA and ADA compliance even if you don't request it.

Alternative text, keyboard index, form labels, semantic HTML are some of accessibility standards on every page we build.

Foreleg | Image alternative text and titles

We add title text to icons that need to be explained, and alternative text to images that require description.

Thorax | Style reset

Expect common HTML typography elements such as links, lists, nested lists, strong, emphisis, tables to work nicely.

Forewing | Image compression

SVG graphics are used where possible and all images are compressed to reduce filesize and improve page speed.

The images are then optimised again using TinyPNG and JPEGmini to further reduce size.

Hindleg | Use of SCSS

We code all style formats using the latset version of Bootstrap + SCSS unless otherwise requested.

The naming of CSS class, scss files are coded to correlate to page template and modules the style is intended for.

Abdomen | Smart layouts

We build layouts to be smart and not just static.

For example, when you have a four column block, you can expect the layout to work nicely when you add or remove columns.

Pollen Combs | Hover effects

Hover effects are added to every link and button.

Feel free to add the hover effects in your design, or trust us with our best judgement.

Hindwing | Sticky menu

Unless otherwise requested, we add a sticky menu to all websites.

The sticky menu is locked into place so that it does not disappear when a user scrolls down the page.

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.

	                                    							  /*
  ** 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>
 
 
	                               								
Left Antenna | Icon graphics

We'll create favicon, Facebook openGraph image, and Apple/Android app icons for your website even if you don't supply them.

We also use iconFont for coding SVG icons so that nicer hover effects can be applied.

Right Antenna | Pixel perfection

We code your pages to be pixel-perfect and exactly matches the way it's intended.

We also use our best judgement to fix design issues during development.

Compound Eye | Accessibility

Our pages come with a minimum level of WCAG 2.0 AA and ADA compliance even if you don't request it.

Alternative text, keyboard index, form labels, semantic HTML are some of accessibility standards on every page we build.

Foreleg | Image alternative text and titles

We add title text to icons that need to be explained, and alternative text to images that require description.

Thorax | Style reset

Expect common HTML typography elements such as links, lists, nested lists, strong, emphisis, tables to work nicely.

Forewing | Image compression

SVG graphics are used where possible and all images are compressed to reduce filesize and improve page speed.

The images are then optimised again using TinyPNG and JPEGmini to further reduce size.

Hindleg | Use of SCSS

We code all style formats using the latset version of Bootstrap + SCSS unless otherwise requested.

The naming of CSS class, scss files are coded to correlate to page template and modules the style is intended for.

Abdomen | Smart layouts

We build layouts to be smart and not just static.

For example, when you have a four column block, you can expect the layout to work nicely when you add or remove columns.

Pollen Combs | Hover effects

Hover effects are added to every link and button.

Feel free to add the hover effects in your design, or trust us with our best judgement.

Hindwing | Sticky menu

Unless otherwise requested, we add a sticky menu to all websites.

The sticky menu is locked into place so that it does not disappear when a user scrolls down the page.

Built for non-technical users

Our WordPress websites are incredibly easy to manage, with a custom backend designed for non-technical users. All content can be managed through intuitively laid-out ACF custom fields.

Content builder using ACF

We break down designs into reusable builder modules that can be used to construct page content. This makes content creation easy while aligning with the design.

Theme settings

Every WordPress website we build contains a “Theme settings” section where you can easily update your site’s branding and global content, such as logo, favicon, and footer text.

No clunky page builders

We avoid page builders like Divi and Elementor to ensure that your site is professionally built with less overheads.

eCommerce (WooCommerce) Expertise

Whether you need a simple store with basic features, a complex store with custom filtering and logic, or even a membership/subscription-based store, we have the expertise to code your eCommerce design into a pixel-perfect and fully functional WooCommerce theme.

Shop Styling

We understand that designing every WooCommerce-related page isn’t always feasible. That’s why we take the initiative to style the store-level pages and screens without needing you to provide a design. These include checkout, account, notifications, order completion, and email notifications.

ACF Done Right

At MockupToCode, we use Advanced Custom Fields (ACF) to create robust builders. We make sure the fields are nicely laid out and intuitive to use.

Repeater field

We use repeater fields where possible so that blocks within a module can be repeated as needed.

Flexible content fields

We use flexible content fields so that the modules can be re-used to create highly customisable layout while aligning with your design.

Every little detail counts

Semantic HTML

We focus on coding semantic HTML, using correct HTML elements for different content types.

Built with accessibility in mind

Our builds take ADA and WCAG 2.0 AA compliance into consideration. Although we do not formally test our sites for compliance, you’ll be surprised at how many accessibility criteria our builds pass.

Optimal image compression

We compress all images without losing quality to ensure fast page loading speed for every project we deliver.

Core Web Vitals

With Core Web Vitals becoming an important metric for determining organic search engine ranking, we check all delivered work to ensure that the vitals are in the green zone.

Modular breakdown of SCSS, JS, and template files

Modular file structure

At MockupToCode, we have a habit of breaking down our CSS, JavaScript code, and template parts into files by modules. This results in modular code that is easier to maintain and update over time.

Get to know us better or get a quick quote

FAQ

What hours do you operate? How quickly do you typically respond to emails and quote requests?

We are located in Canberra, the heart of Australia (GMT+10). Our passionate team works from 8:00am to 7:00pm, Monday to Friday. (We know we work late hours, but that’s the life of a developer!). Our team responds to emails and quotes within 24 hours, and usually in a much less timeframe.

What if I find a bug that needs fixing after project delivery?

Our work comes with three months warranty period after delivery. During the warranty period all bug fixes are fully covered at no additional cost.