Every so often I need to make a simple one-off landing page with a custom design that's just HTML, CSS, Javascript and images. I don't want to spin up a WordPress site or try and use React or some other large setup to make one landing page.
I created this gulp tool to provide a robust starting point for creating a webpage that allows me to focus on layout and design. I also wanted something that I could continually add on to as I find better optimizations and best practices change.
Automate common tasks and best practices #
There can be a lot of things to remember (see my requirements below) when creating any website whether it is a large CMS website or a single HTML file. I wanted to focus more on developing the responsive layout and design of the site and automate other tasks and details such as meta tags, inlining CSS, and removing comments.
My requirements #
- High focus on design and content when building pages
- SASS for styling and default SASS variables for things like fonts, spacing, colors, breakpoint sizes and more.
- Minified HTML, CSS, and JS output for production
- Provide minimum HTTP requests and inline CSS and JS
- Score 100 on Lighthouse pagespeed test or as close as possible.
- Use best practices and knowledge such as
- htmlhead.dev for what can go in the
<head> - images.guide for
.webpimages and<picture>elements - Destyle.css for resetting browser styles
- htmlhead.dev for what can go in the
Todo #
Automate responsive images #
I need to add responsive image generation as well as a way to automate srcset in the markup
Auto optimize images and SVGs #
I haven't found a 100% way of automatically doing image optimization because some images look good at 80% and others need to be at 90% quality before they start looking bad. Right now my workflow is to pre-optimize them then use Gulp to generate .webp images.
Optimize video files #
I have been using a lot more video screen recordings and animations in my landing pages lately and would like to find a way to automate optimizing these files.
Favicons #
Add gulp-favicon plugin.
More common interactive features #
I want to keep this starter as minimal as possible but there are a few common Javascript features I use in most projects that I would like to add.
Pardot landing pages #
I have been using Pardot marketing automation tool for quite a while now and would like to take this project a step further and automate landing pages with it. Right now, it could be used for this but Pardot landing pages have some other features and requirements. Here are my notes:
- Automatically adding editable Pardot fields to relevant HTML elements
(e.g.pardot-region="my-link") - A placeholder form that can be used for development, but then gets switched out for the Pardot
%%content%%tag for production - May need to re-think about images with work Pardot file upload as well as pre-fixing image sources with the full Pardot URLs (
go.pardot.com/abc123)
To be continued... #
I wanted to write out my goals with this tool as a guideline to develop it further. Keep up-to-date on github at rdallaire/gulp-page-builder