View: schoolhealthnj.org
The School Health NJ website project was an overhaul of an existing WordPress site. The existing site had five years worth of articles already on it, and was built with Avada. So part of this project initially included a transfer of pages and posts from the old site, with a quick filtering update to all the posts on the site to remove Avada shortcodes. The new work on the site included a rebuild with minimal plugins used and templates pulling from Advanced Custom Fields, along with information reorganization and rearchitecture. In addition to development work, stock photography selection and editing work was performed for this project. Many of the stock photos on SHNJ were taken in New Jersey, of New Jersey students! It’s a neat little touch on the site.
For this site, it was especially important that we focus on accessibility. School-related resources must be made accessible to all. So from the design stages through to the final quality assurance stages, there was a focus on accessibility. All design colors were checked through WCAG color contrast checkers to maintain a minimum contrast ratio. Toward the end of the project, keyboard navigation was investigated throughout each page. HTML validity was also ascertained. Lastly, we added an Accessibility page — so that even in the case of an accessibility issue, we can be alerted and make steps to fix the issue! SHNJ is WCAG 2.1 compliant!
The project was a really good one for me. I’m quite proud of the work, and I feel it is an important resource for New Jersey. We’re often top of the lists in education across the US, and initiatives like SHNJ are absolutely helpful to that goal. So this project was important and genuinely good, I feel very proud to have participated in this project!
Client
School Health NJ
Year
2020
Responsibilities & Tools
WordPress, _s Theme, Advanced Custom Fields, JavaScript, PHP, Sass, Gulp, WCAG 2.1, WAVE Site Checker, aXe Site Checker, manual accessibility testing
-
The SHNJ homepage was designed with focus on the WSCC model graphic. It was created using Advanced Custom Fields blocks.
-
The SHNJ website came with a plethora of existing articles from five years of content. All existing articles were migrated over. It was a challenge to find a blog image size that worked with all the older featured images, as the sizes and quality of older images was not uniform.
-
The SHNJ website header images were hand-selected. Many header images were selected for their connection with New Jersey, such as this blueberry collection and NJ flag.
-
The Resources pages were especially content-heavy. Resources were created as a Custom Post Type in WordPress. Then, a page template was created to collect the resources under an ACF Repeater. The ACF Repeater additionally builds the menu on top of the resource collection, allowing easy jumping from section to section for the user.
-
The resources section has an additional layout consisting of helpful websites. As these resources are just links with the resource logo, a separate layout was created just for this page.
-
Constant Contact integration for newsletter signups was included with the site.
-
The National Health Observances calendar. This was a specialized implementation of custom post types, a custom taxonomy, and Advanced Custom Fields. I coordinated with an external designer to complete the design elements such as icons and backgrounds. The calendar includes expand and collapse functionalities. Additionally, it runs a certain school-year aligned calendar — September to May.
