The Modern Pie company was created for a university human computer interaction course. I worked with and led a team of 4 other team members. Team members were all assigned roles based on their skills, due to this I lead as project manager and as the lead developer.


Design

The design needed to be kept minimal but there are some powerful back-end techniques used to make the web-app run more efficiently and faster on both desktop and mobile. By bootstrapping the site most of the layout of the site follows a uniform structure, maintaining the quality of grids across devices and browsers.

The website needed to follow a few basic requirements:

  1. A reservation page
  2. Daily specials menu
  3. Quick loading
  4. Accessibility options for people of varying ability
  5. Staff page - showing active staff and their department

The design needed to be comprehensive with clean design. The site was content first, demonstrating that the content needed to be placed at the forefront. Because of this simple, clean fonts and colours are used in conjunction to aid the read-abilty of the forms and the menu.


Accessibility First

When analysing earlier versions of the site it was found that there was a lack of user accessibility dependant on user age. To combat this accessibility buttons were added to the navigation bar. The design of the site changes largely when the accessibility version of the site is accessed.


“Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites.”
Accessibility of the site
Show the website after accessibility

It's fast

With a load time of around 300ms over 30Mb/s this is definitely the fastest site I have built to date. Here are some of the methods I used to achieve this:

  1. SVG Sprite - All icons on the page are grouped into an svg sprite and inlined in the head of the document. This saves on requests for individual icons and because it's all SVG, the overhead is tiny. You can read more about svg sprites and how to utilise them here
  2. CSS Development with Tachyons - This was my first time using Tachyons and I’m very impressed with it. Regardless of your thoughts on atomic vs semantic css, you can’t deny the performance benefits of using a library such as Tachyons. Paired with uncss, which strips out all unused CSS, the total CSS size comes to just 7kb, and thats before gzipping.
  3. Inlining CSS - To stop CSS render blocking the page before it has loaded I inlined it in the head of the document. The maximum size Google recommends for inlined CSS is 14kb so at 7kb it was a no-brainer to just inline all of it.
  4. Concatenate, minify and asynchronously load js - This is easy to do with a gulp task and means less requests to the browser. Adding async to the script tag means it can be loaded asynchronously also.
  5. SSL - Having SSL enabled gives you access to HTTP/2 and service workers. Github Pages does provide free SSL, but only for their username.github.io domains and not custom domains. The easiest way to get around this is to just use Cloudflare as they provide free SSL certs.
  6. Cloudflare - Github Pages is already fast but adding Cloudflare means free SSL, a better CDN and more customisable caching options.

Visit the Modern Pie Company source code.