The latest custom-branded, mobile responsive WordPress redesign for Refugee Women’s Alliance. ReWA provides refugees and immigrants in the Puget Sound area with services to help them become independent.
Primary project objectives included:
To improve ease of use: content management, information architecture, and site maintenance
To improve page load performance
One of our first tasks was optimizing 10.5 Mb of full size images to load faster. Other performance optimization tasks included: replacing homepage content sliders/carousels with more effective user interface elements – such as sitewide calls-to-action to drive conversions; reducing Javascript features; consolidating and removing Theme features; replacing theme-integrated features, such as custom event Post Types, with more appropriate Plugins to improve modular integration, long-term stability and maintenance.
Web Design + Development Team
Visual Design Consulting: Erik Fadiman WordPress Theme Development: Scott Marlow
The organization was satisfied with their overall brand identity, as well as the look and feel of their existing site. However, the board of directors wanted to address concerns of very poor mobile page load speeds, often in excess of 12 seconds.
Scope of Work
My goal was to clone the site content and mimic the existing visual look and feel – while optimizing accessibility, performance, and search engine optimization.
accessibility testing
front-end web development
performance optimization
security hardening
search engine optimization
WordPress training and consulting
It was easy to identify the root cause of the performance issues: a template ThemeForest Theme, with too many Plugins. Overall page size was 3.6 Mb, well above the industry average of 2.4 Mb. However, the main contributor to page load latency is usually ‘web server file requests.’ Together, the Theme and Plugins generated 89 server requests – including 36 Javascript files. In addition to a rotating content carousel, the Visual Composer Plugin was generating significant code bloat. These poor development practices impacted usability, site engagement and conversions.
Below are screenshots during development. Do you notice significant changes in the look & feel?
Before (left) & After (right) optimization screenshots
Performance Analysis
By switching to a WordPress.org-approved Theme, _Underscores, and consolidating and removing Plugins – web server requests were reduced 64%, from 89 to 32; overall page size also decreased 71%, from 3.6 Mb to 1 Mb. Replacing the Visual Composer Plugin with WordPress’ native Gutenberg Block Editor significantly improved performance. These efforts improved page load speed to reasonable sub 3 seconds on mobile devices.
WebPage Test Speed Index: median = ~3.591; top 10% = <1.388 In 2021, the average page size = ~2.4 Mb and median page size = ~2.1 Mb. Database-driven websites, like WordPress, are more performance optimized when server requests are < 40 – 60.
The final result is a simpler, faster, yet on-brand, website that is easier to maintain.
Western Wildlife Outreach (WWO) works with partners to provide science-based information to community groups about the ecology, biology, and behavior of grizzly bears, black bears, cougars, and gray wolves. By engaging communities in wildlife and habitat stewardship activities, WWO programs foster an appreciation for large carnivores’ niche in maintaining ecosystem health — providing critical context to environmental recovery efforts happening throughout the Pacific Northwest.
screenshot of WWO’s new WordPress site
By fall 2021, WWO’s old website was becoming endangered. Page load speed was sluggish, above 5 seconds. Volunteers and new staff could not easily add and update content. Compounded by a clunky user interface that was difficult to navigate, visitors were not engaging with the science-based content.
WWWWOD?
WWO found my nonprofit website marketing services thru 501 Commons. Soon, we embarked to completely rebuild their existing WordPress site, using the native Block Editor to provide a rich, intuitive editing interface, which showcases their rich wildlife photography.
Project objectives included:
To refresh and modernize the website based on WWO’s existing brand identity;
To improve ease of use – content management, information architecture, readability, and site maintenance;
To improve the mobile responsiveness of the site layout for displays from phones to tablets to desktops – including a collapsible navigation menu on mobile;
To improve compliance with Web Content Accessibility Guidelines (WCAG) level AA – including keyboard-navigable navigation, skip-to-content links, semantic HTML, and high color contrast [> 4.5:1 and > 3.5:1 for large text];
To improve site security and performance.
Overall homepage size decreased 36% from 1.8 to 1.14 Mb, with another 36% decrease in web server requests – resulting in sub 2-3 second page load speeds.
WebPage Test Speed Index: median = ~3.591; top 10% = <1.388 In 2021, the average page size = ~2.4 Mb and median page size = ~2.1 Mb. Database-driven websites, like WordPress, are more performance optimized when server requests are < 40 – 60.
Web Design + Development Team
Visual Design: Erik Fadiman WordPress Theme Development: Scott Marlow
During the summer of 2021, Cecile Thomas of Make it Matter approached our team to redesign the website of the Girard Foundation.
Their vision is to foster innovation and systemic change in education with the goal of improving student outcomes in San Diego County and beyond. The old site was outdated in its appearance and needed to better present their recent accomplishments.
Our goal was to migrate all the existing website content into a fresh, modern Theme; and train the team to manage content with the new WordPress Block Editor.
Girard Foundation’s new look and feel
Michele is over the moon thrilled with the Girard Foundation website. One board member’s only email after receiving the link was “love love love it” The board chairman said it was ‘marvelous‘ and makes them look like a major player. Cecile Thomas, Make-it-Matter
Performance Analysis (October 2021)
Google Lighthouse Accessibility: 97/100 Best Practices: 100/100 Mobile Optimization: 82/100 Desktop Optimization: 96/100 Search Engine Optimization: 79/100
A WordPress Theme rebuild for Alpha Supported Living Services – a non-profit agency providing supported living and group training home services to adults and children with developmental disabilities in King, Snohomish, and Spokane counties.
This latest WordPress website project involved helping a nonprofit to better comply with Web Content Accessibility Guidelines (Level AA). By replacing the commercial paid Theme with an open source WordPress-approved Theme (_Underscores), accessibility benchmark scores improved markedly.
Scope of Work
accessibility testing front-end web development performance optimization security hardening search engine optimization WordPress training and consulting
Accessibility
To improve conformance with WCAG Level AA, 3 navigation features were added: a ‘skip to content’ link to help visitors bypass repetitive navigation; a keyboard-navigable menu; and site search. For low vision visitors, color contrast ratios were increased to meet the minimum 4.5:1 guidelines; a second visual indicator was added to body text links; image-based text was replaced with text; and the minimum font size was increased to 16 pixels.
Other accessibility improvements included removing an auto-rotating content slider (that did not include a pause feature); integrating more accessible social media icons; and making telephone numbers more accessible to assistive technology and mobile devices.
Ongoing accessibility efforts include improving alternate text for images; converting inaccessible PDF documents, like Annual Reports, to Pages and Posts; and maintaining content in semantic HTML.
Performance
Additional work involved optimizing page load performance. By optimizing images for web loading and reducing the number of web server requests (generated by Plugins and the former Theme) by 46% – page load speed almost doubled.
WebPage Test Speed Index: median = ~3.591; top 10% = <1.388 In 2020, the average page size = ~2.4 Mb and median page size = ~2.1 Mb. Database-driven websites, like WordPress, are more performance optimized when server requests are < 40 – 60.
You must be logged in to post a comment.