responsive web design

Sitecore to WordPress CMS Migration

Posted on

Seattle Foundation WordPress website

Committed to Accessible WordPress Websites for Nonprofits

This project involved cloning the existing Seattle Foundation visual layout and design from a website powered by Sitecore into a new more accessible, performance-optimized site powered by a WordPress Content Management System.

Foundation staff wanted a CMS that was simpler and easier to maintain. Project challenges included poorly structured Sitecore-exported XML data files, a low contrast color palette, and a short timeline. Content management was the primary dependency for the new website launch, since hundreds of posts needed to be migrated.

The site is working great! We love it and you did a fantastic job.
Jason Jystad, IT Operations Director

Scope of Work

  • Accessibility Consulting
  • Database Content Migration
  • Performance Optimization
  • WordPress Theme Development

Performance

Mobile speed index improved 69%, from ~9.5 to 2.5 seconds [source: WebPageTest]. This was achieved by reducing overall homepage size 89% – from 5.7 Mb to 639 Kb, and significantly reducing Javascript 95% – from 2.2 Mb to 112 Kb. Overall, web server requests, the primary contributor to slow page loads, decreased 49%. Finally, DNS management was moved to a Cloudflare CDN for better performance, redundancy and security.

Accessibility

Improvements include higher contrast colors to better adhere to Web Content Accessibility Guidelines (WCAG); increased font sizes; a navigation skip link; and removal of auto-rotating content sliders.

Before & After Performance Comparison

Performance Metric former Sitecore CMS homepage (Nov 2022)
 New WordPress homepage (December 2022)
Google Lighthouse: Accessibility 87/100 100/100
Google Lighthouse: Best Practices 75/100 92/100
Google Lighthouse: Mobile Speed 46/100 79/100
Google Lighthouse: Desktop Speed 60/100 99/100
Google Lighthouse: Search Engine Optimization 83/100 93/100
WebPageTest Speed Index 9.468 2.473
Total Homepage File Size 5.733 Mb (3.01 Mb Images + 2.2 Mb Scripts + 398Kb CSS + 162 Kb Fonts + 67 Kb HTML) 639 Kb (302 Kb Images + 112 Kb Scripts + 69 Kb CSS + 150 Kb Fonts + 21 Kb HTML)
Total Web Server Requests 59 (24 Images + 19 Scripts + 8 CSS + 7 Other + 1 HTML) 30 (8 Images + 3 Scripts + 9 CSS + 3 Other + 1 HTML)
Approximate Homepage Load Time (mobile) ~9.5 seconds ~2.5 seconds

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.

Seattle Foundation manages over $1 billion in philanthropic investments. 2022 marks the 1-year anniversary of the Foundation’s REPAIR initiative (Racially Equitable Philanthropy Aimed at Initiating Relationships), with a minimum investment of $25 million to Black-led organizations around Seattle; and its Center for Community Partnerships striving to achieve greater racial and economic equity in the region. The Foundation also incubated SkillUp Washington – a workforce funders collaborative connecting employers, post-secondary training and low-income adults.

WordPress Theme Development: Scott Marlow

Top 5 Screen Resolutions in the U.S. in 2018

Posted on

According to to StatCounter, which tracks statistics on over 2 million websites globally, the most popular desktop screen resolutions in the U.S. in 2018 were as follows.

Desktop Screen Resolution Percentage Market Share
1920×1080 19.45%
1366×768 16.51%
1440×900 8.83%
1536×864 6.13%
1600×900 5.14%

Now, you’ll notice the shares above do not equal 100%. Well that’s because mobile phone use continues to increase…

Desktop Vs Mobile Vs Tablet Percentage Market Share
Desktop 52.27%
Mobile 39.86%
Tablet 7.87%

Of course, all of these numbers vary widely by demographic. For example, a retail restaurant will typically serve more mobile visitors than a heavy e-commerce site. Last year, I conducted a Site Audit for a data-driven website for scientists where 98% of visitors used desktop computers to access the information. Obviously, their Return On Investment for a mobile-responsive site upgrade would be minimal.

Website Conversion: LiveEdit to WordPress CMS

Posted on

Pilates studio website

Kristi Galante owns and operates a pilates and yoga studio in Gig Harbor. Her old website was powered by the LiveEdit Platform – a CMS that offers integration with many third party services, including MindBodyOnline, a popular studio service.

Challenges

When we opened the studio in October 2014, we anticipated high client interaction with the website (registration for classes, payments, etc.). We found that potential clients are attracted to the studio by the design of the website, but prefer to do most of their scheduling and transactions in person. LiveEdit offered integration with MindBody, but client logins were often problematic, and we saw little need to continue paying for the API at LiveEdit when the MindBody consumer mode works well for the small number of clients who continue to schedule and pay online. Plus, MindBody has continue development of their mobile app, and more clients are booking through their mobile devices.

From the beginning the template-based design at LiveEdit was cumbersome. Design elements were not flexible, and it was not easy to simply go in and change calls-to-action or pictures. Mobile responsiveness was not satisfactory, and we grew increasingly frustrated with LiveEdit’s technical support. The service was no longer worth the monthly fee, and we decided to upgrade our hosting plan with A2 to handle both of our websites.

The old site suffered from some performance problems. Overall page size was 1.3 Mb, below the 2016 industry median page size of 1.9 Mb, but well above Google’s recommended benchmark of 500 Kb. Additionally, performance testing via Google PageSpeed Insights, Pingdom, and WebPageTest showed the site loading in the bottom 65% tier of sites.

Performance Benchmarks New WordPress Site Old LiveEdit Site
Google Mobile Speed:  69 50
Google Desktop Speed  88 57
Pingdom  88
faster than 82% of tested sites		 76
slower than 64% of tested sites
WebPageTest Speed Index  1,416 6,076
YSlow  80 69
Web Page Size 387 Kb 1.3 Mb
Web Server Requests  25 48

Average web page size in 2017 = ~2.1 Mb
WebPageTest median Speed Index = 4,493; top 10% = < 1,388

Contributing to the performance lag were images not optimized for the web, slow server response, and the lack of header expirations.

Now we have a design that is portable, flexible, easy to update, and cost-efficient to maintain.

Experience the Speed of WordPress

Posted on

screenshot EFESTE winery website
Graphic Design: Joan van den Berg
Mobile Responsive Web Development: Scott Marlow

This web redesign project for EFESTĒ winery involved migrating site content from a static, fixed width WordPress site and a separate mobile responsive blog into a single, cohesive mobile responsive Theme.

The new site features font icons for improved page load speed; an improved, branded event calendar; and online forms for tour and charitable donation requests.

Thanks for a successful launch!
Nancy Croisier, CSW, Marketing Manager

The new website homepage loads in the top 15% tier of tested sites, with a 658 Kb page size – above Google’s recommended 300 Kb maximum, but well below the 2015 industry average of ~1.95 Mb. This means the site works better for mobile visitors, and has an improved chance of conversions.