Name: marketing_engineer_challenge
Owner: Poll Everywhere
Description: Optimize this static site for best page load speed and content deployment pipeline
Created: 2017-04-04 23:29:47.0
Updated: 2017-09-29 21:42:27.0
Pushed: 2017-04-06 18:23:40.0
Homepage: null
Size: 2310
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Karl from marketing started building a micro-site for case studies. He did a pretty good job getting the prototype off the ground, but he wants you to take it over and make it production ready. Once the site is live, the marketing team wants to deploy over 100 new case studies that a team of designers and writers will produce.
That's where you come in. Your goals are:
Make sure that users can load the pages quickly to keep conversion rates high. Karl's success metric is a Google Page Speed Insights score of 90 or better. Use any site optimization techinques you know to hit that mark.
Create a simple content production workflow that works for both engineering and marketing. This workflow should accept files from the marketing team, then optimize and deploy them to production.
Ensure that this process scales. The marketing team wants to create 100 new case studies. They're technical enough to be dangerous in basic markdown, HTML, HAML, and Frontmatter. Do NOT expect them to know CSS, JavaScript, or even medium-level HTML skills. When Marsha tried to teach them HTML tables last quarter, they all fell asleep within the first 10 minutes of the class, so she bailed to go kite surfing.
Create a build process that minifies CSS/JavaScripts and compresses images.
When adding a new case study to the ./source/case-studies directory, those changes are reflected:
On the home page
In the site footer
On the individual case study page
If the title frontmatter key is changed, the matching case study's title changes:
On the home page
In the site footer
On the individual case study page
If somebody in marketing decides they want a different image to represent a case study, can you structure the page so that you change the image URL in one place and have it update all of the areas where the case study is referenced? Can you make this image appear as a hero shot on the case study page itself?
Write automated tests to review the quality of the content provided by the marketing team (eg. spelling errors, dead links, more than one h1 tag on a page, etc.).
1.
The minimum requirements to run this site are
- git
- Ruby (2.3.1)
- bundler
You may add additional tools (eg. Webpack, Grunt, Gulp) if you'd like.
Clone this repo via git clone git@github.com:polleverywhere/marketing_engineer_challenge.git
Install middleman and its dependences from the root of the git repo: bundle install
Run the development server: bundle exec middleman server
Open the website at http://127.0.0.1:4567
The files you'll be editing are in the ./source directory of the project.
Middleman documentation - Reference for helper methods, templates, build pipeline, etc.
Frontmatter - Metadata per page.
ngrok - If you don't have a public endpoint to deploy your Middleman website to test via Google Page Speed Insights, you can us ngrok to give your middleman server a public endpoint through your firewall or router.