Nonprofit portfolio

Providing WordPress Support, Empowering Clients, & Encouraging Accessibility

Posted on

supported living services nonprofit website

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.

Performance Metric Old website
 New Website
Google Lighthouse: Accessibility 71/100 100/100
Google Lighthouse: Best Practices 93/100 100/100
WebPageTest Speed Index 3.092 1.654
Total Homepage File Size 6.4 Mb (4 Mb Images + 937 Kb Scripts + 157 Kb CSS + 278 Kb Fonts + 63 Kb HTML) 1.5 Mb (464 Kb Images + 763 Kb Scripts + 84 Kb CSS + 111 Kb Fonts + 72 Kb HTML)
Total Web Server Requests 99 (13 Images + 32 Scripts + 13 CSS + 8 Other + 16 Font + 5 HTML) 53 (8 Images + 20 Scripts + 10 CSS + 5 Fonts + 7 Other + 6 HTML)
Total Homepage Load TIme ~3.1 seconds ~1.7 seconds

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.

Building Nonprofit Websites in King County

Posted on

Nonprofit youth mentoring website screenshot

A redesigned WordPress website for The 4C Coalition – a community-based nonprofit, founded in 1999, that helps black and other youth of color succeed in school and in life. The 4C Coalition offers one-on-one mentoring, group mentoring and tutoring to 12- to 17-year-olds in King County.

Scope of Work

content migration
copywriting
creative strategy
color palette development
front-end web development
online data management
performance optimization
security hardening
search engine optimization
visual design
WordPress training and consulting

Performance

Page load speed ranks in the top 15% of sites.

WebPageTest Speed Index: 1.737 (median = ~3.591; top 10% = <1.388)

Total Page File Size: 1.3 Mb (In 2020, the median web page size = ~2.1 MB; the average page size = ~2.4 Mb)
Total Web Server Requests: 48

Web Design Team

Content Strategy: Rita Cipalla
Photography: Rebecca Sullivan
Visual Design: Joan van den Berg
WordPress Theme Development: Scott Marlow

 

Nonprofit Website Training

Posted on

Job training center website screenshot

Puget Sound Training Center provides career training and employment services to immigrants, refugees and under-served individuals. PSTC trains individuals who are clients of Washington State Labor and Industry (L&I) and Department of Rehabilitation (DVR); PSTC also partners with CBOs (Community Based Organizations) to provide customized skills training.

This website redesign project involved upgrading the job training center’s decade-old static HTML website into a mobile-first responsive layout, powered by an intuitive WordPress Content Management System. During the redesign, nonprofit staff were trained how to add and edit website content – including text, images, and links – using WordPress’ new Gutenberg Block Editor. In addition to editing content, staff can now use the block editor, which has been custom-branded to their identity, to create mobile responsive layouts.

Scope of Work

creative strategy
color palette development
front-end web development
performance optimization
security hardening
search engine optimization
visual design
WordPress training and consulting

Team

Visual Design by: Joan van den Berg
Photography and WordPress Theme Development by: Scott Marlow

Weebly to WordPress Website Redesign

Posted on

SPiN Cafe screenshot

A redesigned website for SPiN Cafe, an Oak Harbor nonprofit serving people in need.

Our team collaborated with board members and the recently appointed executive director to build a new WordPress site that better reflects the organization’s brand identity, with clear messaging and simple calls-to-action. Page and Post content was migrated from the original Weebly site and reformatted into semantic, search engine-friendly HTML.

Our heartiest thanks to you and your team for designing our new web site. All of the SPiN board members are well-pleased with the design and choice of visuals and graphics, as well as the ease of navigating the site.
Mark Stroud, president
SPiN Cafe

Scope of Work

brand discovery
project management
content migration
copywriting
creative strategy
art direction
color palette development
front-end web development
performance optimization
security hardening
search engine optimization
visual design
WordPress training and consulting

Performance Analysis

Page load speed on the new WordPress site is significantly improved from the original Weebly site by reducing overall page size 64% and web server requests 66%.

Google Lighthouse benchmarks
Mobile Speed: 80/100
Desktop Speed: 92/100
Accessibility: 98/100
Best Practices:  93/100
Search Engine Optimization: 93/100

WebPageTest Speed Index: 2.675 (median = 3.519; top 10% = 1.388)

Total Page File Size: 675 Kb (In 2020, the average page size was ~2.4 Mb; the median size was ~2.1 Mb)
Total Web Server Requests: 30 (8 scripts + 8 images + 7 CSS + 1 HTML + 3 Fonts + 1 Other)

Team

Logo Design by: Theresa Dilley
Content Strategy by: Liz Gillespie
Branding and Visual Design by: Elise Cope
WordPress Theme Development by: Scott Marlow

What Would WordPress Do?

Posted on

City of Gig Harbor parks website

WordPress is the most popular Content Management System in the world. WordPress powers 42% of all websites; and 62% of CMS-powered sites.

But not all WordPress sites are created equal.

One of my favorite tasks is showing clients the benefits of open source technology. In particular, I enjoy demonstrating Core Web Vitals for open source WordPress Themes vs. cheap, popular paid commercial themes from vendors like ThemeForest. I primarily use Google Lighthouse to evaluate sites, but I also rely on Pingdom, WebPageTest and other benchmarking tools.

This latest nonprofit project for PenMet Parks in Gig Harbor involved rebuilding a commercial theme-powered WordPress site with my favorite Theme, _Underscores.

The client’s previous page load speed was atrocious, and the website crashed on a regular basis. Worse, content contributors could not even use the CMS to make the most basic content edits due to bloated Theme and Plugin features.

By following better WordPress and web standards, web server requests were reduced 69% and page size was reduced 73%. As a result of better web development practices, page load speed improved 78%. And the parks organization can now easily, intuitively edit all of their site content.

Scope of Work

accessibility testing
brand discovery
project management
content migration
copywriting
creative strategy
art direction
color palette development
front-end web development
performance optimization
security hardening
search engine optimization
visual design
WordPress training and consulting

Site Statistics

Performance Metric Old Website New Website
Google Lighthouse: Mobile Performance 3/100 67/100
Google Lighthouse: Desktop Performance 12/100 92/100
Google Lighthouse: Accessibility 97/100
Google Lighthouse: Best Practices 93/100
WebPageTest Speed Index 7.176 1.831
Total Homepage File Size
(In 2020, average page size was ~2.4 Mb; median size was ~2.1 Mb)		 4.5 Mb 1.2 Mb
Total Web Server Requests 194 61
Estimated Mobile Homepage Load Time ~7 seconds ~1.8 seconds

Team

Photography by Chrisy Dorsey
Visual Design by Heidi Grace
WordPress Theme Development by Scott Marlow