+

We rock frontend and WordPress development

Trusted by boutique design, marketing, and digital agencies around the world, MockupToCode crafts the finest frontend and WordPress sites that looks great and works great. We invite you to take a minute and find out how we do it below.

FRONTEND (HTML/CSS/JS) DEVELOPMENT

More than just pixel perfect and responsive

We don’t just code your design to be pixel-perfect and responsive. We make sure that it’s intelligent, clean, and interactive.

At the end, it’s the fine details that makes a website truly stand out.

LEARN HOW WE DO IT

WORDPRESS DEVELOPMENT

If it’s WordPress, we know it inside out

From WordPress backend to plugin development, we are here to meet all your WordPress needs.

Using Advanced Custom Fields (ACF) and Custom Post Type (CPT), we code clean, functional WordPress websites, and not to mention that we have a wealth of experience with WooCommerce and 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 audiences.

Unlike other PSD to HTML conversion services, we take the time to think, plan, and visualise the animation and interactivity, making sure that we achieve a balance between static and animated content.

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

  • Rollover effect on all links and buttons
  • Custom fade in and out effects (see example: corporate.playup.com)
  • Image and content parallax where appropriate
  • Custom slider transition effect

Our team has a wealth of experience with animation libraries. We even have our own standards for adding cubic-bezier values. How great is that.

Rigorous standards for frontend coding </>

Clean and well-written code is essential for a better performing website and it’s especially important for developers maintaining the website.

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

Here are some of standards that we follow when coding your HTML/CSS/JS.

  • SCSS Variables
  • SCSS Mixins
  • Modular breakdown of styles
  • Modular styles
  • Clean & Nested code
  • 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 detail 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>, ordered lists <ul>, unordered 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 JepgMini 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/Adnroid 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 best judgement to fix dsign issues during development so you trust us to pick obvious design issues during development.

Compound Eye | Accessibility

Our pages comes 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 needs explaning, and alternative text to images that requires description.

Thorax | Style reset

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

Forewing | Image compression

SVG graphics are used where possible and all images ared 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 buttons.

Feel free to the hover effects in your design, or trust us to to come up using best judgement.

Hindwing | Sticky menu

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

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

Modular breakdown of SCSS and template files

Style 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 pages specific style are specified into each page template.

Build process

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

	                                    							  /*
  ** 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/Adnroid 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 best judgement to fix dsign issues during development so you trust us to pick obvious design issues during development.

Compound Eye | Accessibility

Our pages comes 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 needs explaning, and alternative text to images that requires description.

Thorax | Style reset

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

Forewing | Image compression

SVG graphics are used where possible and all images ared 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 buttons.

Feel free to the hover effects in your design, or trust us to to come up using best judgement.

Hindwing | Sticky menu

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

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

Built for non-technical users

Our WordPress websites are unbelievably easy to manage, with a custom backend built 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 re-usable modules that can re-used to construct page content. This makes content creation easy whilst aligning to design.

Theme settings

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

Built-in image resizing and cropping

No matter what image dimensions you are uploading, they’ll be automatically cropped and resized.

eCommerce (WooCommerce) Expertise

Whether it’s a simple store, a store involving complex filters, or a subscription-based store, we have the experience to code your eCommerce design into pixel-perfect and working WooCommerce theme.

Shop Styling

We know it isn’t feasible to design every WooCommerce related page, that’s why we take the initiative to style every WooCommerce page to match your design/theme even if they are not designed. These include checkout, account, notifications, order complete, and even the email notifications.

ACF Done Right

At MockupToCode, we use Advanced Custom Fields (ACF) to create robust WordPress edit screens. We make sure the fields are nicely laid out, works intuitively, and makes the best use of field spacing.

Repeater field

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

Flexible content field

We use Flexible content field so that the modules in your design can be re-used to create highly customised layout while aligning to design.

Every little detail counts

Semantic HTML

Purchase a certain amount of support hours to start a job without wasting admin time for invoicing and also enjoy priority support and great discounts.

Built with Accessibility in mind

ADA compliance, and WCAG 2.0 AA compliance. Purchase a certain amount of support hours to start a job without wasting admin time for invoicing and also enjoy priority support and great discounts.

Optimal image compression

Purchase a certain amount of support hours to start a job without wasting admin time for invoicing and also enjoy priority support and great discounts.

Smart and intelligent layouts

Purchase a certain amount of support hours to start a job without wasting admin time for invoicing and also enjoy priority support and great discounts.

Modular breakdown of SCSS and template files

Flexible content field

Purchase a certain amount of support hours to start a job without wasting admin time for invoicing and also enjoy priority support and great discounts.

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.