Small Businesses | Build, Improve | 2022, 3 weeks | Website Link
Project Overview:
The Green Marketing Academy (GMA) is an online course created by Michelle Miller, owner of Minty Made, a marketing agency for sustainable businesses. GMA provides education about green marketing strategies for small businesses. I built the GMA course sales page on WordPress to reduce the page’s carbon emissions. As a result, the sales page became 71% less carbon-heavy than the previous Squarespace page.
Table of Content:
- Challenges
- Goals
- Main tools & plugins
- Execution, issues encountered, & solutions
- Results
- Testimonial
Challenges:
Michelle wanted the new sales page to be more sustainable: She hosted the GMA course sales page on Squarespace for some time. The platform doesn’t allow much control in choosing web tools and optimizing the content on the site. The sales page is long and resource-heavy, as a result, it produces a lot of carbon emissions. Michelle partnered with me to create a sales page on WordPress, where web elements are more customizable. Thus, it’s more likely to make the page less carbon-heavy.
Michelle designed the page, made a mockup, and provided all the page assets for me to build on WordPress.
Goals:
Creating a sales page on WordPress using the design mockup and the page assets provided.
Main tools & plugins:
WordPress,Open-source Content Management System (CMS)
Neve,“Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects.”
All-in-One WP Migration,A plugin that backs up, imports, exports websites
Elementor,Page builder tool
Chrome Developer Tool,A webpage debugging tool
MailerLite,A tool that enables email signup and email marketing automation
Smush,A plugin that compresses, resizes, and lazy loads images
W3 Total Cache,A plugin that caches files to speed up load time
CanvaA free tool for making graphics
Learn more about each tool.Execution, issues encountered, & solutions
- Setup workspace and team communication tool – We used Notion as a project portal, which contained resource links, shared files, schedules, the project timeline, and updates. For, team communication, we used Slack.
- Set up the site and installed tools on WordPress – I loaded up the website with fundamental tools for web building and optimization, such as Neve theme, Smush, W3 Total Cache, All-inOne WP Migration, Elementor, etc.
- Developed the page – I used the Adobe XD web design mockup that Michelle created to guide my development process. The program allowed me to copy color hex codes and web copies to paste on the Elementor, the page builder, which saved so much time.
- The layout challenge of the “MEET YOUR COACH” section
- Issue: On the mockup, this section has two columns. Michelle’s image is on the left and her story is on the right. When replicating the design on Elementor’s editor, the web copies on the right ran so much longer than the image’s height. And adjusting the image size or column width didn’t solve the problem.
- Solution: We both agreed to turn this section into one column; having the inline image within the content. I looked up how to create an inline image for Elementor and applied it using an HTML block. The result was great.
- Refined the page – When refining the page, we used Markup.io. This tool lets us make a comment on any section using a marker. Michelle put markers on sections that needed an edit, I would receive the notice and resolve the comments one by one.
- Troubleshooting server 500 error
- Issue: Near the launch date, I received the server 500 error message multiple times while trying to save my work on Elementor. The page builder didn’t let me save any changes.
- Solution: I researched how to fix the error and found out that it might relate to the limited PHP memory allocated to the site. I accessed the web hosting and increased the PHP memory limit from 128MB to 512 MB. After the issue was resolved and I was able to continue editing and saving changes on the page.
- Optimizing the website – I used Smush to compress and lazy-load images through the media library. I used W3 Total Cache to cache web files. These practices reduced load time and energy to render the page significantly.
- Launched the page – After multiple refinement revisions, the launch date went smoothly and both of us were pleased with the final look of the page.
Results:
We launched the sales page on time and achieved good conversions. Regarding the website’s carbon emissions, the WordPress sales page is 71% cleaner than the original Squarespace page; from 0.7g of CO2/view to 0.2g of CO2/view based on Website Carbon.
