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.