MKS (www.mks-limited.ie)

A freelance bootstrap website for a client who focuses on doors, windows, insulation, and other general home services.

Motivation

I was contacted by MKS Limited to develop a low-cost yet highly effective website that could promote their services and provide a way for potential customers to contact the company for a quote

Features

The website is simple and clean. It includes interactive elements and smooth animations. It looks great on all screen sizes thanks to taking advantage of Bootstrap's Grid System, a powerful mobile-first flexbox grid to build layouts of all shapes and sizes. It uses a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Ten seconds after loading the website, a window shoes up on the bottom-right mimicking a WhatsApp message. The message can be closed, or clicked to re-direct the user to a WhatsApp conversation with the company owner.

The website has a secure contact form which sends an email to the company owner. The form offers both client-side validation of inputs, as-well as server-side validation (AWS API Gateway models). The website prevents bots from flooding the form thanks to Google reCAPTCHA. If someone were to bypass the form and post to the API directly, and therefore bypass Google reCAPTCHA, an email would not be sent as Google reCAPTCHA is verified on the server-side again.

The website is encrypted with an SSL/TTL certificate generated by AWS Certificate Manager, giving the user peace of mind when sending data through the site. It does this by making sure that any data transferred between users and sites, or between two systems remain impossible to read. It uses encryption algorithms to scramble data in transit, preventing hackers from reading it as it is sent over the connection.

Tech Stack

Front-end

• Bootstrap
• HTML
• CSS
• JavaScript

Desktop

Mobile

Back-end

• The domain, www.mks-limited.ie, is registed on AWS Route 53.

• AWS Route53 resolves to a suitable node on AWS CloudFront, Amazon's CDNs which are caching the website.

• AWS CloudFront updates its content from the site's files hosted on AWS S3 (Simple Storage Solution) every 24 hours.

• AWS Certificate Manager provisions a SSL/TLS certificate and deploys it to AWS CloudFront to provide the website's certificate.

• Google reCAPTCHA v2 is used to verify the source of a form submission on both the client-side and the server-side.

  • If Google reCAPTCHA detects a human on the client-side, it will generate a token which is then forwarded alongside the form data to AWS API Gateway.

• AWS API Gateway checks that the data is matching the set JSON Schema. If so, it forwards the data to AWS Lambda.

• AWS Lambda uses the token generated by the user, as well as a secret key to make an API request to Google's reCAPTCHA API.

  • If the validation is successful, an email is sent using AWS SES (Simple Email Service).

• The email is sent to [email protected], an email running on AWS WorkMail.

Clean and valid code

https://validator.w3.org

https://www.freeformatter.com/html-validator.html

https://html5.validator.nu/

SEO (Page Optimization)

The website was developed with SEO in mind by incorporating

• GZIP Compression to reduce the load size and to decrease load time
• Modern WebP image formats to provide low image sizes to decrease load time
  • Fallback to JPG images if browser does not support WebP (Safari for example) via <picture>, <source>, and <img> tags
• alt tags on every image to provide more accessibility for visually impaired users
• Using async and defer on scripts where possible. This prevents the user from seeing no page content due to scripts
  • async to allow the site to load scripts simultaneously with the site's content
  • defer to defer scripts until the site's content is finished loading
• Meta data such as title and description to help search engines understand the content on the page
• A focus on keywords when writing the site's content in order to target search queries more effectively
• XML Sitemap to allow search engines to crawl the site more efficiently
• AWS Cloudfront CDNs to reduce latency between the server and the user, thus decreasing load times
• ETag HTTP Header to identify the specific version of the resource in regards to caching
• Cache-Control Header in order to specify browser caching policies
  • max-age=31536000, no-cache to cache content for a year and only download specific content which is new/updated
• loading="lazy" on images other than the carousel in order to prevent loading images outside of the field of view until the page content is finished loading

Google PageSpeed Insights Results

Comparing PageSpeed to Competitors

Munster Joinery	DK Windows	Signature Windows

GTmetrix Results

Trello:

https://trello.com/b/WI9wqS30/mks